基于GPU INSTANCING的无限地图风格化草地
背景
本文主要讲的是程序化生成无限大的地图，并在上面长满草的故事。
“老规矩，Demo 先行：
https://chengxu1973.github.io/stylized-grass-dist/
如果是电脑用户，可以使用 WSAD 或者方向键来控制小鸟移动，按住鼠标左键并移动来控制视角方向。
如果使用的是移动设备，可以点击屏幕并滑动来进行操作。
本文接下来会从风格化草、GPU INSTANCING、无限地图三部分进行说明。
风格化草
首先我们要生成草的 mesh，这里我们可以预设 Sharp 与 Quad 两种形状，并用 segment 参数来控制草的段数：
接下来我们需要考虑如何让地形生草。
export interface GrassSampler {
sample(): GrassSampleInfo;
}
export interface GrassSampleInfo {
positions: Float32Array<ArrayBuffer>;
normals: Float32Array<ArrayBuffer>;
count: number;
}
一般的情况是在一个地形上均匀地长草，因此首先要读取地面模型的 mesh 以及贴图信息，然后在三角面内均匀随机采样，就可以获得草的生长位置。
如果计算量比较大，可以考虑预计算或者使用 task-homie 分帧处理：
“task-homie 链接： https://gist.github.com/ChengXu1973/47f5816312b5af11e4d92e01960b345e)
this._terrainPosition = mesh.readAttribute(0, ATTR_POSITION) asFloat32Array;
this._terrainNormal = mesh.readAttribute(0, ATTR_NORMAL) asFloat32Array;
this._terrainIndices = mesh.readIndices(0) asUint32Array;
// 如果需要使用贴图的alpha通道作为采样用的概率
if (this.useProbabilityTexture) {
// some code
this._terrainTexCoord = mesh.readAttribute(0, ATTR_TEX_COORD) asFloat32Array;
director.root.device.copyTextureToBuffers(
mainTexture.getGFXTexture(),
[this._terrainTexture],
[copy]
);
// some code
}
对于每一棵草来说，我们可以将地形 mesh 的每个三角形的面积作为草落在这个三角形内的概率，然后在三角形内随机生成一个点就可以了。
一般来说，草的根部垂直于地面，也就是指向地形的法线方向，其顶部朝上，因此我们可以用一个 alignToNormal 参数控制草的姿态。
风格化渲染最重要的是什么？就是有自己的风格，而本人最擅长的风格就是 unlit！所以我们新建一个 unlit 材质，给草添加一个绿色。
当然，如果为了让草看起来像是从地面长出来的，我们可以再添加一个地面颜色，根据草的高度做一个渐变：
vec4 col = mix(groundColor, mainColor, 1.0 - v_uv.y);
同时为了让草看起来更生动，我们还可以添加风的动画，颜色渐变等等，这部分我不是很擅长，论坛里也有其他解决方案，就不再赘述。
GPU INSTANCING
首先需要判断一下当前环境是否支持 INSTANCING：
gfx.deviceManager.gfxDevice.hasFeature(gfx.Feature.INSTANCED_ARRAYS);
这里说句题外话，如果设备不支持 INSTANCING，最简单粗暴的方式就是把所有草合在一起生成一个巨大的 mesh：
this._mesh = utils.MeshUtils.createMesh({ positions, indices, uvs }, null);
不过这个方案太不优雅了。
查看引擎源码我们可以看到，创建 mesh 这一通操作最后的结果是向 RenderScene 提交了一个 renderer.scene.Model，因此我们选择自定义两种 Model：
let model: GrassModel;
if (gfx.deviceManager.gfxDevice.hasFeature(gfx.Feature.INSTANCED_ARRAYS)) {
model = director.root.createModel(GrassModelInstancing);
} else {
model = director.root.createModel(GrassModelNormal);
}
GrassModelInstancing
对于单独的一棵草来说，我们只要知道了其生长点，地面法线，就可以通过各个顶点的 uv 来计算其位置，因此 uv 属性的isInstanced应为false，而位置、法线则为true：
const VERTEX_ATTRS = [
new gfx.Attribute(
gfx.AttributeName.ATTR_POSITION,
gfx.Format.RGB32F,
false,
0,
true
),
new gfx.Attribute(
gfx.AttributeName.ATTR_NORMAL,
gfx.Format.RGB32F,
false,
0,
true
),
new gfx.Attribute(
gfx.AttributeName.ATTR_TEX_COORD,
gfx.Format.RG32F,
false,
1
),
] as (gfx.Attribute & { offset?: number })[];
一开始我们将草的 uv 信息提交之后就不用关心了：
const vBuffer: ArrayBuffer = new ArrayBuffer(
this._vertAttrSizeStatic * this._vertCount
);
const vbFloatArray = new Float32Array(vBuffer);
for (let i = 0; i < this._uvs.length; ++i) {
vbFloatArray[i] = this._uvs[i];
}
vertexBuffer.update(vBuffer);
而草的生长点位置以及法线信息就可以每帧动态更新：
// some code
for (let count = 0; count < info.count; count++) {
let offset = count * this._vertAttrsFloatCount;
this._vdataF32[offset++] = info.positions[count * 3 + 0];
this._vdataF32[offset++] = info.positions[count * 3 + 1];
this._vdataF32[offset++] = info.positions[count * 3 + 2];
this._vdataF32[offset++] = info.normals[count * 3 + 0];
this._vdataF32[offset++] = info.normals[count * 3 + 1];
this._vdataF32[offset++] = info.normals[count * 3 + 2];
}
// some code
const ia = this._subModels[0].inputAssembler;
ia.vertexBuffers[0].update(this._vdataF32!);
ia.firstIndex = 0;
ia.indexCount = this._indexCount;
ia.instanceCount = count;
ia.vertexCount = this._iaVertCount;
创建出来的 Model 最后由持有它的 ModelRenderer 添加至场景就可以了：
this._getRenderScene().addModel(model);
上面我们提到，对于单独的一棵草只要知道了其生长点与法线，就可以通过顶点 uv 来计算顶点位置，我们来看看 shader 的部分（伪代码如下）：
float v_heightFactor = 1.0 - uv.y;
vec3 growDir = balabala(noise, align);
vec3 rightDir = cross(finalNormal, viewDir);
growDir = normalize(growDir);
rightDir = normalize(rightDir);
vec2 realSize = balabala(noise, size);
float xOffset = uv.x - 0.5;
worldPos += xOffset * realSize.x * rightDir +
v_heightFactor * realSize.y * growDir;
首先使用世界坐标获取一个唯一的随机因子 noise，然后用随机因子计算草的旋转方向与大小，接着根据草的 uv 将生长点位置进行偏移便得到了最终的顶点位置：
GrassModelNormal
GrassModelNormal 相比于 GrassModelInstancing 就简单很多，我们将数据都合在一起提交给渲染场景就可以：
// some code
for (let count = 0; count < info.count; count++) {
for (let vert = 0; vert < this._vertCount; vert++) {
let offset = (vert + count * this._vertCount) * this._vertAttrsFloatCount;
this._vdataF32[offset++] = info.positions[count * 3 + 0];
this._vdataF32[offset++] = info.positions[count * 3 + 1];
this._vdataF32[offset++] = info.positions[count * 3 + 2];
this._vdataF32[offset++] = info.normals[count * 3 + 0];
this._vdataF32[offset++] = info.normals[count * 3 + 1];
this._vdataF32[offset++] = info.normals[count * 3 + 2];
this._vdataF32[offset++] = this._uvs[vert * 2 + 0];
this._vdataF32[offset++] = this._uvs[vert * 2 + 1];
}
}
// some code
const ia = this._subModels[0].inputAssembler;
ia.vertexBuffers[0].update(this._vdataF32!);
ia.firstIndex = 0;
ia.indexCount = this._indexCount * count;
ia.vertexCount = this._iaVertCount;
无限地图
为了让小鸟在无尽的草地上自由奔跑，我们要分别解决地形与草的生成及渲染问题。
地形生成
程序化生成哪家强，Perlin Noise 帮大忙！
通过采样噪声图作为高度，可让地形有所起伏，为了地图能够无穷无尽，我有两种方案：
-
生成一张大一点的贴图：分为 9 个区块，保证每个区块能覆盖相机的 far，在跨越区块时，我们将当前区块更新至中间并重置一下坐标，搭配阈值与分帧策略，理论上可以用于制作任意的地形。
-
制作一张噪声图：再按照中心对称的方式拼接，采样时搭配 repeat 模式就可以了。
这里我们选方案二。
首先在网上找一张 128 的 Perlin Noise 贴图，然后手动拼接。
地形渲染
由于相机只能看到无尽地图的一部分，所以我们也只需要渲染这一部分就可以了，这里又有两种思路：
-
生成一系列地块：当相机移动时，我们计算出需要显示的地块，并根据距离相机的远近以及 LOD 策略进行渲染。
-
放一个面片模型到相机面前：相机无论转到哪里都显示的是这个面片，在顶点着色器里面根据高度调整顶点位置就可以了。
这里我们选方案二。
那么问题来了，地形渲染搞定了，那角色移动怎么办？只能在 CPU 里面采样一次。
首先拷贝一下纹理数据：
width = this.noise.width;
height = this.noise.height;
this._pixels = new Uint8Array(width * height * 4);
const region = new gfx.BufferTextureCopy();
region.texOffset.x = 0;
region.texOffset.y = 0;
region.texExtent.width = width;
region.texExtent.height = height;
director.root.device.copyTextureToBuffers(
this.noise.getGFXTexture(),
[this._pixels],
[region]
);
然后根据位置采样一下：
u = this.node.worldPosition.x * this.terrainScale;
v = this.node.worldPosition.z * this.terrainScale;
// 修正至像素中心
u -= 0.5 / width;
v -= 0.5 / height;
// 归一化
u = u - Math.floor(u);
v = v - Math.floor(v);
// 像素坐标
x = u * width;
y = v * height;
// 双线性采样的四个邻近像素坐标
x0 = Math.floor(x);
y0 = Math.floor(y);
x1 = x0 + 1;
y1 = y0 + 1;
// repeat模式
x0 = (x0 + width) % width;
y0 = (y0 + height) % height;
x1 = (x1 + width) % width;
y1 = (y1 + height) % height;
// 取像素r通道
r00 = this._getPixel(x0, y0, 0);
r10 = this._getPixel(x1, y0, 0);
r01 = this._getPixel(x0, y1, 0);
r11 = this._getPixel(x1, y1, 0);
// 计算权重
dx = x - x0;
dy = y - y0;
w00 = (1 - dx) * (1 - dy);
w10 = dx * (1 - dy);
w01 = (1 - dx) * dy;
w11 = dx * dy;
// 加权
r = r00 * w00 + r10 * w10 + r01 * w01 + r11 * w11;
最后我们根据采样的值设置一下节点坐标，这样我们的小鸟就能爪踏实地了！
远处的草
远处的草很小，所以和地形一样，跟着相机移动就可以了。
如果实在很远，也可以不渲染，我们在只需要在渲染地面时在地上显示一点斑驳的绿点，这里通过取深度值再混合一下颜色：
// vert
cam_diatance = position.z / cc_nearFar.y;
// frag
vec4 col = mix(mainColor, subColor, cam_diatance * texture(mainTexture, 0.1 *worldPos.xz).r);
近处的草
近处的草不能再跟随相机移动，所以得分块之后按需展示，和正常的地块逻辑差不多。
但是考虑到草的生长是杂乱无章的，我们可以只生成一小块草的位置信息，然后每一块都单位的“复制粘贴”这一部分位置信息就可以：
// some code
colMin = Math.floor((x - this.shownRadius) / this.unitSize);
colMax = Math.ceil((x + this.shownRadius) / this.unitSize);
rowMin = Math.floor((z - this.shownRadius) / this.unitSize);
rowMax = Math.ceil((z + this.shownRadius) / this.unitSize);
for (let i = colMin; i <= colMax; i++) {
for (let j = rowMin; j <= rowMax; j++) {
offsetX = i * this.unitSize;
offsetY = j * this.unitSize;
for (let index = 0; index < this._unit.count; index++) {
// 复制一下生长点信息
}
}
}
最后看起来就是这样：
写在最后
点击【阅读原文】，获取项目源码。
有任何问题或建议，欢迎在评论区留言交流！
欢迎关注 Cocos 官方公众号，第一时间获取更多实用信息与技术干货。
本文分享自微信公众号 - COCOS（CocosEngine）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。
