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

Question

My vertex shader: varying vec2 texCoord;

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

My fragment shader:

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

}

Now this work very well when i run using the two texture.check http://shaderfrog.com/app/view/68 for the multiplier action.

But now what I want is I am having texture like this:

So with the single texture I want to index the offset of my texCoord so that I just need to sample one texture and I can get three representation form this like:

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

Can offset my tri-color in the fragment shader. or Some one can help me modifying the fragment shader so that I can pass uniform to index my tri-color into individual Yellow,pink,red. So either from shader or threejs I can get help regarding same.

I have done reference using two texture because I want to interpolate with cross fade effect on the texture same I want cross fade using fragment shader (independent to this I have already achieve by the texture.offset.x = currentColoum / horizontal and texture.offset.y = currentRow / Vertical;

Ajit kohir Ajit kohir · Accepted Answer · 2016-07-05T06:11:44

I found the answer to this question, even implemented into application :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;
}

Explanation:

Since I am having the vertical texture of three different type I make my offset into y direction 0.3333. Because texture is read from [0,1]. I have extended this code same for the horizontal direction.

If some one going to make this dynamic then instead of hard coded we can pass the 0.3333 as the calculate one taking the inspiration form link.

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

1 Answers