Comments (4)
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 exampleIt works by
Making the picking shader compatible with the phong shader
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.Adding a u_flashColor uniform to the phong shader
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 somethingOn the other hand what it does show is
using
twgl.createFrameBufferInfo
to create an RGBA + Depth buffer
the same size as the canvas which is the default with no argumentsusing
twgl.resizeFramebufferInfo
to match the new size of the canvas
again the default with no extra argumentsindirectly the fact that
twgl.bindFramebufferInfo
sets the viewportexamples 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?
from twgl.js.
Wow, thank for the answer I will need some time to take a look and understand. Thanks.
from twgl.js.
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).
from twgl.js.
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.
from twgl.js.
Related Issues (20)
- Dynamically changing attribute values, does it require to create bufferinfo everytime
- Last framebuffer's attached texture is empty? HOT 3
- Incorrect sentence structure.
- GPGPU particles example performance HOT 5
- resizeCanvasToDisplaySize in a web worker sets the width and height to 0 HOT 2
- Should not update the number of elements too HOT 1
- Question about simple triangle rendering HOT 1
- Inconsistent `type` type in `createAttribsFromArrays` HOT 8
- Defer checking shader compile status HOT 8
- Unsetting a texture in webgl2 HOT 3
- gl.useProgram(program); HOT 1
- bindTransformFeedbackInfo with offset HOT 3
- Get the jsdoc into the tsd HOT 2
- Incorrect TypeScript types of `createAugmentedTypedArray` HOT 2
- TEXTURE_COMPARE_MODE and sampler2DShadow HOT 4
- twgl-base package.json refers to non-existent `module` file HOT 2
- Cubemap uses only first texture HOT 3
- Rendering objects using drawObjectList causes skybox to not be rendered HOT 6
- `opt_locations` of createProgramInfo is missing from typescript bindings HOT 2
- webgpu support ? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from twgl.js.