THREE.js 着色器颜色纹理

Question

我已经在我的场景中添加了简单的盒子，我想创建着色器来为其添加纹理并为该纹理添加颜色。

这是我的顶点着色器（没什么特别的）：

<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 vec2 resolution;
        uniform float time;
        uniform sampler2D texture;
        varying vec2 vUv;
        uniform vec3 color;
        varying vec3 vColor;
        void mainImage( out vec4 fragColor, in vec2 fragCoord )
        {
        vec2 uv = fragCoord.xy / vec2(1920.0, 1920.0);
        fragColor = vec4(uv, 0.5 + 0.5 * cos(time) * sin(time) ,1.0);
        }
        void main( void ) {
        vec4 color = vec4(0.0,0.0,0.0,1.0);
        mainImage( color, gl_FragCoord.xy );

        color.w = 1.0;
        gl_FragColor = texture2D(texture, vUv);
        gl_FragColor = color;

        }
 </script>

如您所见，在最后两行中我设置了 gl_FragColor 纹理和颜色。当最后一行是 gl_FragColor = color; 结果是：当我更改顺序并且最后一行是 gl_FragColor = texture2D(texture, vUv); 结果是：

这是使用着色器并向场景添加框的代码：

var geometry = new THREE.BoxGeometry(.5, 1, .5);    
uniforms = {
   time: { type: "f", value: 1.0 },
   resolution: { type: "v2", value: new THREE.Vector2() },
   texture: { type: "t", value: THREE.ImageUtils.loadTexture("../img/disc.png") }
            };

var material = new THREE.ShaderMaterial({
                transparent: true,
                uniforms: uniforms,
                vertexShader: document.getElementById('vertexShader').textContent,
                fragmentShader: document.getElementById('fragmentShader').textContent

            });

var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

是否可以通过此着色器以与图片相同的方式为我的纹理（在对象中混合颜色和纹理）着色？

Answer 1

就像任何其他变量一样，将它设置两次只会使其成为第二个结果；

var foo;
foo = 123;
foo = 456;

foo 现在等于 456

如果你想合并结果，你需要自己做一些事情来合并它们

 gl_FragColor = texture2D(texture, vUv);
 gl_FragColor = color;

就意味着gl_FragColor等于color;

我猜你想要这样的东西

 gl_FragColor = texture2D(texture, vUv) * color;

当然，你使用什么数学取决于你想要达到的目标。

给定上面的示例纹理和颜色，将纹理乘以颜色，您将得到一个具有渐变颜色的圆圈。不清楚这是否是您想要的结果。

THREE.js 着色器颜色纹理

THREE.js Color texture by shader

javascript

webgl

three.js