ThreeJS中FBX网格交互网格预填充高亮实现方案咨询

你当前在用的shader实现方案完全可以支持预加载高亮单元格的需求，不需要替换现有FBX网格处理逻辑，也不用换其他技术栈，只要在原有逻辑上做少量扩展就行，整体性能远高于拆分独立网格做高亮的方案。

• 先抽离shader里的单元格坐标计算逻辑
  你现有方案能根据鼠标位置命中对应单元格，说明已经在shader里实现了模型局部坐标到网格单元格（U/V方向的行列ID）的换算，把这部分逻辑抽成独立的公用函数，鼠标悬停判断、预高亮判断都走这套计算规则，从根源上避免坐标对齐偏移的问题。
• 扩展shader的输入参数
  原来只需要传实时鼠标位置的uniform值，现在额外加两类输入：
  • 单元格高亮状态数据源：如果总单元格数在1024以内，直接传固定长度的vec4类型数组，每个数组项对应一个单元格的高亮开关、自定义高亮色值就行；如果单元格量级更大，就传一张2D状态纹理，每个像素对应一个单元格的状态数据，初始化时就把需要预高亮的单元格状态提前写入数据源。
  • 保留原有的鼠标位置uniform，用来保证实时悬停高亮的优先级。
• 调整shader内的片元着色逻辑
  每个片元计算出所属的单元格行列ID后，按优先级判断渲染颜色：
  1. 优先判断是否为当前鼠标悬停命中的单元格，是就渲染悬停高亮色
  2. 非悬停态的话，查询传入的高亮状态数据源，对应该ID如果有预存的高亮配置，就渲染预设的高亮色
  3. 两种状态都不满足的话，渲染默认的网格线、基础材质颜色
• 封装通用的highlightCell控制方法
  方法只需要接收单元格行列ID、高亮状态/高亮色参数，直接更新之前传入shader的状态数组/状态纹理对应位置的数值，再把更新后的数据重新上传给GPU即可。初始化加载时批量预填充高亮、运行时动态修改单元格高亮，都可以直接调用这个方法，逻辑完全通用。

避坑提醒：不要为了实现预高亮把整个FBX网格拆成一个个独立的单元格子网格，单元格数量多的时候Draw Call会暴涨，不管是PC端还是移动端性能表现都会远差于shader方案，很容易出现掉帧问题。

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