GPUPicker

========

color picking based approach for fast searches

The goal of this project is to implement a fast way to select an object in the scene for the THREE.js WebGL library.

This build is built up on THREE.js ~r92

Features (+ Example)

• support points/lines/triangle meshes
• retunr intersection object like the one returned from raycaster
• Fast! See the example to compare the framerates bettween raycaster and GPUPicker

TODOs

• A cheap way to update the picking scene instead of set the scene
• Despose picking geometry when the rendering geometry is disposed

Usage

Download the script and include it in your html after the THREE.js WebGL library.

<script src="https://github.com/brianxu/GPUPicker/raw/master/js/three.min.js"></script>
<script src="https://github.com/brianxu/GPUPicker/raw/master/js/GPUPicker.js"></script>

Initialize

gpuPicker = new THREE.GPUPicker({renderer:renderer, debug: false});
gpuPicker.setFilter(function (object) {return true;});
gpuPicker.setScene(scene);
gpuPicker.setCamera(camera);

Pick object

An example:

function onMouseMove( e ) {
    if(e.which != 0)
        return;
    mouse.x = e.clientX;
    mouse.y = e.clientY;
    var raymouse = new THREE.Vector2();
    raymouse.x = ( e.clientX / window.innerWidth ) * 2 - 1;
    raymouse.y = - ( e.clientY / window.innerHeight ) * 2 + 1;
    raycaster.setFromCamera( raymouse, camera );
    var intersect;
    intersect = gpuPicker.pick(mouse, raycaster);
}

Update

When the scene camera has some change set the .needUpdate to be true to rerender the picking scene.

gpuPicker.needUpdate = true;

When the window size changes, resize the texture.

gpuPicker.resizeTexture( newWidth, newHeight );

When the scene changes, reset the scene.

gpuPicker.setScene(scene);

Example