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着色器的颜色纹理

1 个答案: