picking example about twgl.js

[greggman]

I'm not really sure a picking example makes a lot sense for twgl. twgl is just terse webgl. Picking requires structure. You need a collection of things to pick but twgl has no collection of things to pick. It's just helping you call webgl. You could be calling it for GPGPU reasons or for 2d drawing or whatever.

Three.js picking makes sense because it has a scene graph of objects and picking gives an example of finding one of those objects in the graph but twgl has no list of objects. The draw list stuff is at most a list of draw calls but those don't represent objects they just represent a list of draw calls.

Here's a picking example I just threw in. I'm haven't linked to it in the docs

http://twgljs.org/examples/picking.html

In the comments I wrote this

NOTE: !!

Picking doesn't really make sense in TWGL. Picking requires structure
There must be some kind of database or scene graph of things to pick.
TWGL doesn't impose any kind of database or scene graph because it's
just a set of helpers for raw WebGL. Any structure on top of TWGL is
your structure.

It also requires some kind of material stucture so that all objects
can be rendered with both whatever shader(s) render them normally
AND a shader for picking.

THREE.js on the other hand has a scene graph that contains objects
so it makes sense to be able to pick one of those objects. It also
contains various materials and shader generators and imposes a
standard structure on those, what their inputs are etc.

The code in this exampele was just the quickest thing I could think
of to make picking example. It's the primitives.html example

It works by

1. Making the picking shader compatible with the phong shader

2. Making the 2 shaders use the same uniforms

   Since they use the same uniforms then when drawing the picking
   there are no matricies to set because we already set them all
   last time things were drawn.

3. Adding a u_flashColor uniform to the phong shader

4. Having 2 parallel drawObjectList lists. One for drawing, one for picking

Effectively it's a big hack that has nothing to do with the structure of
a program that would actually be used to pick something

On the other hand what it does show is

1. using twgl.createFrameBufferInfo to create an RGBA + Depth buffer
   the same size as the canvas which is the default with no arguments

2. using twgl.resizeFramebufferInfo to match the new size of the canvas
   again the default with no extra arguments

3. indirectly the fact that twgl.bindFramebufferInfo sets the viewport

4. examples of getting a relative mouse and/or touch position

   NOTE: it assumes the canvas has no border, padding, margin.

What do you think? Any thoughts?

[fibo]

Wow, thank for the answer I will need some time to take a look and understand. Thanks.

[fibo]

Thanks again for the answer and congratulation for how you master webgl.
Yes, I think it makes more sense using three.js, in fact, if I am not wrong, you are using the pixel color to store the state of an object (to know if it is picked).

In the example I will implement I will use a state stored in a class, that will then change the object material or shape.

I will link it here when finished, if you like. By now I can say the example you provided is really interesting , probably I will learn from it how to convert mouse coordinates to 3d coordinates (I guess with some matrix transformation).

[fibo]

Hi, at the end I used THREE.Raycaster for picking.
Porting my code (repo here) from Three.js to TWGL.js would require some effort but would make me learn a lot.

One big pro is that I did not found any way to use webgl2 shaders in Three.js, while using TWGL.js I think it should be easier.

So if I will do the port I will copy the picking example you provided. Thanks for sharing your huge webgl knowledge.