12 第1页 | 共2 页下一页
返回列表 发新帖
查看: 4551|回复: 11
打印 上一主题 下一主题

Stage3D(二)着色器

[复制链接]

12

主题

1

听众

385

积分

设计实习生

Rank: 2

纳金币
385
精华
0

最佳新人

跳转到指定楼层
楼主
发表于 2013-5-13 22:43:29 |只看该作者 |倒序浏览
pstatus"> 本帖最后由 家熊 于 2013-5-13 22:44 编辑

着色器--特效视觉效果
在stage3D中,着色器被存储在Program3D类中。创建一个着色器需要先创建“片段着色器”和“顶点着色器”,将他们两者混合,就是一个完整的着色器。
顶点着色器
当你渲染时,顶点着色器都会针对网格模型的每个顶点运行一次;其决定了每个顶点的位置,颜色,纹理坐标,以及其他任何你想交给着色器渲染前计算的数据。
片段着色器
片段着色器是指一系列用于定义如何处理网格模型的指令。
理解着色器在可编程图形管道中如何工作

当你要渲染一个几何图形时,你会用一个VertexBuffer来定义构成几何图形的三角形,VertextBuffer中又包含一系列的顶点数据。来自 VertextBuffer中的顶点数据作为输入传递给着色器,在着色器中可以处理这些数据。GPU将顶点着色器的输出数据组装为三角形,然后这些三角形 被适当的剪裁以适应用户视域(viewport),接下来在光栅化单元被处理成一种新的格式:由片段(Fragments)组成的数据格式,片段是一种简 单的数据格式,每一个片段包含一个三角形在屏幕上能显示的所有像素。

片段中的数据内容通常由顶点着色器决定。事实上,顶点着色器可以将顶点属性参数作为自己的输出。光栅化负责将着色器输出的顶点数据在三角形上进行颜色插值(interpolate),使片段上的每个像素都得到正确的属性值。

例 如,有一个Vertex Buffer指定了顶点的颜色作为顶点属性,其中三角形的两个顶点被分别被指定为黑色和白色。顶点着色器会将这些顶点颜色数据作为输出,传递给管道中的下 一个处理单元。然后,片段的相对中间部位的某处,会被置为灰色,也就是黑色顶点和白色顶点的中间色。片段中接近白色顶点的像素颜色会亮一些,相反,接近黑 色顶点的像素会暗一些。

接下来,这些插值后未经处理的片段被传输给片段着色器,它利用这些数据来完成最终像素颜色的建立。

除了片段着色器接收的片段数据外,你还可以用ActionScript将一些纹理数据传递给片段着色器,供片段着色器取样。

顶点着色器原理
顶点着色器是用来处理顶点数据的
一 般来说,可以将几何图形顶点数据放在VertexBuffer中,然后将其上传至GPU。然后,可以用一种着色器语言:例如AGAL来编写一个顶点着色 器。顶点着色器程序将处理VertextBuffer中的每一个顶点,这就好像在着色器周围使用了一个for循环,但实际上你根本看不到这个for循环, 如下
for (var i:int = 0; i <vertexBuffer.length; i++)
{
executeVertexShader(vertexBuffer);
}

所以,VertexBuffer中的所有顶点都会被处理。

你还可以将常量以常量寄存器的形式传递给顶点着色器,每次运行着色器(每次调用Context3D::drawTriangles方法,渲染一个网格)时,都可以传入一个不同的值,着色器可以根据常量的值来调节它的算法和输出。

顶 点着色器的输入是一个或多个顶点属性(Vertex Attribute)组成的VertexBuffer。VertexBuffer中的顶点应至少指出了顶点的位置属性,这些位置属性通常指的是每个3D模 型(每个模型都有其自身的原点)本身的坐标。顶点着色器将这些位置信息转换为屏幕位置,以便可以正确的显示。VertexBuffer中可能还包括一些其 它顶点属性,例如,顶点颜色或纹理UV坐标等。顶点着色器将这些作为输出(最终经过处理的),以便其可在光栅化单元进行插值,然后作为输入传递给片段着色 器。

顶点着色器常常用来对场景中几何图形坐标进行矩阵变换。顶点的坐标作为一个矩阵输入到顶点着色器中,它会将VertexBuffer中的所有顶点进行矩阵变换。由于使用了硬件加速,这个过程非常高效,大大快于自己用ActionScript编写的代码。

让 人感兴趣的时,顶点着色器是完全可编程的,你可以以任何你想要的方式修改几何图形。例如,一个典型的骨骼顶点修改的程序:你定义了一组骨骼也就是骨架和其 上的皮肤(网格)。当骨骼旋转时,由于骨骼和皮肤连在一起,所以皮肤的形状会跟着变化。那我们如何来实现呢?最好的办法是将骨骼旋转(变换)数据传递给一 个顶点着色器,让它来适当的修改皮肤的动画和变形。

还有一些会用到顶点着色器的应用场景:模拟柔软纺织品或者可变形对象的表面。用顶点着色器来让一个网格根据参数的变化从一个形状变为另一个形状。

片段着色器原理
它们负责输出每个三角形像素的最终颜色。
基本上来说,它是这样运行的:片段着色器将顶点着色器输出的片段作为输入,片段的顶点属性已被光栅化单元进行了插值处理。

片段着色器执行的流程基本上也很像一个循环,如果你能把未经处理的片段想象成某种数据流,就叫片段流吧,片段着色器的处理就像代码中描述的一样:

for (var i:int = 0; i <fragmentStream.length; i++)

{

executeFragmentShader(fragmentStream);
}
片段流之所以称之为未处理过的,是因为片段着色器还没有处理它,并计算出在屏幕上显示的像素的颜色。
片段着色器是可编程管道中的最最核心的部分。其普遍的作用就是计算各种各样的三角形像素颜色,从为着色顶点图形(vertex-colored geometries)计算的顶点属性颜色,和为纹理图形为计算的纹理及相关的UV纹理坐标。

现代3D游戏中令人惊叹的3D特效都是用片段着色器来生成的。例如,动态光源效果通常都是由片段着色 器完成。思考一下就会明白,动态光源意味着根据场景中已有的光源计算像素颜色,这与几何图形的位置、材料都有很大的关系,所以片段着色器是制作动态光源效 果的不二之选。像水体环境映射之类的反射特效也都是由片段着色器完成的。片段着色器能生成世界上几乎所有的光影特效,以上提及的只不过是它的冰山一角。

最后要提一下的是,片段着色器决定了你在屏幕上能看到什么,所以,片段着色器才是影响渲染的核心代码。

在本教程中,你已经学到顶点着色器和片段着色器是如何工作的。这两个着色器是Stage3DAPI渲染管道中的核心。着色器可以生成各种各样的3D视觉特效
下一节,我将为大家介绍相关的几种数据结构。

分享到: QQ好友和群QQ好友和群 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
转播转播0 分享淘帖0 收藏收藏0 支持支持0 反对反对0
回复

使用道具 举报

0

主题

1

听众

104

积分

设计实习生

Rank: 2

纳金币
32
精华
0

最佳新人

沙发
发表于 2013-6-27 17:49:51 |只看该作者
学习了。。。
回复

使用道具 举报

0

主题

1

听众

36

积分

设计初学者

Rank: 1

纳金币
0
精华
0

活跃会员 灌水之王

板凳
发表于 2013-8-8 21:42:05 |只看该作者
ding!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
回复

使用道具 举报

40

主题

0

听众

2万

积分

资深设计师

Rank: 7Rank: 7Rank: 7

纳金币
279
精华
0

最佳新人 活跃会员 热心会员 灌水之王 突出贡献

地板
发表于 2013-8-14 10:27:05 |只看该作者
楼主就是给力!
回复

使用道具 举报

0

主题

1

听众

2286

积分

中级设计师

Rank: 5Rank: 5

纳金币
0
精华
0

最佳新人 活跃会员 热心会员 灌水之王 突出贡献

5#
发表于 2013-8-23 19:08:03 |只看该作者
Ding!!!......
回复

使用道具 举报

6#
无效楼层,该帖已经被删除
7#
无效楼层,该帖已经被删除

0

主题

1

听众

2458

积分

中级设计师

Rank: 5Rank: 5

纳金币
0
精华
0

最佳新人 活跃会员 热心会员 灌水之王 突出贡献

8#
发表于 2014-3-26 20:40:06 |只看该作者
Thanks for sharing !
回复

使用道具 举报

0

主题

2

听众

3238

积分

中级设计师

Rank: 5Rank: 5

纳金币
0
精华
0

最佳新人 活跃会员 热心会员 灌水之王 突出贡献

9#
发表于 2014-4-30 09:02:35 |只看该作者
感谢分享!
回复

使用道具 举报

0

主题

2

听众

3238

积分

中级设计师

Rank: 5Rank: 5

纳金币
0
精华
0

最佳新人 活跃会员 热心会员 灌水之王 突出贡献

10#
发表于 2014-6-20 08:38:30 |只看该作者
谢谢分享
回复

使用道具 举报

12 第1页 | 共2 页下一页
返回列表 发新帖
您需要登录后才可以回帖 登录 | 立即注册

手机版|纳金网 ( 闽ICP备2021016425号-2/3

GMT+8, 2024-11-16 07:27 , Processed in 0.116181 second(s), 29 queries .

Powered by Discuz!-创意设计 X2.5

© 2008-2019 Narkii Inc.

回顶部