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

问题描述

我一直在从 webglfundamentals 学习 webgl，在那里我遇到了一个简单的着色器示例，您可以在其中使用纯色绘制三角形。这是 tutorial 和原始 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,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>

解决方法

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

此外，代码为每个顶点选择随机颜色，因此即使您使用了 6 个顶点以使 2 个三角形不共享任何顶点，您仍然不会得到 the result you linked to，而是得到 { {3}} 位于同一教程页面的更下方。

最后，代码只为每种颜色生成 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,x,-x,y,]);
    geometry.setAttribute('position',new THREE.BufferAttribute(positions,3,false));
    
    var color = new THREE.Color();
    const blossomPalette = [
       0xff0000,0xff0000,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,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 result