GPU picking point and normal example

GPU picking point and normal | Babylon.js Playground (
For better performance, I delayed picking until the next frame, but this caused picking to get incorrect results when the camera moved.
On line 76 of this case, after commenting, drag the camera and then click, you will see the above problem.
Do you have any good ideas?

ok, the problem with incorrect pickups is resolved.
Enable the cache buffer, which can be picked up at static to improve performance (provided that the pick list is consistent).
When the camera is in motion, the cache buffer is disabled.
The scene object is not considered to be animated.
:laughing: :laughing: :laughing:
GPU picking point and normal | Babylon.js Playground (

Yes, no problem!

I think you should make a single GPUPicking class, that will be able to either do depth/normal or color picking, or both at the same time. The latter is why it should be a single class, we don’t want to render the scene two times in this case, but a single time. So, we will need multi-render target, to generate the depth and the color when we need both (which means we won’t use the depth renderer, which can only render the depth).

Regarding color picking, we should support picking at the mesh or face level, and it should work with instances / thin instances.

1 Like

I also think so, GPUDepthPicking is just a subclass of GPUPiking.
It has basically implemented the functionality.
But I don’t know how to render depth with renderTargetTexture alone, so I can only use the depth from the main thread frame rendering.
In addition to creating renderTargetTexture separately for it, I was wondering if it would be possible to reduce the rendering consumption and render only specified areas.

Regarding GPUColorPicking, the cited examples are the treatment of mesh, instanced, and thin instances.
But mixing them up is too complicated, so I haven’t officially started development yet.

Yes, I think we should also support rendering in a specific rectangle, when we know in advance the region we want to pick. It should be possible to do this with a scissor rect.

No doubt there would be a lot of work to do to implement the functionality with all the features we’d need in Babylon.js, but it would be a great addition to the framework!

How scissor rect is implemented is completely unclear to me.
MultiRenderTarget render depth and color textures also need reference.
How to render color texture at the triangular plane level.

I want to start by using MultiRenderTarget render depth to implement the DepthPicking part.
Try scissor rect rendering.
Then render color texture based on this to achieve colorpicking.

Are there any references for MultiRenderTarget and depthRender and scissor rect?

A scissor rect tells the underlying rendering system that you want to render only a subset of the picture: you give the (x,y) offset of the top left corner of the rectangle + the (height, height) of the rectangle and the rendering will only occur inside this rectangle.

Here’s an example which is using a scissor rect:

Regarding multi-target rendering, there is the documentation of the class as well as some PGs, like this one. You should be able to find more from this forum or searching the playgrounds from the documentation web site.


Okay, wait for me to study it!

GPU picking point and normal | Babylon.js Playground (
I tried enableScissor to render deep textures, but it doesn’t seem to be rendering faster.
readPixels seems to have an increase in speed, which could be a normal fluctuation.

You won’t be able to time the change with console.time because the rendering happens in parallel, on the GPU. You should look at the “GPU frame time” counter in the “Statistics” pane of the inspector instead.

average GPU frame time。
There still seems to be a gap, although the gap is very small in terms of cpu.

MultiRenderTarget | Babylon.js Documentation (

Render Target Instances | Babylon.js Playground (

GPU picking point and normal | Babylon.js Playground (