oframe / ogl

Minimal WebGL Library
https://oframe.github.io/ogl/examples
3.61k stars 206 forks source link

FLOAT and UNSIGNED_INT textures in OGL at the same time #221

Closed gooostaw closed 1 month ago

gooostaw commented 1 month ago

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 Stackoverflow

gordonnl commented 1 month ago

Hey @gooostaw, thanks for bringing that to my attention! The usampler2D uniform type wasn't supported (obviously you're the first to use them with OGL!), so the fix was simply adding the uniform type enum to the list. This should be fixed as of 1.0.7.

gooostaw commented 1 month ago

Now it is working! Thanks for the very quick response.