Geek asks and answers

WebGL GLSL Shader: texture access 2D overrides another texture

I have a very disturbing problem with glsl in WebGL.

This shader works as expected:

uniform sampler2D tColor;
uniform sampler2D tNormal;
varying vec2 vUv;

void main() {
    gl_FragColor = texture2D( tColor, vUv );
}

But this behaves completely differently:

uniform sampler2D tColor;
uniform sampler2D tNormal;
varying vec2 vUv;

void main() {
    vec4 test = texture2D( tNormal, vUv );
    gl_FragColor = texture2D( tColor, vUv );
}

When accessing the tNormal text, the tColor texture is overridden. How is this possible?

+5
source share
1 answer

I have seen similar behavior in the past, and this is almost always because I am incorrectly snapping my textures. The most recent incident was caused when I tried to link my textures as follows:

gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, colorTexture);
gl.uniform1i(colorUniform, gl.TEXTURE0);

gl.activeTexture(gl.TEXTURE1);
gl.bindTexture(gl.TEXTURE_2D, normalTexture);
gl.uniform1i(normalUniform, gl.TEXTURE1);

If the correct syntax is actually:

gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, colorTexture);
gl.uniform1i(colorUniform, 0); // 0 to indicate texture unit 0!

gl.activeTexture(gl.TEXTURE1);
gl.bindTexture(gl.TEXTURE_2D, normalTexture);
gl.uniform1i(normalUniform, 1); // 1 to indicate texture unit 1!

, , , WebGL ( WebGL), , , , , .

, , , , , .

+7

More articles:


All Articles