Creator 3D开发入门经验分享

最新推荐文章于 2024-09-18 14:15:22 发布

kissSimple

最新推荐文章于 2024-09-18 14:15:22 发布

阅读量1.3k

点赞数 1

分类专栏： Cocos Creator 3D Cocos Creator v3.0

本文链接：https://blog.csdn.net/u014560101/article/details/111052199

版权

Cocos Creator 3D 同时被 2 个专栏收录

8 篇文章 6 订阅

订阅专栏

Cocos Creator v3.0

3 篇文章 0 订阅

订阅专栏

Creator 3D开发入门经验分享

3D的核心概念、场景的绘制流程。GPU的工作过程、每一个像素是怎么绘制出来的。3D的常规用法。
适用范围：Cocos Creator v3.0 、Cocos Creator 3D v1.2

3D场景核心概念

在这里插入图片描述

模型
模型由网格和材质组成。
在这里插入图片描述

网格mesh定义了物体表面的形状。mesh由一个个三角面片构成。一个三角面片包含三个顶点。每一个顶点的信息包括顶点在模型坐标系下的位置、法线、纹理坐标等。vertexShader就是专门处理顶点数据的，它的主要作用就是将顶点坐标从模型空间坐标系转换到屏幕空间（实际上vs中计算出的坐标并不是屏幕空间坐标，这里只是为了方便理解）。

材质决定了模型表面在光照下看起来的效果。材质中使用的shader决定了光照的计算方式（unlit、blinn-phong、pbr）。可以简单理解为，材质决定了模型表面上色的方式。一般是在FragementShader控制单个像素的绘制过程。材质包括纹理、shader、shader参数、渲染管线状态（混合、深度测试、模板测试、光栅化）

引擎每一帧的渲染流程

UI部分：遍历所有画布，每一个画布遍历所有节点，遍历的过程中进行自动合批。每一个绘制批次会生成一个对应的UIModel，并丢到场景的模型队列里。
按照优先级遍历相机进行绘制调用。对于每一个相机，对所有的模型进行包围盒跟相机视锥体进行相交测试，剔除看不到的模型，得到一个可以渲染的模型队列。然后按照顺序对相机的渲染流程进行绘制。每一个渲染流程的绘制就是按顺序执行所有渲染阶段。每一个渲染阶段都有一些渲染队列。渲染阶段在绘制的时候会先将所有可渲染的模型材质中的pass丢到不同的渲染队列。最后，按照一个特定的顺序去绘制这些队列。

GPU的渲染流程

在这里插入图片描述

片段着色器(Fragment Shader)
在这里插入图片描述

Fragment Shader作用于每一个可能成为的像素。fs的作用就是根据灯光的颜色、相机的视角、片元的法线方向、纹理采样到的颜色等信息，计算出像素显示的颜色。在unlit材质的shader中，直接使用采样到的纹理颜色作为结果。呈现出来的效果就是模型完全不受光照的影响。在pbr中会根据更多信息进行计算尽可能去接近真实物理的表现效果，例如会考虑表面的粗糙程度、金属程度、环境遮蔽、能量守恒等等。

编辑器的一些常用操作

UI编辑模式和3D场景编辑模式的切换按钮
在这里插入图片描述

物体的变换工具

位置
在这里插入图片描述

旋转
在这里插入图片描述

缩放
在这里插入图片描述

变换工具在物体的锚点还是中心点
变换工具的世界坐标系还是本地坐标系
在这里插入图片描述

当前场景编辑相机的坐标轴
在这里插入图片描述

场景相机的控制
鼠标中键可以上下左右平移
鼠标滚轮前进后退
按住鼠标右键进入漫游状态，使用键盘的wsadqe就可以前后左右上下的进行移动。
层级面板选中物体 ,然后在场景编辑器面板按F，就可以聚焦到选中的物体。
按住Alt建，按住鼠标左键进行移动就可以旋转视角。

FBX的使用

静态模型
直接拖到场景，然后摆好位置、朝向、大小，再调整一下材质就ok了。
带骨骼动画的模型
英雄、怪物一般都会有一些动作，例如：待机、行走、攻击、死亡等等。可以理解为spine、龙骨的3D版本。动画信息可以拆分成多个fbx文件也可以在一个fbx里面。以下以拆分多个fbx文件为例进行讲解。
fbx文件内容

关联上动画
在这里插入图片描述

关联动画之后可以新生成一个prefab，方便后续重复利用。

变换transform

在这里插入图片描述

位置坐标
世界坐标、相对坐标。如果所有的祖先节点没有进行变换，那么相对坐标跟世界坐标就是一致的。
旋转
有三种表示方式。
欧拉角：比较直观。但有万向节死锁问题。一般使用于绕xyz单个轴的旋转中，如绕Y轴旋转。
四元数：略复杂，无万向节死锁问题。如果旋转轴不是xyz，建议使用四元数。
矩阵：引擎内部使用。
缩放
尽量保持xyz三个是一致的，否则容易造成模型的变形。

材质的一些常规使用

fbx里面的材质是不允许进行修改的，需要导出生成新的材质才可以使用。
在这里插入图片描述

材质提取步骤
在这里插入图片描述

引擎内置的shader（准确的应该说effect文件，为了方便大家理解，这里使用shader泛指effect文件）
在这里插入图片描述

builtin-standard 引擎默认shader，使用的是pbr 。
在这里插入图片描述

builtin-unlit 不受光材质，也比较常用。
在这里插入图片描述

builtin-particle、builtin-particle-gpu 用来制作粒子特效，粒子支持两种模式，根据CPU和GPU的负载选择使用哪一个模式。
builtin-sprite UI界面里使用，一般不用管。
builtin-billboard 广告牌，主要是让面片始终朝向相机。
builtin-toon 卡通shader