THREE.JS | GLSL如何将画布纹理分割为多个平面

Question

我有一个小演示，我在1024x1024区域内有多个平面堆叠在一起。该任务将均匀地分割1024x1024动画画布纹理，因此我将得到以下结果：

不是这个：

因此，我有某种方式将它们需要着色的画布材质的一部分传递给他们的着色器材料。而且我不知道该怎么做。

当前代码附在这里。

以下答案很好，但是我必须在这些飞机上使用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>

Answer 1

您不需要自定义着色器。您只需要为每个平面设置纹理坐标。

这里是缩放和偏移纹理坐标的功能

function offsetUVs(geometry, offU, offV, scaleU, scaleV) {
  const off = new THREE.Vector2(offU, offV);
  const scale = new THREE.Vector2(scaleU, scaleV);
  for(const uvs of geometry.faceVertexUvs[0]) {
    for (const uv of uvs) {
      uv.multiply(scale);
      uv.add(off);
    }
  }
}

如果将缩放比例设置为0.25、0.25，则纹理的16分之一将出现在该平面上（就像将纹理划分为4x4网格一样）

偏移量将移动纹理，其中1是纹理的全长，0.5是长度的一半，0.25是长度的四分之一

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);
    

    /*glslMaterial = new THREE.ShaderMaterial({
        
        uniforms: uniforms,
        vertexShader: document.getElementById('vertexShader').textContent,
        fragmentShader: document.getElementById('fragmentShader').textContent
        //side: new THREE.DoubleSide
        
    });
    */
    const simple = new THREE.MeshBasicMaterial({ color: 0xFFFFFF, map: markupTexture, side: THREE.DoubleSide });
    
    var geometry = new THREE.PlaneGeometry(512, 512, 64, 64);
    offsetUVs(geometry, 0.5, 0.5, 0.5, 0.5);
    var plane = new THREE.Mesh(geometry, simple);
    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);
    offsetUVs(geometry, 0.75, 0.25, 0.25, 0.25);
    plane = new THREE.Mesh(geometry, simple);
    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);
    offsetUVs(geometry, 0.5, 0.25, 0.25, 0.25);
    plane = new THREE.Mesh(geometry, simple);
    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);
    offsetUVs(geometry, 0.5, 0, 0.25, 0.25);
    plane = new THREE.Mesh(geometry, simple);
    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);
    offsetUVs(geometry, 0.75, 0, 0.25, 0.25);
    plane = new THREE.Mesh(geometry, simple);
    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);
    offsetUVs(geometry, 0, 0, 0.5, 0.5);
    plane = new THREE.Mesh(geometry, simple);
    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);
    offsetUVs(geometry, 0.0, 0.5, 0.25, 0.25);
    plane = new THREE.Mesh(geometry, simple);
    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);
    offsetUVs(geometry, 0.25, 0.5, 0.25, 0.25);
    plane = new THREE.Mesh(geometry, simple);
    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);
    offsetUVs(geometry, 0.25, 0.75, 0.25, 0.25);
    plane = new THREE.Mesh(geometry, simple);
    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);
    offsetUVs(geometry, 0.0, 0.75, 0.25, 0.25);
    plane = new THREE.Mesh(geometry, simple);
    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 offsetUVs(geometry, offU, offV, scaleU, scaleV) {
  const off = new THREE.Vector2(offU, offV);
  const scale = new THREE.Vector2(scaleU, scaleV);
  for(const uvs of geometry.faceVertexUvs[0]) {
    for (const uv of uvs) {
      uv.multiply(scale);
      uv.add(off);
    }
  }
}
    
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, 940, 0, 2 * Math.PI);
    ctx.strokeStyle = "#FF00FF";
    ctx.lineWidth = 16.0;
    ctx.stroke();
    
    ctx.beginPath();
    ctx.moveTo(1024, 1024);
    ctx.arc(1024, 1024, 940, t - Math.PI / 8, t + Math.PI / 8, false);
    ctx.lineTo(1024, 1024);
    ctx.fillStyle = "#FF00FF";
    ctx.fill();
    markupTexture.needsUpdate = true;
    
    controls.update();
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
    
    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>
    
</body>
</html>

Ps：我使圆变大，使其接触了所有平面，否则2个角为纯黄色，因此很难确定它们是否正确。

请参见this article作为几何结构的参考