I potentially have complex shaders to draw boxes and lines on a map.
I’m looking into GPU picking each object, but somehow I always get 0 as ID: http://jsfiddle.net/hs2jbbo0/115/
Q: The vertex shader of the picking object should be the same as the original one?
Like if I’m offsetting the position or doing something similar, should the vertex shader of the picking be the same?
Q: I also have a “world” group object which I’m adding into it my instances (in the example there are only boxes
but in reality I have others too). Should I create a new world for picking as well?
The vertex shader of the picking object should be the same as the original one?
Yes.
I also have a “world” group object which I’m adding into it my instances.
This world object is the reason why your picking implementation does not work. The transformation of world is not applied to your picking mesh. I’ve fixed this here: Mapbox GL basic template - JSFiddle - Code Playground
Instead of a separate pickingScene, i just reuse the existing one. You usually want a separate scene because you merge geometries and use a single, basic material to create the picking mesh. Because you are using instanced rendering and have a very basic scene, this actually not necessary.
I don’t think I understand how it’s possible to reuse the same material.
I still want my boxes to be red (or whatever). How can i separate the picking color with the actual color in the same shader?
Also, Isn’t there a performance penalty when rendering to the same scene?
The picking is going to happen on mouse over + click and I’ll need to change the picked element color
so this rendering call is potentially going to happen a lot.
Here is an updated code with the picking working, although not sure how to integrate the base box color in the same shader: http://jsfiddle.net/hs2jbbo0/168/
Yeah, you’re right! You need a different material. The example in the repo uses vertex colors to identity the single objects in the merged geometries.
I think the term “rendering to the same scene” is not correct. You are rendering a scene with a given camera. As i said before, you might want to perform some sort of simplicfication. E.g. you merge all geometries into a single one. Since you already use instanced rendering, i don’t think there is much more potential for performance tuning.
Hmm, I must say this left me quite confused
I managed to make this work with a pickingScene + same shader with defined color for picking + 2nd mesh with your code to update it’s matrix: http://jsfiddle.net/hs2jbbo0/179/
Are you saying that this can still be improved by reusing the same scene?
Do i still need the 2nd mesh and update it’s matrix? (new mesh to use the 2nd material with the defined color picking).
The thing is…if you’re actual scene might contain elements that are not relevant for picking, it’s better to retain the separation. It really depends on the particular use case.
