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 );

添加着色器的问题

1 个答案: