xeolabs bio photo


Lindsay Kay

3D software engineer / WebGL developer

Twitter LinkedIn Github

My chapter on SceneJS for OpenGL Insights is now free to download!

Fast Ray Picking in SceneJS


SceneJS ray-picking lets you pick a point on the canves and get the precise 3D World-space coordinates of whatever that intersects within the 3D view.

It’s very fast, even for really large numbers of objects. While it uses the standard colour coding approach to find the picked object, it also uses the depth buffer to help it find the 3D intersection coordinates, thus managing to avoid expensive ray-intersect computations. If you’re curious how it works, I did a writeup on the technique here.

Ray pick performance demo Pick-fly-orbit demo #1 Pick-fly-orbit demo #2


I’ll assume that you know all about basic 2D picking in SceneJS. Ray picking is done in pretty much the same way, except that you supply an additional rayPick flag when you do the pick, and get back an additional worldPos property in the result, which gives you the intersection coordinates:

// Register a pick handler
    function (hit) {

        // The 'name' property on the first name node on the path
        // from the picked teapot up to the scene root, eg "blueTeapot"
        var name = hit.name;

        // Name path, a '.' delimited concatenation of the 'name' properties
        // of all name nodes on the path down from teh scene root to the
        // picked teapot.
        var path = hit.path;

        // Two-element array containing the X,Y canvas coordinates at which we picked
        var canvasPos = hit.canvasPos;

        // Three-element array containing the X,Y,Z World-space coordinates at which we picked
        var worldPos = hit.worldPos;

And here’s the ray-pick call:

myScene.pick(45, 150, { rayPick: true });  // Note the rayPick flag