Three.js 拾取之GPU Picking的理解和思考

      今天，分享的是项目中真实会用到的东西，Three.js GPU Picking，这是什么意思呢，不同于Three.js 的Raycaster，它是利用颜色的6位16进制表示，以颜色作为ID，在后台渲染出纹理后，根据鼠标坐标下的纹理颜色，进行ID的查询进行拾取操作，哈哈，如果你不是很了解，应该不明白我在说什么，下面我们一步一步来说明这个所谓的GPU Picking。

      在Three.js r102版本中，这两个案例用到了这种拾取方式，webgl_interactive_instances_gpu和webgl_interactive_cubes_gpu中用到了GPU Picking，我们先来看一下效果：

               webgl_interactive_cubes_gpu                                                                     webgl_interactive_cubes_gpu

   上面两幅图中的黑色箭头就是拾取的效果，那下面我就webgl_interactive_cubes_gpu的instance部分来说说拾取，instance方式渲染，后面的博客会有。首先，来看