anyone run into an issue where using a "float" (32 bit) texture in a framebuffer on mobile seems to result in a "half float" (16 bit) texture, but when run on a desktop it correctly uses the full 32 bits? changing it to "half float" makes it the same behavior on both. tried checking webglreport.com and didn't see any differences in float, half float, or general precision metrics. may very well be doing something wrong, I'm a bit new to webgl stuff, but figured I'd see if there might possibly be a known issue there either with mobile browser webgl implementations, mobile graphics cards, or regl
webglstats would probably have told us but it's gone! :-(
Hm, https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices says “If you have a float texture, iOS requires that you use highp sampler2D foo;, or it will very painfully give you lowp texture samples!”
ahh that sounds extremely promising, lowp texture samples would very much explain what I'm seeing. I'll report back if I can confirm when I get time! And yes, the exact same thing happened to me WRT mediump/highp on the desktop... a somewhat understandable "feature" but ugh it makes debugging way more complicated :triumph: thanks again for the tip!
hi guys, im looking to render points progressively, one at time kind of like https://p5js.org/examples/image-pointillism.html
Can someone point me towards the relevant docs I need to go through - am I going about it the wrong way if I do something like have a massive array of elements and just update the offset?
ah, it worked when I changed it from
tex(data) to tex.subimage(data)
do you usually do the former or the latter?
(create new values/mutate existing ones)
https://github.com/regl-project/regl#standalone-script-tag
it's not packaged as an ES module, but after loading the script on the page you should be able to use the global constructor from your module
it's not packaged as an ES module, but after loading the script on the page you should be able to use the global constructor from your module
https://www.npmjs.com/package/esinstall can convert many packages into es6 modules
Can someone explain the math in this example to me?
https://github.com/regl-project/regl/blob/gh-pages/example/texture.js
specifically the gl_Position = vec4(1.0 - 2.0 * position, 0, 1);
I don't get what this magic 1.0-2.0* position is doing
I think they're starting with position being 0 to 1
So
1.0 - 2.0 * position becomes 1 - 2 X 0 = 1 when position is 0, or 1 - 2 X 1 = -1 when position is 1.
So they turn the range 0 to 1 into +1 to -1
It's a trick to avoid having to put in both the screen position (-1 to +1) and the texture uv (0 to 1) in separate attributes. I think it only works in the simplest case, when you want to draw the texture to the screen.
And they're inverting it, because texture 0 = top 1 = bottom, but on screen -1 = bottom +1 = top
But they invert both x and y which means this texture is flipped left/right I think!
I think it would be better not to invert it here, but instead use
flipY when loading the texture.
its a bit messy, could make it simpler
Specifically I'm wondering if it could be integrated with vite (rollup)
for the ahead of time code generation, it's not been explored but i'd be open to adding this
the main problem is finding a nice way to support it
i can help set this up, but the main issue is figuring out how to do the ahead-of-time code generation
i think you can probably isolate the code generation stuff and if you can feed it purely static arguments it should be able to do the rest on its own
also the codegen is deterministic so you could just memoize it ahead of time if you don't care about bloating your js size