Cocos Shader丨通过 UV 坐标实现「点击产生水波纹」效果

在开发中，我们可以通过 UV 坐标实现多种 Shader 效果。本次，Cocos 布道师孙二喵将分享如何用 UV 坐标实现水波纹。Demo 见文末。

什么是 UV 坐标

UV 坐标，也称为纹理坐标，是 3D 建模和游戏开发中的一个重要概念。

在 3D 建模中，我们常通过纹理映射，将一张纹理（也就是图片）黏在模型表面，以控制模型外观。模型的每个顶点都有一个 UV 坐标，定义了该顶点在纹理中对应的 2D 坐标。通过 UV 坐标，我们就可以将 2D 图像上的每一个点精确映射到 3D 模型表面，实现高精度的纹理和贴图效果。

命名为 UV 的原因是 XYZ 已经被用于表示三维空间中对象的坐标轴，为了区分开，所以用了 UV 命名。其中 U 是水平方向坐标轴，V 是垂直方向坐标轴，U 和 V 的范围都是 0 到 1。

Cocos 中的 UV 坐标

在 Cocos 中，UV 坐标系的原点默认在左上角，纹理和图片像素的垂直轴、以及在着色器中对纹理进行采样时，都是下指向的，即从上到下。

这与大多数图像文件格式存储像素数据的方式一致，也与大多数图形 API 的工作方式一致，包括 DirectX、Vulkan、Metal、WebGPU，但 OpenGL 除外。如果你以前的开发经验是基于 OpenGL，在用同样的方式开发 Cocos 游戏的 Shader 时，会发现你的网格上的纹理是垂直翻转的。此时务必要以左上角为 UV 的原点，做一下调整。

UV 坐标系也与 Cocos 中其他地方使用的世界坐标系（Y 轴指向上方，如下图）不一致，通过世界坐标计算 UV 位置的时候也需要注意这个问题。

Cocos 中的世界坐标系

在 Shader 内使用 UV

在 Cocos 中，2D 精灵的 Shader 和 3D Mesh 的 UV 都是在顶点着色器（VS）中获得，并传入像素着色器中（FS）。

在 Cocos 中，3D 的 Shader 默认会乘以平铺 Tilling 系数并加上 Offset 偏移系数，同时支持 RenderTexture 的翻转修复。

我们先来看一个