Support WebGL backend: Mismatch between texture format and sampler type

[caiiiycuk]

Hi. Another error in WebGL after last update. Chrome

[.WebGL-0x1c740019f800] GL_INVALID_OPERATION: Mismatch between texture format and sampler type (signed/unsigned/float/shadow).

Firefox

WebGL warning: drawElementsInstanced: TEXTURE_2D at unit 0 is of type FLOAT, but the shader samples as UINT.

For both browsers, game renders only blue canvas

[kvark]

Do you have a place to host this? Or maybe you can use https://spector.babylonjs.com/ to see what texture is this, and how WebGL sees it initialized.

[caiiiycuk]

Sure, will do it asap.

[caiiiycuk]

Ha,ha :) I managed to compile it with emscripten and have exactly same error xD

[caiiiycuk]

Here it is.

https://caiiiycuk.github.io/vangers-web/vange-rs/index.html

Press go button, when blue screen is rendered it means that game run it's main loop.

[caiiiycuk]

[caiiiycuk]

Text from picture: [.WebGL-0xb372e00]GL ERROR :GL_INVALID_OPERATION : glDrawArraysInstancedANGLE: Texture bound to texture unit 0 with internal format GL_DEPTH_COMPONENT24_OES is not compatible with sampler type GL_UNSIGNED_INT_SAMPLER_2D [.WebGL-0xb372e00]RENDER WARNING: texture bound to texture unit 0 is not renderable. It might be non-power-of-2 or have incompatible texture filtering (maybe)? 14 [.WebGL-0xb372e00]GL ERROR :GL_INVALID_OPERATION : glDrawElements: Texture bound to texture unit 0 with internal format GL_DEPTH_COMPONENT24_OES is not compatible with sampler type GL_UNSIGNED_INT_SAMPLER_2D 170 [.WebGL-0xb372e00]GL ERROR :GL_INVALID_OPERATION : glDrawArrays: Texture bound to texture unit 0 with internal format GL_DEPTH_COMPONENT24_OES is not compatible with sampler type GL_UNSIGNED_INT_SAMPLER_2D road.js:1453 Uncaught (in promise) Error: Using exceptions for control flow, don't mind me. This isn't actually an error!

[caiiiycuk]

I imagine that it's hard to fix, so this instructions how to build emscripten version locally. I suggest to build emscripten version because it's easy to do. However it renders only one frame and then exit.

• Install emsdk
• Check that emcc in in PATH
• git checkout git@github.com:caiiiycuk/vange-rs.git
• cd vange-rs
• git checkout vange-rs-web-em
• copy vangers data into res_linux/data folder
• RUSTFLAGS="-C link-args=gxx_personality_v0_stub.o -C link-args=-s -C link-args=FULL_ES3=1 -C link-args=-s -C link-args=ALLOW_MEMORY_GROWTH=1 -C link-args=-s -C link-args=TOTAL_MEMORY=134217728 -C link-args=-s -C link-args=GL_PREINITIALIZED_CONTEXT=1" cargo build --target wasm32-unknown-emscripten --bin road --verbose && cp target/wasm32-unknown-emscripten/debug/road* html5-emscripten
• Run http server to sever html5-emscripten directory, and open it in browser and press GO button

[caiiiycuk]

Additional you can enable additional traces of webgl using -s notation:

// Adds extra checks for error situations in the GL library. Can impact
// performance.
// [link]
var GL_ASSERTIONS = 0;

// If enabled, prints out all API calls to WebGL contexts. (*very* verbose)
// [link]
var TRACE_WEBGL_CALLS = 0;

// Enables more verbose debug printing of WebGL related operations. As with
// LIBRARY_DEBUG, this is toggleable at runtime with option GL.debug.
// [link]
var GL_DEBUG = 0;

// When enabled, sets preserveDrawingBuffer in the context, to allow tests to
// work (but adds overhead)
// [link]
var GL_TESTING = 0;

like this

-C link-args=-s -C link-args=GL_ASSERTIONS=1

also if you do so, I suggest disable info logging in main.rs:74:

        .filter(None, LevelFilter::Error)

[caiiiycuk]

Complete traces console-export-2021-12-2_16-25-34.txt

1 [Thread 1, GL ctx: 1]: useProgram([object WebGLProgram]) -> undefined road.js:5558:89
2 [Thread 1, GL ctx: 1]: bindSampler(0, null) -> undefined road.js:5559:97
2 [Thread 1, GL ctx: 1]: bindSampler(1, null) -> undefined road.js:5559:97
2 [Thread 1, GL ctx: 1]: bindSampler(3, null) -> undefined road.js:5559:97
2 [Thread 1, GL ctx: 1]: bindSampler(5, null) -> undefined road.js:5559:97
1 [Thread 1, GL ctx: 1]: frontFace(2304) -> undefined road.js:5558:89
1 [Thread 1, GL ctx: 1]: disable(2884) -> undefined road.js:5558:89
1 [Thread 1, GL ctx: 1]: depthFunc(519) -> undefined road.js:5558:89
1 [Thread 1, GL ctx: 1]: depthMask(true) -> undefined road.js:5558:89
4 [Thread 1, GL ctx: 1]: stencilFuncSeparate(1032, 519, 0, 0) -> undefined road.js:5561:113
2 [Thread 1, GL ctx: 1]: stencilMaskSeparate(1032, 0) -> undefined road.js:5559:97
4 [Thread 1, GL ctx: 1]: stencilOpSeparate(1032, 7680, 7680, 7680) -> undefined road.js:5561:113
1 [Thread 1, GL ctx: 1]: enable(2929) -> undefined road.js:5558:89
1 [Thread 1, GL ctx: 1]: enable(2960) -> undefined road.js:5558:89
4 [Thread 1, GL ctx: 1]: colorMask(true, true, true, true) -> undefined road.js:5561:113
1 [Thread 1, GL ctx: 1]: disable(3042) -> undefined road.js:5558:89
5 [Thread 1, GL ctx: 1]: bindBufferRange(35345, 0, [object WebGLBuffer], 0, 240) -> undefined road.js:5562:121
1 [Thread 1, GL ctx: 1]: activeTexture(33984) -> undefined road.js:5558:89
2 [Thread 1, GL ctx: 1]: bindTexture(3553, [object WebGLTexture]) -> undefined road.js:5559:97
2 [Thread 1, GL ctx: 1]: bindSampler(0, [object WebGLSampler]) -> undefined road.js:5559:97
2 [Thread 1, GL ctx: 1]: bindSampler(5, [object WebGLSampler]) -> undefined road.js:5559:97
5 [Thread 1, GL ctx: 1]: bindBufferRange(35345, 1, [object WebGLBuffer], 0, 16) -> undefined road.js:5562:121
5 [Thread 1, GL ctx: 1]: bindBufferRange(35345, 2, [object WebGLBuffer], 0, 96) -> undefined road.js:5562:121
1 [Thread 1, GL ctx: 1]: activeTexture(33985) -> undefined road.js:5558:89
2 [Thread 1, GL ctx: 1]: bindTexture(3553, [object WebGLTexture]) -> undefined road.js:5559:97
1 [Thread 1, GL ctx: 1]: activeTexture(33986) -> undefined road.js:5558:89
2 [Thread 1, GL ctx: 1]: bindTexture(3553, [object WebGLTexture]) -> undefined road.js:5559:97
1 [Thread 1, GL ctx: 1]: activeTexture(33987) -> undefined road.js:5558:89
2 [Thread 1, GL ctx: 1]: bindTexture(3553, [object WebGLTexture]) -> undefined road.js:5559:97
1 [Thread 1, GL ctx: 1]: activeTexture(33988) -> undefined road.js:5558:89
2 [Thread 1, GL ctx: 1]: bindTexture(3553, [object WebGLTexture]) -> undefined road.js:5559:97
1 [Thread 1, GL ctx: 1]: activeTexture(33989) -> undefined road.js:5558:89
2 [Thread 1, GL ctx: 1]: bindTexture(3553, [object WebGLTexture]) -> undefined road.js:5559:97
2 [Thread 1, GL ctx: 1]: bindSampler(1, [object WebGLSampler]) -> undefined road.js:5559:97
2 [Thread 1, GL ctx: 1]: bindSampler(2, null) -> undefined road.js:5559:97
2 [Thread 1, GL ctx: 1]: bindSampler(3, [object WebGLSampler]) -> undefined road.js:5559:97
2 [Thread 1, GL ctx: 1]: bindSampler(4, null) -> undefined road.js:5559:97
2 [Thread 1, GL ctx: 1]: bindSampler(5, [object WebGLSampler]) -> undefined road.js:5559:97
2 [Thread 1, GL ctx: 1]: bindBuffer(34963, [object WebGLBuffer]) -> undefined road.js:5559:97
2 [Thread 1, GL ctx: 1]: bindBuffer(34962, [object WebGLBuffer]) -> undefined road.js:5559:97
1 [Thread 1, GL ctx: 1]: enableVertexAttribArray(0) -> undefined road.js:5558:89
5 [Thread 1, GL ctx: 1]: vertexAttribIPointer(0, 4, 5120, 4, 0) -> undefined road.js:5562:121
2 [Thread 1, GL ctx: 1]: vertexAttribDivisor(0, 0) -> undefined road.js:5559:97
4 [Thread 1, GL ctx: 1]: drawElements(4, 12, 5123, 0) -> undefined road.js:5561:113
1 [Thread 1, GL ctx: 1]: disableVertexAttribArray(0) -> undefined road.js:5558:89
1 [Thread 1, GL ctx: 1]: useProgram([object WebGLProgram]) -> undefined road.js:5558:89
WebGL warning: drawElementsInstanced: TEXTURE_2D at unit 0 is of type FLOAT, but the shader samples as UINT.

[kvark]

Thank you, that is lovely to see all the detail here!

[kvark]

I haven't verified this, but I believe #162 fixes it. The needed palette texture wasn't bound properly, and instead the shadow texture was there. This caused WebGL validation to scream at us.