У меня есть небольшая демонстрация, там у меня есть несколько самолетов, сложенных вместе в области 1024x1024. Задача - равномерно разделить анимированную текстуру холста 1024х1024, чтобы я получил следующий результат:
Не этот:
Итак, мне нужно каким-то образом передать их шейдерам материал, какую часть текстуры холста мне нужно обрезать. И я не знаю, как это сделать.
Текущий код прилагается здесь.
Следующий ответ хорош, но я должен использовать glsl для этих самолетов, поэтому это решение может соответствовать другим задачам, а не моим.
var renderer, scene, camera, controls, glslMaterial, uniforms, canvas, ctx, markupTexture, t = 0.0;
inits();
function inits(){
canvas = document.createElement("canvas")
canvas.width = 1024 * 2;
canvas.height = 1024 * 2;
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#00FFFF";
ctx.fillRect(0, 0, canvas.width, canvas.height);
markupTexture = new THREE.CanvasTexture(canvas);
//markupTexture.flipX = false;
//markupTexture.flipY = false;
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor(0x000000);
document.body.appendChild( renderer.domElement );
scene = new THREE.Scene();
var light = new THREE.HemisphereLight( 0xFFFFFF, 0x080820, 2.0 );
scene.add( light );
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 5120 );
camera.position.set(-200, 400, 400);
controls = new THREE.OrbitControls(camera, renderer.domElement);
var markupGeometry = new THREE.PlaneGeometry(1024, 1024, 64, 64);
var markupPlane = new THREE.Mesh(markupGeometry, new THREE.MeshBasicMaterial({ color: 0xFFFFFF, map: markupTexture, side: THREE.DoubleSide }));
markupPlane.rotation.set(-Math.PI / 2, 0, 0);
markupPlane.position.set(0, 1, 0);
//scene.add(markupPlane);
var uniforms = {
markup: { type: 't', value: markupTexture }
};
glslMaterial = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: document.getElementById('vertexShader').textContent,
fragmentShader: document.getElementById('fragmentShader').textContent
//side: new THREE.DoubleSide
});
var geometry = new THREE.PlaneGeometry(512, 512, 64, 64);
var plane = new THREE.Mesh(geometry, glslMaterial);
plane.name = "plane0";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(256, 0, -256)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
plane = new THREE.Mesh(geometry, glslMaterial);
plane.name = "plane1";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(384, 0, 128)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
plane = new THREE.Mesh(geometry, glslMaterial);
plane.name = "plane2";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(128, 0, 128)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
plane = new THREE.Mesh(geometry, glslMaterial);
plane.name = "plane3";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(128, 0, 384)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
plane = new THREE.Mesh(geometry, glslMaterial);
plane.name = "plane4";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(384, 0, 384)
scene.add(plane);
geometry = new THREE.PlaneGeometry(512, 512, 64, 64);
plane = new THREE.Mesh(geometry, glslMaterial);
plane.name = "plane5";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(-256, 0, 256)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
plane = new THREE.Mesh(geometry, glslMaterial);
plane.name = "plane6";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(-384, 0, -128)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
plane = new THREE.Mesh(geometry, glslMaterial);
plane.name = "plane7";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(-128, 0, -128)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
plane = new THREE.Mesh(geometry, glslMaterial);
plane.name = "plane8";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(-128, 0, -384)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
plane = new THREE.Mesh(geometry, glslMaterial);
plane.name = "plane9";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(-384, 0, -384)
scene.add(plane);
window.addEventListener( "resize", onWindowResize, false );
animate();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
ctx.imageSmoothingEnabled = true;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#FFFF00";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(1024, 1024, 640, 0, 2 * Math.PI);
ctx.strokeStyle = "#FF00FF";
ctx.lineWidth = 16.0;
ctx.stroke();
ctx.beginPath();
ctx.moveTo(1024, 1024);
ctx.arc(1024, 1024, 640, t - Math.PI / 8, t + Math.PI / 8, false);
ctx.lineTo(1024, 1024);
ctx.fillStyle = "#FF00FF";
ctx.fill();
controls.update();
requestAnimationFrame( animate );
renderer.render( scene, camera );
for(var i = 0; i < 10; i++){
scene.getObjectByName("plane" + i).material.uniforms.markup.needsUpdate = true;
}
//glslMaterial.uniforms.markup.needsUpdate = true;
markupTexture.needsUpdate = true;
t += 0.05;
}
body { margin: 0px; }
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
<script src="https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js"></script>
</head>
<body>
<script id="vertexShader" type="x-shader/x-vertex">
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
uniform sampler2D markup;
varying vec2 vUv;
void main() {
gl_FragColor = texture2D(markup, vUv);
}
</script>
</body>
</html>