[WebGL] Buffer ping ponging behaving unexpectedly | Graphics Programming | Page 1

jolly hedge Dec 9, 2023, 9:50 PM

#

I've implemented a really basic buffer pingponging setup in webgl, and for some reason, it just doesnt work.
Here's a github repo https://github.com/Naitronbot/webgltest
For me, it just shows a static rainbow gradient, but based on how i have the draw loop set up, it should continuously get whiter
What's odd, is when I change 0.002 to 0.005 in src > shader.ts > line 26 it works perfectly.

#

Here's a page showcasing the 0.002 version: https://htmlpreview.github.io/?https://github.com/Naitronbot/webgltest/blob/main/build/index.html

Here's a page showcasing the 0.005 version: https://htmlpreview.github.io/?https://github.com/Naitronbot/webgltest/blob/working/build/index.html

And here's the 0.002 version recreated in shadertoy: https://www.shadertoy.com/view/DlVBDm

#

i wanna figure out why the 0.002 version is not working like the shadertoy version

quasi wraith Dec 10, 2023, 12:39 AM

#

they both work on my phone

#

i suspect it's a precision thing but you are specifying highp

#

so idk

jolly hedge Dec 10, 2023, 6:03 AM

#

quasi wraith they both work on my phone

dam

#

thanks

#

weird thing is that it works on shadertoy for me

#

probably some weird flag thats being used

jolly hedge Dec 10, 2023, 7:27 AM

#

bruh

#

it works when i disable hardware acceleration in chrome

stable musk Dec 10, 2023, 9:03 AM

#

they both work on my mac

#

@jolly hedge maybe its because youre creating an rgba8 texture, so each channel can go from 0 to 255, and 0.002 is less than 1/255

#

shadertoy uses rgba32f textures for the buffers

jolly hedge Dec 10, 2023, 9:10 AM

#

is gl.RGBA the same as gl.RGBA8?

jolly hedge Dec 10, 2023, 9:10 AM

#

stable musk shadertoy uses rgba32f textures for the buffers

how does it do that, i thought you couldnt render to rgba32f

stable musk Dec 10, 2023, 9:10 AM

#

idk how webgl works but i think GL.RGBA, GL.UNSIGNED_BYTE means rgba8

stable musk Dec 10, 2023, 9:10 AM

#

jolly hedge how does it do that, i thought you couldnt render to rgba32f

it requires a (pretty widely supported) extension

jolly hedge Dec 10, 2023, 9:10 AM

#

ah ic

#

does that need to be manually enabled?

stable musk Dec 10, 2023, 9:11 AM

#

i think its this

#

https://developer.mozilla.org/en-US/docs/Web/API/OES_texture_float

MDN Web Docs

OES_texture_float extension - Web APIs | MDN

The OES_texture_float extension is part of the WebGL API and exposes floating-point pixel types for textures.

#

const ext = gl.getExtension("OES_texture_float");

jolly hedge Dec 10, 2023, 9:12 AM

#

#

society

stable musk Dec 10, 2023, 9:13 AM

#

are you using webgl2?

jolly hedge Dec 10, 2023, 9:13 AM

#

yea

stable musk Dec 10, 2023, 9:14 AM

#

There is no RGBA32F in WebGL. It's inferred by gl.RGBA, gl.FLOAT
https://stackoverflow.com/a/26559396/19524419

#

so maybe just try changing GL.UNSIGNED_BYTE to GL.FLOAT

jolly hedge Dec 10, 2023, 9:15 AM

#

did that

#

canvas is just black now

#

GL.texImage2D(GL.TEXTURE_2D, 0, GL.RGBA, GL.canvas.width, GL.canvas.height, 0, GL.RGBA, GL.FLOAT, null);

#

why the hell is webgl throwing errors in the honey extension log wtf???

#

#

oh i think it was just a chrome console bug

#

changing it to this

GL.texImage2D(GL.TEXTURE_2D, 0, GL.RGBA32F, GL.canvas.width, GL.canvas.height, 0, GL.RGBA, GL.FLOAT, null);

gives me

#

jolly hedge Dec 10, 2023, 10:06 AM

#

GL.getExtension('EXT_color_buffer_float');

doing this makes the errors go away, but it still doesnt work

#

I GOT IT

#

WOOOOO

#

GL.getExtension( 'OES_texture_float_linear');
GL.getExtension( 'EXT_color_buffer_float');

#

needed both of these

#

thank you @stable musk

quasi wraith Dec 10, 2023, 10:21 AM

#

stable musk so maybe just try changing `GL.UNSIGNED_BYTE` to `GL.FLOAT`

?????

#

that parameter isn't meant to affect storage at all????

#

ah, a webgl 1 deficiency

#

that's insane

jolly hedge Dec 10, 2023, 8:57 PM

#

no, its the case for webgl2 as well

#

GL.RGBA with GL.UNSIGNED_BYTE makes the texture store each channel as a byte

#

RGBA 0-255

#

if you want proper floating point textures, you need to do GL.RGBA32F with GL.FLOAT

#

the thing that was tripping me up, was that in order to render to a GL.RGBA32F you need a few extensions

quasi wraith Dec 10, 2023, 11:12 PM

#

jolly hedge `GL.RGBA` with `GL.UNSIGNED_BYTE` makes the texture store each channel as a byte

even if you specify GL.RGBA32F?

#

that seems wild

jolly hedge Dec 10, 2023, 11:12 PM

#

i think unsigned byte is incompatible with RGBA32F

#

lemme test rq

quasi wraith Dec 10, 2023, 11:13 PM

#

I mean it shouldn't matter because in every other version of opengl it is unrelated

#

when passing null data, the last two format/type arguments are redundant

jolly hedge Dec 10, 2023, 11:13 PM

#

quasi wraith Dec 10, 2023, 11:14 PM

#

the fact that webgl 1 uses these parameters for this is insanity

jolly hedge Dec 10, 2023, 11:14 PM

#

GL.texImage2D(GL.TEXTURE_2D, 0, GL.RGBA32F, GL.canvas.width, GL.canvas.height, 0, GL.RGBA, GL.UNSIGNED_BYTE, null);

quasi wraith Dec 10, 2023, 11:14 PM

#

what the fuck

jolly hedge Dec 10, 2023, 11:14 PM

#

this is wgl2

quasi wraith Dec 10, 2023, 11:14 PM

#

??????

jolly hedge Dec 10, 2023, 11:14 PM

#

https://registry.khronos.org/OpenGL-Refpages/es3.0/html/glTexImage2D.xhtml

#

only certain combinations of internal formats, formats, and types are valid

#

doesnt appear to be just a webgl thing, seems to be a thing for the whole of es 3

quasi wraith Dec 10, 2023, 11:16 PM

#

ah wtf you're right

#

well about the errors at least

#

they still should have no affect on storage when using sized internal formats

#

man no wonder people tried so hard to get rid of glTexImage2D

#

es 3 also has glTexStorage2D which completely does away with this weirdness

#

why did that not make it into webgl :(

#

anyway I'm glad you solved it I suppose

jolly hedge Dec 10, 2023, 11:19 PM

#

lmao thats how i feel about webgl constantly

#

like, glad i solved it, this sucks tho

quasi wraith Dec 10, 2023, 11:20 PM

#

man I'm sure I've used the equivalent in desktop gl to upload rgba8 data to floating point textures

#

okay yeah it looks like this might be a difference between desktop and es

#

https://registry.khronos.org/OpenGL-Refpages/gl4/html/glTexImage2D.xhtml

jolly hedge Dec 10, 2023, 11:20 PM

#

yeah es is fucked

#

i dont doubt that gl4 is leagues better

quasi wraith Dec 10, 2023, 11:21 PM

#

had no idea they differed like this

quasi wraith Dec 10, 2023, 11:21 PM

#

jolly hedge i dont doubt that gl4 is leagues better

it has been the same api since 2.0

#

there is no excuse

jolly hedge Dec 10, 2023, 11:22 PM

#

gpu as a whole is screwed, we should just start over and make it again but good

#

hold gpu manufacturers to a reasonable standard

#

dont let them get away with corner cutting bullshit

quasi wraith Dec 10, 2023, 11:24 PM

#

don't think I have the imagination for that

#

all I want is for vendors to agree on just one api to use

#

apple coming up with their own instead of just adopting vulkan or smth was just hostile

jolly hedge Dec 10, 2023, 11:26 PM

#

true

#[WebGL] Buffer ping ponging behaving unexpectedly