Three.js着色器获取顶点本地位置？适配高度图地形的草地渲染疑问

没错，你猜的完全正确——原来的顶点着色器逻辑依赖于草叶顶点的绝对y值（以y=0为基准），但高度图地形上每个草叶的根部y坐标都不一样，所以必须切换为使用顶点相对于草叶根部的局部相对位置来做动画判断。

下面是具体的实现步骤：

1. 为每个草叶实例传递地形高度数据 #

首先，你需要在生成草地的时候，记录每棵草所在位置的地形y高度（比如通过采样高度图得到），然后把这个值作为实例化属性传递给顶点着色器。如果用Three.js的InstancedMesh，可以这样做：

// 假设你已经有了存储每个草叶地形高度的数组terrainHeights
const terrainHeightAttribute = new THREE.InstancedBufferAttribute(
  new Float32Array(terrainHeights),
  1 // 每个实例一个值
);
grassInstancedMesh.geometry.addAttribute('instanceTerrainY', terrainHeightAttribute);

2. 在顶点着色器中计算相对高度 #

在顶点着色器里，你需要把顶点的模型空间y值减去该草叶的地形根部y值，得到相对高度，用这个值替代原来的绝对y值进行逻辑判断：

attribute float instanceTerrainY; // 从CPU传递来的实例化地形高度

void main() {
  // 先计算顶点的模型空间位置
  vec3 modelPos = modelMatrix * vec4(position, 1.0);
  // 计算相对于草叶根部的y偏移（相对高度）
  float relativeY = modelPos.y - instanceTerrainY;

  // 替换原来的pos.y判断逻辑
  if (relativeY > 1.0) {
    // 原来的动画逻辑，比如风吹摆动等
    // ...
  }

  // 后续的MVP变换等逻辑
  gl_Position = projectionMatrix * viewMatrix * vec4(modelPos, 1.0);
}

3. 额外注意点 #

• 如果你的草地不是用InstancedMesh，而是单个包含所有草叶的网格，那你需要给每个草叶的顶点都存储对应的地形高度（作为顶点属性），而不是实例化属性。
• 确保传递的地形高度是模型空间的数值，和草叶的模型空间位置坐标系一致，避免出现坐标空间不匹配的问题。

原来的代码在y=0的平坦地形上能正常工作，是因为所有草叶的根部都在y=0，顶点的绝对y值刚好等于相对于根部的高度。而高度图地形打破了这个假设，所以必须用相对高度来驱动动画逻辑。

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