ThreeJS 着色器动态纹理答案

【问题标题】：ThreeJS Shader Dynamic TextureThreeJS 着色器动态纹理
【发布时间】：2018-10-10 22:20:20
【问题描述】：

我在下面有这个着色器代码。我想为另一个纹理添加一个新制服，并使其应用于可被 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.js glsl shader

【解决方案1】：

WebGL GLSL 不提供顶点索引，因此您必须手动提供该数据。如需更多信息，请参阅this question。

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

【讨论】：