[Stage3D]初窥Stage3D(2)

Vertex and Fragment Shader （顶点着色器 和 像素着色器）

1.什么是shader

　　Shader（着色器）是图形渲染管道中的可编程代码块，它是跑在GPU上面的程序，专门用于处理图像显示，分为 vertex shader（顶点着色器） 和 fragment shader （像素着色器）。顾名思义，这两个shader的功能，分别是负责顶点的处理，和像素的处理。而在Stage3D中，提供了一个API叫Program3D，这个类实现了Shader。也就是说，如果要在Actionscript中使用shader编程，则必须使用stage3D中的Program3D类。这个类会根据渲染需求生成一个shader实例并把它传递给GPU，此后GPU再执行这个shader实例从而执行渲染效果。

　　简而言之，shader是运行在GPU上面的程序，负责图形顶点计算和像素颜色渲染。

2.Shader的工作流程

　　

（图片来自：http://www.adobe.com/devnet/flashplayer/articles/vertex-fragment-shaders.html）

　　如图所示为可编程图形管道的各个工作模块，模块之间是瀑布式的(即下一个模块的工作依赖于上一个模块的输出)。首先，假定我们有一组定义了一组三角形的顶点数据流。在图形管道中，这一组数据将会作为参数传递给verdex shader, verdex shader 将会根据转换规则（如转换矩阵）处理这些数据；此后GPU会对转换输出后的数据做三角形集合（Triangle Assembly），形成几何绘图，再经过视屏匹配筛选和剪辑，这些数据通过视屏端口（Viewport）传递给光栅器（Rasterizer）；光栅器的作用是根据上一步骤处理后的三角形各个顶点的信息而生成填充整个三角形区域的像素信息（Fragment）。这些像素信息再作为输入传递给Fragment Shader做纹理渲染，计算出最后要显示在屏幕上的像素。

 

 

3.Verdex Shader

　　顶点着色器，功用就是处理顶点位置。在Actionscript中，当调用了 Context3D：：drawTriangles 这个方法，实际上就已经在GPU上运行了Verdex Shader，通过传入这个方法不同的输入值，verdex shader将会根据这些值调整运算规则，算出不同的顶点位置。传入verdex shader的参数由一组或多组顶点属性组成，称为VerdexBuffer。顶点属性最少应该包含了顶点的位置信息，还包含了顶点颜色、纹理坐标等等。这些顶点位置通常对应着3D模型的坐标系统。Verdex shader最明显和自然的功能就是根据转换矩阵，换算这些顶点的位置坐标，然后再把处理后的结果传递给光栅器做下一步处理。

　　顶点着色器，就是根据参数，如变换矩阵，计算出各个顶点的位置，并将这些数据传递给Fragment Shader。通过顶点着色器，我们可以实现几何图形的形变、旋转、移动等效果。

4.Fragment Shader

　　像素着色器，功能是根据顶点着色器传入的顶点数据，计算生成几何图形最后在屏幕显示的像素颜色信息。通过图形管道前面的步骤，数据在到达fragment shader的时候已经是经过verdex shader转换后和经过rasterizer插值后的数据，形状，移动等效果已经定下来了，fragment shader要做的工作就是加工这些数据，它最直接的作用就是根绝顶点属性数组中的颜色信息，计算出几何图形的各个像素颜色，或者根据纹理顶点属性数组中的纹理坐标，计算出几何图形的纹理图案，最终生成屏幕上显示的像素。当然，fragment shader并不局限于创造这些简单的效果，事实上，我们现在在流行3D游戏中所能看见的炫目的3D效果都能用fragment shader渲染出来，这就是为什么fragment shader被称做可编程图形管道中最核心的部分。

　　通过像素着色器，我们可以实现几何图形的光泽、阴影、纹理等3D效果。

注：名称基本上都是我直译，可能和专词对不上

以上内容整理自：Vertex and Fragment Shader  http://www.adobe.com/devnet/flashplayer/articles/vertex-fragment-shaders.html