推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 Billboard 组件 Billboard 组件用于渲染一个始终面向摄像机的方块。 属性说明Texturebillboard 显示的贴图。Heightbillboard 的高度。Widthbillboard 的宽度。Rotationbillboard 绕中心点旋转的角度。 由3D建模学习工作室 翻译整理，转载请注明出处！ 上一篇：Cocos Creator：渲染排序组件 (mvrlink.com) 下一篇：Cocos Creator：Line 组件 (mvrlink.com)

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 VSCode 着色器插件（实验性） 在 VSCode 应用商店中搜索扩展 Cocos Effect 并安装，即可启用 .effect 文件的简易语法着色。 如果打开的 .effect 是 3.7.3 及之后版本引擎中的内置文件，或使用此版本编辑器打开过的工程中的文件，会自动新增如下功能： 1、自动补全和语法着色 引擎内置函数、宏和全局变量的自动补全、语法着色等功能。 输入关键字会有列表提示，按上下键选择，同时会显示提示信息，按回车可以自动补全 鼠标移动到补全后的关键字上会有悬停提示信息，包括注释和所在文件位置等 注意：由于是实验性功能，此功能目前仅支持部分引擎内置常用代码的感应，不支持用户代码自动感应。 2、语法检查及错误跳转 当前窗口打开一个 .effect 文件，然后在查看菜单--命令面板（Ctrl+Shift+P）....选择Cocos

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 WebGL 1.0 向下兼容支持 由于 WebGL 1.0 仅支持 GLSL 100 标准语法，因此在 Cocos Shader 编译时会提供 GLSL 300 ES 转 GLSL 100 的向下兼容代码（fallback shader），开发者基本不需关心这层变化。 需要注意的是目前的自动向下兼容策略仅支持一些基本的格式转换，如果使用了 GLSL 300 ES 独有的函数（例如 texelFetch、textureGrad）或一些特有的扩展（extensions），推荐根据 __VERSION__ 宏定义判断 GLSL 版本，自行实现更稳定精确的向下兼容，代码示例如下： #if __VERSION_

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 UBO 内存布局策略 Cocos Shader 规定，所有非 sampler 类型的 uniform 都应以 UBO（Uniform Buffer Object/Uniform Block）形式声明。 以内置着色器 builtin-standard.effect 为例，其 uniform block 声明如下： uniform Constants { vec4 tilingOffset; vec4 albedo; vec4 albedoScaleAndCutoff; vec4 pbrParams; vec4 miscParams; vec4 emissive; vec4 emissiveScaleParam; }; 并且所有的 UBO 应当遵守以下规则： 1. 不应出现

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 自定义几何体实例化属性 通过 几何体实例化 特性（GPU Instancing）可使 GPU 批量绘制模型相同且材质相同的渲染对象。如果我们想在不打破这一特性的情况下单独修改某个对象的显示效果，就需要通过自定义几何体实例化属性。 我们以新增一个颜色属性为例。 定义变量 实例化属性需要单独定义，并且处于 USE_INSTANCING 宏定义之下，否则会出现编译错误。 #if USE_INSTANCING // when instancing is enabled #pragma format(RGBA8) // normalized unsigned byte in vec4 a_instanced_color; #endif 用 vs 传递 虽然 a_instanced_color 仅用在

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 Legacy Shader 主要函数与结构体 CCVertInput 为对接骨骼动画与数据解压流程，我们提供了 CCVertInput 工具函数，它有 general 和 standard 两个版本，内容如下： // 位于 ‘input.chunk’ 的通用顶点着色器输入 #define CCVertInput(position) \ CCDecode(position); \ #if CC_USE_MORPH \ applyMorph(position); \ #endif \ #if CC_USE_SKINNING \ CCSkin(position); \ #endif \ #pragma // 空 ‘pragma’ 技巧，在编译时消除尾随分号 // 位于 ‘input-standard

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 内置 Legacy Shader 导读 Legacy Shader 相关的源码，有两个目录： * internal/chunks/legacy/ * internal/effects/legacy/ 在 chunks/legacy/ 目录中，存放的是一些公共函数，如解码器、雾效、输入、输出、阴影、骨骼蒙皮等等。 Legacy Shader 和 Surface Shader 都会调用 internal/chunks/builtin/ 和 internal/chunks/common/ 提供的函数。 在 effects/legacy/ 目录中，提供了三个内置的 Legacy Shader：

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 自定义表面着色器 虽然 Surface Shader 提供了大多数场景材质都能适配的光照模型，但其功能还是较为固定的。 有时候，用户需要使用完全定制化的光照计算和色彩计算，比如说：一些特殊的、风格化的材质，需要轮廓光、额外的补光、非真实的环境照明等等。 针对这类极为特殊的情况，Surface Shader 也提供了自定义能力。 但需要注意的是，由于干预了表面材质数据和光照计算过程，渲染效果可能会出现意料之外的效果。 1、自定义 VS 输出与 FS 输入 我们可以在 VS 阶段新定义一个传递变量之后，在某个 Surface 函数中计算并输出该变量值。 在 FS 阶段定义一个同名变量之后在某个 Surface 函数中获取并使用该变量值。 详情请参考 Fragment Shader 的输入参数：自定义传递值。 2、自定义材质信息 在

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 Fragment Shader 的输入值 内置输入列表 Vertex Shader 向 Fragment Shader 传递了许多常用变量，列表如下： Fragment Shader 输入值类型使用时需要开启的宏含义FSInput_worldPosvec3N/AWorld Position 世界坐标FSInput_worldNormalvec3N/AWorld Normal 世界法线FSInput_faceSideSignfloatN/ATwo Side Sign 物理正反面标记，可用于双面材质FSInput_texcoordvec2N/AUV0FSInput_texcoord1vec2N/AUV1FSInput_vertexColorvec4N/AVertex Color 顶点颜色FSInput_worldTangentvec3N/AWorld Tangent 世界切线FSInput_mirrorNormalfloatN/AMirror Normal Sign 镜像法线标记FSInput_l

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 Vertex Shader 的输入值 参数列表 Vertex Shader 输入值都在 SurfacesStandardVertexIntermediate 结构体中，作为函数参数传入。 Vertex Shader 输入值类型使用时需要开启的宏含义positionvec4N/A本地坐标normalvec3N/A本地法线tangentvec4CC_SURFACES_USE_TANGENT_SPACE本地切线和镜像法线标记colorvec4CC_SURFACES_USE_VERTEX_COLOR顶点颜色texCoordvec2N/AUV0texCoord1vec2CC_SURFACES_USE_SECOND_UVUV1clipPosvec4N/A投影坐标worldPosvec3N/A世界坐标worldNormalvec4N/A世界法线和双面材质标记worldTangentvec3CC_SURFACES_USE_TANGENT_SPACE世界切线worldBinormalvec3CC_SURFACE

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 Surface Shader 组装 Shader片段组装器 在内置的 Surface Shader 文件中，你会看到下面的代码片段： CCProgram standard-vs %{ //includes }% CCProgram shadow-caster-vs %{ //includes }% CCProgram standard-fs %{ //includes }% CCProgram shadow-caster-fs %{ //includes }% CCProgram reflect-map-fs %{ //includes }% 这类以 xxx-vs, xxx-fs 命名的 CCProgram 代码片段，就是我们的组装器。 在这些代码片段中，我们使用 #include 关键字，根据需要，引入不同模块头的文件，按顺序组装每个Shader。 include 两种方式 在这些 include 中，你可以看到如下两种情况： /

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 Shader 类型 渲染是由不同的着色器来完成的，有处理顶点的、有处理像素的、有用于通用计算的。 在 Surface Shader 架构中，为了良好的可读性和可维护性，不同的 Shader 类型会有一个约定的代码标识， 如下表所示： 着色器阶段对应的 Surface Shader 代码标识Vertex ShadervsFragment ShaderfsComputer Shadercs 你可以在内置的 effect 和 chunk 文件中发现许多文件以 xxxx-vs 或者 xxxx-fs 命名。 而在 effect 和 chunk 文件中， 也有许多类似 CCProgram xxx-vs %{}% 和 CCProgram xxx-fs %{}% 的代码片段定义。 比如： CCProgram standard-vs

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 表面材质数据结构 什么是表面材质数据 Surface Shader 中，根据不同光照模型的需求，提供了对应的表面材质数据结构 SurfaceMaterialData 。 表面材质数据结构体定义了一系列用于计算物体表面最终颜色的物理参数，如 反照率、粗糙度等。 注意：材质数据模型与光照模型必须关联使用 表面材质数据类型 材质数据类型说明standard粗糙度和金属性描述的标准 PBR 材质，和 SP、Blender、Maya 等软件中的材质节点类似toon简单的卡通材质，有多种 shade 颜色处理 如何使用 对应的表面材质数据结构存放在 internal/chunks/data-structures/ 目录下。 只需要 include 对应的表面材质数据结构头文件，就可以使用不同类别的数据结构。 //PBR 表面材质 #include // toon 表面材质 //#include

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 光照模型 光照模型用于说明物体表面与是如何对光线产生影响和作用的。 目前支持的光照模型如下： 光照模型名称说明standardPBR 光照，支持 GGX BRDF 分布的各向同性与各向异性光照，支持卷积环境光照toon简单的卡通光照，阶梯状的光照效果 与光照模型相关的内置 Shader 函数放在了 internal/chunks/lighting-models/includes/ 目录下，在 Surface Shader 组装 时，通过 include 引入对应文件，就能完成光照计算。 由3D建模学习工作室 翻译整理，转载请注明出处！ 上一篇：Cocos Creator：渲染用途 (mvrlink.com) 下一篇：Cocos Creator：表面材质数据结构 (mvrlink.com)

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 渲染用途 默认情况下，Surface Shader 都是以输出到屏幕上，显示场景为主。 但有时候，我们也有一些特殊需要，比如: * 渲染为阴影贴图（ShadowMap） * 渲染为环境反射图（Reflection Probe） 不同的渲染用途，有不同的渲染流程和细节，因此需要特殊处理。 Surface Shader 框架中，预定义了常见的不同用途的流程，在 资源管理器/internal/chunks/shading-entries/main-functions/ 目录下可以找到。 以下是内置的渲染用途： 常用的渲染用途文件位置备注渲染到场景（默认）render-to-scene渲染到阴影贴图render-to-shadowmap渲染到环境贴图render-to-reflectmap可选渲染卡通描边misc/silhouette-edge渲染天空misc/sky后期处理或通用计算 Passmisc/quad引擎预留 只需要在 Surface Shader 组装 环节引用对应的头文件，

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 Surface Shader 可替换的内置函数 Surface Shader 统一了着色流程，同时向用户提供了大量的自定义函数，大家可以根据自己的需求，利用宏机制，重写相关函数。 1、原理 Surface Shader 提供的自定义函数，在内部都有一个默认版本，并且在适合的时候被调用。可以参考 Surface Shader 执行流程了解详情。 这些函数通常以 Surfaces+Shader类型名+Modify+属性 方式全名，比如： * SurfacesVertexModifyLocalPos * SurfacesVertexModifyLocalNormal * SurfacesVertexModifyLocalTangent 所有函数可以在 internal/chunks/surfaces/default-functions/ 中查看。 如果你想替换某函数的实现，可以通过预定义该函数对应的宏来完成。 比如，可以预先定义 CC_SURFACES_VERTEX_MODIFY_W

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 使用宏定义实现函数替换 有时候需要制作一些公用的函数供不同的需求场景使用， 以降低代码量和维护成本。 但流程里的某些函数，我们希望在某些场合替换为特定版本，以满足特定需求。 可以通过宏定义机制来完成。 //example.chunk #ifndef CC_USER_MODIFY_SOMETHING void ModifySomething(){ //do something here } #endif void Before(){ //do something here } void After(){ //do something here } void myFunc(){ Before(); ModifySomething(); After(); } 可以看到，在上面的代码中，myFunc 拥有完整的调用流程。如果想修改 ModifySomething 的实现，只需要在 #include example.chunk

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 宏定义与重映射 Surface Shader 内部计算时会用到一些宏开关，这些宏以 CC_SURFACES_ 开头。 注意：以 CC_SURFACES_ 开头的宏不会出现在材质面板上。 以下是完整的宏列表： 宏名类型含义CC_SURFACES_USE_VERTEX_COLORBOOL是否使用顶点色CC_SURFACES_USE_SECOND_UVBOOL是否使用2uvCC_SURFACES_USE_TWO_SIDEDBOOL是否使用双面法线，用于双面光照CC_SURFACES_USE_TANGENT_SPACEBOOL是否使用切空间（使用法线图或各向异性时必须开启）CC_SURFACES_TRANSFER_LOCAL_POSBOOL是否在 FS 中访问模型空间坐标CC_SURFACES_LIGHTING_ANISOTROPICBOOL是否开启各向异性材质CC_SURFACES_LIGHTING_ANISOTROPIC_

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 Surface Shader 执行流程 Surface Shader 统一了着色流程，同时为 vs 和 fs 提供了大量的自定义函数，大家可以根据自己的需求，重写相关函数。 请参考 Surface Shader 内置函数 和 使用宏定义实现函数替换。 本文主要目的在于帮助开发者熟悉 Surface Shader 执行流程，弄清楚各函数调用时机。 函数入口 我们先看一下内置的 Surface Shader 文件的 CCEffect 部分： CCEffect %{ techniques: - name: opaque passes: - vert: standard-vs frag: standard-fs ... }% 可以看到， 每一个 pass 的

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 Surface Shader 结构 一个典型的 Surface Shader 通常由四个主要部分构成： 1. CCEffect 2. 共享常量声明 3. 宏映射 4. 主体功能函数 5. Shader组装器：用于将上面4个部分与内置的Surface Shader 功能进行级任 1、CCEffect CCEffect 用于描述 Surface Shader 的 techniques, pass , 属性以及渲染状态等信息。材质会根据 CCEffect 中的描述生成默认值，以及在材质面板上显示。 具体内容请参考 Cocos Shader 语法。 2、共享常量声明 共享常量声明会将所有 pass， vs 和 fs 都需要用到的常量写在一起，

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 内置 Surface Shader 导读 Cocos Creator 3.7.2 版本开始， builtin-standard.effect 使用 Surface Shader 架构实现。 本文以 builtin-standard.effect 作为典型案例，讲解 Surface Shader 细节。 你可以属性 Surface Shader 结构定义、语法细节以及渲染流程。 下面的内容，建议配合 internal/effects/builtin-standard.effect 一起阅读。 基本结构 Surface Shader 代码通常由几个部分组成： * 信息描述（CCEffect）：描述此 Shader 的技术、渲染过程组成部分，

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 前向渲染与延迟渲染 Shader 执行流程 Cocos Creator 引擎支持 前向渲染和延迟渲染。因此，在 Shader 架构上，也要为这两种渲染流程做兼容，并且让用户感知不到。 内置的 Legacy Shader 都是 PBR 材质，它们在渲染时都遵守以下流程： 前向渲染 1. 调用 vs 2. 调用 fs -> surf -> 光照计算 延迟渲染 Buffer 阶段 1. 调用 vs 2. 调用 fs -> surf -> GBuffer Lighting 阶段