添加着色器的问题

Question

我写了一个着色器，想在codepen上测试它。现在我在控制台中没有错误，但它仍然无法正常工作。我究竟做错了什么？

这是我的顶点着色器。

<script id="vertexShader" type="shader">

void main() {
  vUv = (uModel * vec3(position.xy, 1.)).xy;
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
} 

片段着色器

<script id="fragmentShader" type="shader">
uniform vec2 uResolution;
uniform sampler2D uTexture1;
varying vec2 vUv;
  uniform mat3 uModel;
  varying vec2 vUv;

void main() {
    vec2 position = gl_FragCoord.xy / uResolution;

    float ratio = 0.3;
    float progress = .3;

    float layer1L = abs(step(.3, position.x) - 1.);
    float layer1R = step(.7, position.x);
    float layer2L = abs(step(.1, position.x) - 1.);
    float layer2R = step(.9, position.x);
    float layer3L = abs(step(.06, position.x) - 1.);
    float layer3R = step(.94, position.x);
    float layer4L = abs(step(.02, position.x) - 1.);
    float layer4R = step(.98, position.x);

    // texture A
    float dx1 = 0.;
    dx1 += layer1L * .5 * ratio;
    dx1 -= layer1R * .5 * ratio;
    dx1 += layer2L * .25 * ratio;
    dx1 -= layer2R * .25 * ratio;
    dx1 += layer3L * .1 * ratio;
    dx1 -= layer3R * .1 * ratio;
    dx1 += layer4L * .06 * ratio;
    dx1 -= layer4R * .06 * ratio;

    vec4 texA = texture2D(uTexture1, vec2(vUv.x + dx1, vUv.y));

    vec4 fcolor = texA;

    gl_FragColor = fcolor;
}
</script>

https://codepen.io/nadjakoroleva/pen/Vgdjdx

Answer 1

问题是你用两种材料创造了一个Mesh。

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

第三个参数material基本上什么都不做，所以你在顶点和片段着色器中所做的一切都没有显示出来。你需要只将你的ShaderMaterial传递给Mesh构造函数来查看结果：

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