Creator3D: shader10_解析【Creator3D shader】的正确姿势（汇总1）

Creator 3.x
#1

前言

不知不觉自己研究shader已经快一个月了，一路靠爱发电坚持到现在。
菜鸟按照自己对新知识的自学方式，先从简单示例入手进行学习，然后再回过头来了解理论知识。在前边的9篇文章中，菜鸟从最简单的效果入手，一步步的去实现更好看的效果。那么在这篇文章中，菜鸟就将一些理论性的知识进行补充。

回归

首先总结一下之前的文章，有些伙伴可能没有看过，不妨点击去看一下
a
Creator3D:基础1_一起学shader_红色小球

Creator3D:基础2_一起学shader_变色小球

Creator3D:基础3_一起学shader_波浪小球

Creator3D:基础4_一起学shader_没有尽头的路

Creator3D_shader5_代码如何控制effect中的属性

Creator3D:shader6_程序员也是会心动的

Creator3D:shader7_尽然还有双pass这波操作

Creator3D:shader8_这种shader怎样配标题

Creator3D:shader9_这样的内发光你喜欢不

正文

1.什么是shader

Shader，翻译过来是：着色器。网上对他的解释是：用来实现图像渲染的，用来替代固定渲染管线的可编辑程序。其中Vertex Shader主要负责顶点的几何关系等的运算，Pixel Shader主要负责片源颜色等的计算。

2.Creator3D的shader 着色器

  • 在unity中，shader 的写法有三种：Surface Shaders 表面着色器，Vertex/Fragment Shaders 顶点/片断着色器，Fixed Function Shaders 固定管线着色器。
  • 而在Creator3D shader写法是：Vertex/Fragment Shaders 顶点/片断着色器
  • Vertex Shader：顶点着色器，输入的单位是顶点，也就是说每个顶点都会调用一次顶点着色器，顶点着色器的本身是不可以创建或者销毁任何顶点，同时也没有办法得到顶点与顶点之间的关系。其主要工作为：坐标转换与逐顶点光照，还可以后续阶段（片元着色器）所需要的数据
  • Fragment Shader：大家也可以叫它片段着色器或者像素着色器。他输入的是上一个阶段（顶点着色器）对顶点信息插值得到的结果，而他输出的是一个或者多个颜色值。

3.Creator3D的shader 文档

在材质系统的文章中对着色流程，顺序，内置结构，语法框架，可配参数，内置参数等都做了说明。菜鸟的建议是不要求都看懂，但是最起码要过一遍，菜鸟看了好几遍了，目前为止还有好多看不懂的。

4.渲染

既然说起shader，那么也有必要了解一下渲染。

渲染的流程可以分为三个阶段：应用阶段，几何阶段，光栅阶段；

  • 应用阶段从名字找们可以看出，这个阶段是由找们的应用主导的，因此通常由 CPU 负责实现。换句话说，我们这些开发者具有这个阶段的绝对控制权。在这一阶段中，开发者有 3 个主要任务：首先，我们需要准备好场景数据，例如摄像机的位置、视锥体、场景中包含了哪些模型、使用了哪些光源等等：其次，为了提高渲染性能，我们往往需要做 一个粗粒度剔除（ culling ）工作，以把那些不可见的物体剔除出去，这样就不需要再移交给几何阶段进行处理：最后，我们需要设置好每个模型的渲染状态。这一阶段最重要的输出是渲染所需的几何信息，即渲染图元。通俗来讲，渲染图元可以是点、线、三角面等。这些渲染图元将会被传递给 下一个阶段 ― 几何阶段．
  • 几何阶段用于处理所有和我们要绘制的几何相关的事情。例如，决定需要绘制的图元是什么，怎样绘制它们，在哪里绘制它们。这一阶段通常在 GPU 上进行。几何阶段负责和每个渲染图元打交道，进行逐顶点、逐多边形的操作，几何阶段的一个重要任务就是把顶点坐标变换到屏幕空间中，再交给光栅器进行处理。通过对输入的渲染图元进行多步处理后，这一阶段将会输出屏幕空间的二维顶点坐标、每个顶点对应的深度值、着色等相关信息，并传递给下一个阶段。
  • 光栅化阶段这 · 阶段将会使用上个阶段传递的数据来产生屏幕上的像素，并渲染出最终的图像。这一阶段也是在 GPU 上运行。光栅化的任务主要是决定每个渲染图元中的哪些像素应该被绘制在屏幕上。它需要对上一个阶段得到的逐顶点数据（例如纹理坐标、顶点颜色等）进行插值，然后再进行逐像素处理。和上一个阶段类似，光栅化阶段也可以分成更小的流水线阶段。

从上面的介绍中，我们可以到的应用阶段是CPU负责操作，而几何阶段和光栅阶段都是GPU进行操作。

  • 应用阶段：CPU
    • 其实就游戏开发的过程，场景，光源，模型，包括设置各类参数。
  • 几何阶段：GPU
    • 顶点着色器，逐顶点进行操作，进行顶点坐标的转换等操作
  • 光栅阶段：GPU
    • 片元着色器。

那么此时就验证了我在别的地方看见的一句话：着⾊器其实就是一段在GPU运行的程序。我们平时的程序，是在CPU运行。

5.CPU和GPU直接的通信

  • 首先咱们看一下CPU在与GPU通信之前自身所需要的操作：
    • 1.将数据加载到显存中
    • 2.设置渲染状态
  • 当CPU完成上边的操作后会发送一个命令，这个命令就是Draw Call，接收者是GPU。当给定一个Draw Call，GPU将会根据渲染状态和所有输入的顶点数据进行计算，最终显示到屏幕上。

6.地址

  • 微信公众号：搬砖小菜鸟

    扫码关注公众号，发送"gitee"可获取源码
13赞
shader_creator_3d
#2

#mark

#3

现在creator3d 特效。
1.1的放到1.2测试版的都报错

#4

下午专门试了一下，以上shader示例都是1. 1.2写的，在1. 2.0可以正常运行，但是之前的项目从1.1.2升级上来会报错

#5

新建的1.2空项目，只要有一点更改，必须重启引擎才能刷新。头大

#6

没有尽头的路，透明度更改无效。后面整体alpha我改成特定值仍然无任何效果，1.2版本，不知道哪里的问题。

#7

这个确实是

#8

1.1版本有问题嘛

#9

还没试，在测试一些前面几个别的用法。

#10

1.1.2看起来也没什么效果。
后面我改成 ：

float dis=distance(cc_cameraPos.xyz,v_position);
float apha=0.0;
vec3 color=mainColor.xyz;
return CCFragOutput(vec4(color,apha) * texture(mainTexture, v_uv));

也没任何变化。

#11

shader6在1.2版本中提示的错误并不存在，1.1.2正常，模式必须为transparent。cube使用时会出现六个面边线超出的情况，在这个效果里面时正常的，只是在使用时需要注意。

#12

请教下shader6中的
a_texCoord

这几个是什么含义？
matWorldIT 的作用是什么呢？

#13

这是shader基本概念了。一方面你可以看下 天煞魔猎手 的简书。里面有基本的讲解。另一方面，可以学习下the book of shaders 这样就全面了。

#14

你这个回答我让我很难办啊。急着问这个的含义，你让我去翻，我之前就看过他的文章，在第四章的时候就发现拿下来无法运行才跑回来看论坛的这个。我只是想把帖主发的这几个能弄的差不多而已。

#15

有事去了趟西安，今天刚回来，公司有一直没网，拿手机回复一下。
你这边没有变化指的是啥，可以给个截图我看看效果嘛

#16

matWorld和matWorldIT ：你可以看一下常用 shader 内置 Uniform，里边的cc-local.chunk，因为通过 StandardVertInput In; CCVertInput(In);拿到的模型的顶点之类的数据都是基于模型自身的，模型需要渲染到屏幕需要三部转化：自身坐标—>世界坐标–>视图坐标

#17

你可以看一下这个链接：https://blog.csdn.net/biezhihua/article/details/78926849

#18

至于a_texCoord，因为菜鸟现在在项目中没有怎么用到v_uv，自己了解的比较少，在后边的示例中等菜鸟自己弄清楚会专门说明的，抱歉奥，菜鸟也是在研究的过程中

#19

:ox:嗷
很强

#20

thankyou,那几个矩阵在官网上查到了，a_texcord在抑郁老铁推荐的那两个里面都没找着。谁先找到谁留言把。辛苦。