Problem Description
Hi! In our WebGL application, we are drawing many (even hundreds of thousands) shapes and we want to discover which shape is currently under the mouse. I'm looking for a way to do it in an efficient manner.
Details
The shapes are defined with Signed Distance Functions. Each shape is drawn by applying a predefined sdf fragment shader to a square polygon (2 triangles). Each shape is assigned with a unique ID (uint
) on the Rust side (we're using WASM here). The idea is to render the scene twice (in WebGL 1.0) or once to multiple render targets (in WebGL 2.0), where one of the targets would be the ID encoded as a color. Then we can use readPixels
to query the color and get the ID of the shape under the mouse. Unfortunately, every solution that we try has some downsides.
Requirements
What he have tried so far
RGBA32UI
texture type. In this solution we are using 32 bits per channel, so we can use 2 channels to represent our IDs. Unfortunately, blending applies only in RGBA mode and only if the color buffer has a fixed-point or floating-point format. We need some form of blending because when drawing shapes, like circles, some parts need to be transparent. In the case of ID color output our alpha is always 0 or 1.RGBA
texture and converting uint
to float
in GLSL by using intBitsToFloat and then back float
to uint
in Rust. Unfortunately, this is available in GLSL 330 and we are limited to GLSL 300 in WebGL.RGB32UI
texture and use discard
for some pixels. This would work but it can cause performance problems and we would rather not like to use it.float
, using it instead of uint
, and rendering it to RGBA
texture, and converting it back to uint
on Rust side. The problem with this solution is that it is pretty complex, we cannot use all of 32-bits (we need to be extra careful about possible NAN-encoding) and we feel there should be a better way to do it.Blending is considered to be part of the per-fragment functions that require floating point values, hence it has no effect when rendering to unnormalized integer textures.
From the spec section 4.1 lists 9 operations that happen with pixel/fragments.
Section 4.1.7 Blending which is operation 7 of the 9 operations says
Blending applies only if the color buffer has a fixed-point format. If the color buffer has an integer format, proceed to the next operation.
In other words, the blending operation is skipped if you're using an integer format.
Instead you can simply discard
the fragment if the alpha value is below a given threshold.
if(alpha < 0.5) discard;
output_id = uvec4(input_symbol_id,input_instance_id,0,1);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With