gpu-picking - 超腾开源标签

本文介绍了在Three.js中利用GPU选取物体并计算交点位置的技术，解决了传统Raycaster在大模型（如40万面）场景下的性能瓶颈。核心思想是为每个模型分配独立颜色并渲染到离屏缓冲区，通过读取鼠标位置像素颜色识别物体；交点计算则通过渲染深度信息并反算世界坐标实现。文章详细说明了选取材质创建、颜色分配、深度着色器编码、像素读取及世界坐标反推的完整流程，并给出了顶点与片元着色器代码。该技术适用于鼠标Hover、模型预览、测量工具等高性能交互场景，能在一帧内完成选取和交点计算。