ygtu - 3D建模学习工作室 (Page 44)

3D建模学习工作室

ygtu

Cocos Creator：天空盒

Cocos Creator：天空盒

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生天空盒游戏中的天空盒是一个包裹整个场景的立方体，可以很好地渲染并展示整个场景环境，在基于 PBR 的工作流中天空盒也可以贡献非常重要的 IBL 环境光照。开启天空盒在层级管理器中选中场景根节点，然后在属性检查器的 Skybox 组件中勾选 Enabled 属性即可开启天空盒。 Skybox 组件属性如下：属性说明Enabled勾选该项即可开启天空盒Env Lighting Type环境光类型，请参考下文漫反射照明获取更多参考UseHDR若勾选该项则开启 HDR（高动态范围），若不勾选该项，则使用 LDR（低动态范围）。详情请参考下文切换 HDR/LDR 模式部分的内容。Envmap天空盒的环境贴图，TextureCube 类型，具体设置方法可参考下文介绍。当该属性为空时，天空盒默认使用和显示的是像素贴图Reflection Convolution点击bake按钮后会生成一张低分辨率的环境贴图并且会对此图进行卷积计算，

Cocos Creator：Line 组件

Cocos Creator：Line 组件

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 Line 组件 Line 组件用于渲染 3D 场景中给定的点连成的线段。Line 组件渲染的线段是有宽度的，并且总是面向摄像机，这与 billboard 组件相似。属性与说明属性功能texture线段中显示的贴图。worldSpace线段中各个点的坐标采用哪个坐标系，勾选使用世界坐标系，不选使用本地坐标系。positions每个线段端点的坐标。width线段宽度，如果采用曲线，则表示沿着线段方向上的曲线变化。tile贴图平铺次数。offset贴图坐标的偏移。color线段颜色，如果采用渐变色，则表示沿着线段方向上的颜色渐变。线段宽度在线段宽度的右侧点击下拉按钮可以修改宽度的类型。其可选项如下：属性说明Constant线段宽度由常量组成Curve由曲线组成，此时可点击 Width 后的输入框对曲线进行编辑TwoCurves由两条曲线组成TwoConstants由两个常量组成曲线曲线编辑和粒子曲线编辑器类似，详情可参考粒子曲线编辑器 - 曲线编辑面板。编辑效果如

Cocos Creator：Billboard 组件

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

Cocos Creator：渲染排序组件

Cocos Creator：渲染排序组件

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生渲染排序组件对于大部分渲染情况来说，默认的排序已经满足需求。但是实际上由于半透明物体的特殊性，我们可能需要手动对这些物体进行排序。对于这种情况，可以使用渲染排序组件。在属性检查器内点击添加组件按钮选择 Sorting 即可添加。注意：该组件只对持有 MeshRenderer 和 SpriteRenderer 组件的节点生效。属性属性说明Sorting Layer选择排序图层通过下拉框选择不同的排序图层，这些图层需要在项目设置 -> 排序图层内设置后才可以选择 Sorting Order在相同图层内的排序优先级示例在项目设置 -> 排序图层内添加排序图层 Sorting Layer 1。按照示例中搭建如下的场景：立方体和球体的材质需要选择使用半透明渲染队列：添加 Sorting

Cocos Creator：VSCode 着色器插件

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

Cocos Creator：WebGL 1.0 向下兼容支持

推荐：将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_

Cocos Creator：UBO 内存布局策略

推荐：将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. 不应出现

Cocos Creator：自定义几何体实例化属性

推荐：将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 仅用在

Cocos Creator：3D 着色器：RimLight

Cocos Creator：3D 着色器：RimLight

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 3D 着色器：RimLight 本文将通过实现一个 RimLight 效果，来演示如何编写一个在 Cocos 可用于 3D 模型渲染的 Cocos Shader。 RimLight 也称为“内发光”/“轮廓光”/“边缘光”（本文统一使用边缘光），是一种通过使物体的边缘发出高亮，让物体更加生动的技术。 RimLight 是菲涅尔现象1的一种应用，通过计算物体法线和视角方向的夹角的大小，调整发光的位置和颜色，是一种简单且高效的提升渲染效果的着色器。在边缘光的计算中，视线和法线的夹角越大，则边缘光越明显。新建材质与着色器首先参考着色器资源新建一个名为 rimlight.effect 的着色器，并创建一个使用该着色器的材质 rimlight.mtl。 CCEffect Cocos Shader 使用 YAML 作为解析器，因此

Cocos Creator：2D 精灵着色器：Gradient

Cocos Creator：2D 精灵着色器：Gradient

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 2D 精灵着色器：Gradient 默认的情况下，UI 和 2D 组件会使用引擎内置的着色器，这些着色器放在资源管理器面板的 internal -> effects 目录下，可查看内置着色器来了解其作用。对于任何持有 CustomMaterial 属性的 UI 和 2D 组件，都可在属性检查器内通过该属性的下拉框选择或者从资源管理器内拖拽实现自定义材质。引擎规定 UI 组件的自定义材质只能有一个。注意： 1. 在使用自定义材质后，可能会打断合批。 2. 关于 UI 和 2D 组件合批的使用，可以参考：2D 渲染组件合批规则说明

Cocos Creator：Legacy Shader 主要函数与结构体

推荐：将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

Cocos Creator：内置 Legacy Shader 导读

推荐：将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：

Cocos Creator：渲染调试功能

Cocos Creator：渲染调试功能

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生渲染调试功能注意：只有使用 Surface Shader 框架的材质，内置的渲染调试功能才可以生效。通过在编辑器的场景预览窗口右上角按钮选择对应的调试模式即可同屏查看模型、材质、光照及其他计算数据，在渲染效果异常的时候可以快速定位问题。为了方便逐像素对比，我们使用全屏调试而非画中画的显示方式，可以快速在同一幅画面中切换不同数据来定位渲染错误所在，也可使用取色器来探知像素的具体数值。另外 Surface Shader 还内置了无理数可视化的功能，一旦有一些像素出现异常的红色(255, 0, 51) 和绿色(0, 255, 51) 交替闪烁，则说明这些像素的渲染计算出现了无理数，请使用单项调试模式来检查模型切线或其他相关数据。渲染调试功能细分为如下三种： 1、公共选项无论单项还是组合模式中都生效的调试选项，包括：名称功能调试技巧光照信息带固有色勾选则显示正常材质光照，勾掉则显示白模纯光照的效果。可更明显的查看AO、GI等间接光相关的影响。级联阴影染色级联阴影从近到

Cocos Creator：自定义表面着色器

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

Cocos Creator：Fragment Shader 的输入值

推荐：将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

Cocos Creator：Vertex Shader 的输入值

推荐：将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

Cocos Creator：Surface Shader 组装

推荐：将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 中，你可以看到如下两种情况： /

Cocos Creator：Shader 类型

推荐：将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

Cocos Creator：表面材质数据结构

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

Cocos Creator：光照模型

推荐：将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)

Cocos Creator：渲染用途

推荐：将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 组装环节引用对应的头文件，

Cocos Creator：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

Cocos Creator：使用宏定义实现函数替换

推荐：将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

Cocos Creator：宏定义与重映射

推荐：将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_

Cocos Creator：include 机制

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 include 机制头文件 Surface Shader 中，包含了多个光照模型，如 standard，toon 等。同时，我们拥有不同的渲染用途，如 render-to-scene， render-to-shadowmap 等。不同的光照模型拥有不同的表面材质数据结构和光照计算函数，不同的渲染用途之间，流程上会有细微的差别。如果为不同的光照模型和不同的渲染用途编写独立的代码，会使整个架构很难维护。因此，在 Surface Shader 中，我们将不同光照模型的方法和结构体，以相同的名字定义在不同的头文件中，再使用 include 进行组合。这样就可以很容易实现，在同样的流程下，通过切换头文件实现不同的光照模型。比如，在下面的代码中，我们通过 #include 引入 SurfacesMaterialData 的定义，函数中使用的结构体，就是 PBR 表面材质数据结构体。

NSDT场景编辑器 | NSDT 数字孪生 | GLTF在线编辑器 | 3D模型在线转换 | UnrealSynth虚幻合成数据生成器 | 3D模型自动纹理化工具
2023 power by nsdt©鄂ICP备2023000829号