a GPU based picking class for ThreeJS lib
Switch branches/tags
Nothing to show
Clone or download
Baoxuan Xu Baoxuan Xu
Baoxuan Xu and Baoxuan Xu update readme
Latest commit 02fbb4c May 10, 2018
Failed to load latest commit information.
examples update for THREEJS r92 May 10, 2018
GPUPicker.js update for THREEJS r92 May 10, 2018
LICENSE Initial commit Jul 3, 2015
README.md update readme May 10, 2018




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


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


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

<script src="js/three.min.js"></script>
<script src="js/GPUPicker.js"></script>


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

Pick object

An example:

function onMouseMove( e ) {
    if(e.which != 0)
    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);


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.