Question

我正在努力与threejs在THREE.LineSegments上使用shaderMaterial 我的目标是在一堆线段上使用每个顶点颜色：

我有一个顶点和一个片段着色器：

        <script type="x-shader/x-vertex" id="vertexshader">

            varying vec3 vColor;
            attribute vec3 customColor;             

            void main() {
                vColor = customColor;
            }

        </script>

        <script type="x-shader/x-fragment" id="fragmentshader">

            varying vec3 vColor;

            void main() {
                gl_FragColor = vec4(vColor, 1.0 );
            }

        </script>

然后在threejs场景中，我为着色器创建了所有相关内容，并将其应用于对象：

        var customColors = new Float32Array(_count*2*3); // 2 vertex by segment *length(RGB)
        for (var i = 0; i < customColors.length/3; i++) {
            var ratio  =  i / (customColors.length/3.0);
            customColors[(i*3)] = ratio;
            customColors[(i*3)+1] = ratio;
            customColors[(i*3)+2] = ratio;
        };

        geo.addAttribute('customColor' , new THREE.BufferAttribute(customColors,3));


        var drawCount = _count * 2;
        geo.setDrawRange( 0, drawCount );


        var uniforms = {
            opacity : 0.5

        };


        var customMaterial = new THREE.ShaderMaterial( {
            uniforms : uniforms,
            vertexShader : document.getElementById( 'vertexshader' ).textContent,
            fragmentShader : document.getElementById( 'fragmentshader' ).textContent,
            }
        );
        var lines = new THREE.LineSegments(geo, customMaterial);

我无法找到问题所在。线段根本不会出现，甚至不是黑色。我所能做的只是“硬编码”。片段着色器中的颜色（显然违背了目的）。

控制台中没有任何错误消息。

请帮助，我在这里做错了什么？

Answer 1

再次挣扎之后，我终于可以看到一些带有自定义顶点颜色的线段。看起来我需要给gl_Position变量一个值（我认为这是自动的，因为我不想改变顶点位置）。

我将此行添加到vertexShader的main（）中：

gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);

自定义顶点颜色与threejs LineSegments（）

1 个答案: