顶点着色器和片断着色器

顶点和片段着色器

必备知识

熟悉Stage3D API。最好之前使用过VertexBuffer。在继续这个教程之前一定要先阅读本系列的第一个教程(Stage3D原理)

   所需软件

Flash Builder 4.5 Premium (Download trial)

Flash Professional CS5.5 (Download trial)

在本章中,你将对着色器(Shaders)有一个大概的了解。着色器是Stage3D渲染管道的核心。你将学到顶点和片段着色器是个什么东东,它们在3D渲染管道中扮演什么角色以及为什么它们是如此重要。

初识着色器

在本系列教程的上一篇文章:《Stage3D原理》中,你已经了解到Stage3D是如何基于可编程图形管道工作的。

Stage3D中的可编程图形管道是非常有用的,因为你可以通过编程来改变渲染行为。这对于以前的固定功能图形管道来说是一个巨大的进步,固定功能图形管道只负责把数据交给GPU,GPU接管所有渲染工作,开发者无法控制渲染过程。

然而,这也意味着,为了使用Stage3D,你必须自己编写一些额外代码来控制可编程管道。

我们在可编程图形管道中编写的小程序被称为着色器(Shaders)。着色器分为两种:顶点着色器和片段着色器(也叫像素着色器)。使用Stage3D渲染任何图形,你都需要至少编写两个着色器:一个顶点的,一个片段的,不然你的图形管线法工作。

着色器是在图形硬件GPU上运行的小程序,这与在CPU上运行的普通ActionScript代码不同。这是着色器程序和普通程序之间最重要的区别。

着色器只是在GPU中执行的程序。

在 Stage3D中,着色器被一个叫做Program3D的特殊的Stage3D API封装(Wrapped)了起来。Program3D提供创建着色器实例的功能,并负责将其传入GPU,接下来,着色器代码会被执行,Stage3D API允许ActionScript代码和着色器程序间的数据流通。

着色器运行起来是非常快的,这并不是在说ActionScipt慢。但是当你运行ActionScript时,因为它是在一个虚拟机里运行的,所以比起原生语言比如C++来说要慢些。所以现在需要3A级游戏都还在用C++编写。

有史以来第一次,你可以编写一个对于GPU来说原生的程序,所以它们运行起来跟原生的速度一样快。

理解着色器在可编程图形管道中如何工作

可编程图形管道决定Stage3D内容如何渲染(见图1)

图1 可编程图形管道单元示意图

回顾一下上面的图表,注意顶点和片段着色器是如何在管道中起决定性作用的。

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

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

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

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

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

顶点着色器原理

顶点着色器是在GPU上运行的小程序。顾名思义,顶点着色器是用来处理顶点数据的。一个顶点着色器就是一个处理顶点的小程序(老外说话真的很啰嗦!)

一 般来说,可以将几何图形顶点数据放在VertexBuffer中,然后将其上传至GPU。然后,可以用一种着色器语言:例如AGAL来编写一个顶点着色 器。顶点着色器程序将处理VertextBuffer中的每一个顶点,这就好像在着色器周围使用了一个for循环,但实际上你根本看不到这个for循环, 如下:

  1. for (var i:int = 0; i <vertexBuffer.length; i++)
  2. {
  3. executeVertexShader(vertexBuffer);
  4. }

复制代码

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

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

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

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

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

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

片段着色器原理

 

就像顶点着色器一样,片段着色器也是运行在GPU上的小程序。顾名思义,用它来处理片段。它们负责输出每个三角形像素的最终颜色。

基本上来说,它是这样运行的:片段着色器将顶点着色器输出的片段作为输入,片段的顶点属性已被光栅化单元进行了插值处理。

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

  1. for (var i:int = 0; i <fragmentStream.length; i++)
  2. {
  3. executeFragmentShader(fragmentStream);
  4. }

复制代码

片段流之所以称之为未处理过的,是因为片段着色器还没有处理它,并计算出在屏幕上显示的像素的颜色。

片段着色器是可编程管道中的最最核心的部分。其普遍的作用就是计算各种各样的三角形像素颜色,从为着色顶点图形(vertex-colored geometries)计算的顶点属性颜色,和为纹理图形为计算的纹理及相关的UV纹理坐标。

但 是顶点着色器的功能远非制造这些简单的效果。实际上,现代3D游戏中令人惊叹的3D特效都是用片段着色器来生成的。例如,动态光源效果通常都是由片段着色 器完成。思考一下就会明白,动态光源意味着根据场景中已有的光源计算像素颜色,这与几何图形的位置、材料都有很大的关系,所以片段着色器是制作动态光源效 果的不二之选。

像水体环境映射之类的反射特效也都是由片段着色器完成的。片段着色器能生成世界上几乎所有的光影特效,以上提及的只不过是它的冰山一角。

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

下一步该看哪些内容

 

在本教程中,你已经学到顶点着色器和片段着色器是如何工作的。这两个着色器是Stage3DAPI渲染管道中的核心。着色器可以生成各种各样的3D视觉特效。着色器相关的在线技术文章有很多。本系列的下一个教程将学习AGAL着色器语言。

想要深入着色器的更多细节,我推荐nVidia出版的“GPU Gems”,此书已经免费。其内容并不针对Flash和Stage3D,但是会有助于了解着色器生成特效的相关知识。

GPU Gems: Part I -Natural Effects

GPU Gems2: Part I – Geometric Complexity

GPU Gems 3

作者:Marco Scabia

原文链接:http://www.adobe.com/devnet/flashplayer/articles/vertex-fragment-shaders.html

时间: 2024-10-11 10:55:46

顶点着色器和片断着色器的相关文章

OpenGL ES着色器语言之着色概览(官方文档)

OpenGL ES着色器语言之着色概览(官方文档第二章) 事实上,OpenGL ES着色语言是两种紧密关联的语言.这些语言用来在OpenGL ES处理管线的可编程处理器创建着色器. 在本文档中,除非另外说明,一个语言功能适用于所有语言,并且通用用法将把他们当做一个语言来看待.特定语言将指出它们的目标处理器:顶点(vertext)或片元(fragment). 任何被着色器使用的OpenGL ES状态值都会自动地被跟踪并且作用于着色器上.这个自动状态跟踪机制允许应用程序为状态管理而使用OpenGL

OpenCV:基于MFC的视频播放器和图片读取器

实例工程包下载[OpenCV:基于MFC的视频播放器和图片读取器] 一.实现的功能 1.打开本地视频进行读取.播放.暂停.停止控制 2.图片打开功能分为两种:可使用"打开图片"按钮打开本地图片,或者点击comobox里面设定的图片列表选择并显示图片 二.编译环境 OS:Win8.1 x64 IDE:  Visual Studio 2013 OpenCV: 2.4.8 三.主要思路 1.视频的滑动条控制: ①主窗体的OnHScroll()响应函数负责响应slider滑动条的变化,这样就轻

struts2内置拦截器和自定义拦截器详解(附源码)

一.Struts2内置拦截器 Struts2中内置类许多的拦截器,它们提供了许多Struts2的核心功能和可选的高级特 性.这些内置的拦截器在struts-default.xml中配置.只有配置了拦截器,拦截器才可以正常的工作和运行.Struts 2已经为您提供丰富多样的,功能齐全的拦截器实现.大家可以至struts2的jar包内的struts-default.xml查看关于默认的拦截器与 拦截器链的配置.内置拦截器虽然在struts2中都定义了,但是并不是都起作用的.因为并不是所有拦截器都被加

C编译器、链接器、加载器详解

摘自http://blog.csdn.net/zzxian/article/details/16820035 C编译器.链接器.加载器详解 一.概述 C语言的编译链接过程要把我们编写的一个c程序(源代码)转换成可以在硬件上运行的程序(可执行代码),需要进行编译和链接.编译就是把文本形式源代码翻译为机器语言形式的目标文件的过程.链接是把目标文件.操作系统的启动代码和用到的库文件进行组织形成最终生成可加载.可执行代码的过程. 过程图解如下: 预处理器:将.c 文件转化成 .i文件,使用的gcc命令是

流之阅读器和书写器(过滤器阅读器和过滤器书写器)

InputStreamReader和OutputStreamWriter类就是相当于输入和输出流之上的装饰器,把面向字节的接口改为面向字符的接口.完成之后,就可以在它们之上使用面向字符的过滤器阅读器或过滤器书写器.与过滤器流一样,有很多子类可以完成特定的过滤工作,包括: BufferedReader BufferedWriter LineNumberReader PushbackReader PrintWriter BufferedReader和BufferedWriter类是基于字符的,对应于

jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器

最近在论坛中看到了很多实用html5开发视频播放,音乐播放的功能,大部分都在寻找答案.因此我就在这里做一个demo,供大家相互学习.html5开发越来越流行了,而对于视频这一块也是必不可少的一部分.如何让你的网站占据优势,就要看你的功能和用户体验了.html5对video还是做了很多优惠的东西,我们使用起来很得心应手. 在过去 flash 是网页上最好的解决视频的方法,截至到目前还算是主流,像那些优酷之类的视频网站.虾米那样的在线音乐网站,仍然使用 flash 来提供播放服务.但是这种状况将会随

python爬虫主要就是五个模块:爬虫启动入口模块,URL管理器存放已经爬虫的URL和待爬虫URL列表,html下载器,html解析器,html输出器 同时可以掌握到urllib2的使用、bs4(BeautifulSoup)页面解析器、re正则表达式、urlparse、python基础知识回顾(set集合操作)等相关内容。

本次python爬虫百步百科,里面详细分析了爬虫的步骤,对每一步代码都有详细的注释说明,可通过本案例掌握python爬虫的特点: 1.爬虫调度入口(crawler_main.py) # coding:utf-8from com.wenhy.crawler_baidu_baike import url_manager, html_downloader, html_parser, html_outputer print "爬虫百度百科调度入口" # 创建爬虫类class SpiderMai

Java类载入器(一)——类载入器层次与模型

类载入器 ??虚拟机设计团队把类载入阶段中的"通过一个类的全限定名来获取描写叙述此类的二进制字节流"这个动作放到Java虚拟机外部去实现.以便让应用程序自己决定怎样去获取所须要的类.实现这个动作的代码模块称为"类载入器". 类载入器层次(等级) ??从JVM的角度来讲,仅仅存在两种不同的类载入器. ??第一类是启动类载入器(Bootstrap ClassLoader):这个类载入器主要载入JVM自身工作须要的类.这个类载入器由C++语言实现(特指HotSpot).是

python 之装饰器(用装饰器给现有函数增加新功能)

#!/usr/bin/env python # -*- coding: utf-8 -*- """ Created on Mon Nov 14 01:01:29 2016 @author: toby """ #知识点:装饰器 ''' #一.小粒子: #要求1.假如产品经历要求在每个函数之上执行之前都添加一个验证的功能,当然这里只是模拟而已,别当真哈! #已写好的现有函数如下,有1000个函数 def func1():     print 'fun