How to return values from shaders

How can I return values calculated by my custom shaders to my JS code? I am working on an instancing shader that should return the index of any instance under the mouse pointer.

This type of question was already asked at many other forums or boards:

You can read values from a render target (your target framebuffer) via WebGLRenderer.readRenderTargetPixels().

1 Like

There’s an approach described here


I got it working, but since my plants are waving, it is not pixel-perfect.

I want to try another approach: I want to rendering the id of the instance as a color to a texture of the same size as the screen, and then simply read the pixel color to see what instance was picked.

One thing I need to find out, is if the shader knows what instance it is processing. Is there a variable that can tell me this?

I think gl_InstanceID is what you’re looking for:

But i don’t think it’s available in WebGL.

Do you mind me asking why the approach from the article is not working? Why cant you make your own index in whatever format/precision you need?

Well, the picking is based on the bounding box of the static object, and not the object in the current phase of the waving cycle.

Oh I see, that makes sense.