Colour Index Encoding Selection in WebGL

Colour Index Encoding is a versatile and cross platform solution for selecting upwards of millions of items within a scene with very little overhead to your scene. Check out how it’s implemented in WebGL through the link:


Every 3D application will have user interaction to some degree. But with the CPUs and GPUs these days, it’s easy to have 100’s or 1000’s of entities per scene, and if you want to do per-triangle selection, It’s very easy to quickly end up with 100 000s into the millions of triangles with in a scene. Take the Standford Dragon mesh as an example. Below is a version of it opened in Iris Viewer which holds 900 000 Vertices which make up 100 000 faces kept in a single mesh.

This is great, even in WebGL, I still get 35 fps on a Macbook air, and that’s without much optimization on the *.OBJ file importer. So you have your scene, you have your meshes, but what if you want to select something?

There’s a few methods:

We could implement a raycast method where we cast a ray from the camera…

View original post 872 more words


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s