Search code examples
glslwebglogl

FLOAT and UNSIGNED_INT textures in OGL at the same time


I'm trying to write a GLSL program that uses two textures. One containing floating point data and one containing unsigned integer data. Unfortunately I get this error: GL_INVALID_OPERATION: Two textures of different types use the same sampler location.

  const textureA = new Texture(gl, {
    image: arrayA,
    width: 16,
    height: 16,
    magFilter: gl.NEAREST,
    minFilter: gl.NEAREST,
    format: gl.RED,
    generateMipmaps: false,
    type: gl.FLOAT,
    internalFormat: gl.R32F
  })
  
  const textureB = new Texture(gl, {
    image: arrayB,
    width: 16,
    height: 16,
    magFilter: gl.NEAREST,
    minFilter: gl.NEAREST,
    format: gl.RED_INTEGER,
    generateMipmaps: false,
    type: gl.UNSIGNED_INT,
    internalFormat: gl.R32UI
  })
#version 300 es
precision mediump float;
            
in vec2 vUv;
uniform sampler2D textureA;
uniform highp usampler2D textureB;
out vec4 outputColor;

void main() {
   float a = texture(textureA, vUv).r;
   float b = texture(textureB, vUv).r == 0u ? 1.0 : 0.0;
   outputColor = vec4(a,b,0.0,1.0);
}
        

Example: JSFiddle


Solution

  • This was a problem with the OGL library. The creator quickly solved this issue. Now it works as it should.

    https://github.com/oframe/ogl/issues/221#issuecomment-2133104341