Three.js在IE11中帧率过低，交互需求下几何合并方案遇阻求助

嘿，我完全懂你遇到的困境——IE11的WebGL支持确实让人头疼，既要保证流畅帧率又要保留单点交互，确实得找个精准的平衡点。让我给你几个经过实践验证的可行方案：

核心方案：用实例化渲染兼顾性能与可控性 #

IE11虽然只支持WebGL 1，但它兼容ANGLE_instanced_arrays扩展，这正是破解问题的关键。实例化渲染能让你用一次draw call渲染所有2600个点，同时还能单独控制每个点的动态属性（比如缩放、动画进度、选中状态），完美解决合并Geometry后无法实现单点交互的问题。

具体实现步骤： #

1. 拆分缓冲区数据
   • 基础缓冲区：存储所有点的固定属性（比如地球表面的3D坐标，提前在CPU端把经纬度转好，避免着色器实时计算）。
   • 实例化缓冲区：存储每个点的动态属性，比如缩放因子、动画进度、悬停/选中标记（用0或1表示），每个点对应一组独立的实例化数据。
2. 启用实例化扩展

   const ext = gl.getExtension('ANGLE_instanced_arrays');
   if (!ext) {
     // 做降级处理，比如用下面提到的分组渲染
     console.warn('当前IE11环境不支持实例化扩展，将切换为分组渲染');
   }
   

3. 在着色器中调用实例化属性
   顶点着色器里可以直接访问每个实例的专属属性，比如实现悬停放大效果：

   attribute vec3 aBasePosition; // 所有点共享的基础位置
   attribute float aScale; // 每个实例的缩放因子
   attribute float aIsHovered; // 是否被悬停的标记
   
   void main() {
     // 悬停时给点额外放大
     vec3 finalPos = aBasePosition * (1.0 + aScale * aIsHovered);
     gl_Position = projectionMatrix * modelViewMatrix * vec4(finalPos, 1.0);
     gl_PointSize = 2.0 + aScale * 3.0;
   }
   

4. 实例化渲染调用

   // 1个基础顶点，2600个实例，一次调用渲染所有点
   ext.drawArraysInstancedANGLE(gl.POINTS, 0, 1, 2600);
   

   这种方式的性能和合并单个Geometry几乎一致，但每个点的属性可以单独更新，完全满足交互需求。

单点交互实现：颜色编码拾取 #

要判断哪个点被点击或悬停，颜色编码拾取是IE11兼容的可靠方案：

1. 创建离屏拾取缓冲区
   新建一个和主画布同尺寸的离屏Canvas，渲染时给每个点分配唯一的RGB颜色（比如把点的索引拆分成红、绿、蓝三个通道的值），然后将离屏画布的像素数据缓存起来。
2. 交互时获取点击点索引
   当鼠标点击或移动时，获取鼠标在画布上的坐标，读取离屏画布对应位置的像素颜色，再把颜色值转回点的索引：

   function getTargetPointIndex(mouseX, mouseY) {
     const pixelData = new Uint8Array(4);
     offscreenGl.readPixels(
       mouseX, 
       offscreenCanvas.height - mouseY, 
       1, 1, 
       gl.RGBA, gl.UNSIGNED_BYTE, 
       pixelData
     );
     // 将RGB值转换为点的索引
     const index = pixelData[0] + pixelData[1] * 256 + pixelData[2] * 256 * 256;
     return index < 2600 ? index : -1;
   }
   

3. 更新实例化属性触发交互效果
   找到目标点后，用gl.bufferSubData更新实例化缓冲区中对应点的属性（比如把aIsHovered设为1），重新渲染就能看到悬停/点击的反馈。

备选方案：分组渲染（应对实例化扩展不兼容的情况） #

如果某些特殊IE11环境不支持ANGLE_instanced_arrays，可以把2600个点分成26组，每组100个点，每组用一个独立的Geometry。这样draw call数量从2600降到26，帧率也会大幅提升。

• 交互时，先通过射线检测或颜色拾取判断点击落在哪个组，再在组内定位具体的点，计算量完全在IE11的承受范围内。

IE11专属优化小贴士 #

• 尽量把复杂计算（比如经纬度转3D坐标）放在CPU端预处理，减少着色器的实时计算量。
• 避免频繁切换着色器程序、纹理或缓冲区状态，尽量保持渲染状态的统一性。
• 更新缓冲区时优先用gl.bufferSubData代替gl.bufferData，减少GPU内存的重新分配开销。

内容的提问来源于stack exchange，提问作者Daryl