CocosCreator2.3 shader基础

shader

OpenGL是跨平台的,windows、Mac、Linux、iOS、Android等等大家都能用
微软为了更好的性能,开发出了一套“专门适配windows平台的OpenGL",名为DirectX。

苹果也开发出了一套“专门适配Mac和iOS平台的OpenGL”,名为Metal 3D

显卡里也有一个运算处理中心 GPG(图形处理单元)
shader 是给GPU执行的一个程序
可以开发出 水 雾 UV动画 雨滴 炫光 波纹 等等效果

Shader编程语言:

CocosCreator OpenGL -> GLSL
DirectX -> HLSL
Unity NVIDIA 与微软合作 推出的 (OpenGL + DirectX ) -> CG

GPU 绘制流水线主要功能环节

CocosCreator2.3 shader基础

顶点初始化

模型文件存到文件里 .obj .fbx
CPU读取模型文件,将模型的顶点读到内存,读到显存,设置到GPU的渲染流水线
顶点(坐标,法线,纹理坐标(UV坐标)…)->面->体(mesh 或者称作网格)
一个立方体放入显卡里,有几个顶点?= 24

顶点shader

(1)
模型的顶点,大小是相对于局部的坐标
将模型的局部坐标-> 根据节点的位置 旋转 缩放-> 装换到游戏世界的世界坐标里
影响模型效果的,还有摄像机
将世界坐标,转换到以摄像机为原点坐标系下的坐标
物体局部坐标->游戏世界坐标->摄像机透视坐标下
(2)
可以编写代码,改变物体的形状。例如一个平面,改变为波光水面

曲面化

模型绘制得更自然,对模型做曲面化,显得更加圆滑

裁剪&投影

裁剪:
摄像机定义了一个可视化范围,有个视角椎,视角椎以外的物体

会裁剪掉,不在视角以内的三角形

投影:

一个3D物体 就会被投影到墙壁(摄像机的底片)上。就是2D的像
3D立体点,投影到2D 平面,这些点都有一个固定的Z Z(底片到摄像机的距离)
三维三角形面,投影成2D三角形,遍历2D三角形,给每个三角形涂色

三角形遍历

三维三角形面,投影成2D三角形

片元Shader

给每个三角形涂色
编写代码,在上色的时候做干预,就可以生成的不同的绘制物体的效果

CocosCreator2.3 shader基础