three.js - ThreeJS 着色器动态纹理

Question

我在下面有这个着色器代码。我想为另一个纹理添加一个新的制服，并使其应用于可被 4 整除的顶点。

uniform vec3 color;
uniform sampler2D texture;

varying vec4 vColor;

void main() {

    vec4 outColor = texture2D( texture, gl_PointCoord );

    if ( outColor.a < 0.5 ) discard;

    gl_FragColor = outColor * vec4( color * vColor.xyz, 0.5 );

    float depth = gl_FragCoord.z / gl_FragCoord.w;
    const vec3 fogColor = vec3( 0.0 );

    float fogFactor = smoothstep( 200.0, 600.0, depth );
    gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor );
}

我想添加一个类似的条件，index % 4 === 0 ? firstTexture : secondTexture但我不知道如何获取顶点索引并在着色器语言中执行模运算符。

标签： three.jsglslshader

Answer 1

WebGL GLSL 不提供顶点索引，因此您必须手动提供该数据。有关详细信息，请参阅此问题。

GLSL 中的模运算符是一个名为mod()的函数。