平面几何的每个三角形的纯色着色器

Question

我一直在从 webglfundamentals 学习 webgl，在那里我遇到了一个简单的着色器示例，您可以在其中绘制纯色三角形。这里是 link 到 tutorial and original demo.

我尝试使用平面几何在三个 js 中创建相同的效果，但我无法实现纯色着色器。当我在 Three js 中使用几乎相同的设置时，我得到的更像是渐变效果。我在这里做错了什么？（我注意到我的着色器也不一致，因为它在刷新时呈现不同）另外，有没有专门为三个 js 学习着色器的地方？

    var vShader = ` 
    precision mediump float;
    precision mediump int;
    
    attribute vec4 a_color;
    varying vec4 vColor;
    
    void main()    {
    
      
    
      gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
      vColor = a_color;
    }`;
    
    var fShader = ` precision mediump float;
    precision mediump int;
    
    varying vec4 vColor;
    
    void main()    {
    
      vec4 color = vec4( vColor );
      gl_FragColor = vColor;
    
    }`;
    
    var row = 1;
    var col = 1;
    var w = 600;
    var h = 400;
    
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(45, w / h, 0.1, 100);
    renderer = new THREE.WebGLRenderer();
    camera.position.z = 5;
    
    var viewSize = getViewSize(camera);
    document.body.appendChild(renderer.domElement);
    renderer.setSize(w, h);
    
    
    
    var geometry = new THREE.PlaneBufferGeometry(viewSize.width, viewSize.height, col, row);
    
    
    var color = new THREE.Color();
    const blossomPalette = [0xff0000, 0xff0000, 0xff0000, 0x0000ff, 0x0000ff, 0x0000ff];
    var colors = new Float32Array(4 * 2 * 3 * col * row);
    for (let i = 0; i < 4; i++) {
        color.setHex(blossomPalette[Math.floor(Math.random() * blossomPalette.length)]);
        color.toArray(colors, i * 3);
    }
    geometry.setAttribute('a_color', new THREE.BufferAttribute(colors, 4, false));
    
    var material = new THREE.ShaderMaterial({
        vertexShader: vShader,
        fragmentShader: fShader,
        transparent: true,
        blending: THREE.AdditiveBlending,
        depthTest: false,
        vertexColors: true,
        flatShading: true
    });
    
    var plane = new THREE.Mesh(geometry, material);
    
    scene.add(plane);
    
    function animate() {
        renderer.render(scene, camera);
        requestAnimationFrame(animate)
    
    }
    animate();
    
    
    function getViewSize(camera) {
        var fovInRadians = (camera.fov * Math.PI) / 180;
        var height = Math.abs(camera.position.z * Math.tan(fovInRadians / 2) * 2);
        return {
            width: height * camera.aspect,
            height: height
        }
    }

<script src="https://threejsfundamentals.org/threejs/resources/threejs/r122/build/three.min.js"></script>

Answer 1

three.js 中的 PlaneBufferGeometry 使用 indexed vertices 共享顶点，因此只有 4 个顶点，然后 6 个索引使用这 4 个顶点来制作 2 个三角形。这意味着你不能给每个三角形不同的纯色，因为它们共享 2 个顶点，而一个顶点只能有 1 种颜色。

此外，代码为每个顶点选择随机颜色，因此即使您使用了 6 个顶点以使 2 个三角形不共享任何顶点，您仍然不会得到 the result you linked to, instead you'd get this result同一教程的页面。

最后，代码只为每种颜色生成 3 个浮点数，因此您需要将颜色属性的分量数设置为 3 而不是 4

如果您想重复 webgl 示例，您需要提供自己的 6 个顶点。

var vShader = ` 
    precision mediump float;
    precision mediump int;
    
    attribute vec4 a_color;
    varying vec4 vColor;
    
    void main()    {
    
      
    
      gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
      vColor = a_color;
    }`;
    
    var fShader = ` precision mediump float;
    precision mediump int;
    
    varying vec4 vColor;
    
    void main()    {
    
      vec4 color = vec4( vColor );
      gl_FragColor = vColor;
    
    }`;
    
    var row = 1;
    var col = 1;
    var w = 600;
    var h = 400;
    
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(45, w / h, 0.1, 100);
    renderer = new THREE.WebGLRenderer();
    camera.position.z = 5;
    
    var viewSize = getViewSize(camera);
    document.body.appendChild(renderer.domElement);
    renderer.setSize(w, h);
    
    
    
    var geometry = new THREE.BufferGeometry();
    var x = viewSize.width / 2;
    var y = viewSize.height / 2;
    var positions = new Float32Array([
       -x, -y, 0,
        x, -y, 0,
       -x,  y, 0,
       -x,  y, 0,
        x, -y, 0,
        x,  y, 0,
    ]);
    geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3, false));
    
    var color = new THREE.Color();
    const blossomPalette = [
       0xff0000, 0xff0000, 0xff0000,
       0x0000ff, 0x0000ff, 0x0000ff,
     ];
    var colors = new Float32Array(2 * 3 * 3 * col * row);
    for (let i = 0; i < 6; i++) {
        color.setHex(blossomPalette[i]);
        color.toArray(colors, i * 3);
    }
    geometry.setAttribute('a_color', new THREE.BufferAttribute(colors, 3, false));
    
    var material = new THREE.ShaderMaterial({
        vertexShader: vShader,
        fragmentShader: fShader,
        transparent: true,
        blending: THREE.AdditiveBlending,
        depthTest: false,
        vertexColors: true,
        flatShading: true
    });
    
    var plane = new THREE.Mesh(geometry, material);
    
    scene.add(plane);
    
    function animate() {
        renderer.render(scene, camera);
        requestAnimationFrame(animate)
    
    }
    animate();
    
    
    function getViewSize(camera) {
        var fovInRadians = (camera.fov * Math.PI) / 180;
        var height = Math.abs(camera.position.z * Math.tan(fovInRadians / 2) * 2);
        return {
            width: height * camera.aspect,
            height: height
        }
    }

<script src="https://threejsfundamentals.org/threejs/resources/threejs/r122/build/three.min.js"></script>

见this article

平面几何的每个三角形的纯色着色器

Shader for solid color for each triangle of plane geometry

shader

webgl

three.js