WEBGL 16bit texture

[newyellow]

Topic

Hi, I was trying to make GPU particle system, and wondering if there's a way to create 16bit texture for the shader to render?

The idea of GPU particle is storing particle position data into a texture's RGB channel, and accessing those data through shader. I had succeed make this particle system by storing the data on a graphic (with createGraphic). But 256 for each channel is not precise enough.

I had try modifying the p5.js source code, changing gl.texImage2D's format parameter from gl.RGBA to gl.RGBA16F kind of thing, but it didn't work.

Since I had no real experiences on raw WebGL, wondering if there's anyway to make this work.

Thanks!

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

[davepagurek]

Although p5 doesn't support that granular level of updating WebGL textures, there's support for floating point textures in the p5.Framebuffer library (although I haven't yet added granular support for all texture types, but if you just need any floating point texture, it at least lets you specify that.)

[newyellow]

Although p5 doesn't support that granular level of updating WebGL textures, there's support for floating point textures in the p5.Framebuffer library (although I haven't yet added granular support for all texture types, but if you just need any floating point texture, it at least lets you specify that.)

Wow thank you @davepagurek, this seems just what I need. Will give it a try!

[aferriss]

You can change the data type of a texture to float if you want. See this issue https://github.com/processing/p5.js/issues/5556

[davepagurek]

Oh nice! Looks like we don't export that class's docs to the p5 reference, even though you've documented all those constructor settings pretty thoroughly. @aferriss do you think it's worth showing that to users or is it sufficient having it just in the code for e.g. library developers to look at?

[newyellow]

Thank you guys for the replies! Would like to share some test I made in the past few days.

Although it seems @davepagurek's renderBuffer solution is perfect for particles (16bit each channel), but I had an idea of packing a number into 3 channels (which will be a 32bit in total). I'm curious about the outcome so I still made a test on it.

And a small problem here is there are multiple values to store (positionX, positionY, rotation, velocity), so it might need 4 textures to store them all. And I made a trick by using UV mapping to put them all into a single texture. Just like this:

uv [0-0.5, 0-0.5] (Top left) is positionX, uv [0.5-1.0, 0-0.5] (Top right) is positionY, uv [0-0.5, 0.5-1.0] (Bot left) is rotation, uv [0.5-1.0, 0.5-1.0] (Bot right) is velosity

and the result is something like this:

I uploaded my code to openprocessing if anyone is interested. (hit key T to view the texture maps) https://openprocessing.org/sketch/1822960

[newyellow]

Hi @aferriss I was also checking the source p5.js and wondering how to setup those settings values within p5.Texture class. But I didn't figure out how to use that Texture class to draw images.

The thing I want to do is to draw some shapes with p5's methods (like rect, circle, etc) and the feed the texture to a glsl shader. Not sure how to do that with the p5.Texture class.

[inaridarkfox4231]

I'm sorry, but I think it's very difficult to handle GPUparticles without using framebuffers. It may not be helpful, but I will give you a sample. GPU particle (old version)

[newyellow]

@inaridarkfox4231 thank you for the example! It's very helpful about how to use frameBuffers with p5js!

[inaridarkfox4231]

When you develop it, you can create something like this. GPGPU_TEST