WebGL部分
第十节 HTML5 Canvas
10.1 HTML-5 Canvas简介
HTML-5 Canvas提供了一个简单而强大的选项来使用 JavaScript 绘制图形。它可以用来绘制图形，使照片组合，或做简单的(和不那么简单的)动画。
这是一个简单的
HTML画布
运行结果如图10.1所示
图10.1
10.2 Context (渲染)
canvas元素有一个DOM方法是 getContext()，它被用来获取呈现上下文和它的绘图功能。这个方法有一个参数，上下文2D类型。
下面的代码将被写入，以获得必要的上下文。可以将此脚本写在body标签内。
var canvas = document.getElementById('mycanvas'); var context = canvas.getContext('2d');
context.font = '20pt Calibri';
context.fillStyle = 'green';
context.fillText('Welcome to 长庚楼505', 100); 【运行结果】
图10.2
10.3 WebGL Context
HTML5画布(Canvas)也用于写WebGL的应用程序。要创建canvas元素使用WebGL来渲染，应该可传递 experimental-webgl，WebGL，而不是2D到 canvas.getContext()方法。有些浏览器只支持“WebGL”。
【运行结果】
第十一节 WebGL着色器程序
我们通常使用三角形来构建网格。因为WebGL使用GPU加速计算，有关这些三角形中的信息一般从CPU传送到GPU，这需要大量的通信开销。WebGL提供了一个解决方案以降低通信开销。由于它使用ES SL(嵌入式系统着色语言)在GPU上运行，我们编写所有程序需要使用着色器程序的客户端系统上的图形元素(这是我们使用OpenGL ES着色语言/GLSL来写程序)。这些着色器是GPU和用于编写着色器程序的程序语言是GLSL。在这些着色器，我们定义确切的顶点，转换，材质，光源，和摄像机使用彼此交互以创建具体图像。
总之，这是一个实现的算法来获得像素一个网状片段。在后面的章节我们将讨论更多关于着色器。有两种类型的着色器- 顶点着色器和片段着色器。
1、顶点着色器是所谓的在每个顶点的程序代码。它被用于转化(移动)的几何形状(例如：三角形)从一个地方到另一个地方。它处理每个顶点的数据(每个顶点的数据)，例如顶点坐标，法线，色彩，和纹理坐标。在顶点着色器的ES GL代码，程序员必须定义的属性来处理数据。这些属性指向一个顶点缓冲区对象是用JavaScript编写的。
下面的任务可以使用顶点着色器来进行 ：
(1)顶点变换 (2)正常转化和正常化 (3)纹理坐标生成 (4)纹理坐标变换 (5)灯光/光线 (6)颜色材料应用
2、片段着色器(像素着色器)网状由多个三角形形成，并且每一个三角形的表面被称为一个片段 片段着色器是对每一个片段的所有像素上运行的代码。这是写计算以填补单个像素的颜色。
下面的任务可以使用片段着色器来进行：
(1) 插值操作 (2) 纹理访问 (3) 纹理应用 (4) 灰蒙/雾 (5) 颜色总和 3、OpenGL ES SL 变量
OpenGL ES的SL完整形式是 OpenGL 的嵌入式系统着色语言。为了处理着色器程序中的数据，(1)属性? 这些变量保存顶点着色器程序的输入值。属性指向包含每个顶点数据的顶点缓冲对象。顶点着色器被调用的时候，这个属性指向不同的顶点的VBO。
(2)制服? 这些变量存储输入数据，很常见为顶点和片段着色器，例如光位置，纹理坐标和颜色。 ES SL提供了三种类型的变量。
(3)变动充填? 这些变量用来从顶点着色到片段着色器传递数据。有了这么多的基础知识，现在我们将继续前进，讨论图形管线。
第十二节 WebGL图形管线
WebGL图形流水线
图12.1 WebGL图形流水线
12.1 JavaScript
在开发WebGL应用程序时，我们需要写Shader语言代码与GPU进行沟通。使用JavaScript编写的程序，其中包括以下操作的控制代码：
(1)初始化WebGL ? JavaScript是用于初始化WebGL的上下文。 (2)创建数组 ? 我们创建JavaScript数组来保存几何数据。
(3)缓冲区对象 ? 通过将数组作为参数来创建缓冲区对象(顶点和索引)。 (4)属性? 我们可以创建属性，启用它们并使用JavaScript缓冲区对象相关联。 (5)制服? 我们还可以使用 JavaScript 制服(uniforms)关联。 (6)变换矩阵 ? 使用JavaScript，我们可以创建变换矩阵。
最初我们创建几何形状所需的数据和它们传递到着色器中缓冲器的形式。着色器语言指向缓冲区对象，这作为输入传递给顶点着色器的属性变量。 12.2 顶点着色器
当我们通过调用方法drawElements()和drawArray()启动渲染过程中，顶点着色器提供的每个顶点执行在顶点缓冲区对象。它计算原始多边形各顶点的位置并且存储在不同的 gl_position。 它还计算的其他属性，例如颜色，纹理坐标，以及顶点，这通常与顶点相关联。
原始汇编，计算位置及每个顶点的其他细节之后，下一阶段是原始装配阶段。这里三角形被组装
并传送给光栅化程序。
光栅化，在光栅化步骤，原始的最终图像的像素被确定。它有两个步骤 -
(1)剔除? 最初的取向(是其正面或背面朝向？)多边形被确定。所有这些三角形使用不当取向不可见在观看区域被丢弃。这个过程被称为剔除。
(2)剪裁 ? 如果一个三角形部分在观看区域之外，则视图区域之外的部分被去除。这个过程被称为剪裁。 12.3 片段着色器
片段着色器获取从顶点着色器不同变量的数据，从光栅化阶段元语，然后计算颜色值顶点之间每一个象素。片段着色器存储在每个片段的每一个像素的颜色值。这些颜色值可以在片段操作进行访问。 一些片段操作确定在所述原始的每个像素的颜色后进行。这些片段操作可以包括以下：
(1)深度
(2)颜色缓冲区混合 (3)抖色
一旦所有的片段进行处理，2D图像形成并显示在屏幕上。帧缓冲器是渲染管线的最终目的地。帧缓冲区的图形内存持有的场景数据的一部分。这个缓冲区包含细节如宽度和表面的高度(以像素为单位)，每个像素的颜色，深度和模版缓冲器。
第十三节 WebGL应用程序
WebGL应用程序代码是JavaScript和OpenGL着色语言的组合。JavaScript是需要与CPU进行沟通。OpenGL着色语言，需要与GPU通信。
使用WebGL绘制图形遵循五个序列步骤。这些步骤的解释如下：
(1)准备画布，并得到WebGL的渲染上下文我们得到当前HTML Canvas对象并获取WebGL渲染环境。
(2)定义几何并将其存储在缓冲器的对象
我们定义几何的如顶点，索引，颜色等的属性，并把它们存储在 JavaScrip t数组。然后，我们创建一个或多个缓冲器的对象和传递包含数据到相应的缓冲对象的阵列。在这个例子中，我们存储一个三角形的顶点在JavaScript数组中，并传递这个数组到一个顶点缓冲区对象。
(3)创建和编译着色器程序
我们写的顶点着色器和片段着色器程序，编译它们，并通过连接这两个程序将创建一个合并成程序。
(4) 关联缓冲区对象和着色器程序 我们关联缓冲器对象，并合并的着色器程序。
(5)绘制所需的对象(三角形)
此步骤包括操作如：清除颜色，清除缓冲比特，启用深度测试，设置视图端口等。最后，使用其中一个方法所需要的原语来绘制 ? drawArrays() 或 drawElements()。
绘制结果如下图13.1所示
三维可视化技术实验报告-WebGL部分
