WebGL原理介绍.pdfVIP

WebGL Fundamentals Author: zhangjun_dg@mail.dlut.edu.cn Date: 2017-01-02 China.DaLian WebGL 通常被认为是一个3D API.人们认为：使用WebGL 就可以得到炫酷的三维模型. 而 事实上,WebGL 只是一个渲染引擎.它基于你提供的代码来绘制点、线以及三角形.通过WebGL 做其他任何事情都需要由你提供代码,使用点、线、三角形来达到你的目的. WebGL 运行在电脑的GPU 上.因此,你需要提供能在GPU 上执行的代码.而且这段代码必 须以一对函数的形式来提供.这两个函数分别称为顶点着色器和片元着色器,且必须使用一 种称为GLSL(GL 着色器语言)的类C/C++语言来编写.二者一起被称为一个program. 顶点着色器的任务是计算顶点位置.基于顶点位置,WebGL 可以对点、线、三角形等基本 元素进行光栅化. 当对这些基本元素进行光栅化时WebGL 将调用片元着色器.片元着色器的 任务是为当前需要绘制的基本元素中的每个像素计算颜色. 几乎所有的WebGL API 都是在对上述两个函数的执行环境进行设置.对于每一个你想要 绘制的东西,你都需要先设置一组状态参数,然后调用 gl.drawArrays 或 gl.drawElements, 它们会在GPU 上执行你所编写的顶点着色器和片元着色器. 两个函数所需要的所有数据你都必须提供给 GPU。可以通过以下四种方式为着色器提供数 据: 1.Attributes 和 Buffers Buffers 是一组二进制数据.尽管你可以向其中存储任何数据,但通常Buffers 用来存储 Positions(顶点坐标)、normals(法线)、texture coordinates(纹理坐标)、vertex colors(顶点颜色)等. Attributes 用来指定如何从buffers 中获取数据并提供给顶点着色器.例如你可能将所 有的位置坐标都存储在一个buffer 中,并且每三个32位的浮点数表示一个坐标.此时你 需要告诉一个特定的attribut 应该从哪个 buffer 中去取得坐标数据、数据的类型(3 个32 位的浮点数)、从buffer 中的哪个位置(offset)开始读取数据、以及从一个坐标 到下一个坐标需要读取多少字节. Buffers (缓冲区对象)中的数据并非随时都可以读取.定点着色器每隔一定时间执行一 次.每执行一次,attribute 都从指定的buffers 中读取一组数据. 2.Uniforms Uniforms 实际上是在着色器程序执行前设置的一些全局变量. 3.Textures Textures 是着色器可以随时读取的一组数据.Textures 通常用来存储图像数据(image data),但也可以用来存储除颜色之外的一些其他数据. 4.Varyings Varyings 使得顶点着色器可以向片元着色器传递数据.根据当前被渲染的对象是点、线 或是三角形,片元着色器将对顶点着色器转给你设置的varying 数据进行插值. WebGL Hello World WebGL 只关心两眼东西:齐次坐标和颜色.作为一个使用WebGL 的程序员,你需要做的就 是为 WebGL 提供这两样的东西.而你需要通过提供前述两种着色器来实现这一目的.顶点着 色器用于提供齐次坐标,而片元着色器用于提供颜色. 无论你所取的canvas 的尺寸有多大,齐次坐标的值的取值范围通常都是从-1 到1.下面是一 个简单的WebGL 示例程序. 首先从顶点着色器开始: 注:gl_Position 是内置在顶点着色器中的,用来表示顶点的位置;顶点着色器中还有一个内 置变量:gl_PointSize 用来表示点的尺寸.其中gl_Position必须被赋值,否则着色器无法正 常工作,而gl_PointSize 不是必须的,如果不赋值,着色器默认将其取为1.0. 然后我们还需要一个片元着色器: 注:上边我们把gl_FragColor 设为(1, 0, 0.5, 1)，采用的是RGBA 格式,其中1 为红色的成 分,0 为绿色的成分,0.5 为蓝色的成分,最后一个 1 表示透明度alpha 的值.WebGL 中颜色的