使用三个js渲染引擎在片段着色器中相同的纹理偏移不同的位置

Question

我的顶点着色器：变化的 vec2 texCoord；

void main() {
  texCoord = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

我的片段着色器：

varying vec2 texCoord;
uniform sampler2D texture1;
uniform sampler2D texture2;
uniform float multiplier;
void main( void ) {

    vec3 tex1 = texture2D(texture1, texCoord).xyz ;
    vec3 tex2 = texture2D(texture2, texCoord).xyz ;
    vec3 finaltex = mix( tex1, tex2, multiplier)  ;
    gl_FragColor = vec4(finaltex , 1.0);

}

现在，当我运行使用两个 texture.check http://shaderfrog.com/app/view/68 进行乘数操作时，这个效果很好。

但现在我想要的是我有这样的质地：

所以对于单个纹理，我想索引我的 texCoord 的偏移量，这样我只需要对一个纹理进行采样，我就可以获得三个表示形式，如下所示：

var shaderMaterial = new THREE.ShaderMaterial({
    uniforms:{
        texture1: { type: "t", value: texture1 }
    },
    vertexShader: document.getElementById( 'vertexShader' ).textContent,
    fragmentShader: document.getElementById( 'fragmentShader' ).textContent
});

可以在片段着色器中抵消我的三色。或者有人可以帮我修改片段着色器，这样我就可以通过制服将我的三色索引为单独的黄色、粉色、红色。因此，无论是从着色器还是从 threejs，我都可以获得有关相同的帮助。

我已经使用两个纹理完成了参考，因为我想在纹理上使用交叉淡入淡出效果进行插值，我想使用片段着色器进行交叉淡入淡出（与此无关，我已经通过 texture.offset.x = currentColoum /水平和 texture.offset.y = currentRow / Vertical;

Answer 1

我找到了这个问题的答案，甚至在应用程序中实现了:D。

顶点着色器:

void main() {
  texCoord = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

片段着色器:

varying vec2 texCoord;

uniform sampler2D texture;
uniform vec2 offset_current;
uniform vec2 offset_next;
uniform float multiplier;


void main( void ) {

    vec2 offset1 =  offset_current + vec2( texCoord.x* 1.0,  texCoord.y * 0.333333); 
    vec2 offset2 =  offset_next + vec2( texCoord.x* 1.0,  texCoord.y * 0.333333); 
    vec3 tex1 = texture2D(texture1,offset1).xyz ;
    vec3 tex2 = texture2D(texture1, offset2).xyz ;
    vec3 mixCol = mix( tex1, tex2, multiplier );
    vec4 fragColor = vec4(mixCol, 1.0);
    if(fragColor.a == 0.0)
        discard;

    gl_FragColor = fragColor;
}

解释：

因为我有三种不同类型的垂直纹理，所以我将我的偏移量设置为 y 方向 0.3333。因为纹理是从[0,1]读取的。我已经在水平方向上扩展了这段代码。

如果有人要使这个动态化，那么我们可以将 0.3333 作为采用灵感形式 link 的计算值传递，而不是硬编码。

使用三个js渲染引擎在片段着色器中相同的纹理偏移不同的位置

Same texture offseting different position in the fragment shader using threejs rendering engine

shader

opengl-es

webgl

fragment-shader

three.js