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

可以在片段着色器中偏移我的三色。或者有人可以帮我修改碎片着色器，这样我就可以通过制服将我的三色索引为单独的黄色，粉红色，红色。所以无论是使用shader还是threejs，我都可以获得相同的帮助。

我使用两个纹理完成了参考，因为我想在纹理上插入交叉淡入淡出效果我希望使用片段着色器交叉渐变（独立于此我已经通过texture.offset.x = currentColoum / horizontal和texture.offset.y = currentRow / Vertical;

Answer 1

我找到了这个问题的答案，甚至在申请中实施：D。

<强> vertexShader ：

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

<强> FragmentShader ：

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。

使用threejs渲染引擎

1 个答案: