WebGL基础入门教程(一):第一个简单示例
1. 概述
不得不说现在三维图形渲染技术更新换代实在是太快,OpenGL很多资料还没来得及学习就已经有点落伍了。NeHe的学习教程还有之前用的《OpenGL编程指南》第七版(也就是红宝书)都非常好,可惜它们都是从固定管线开始讲起的;而现在可编程管线的技术已经是非常常见的基础技术了。后来我还看过《OpenGL编程指南》第八版(白皮书),这本教程是从可编程管线(着色器)开始讲起的,看的时候就觉得没有前面的基础打底,显得非常的晦涩,远不如红宝书易懂。羞愧的说,我已经多次入门失败了。
这也正是我写这篇教程的原因,希望从繁杂的资料中总结真正有用的知识(当然也希望能帮助到你)。我觉得WebGL是学习OpenGL系列三维图形渲染技术很好的入门点。WebGL是OpenGL的浏览器版本,基本上可以认为是OpenGL的子集,能被WebGL保留而不剔除的技术,必须是三维图形渲染技术的精华。在这里给大家强烈推荐《WebGL编程指南》这本书,我这篇教程正是在这本书的基础之上总结出来的。
在学习OpenGL/WebGL的时候,我还感觉到很多资料举得例子往往都太简单了,确实是一看就懂,但是在实际遇到的问题的时候却往往解决不了。我还是认为在实际中解决问题,更能加深对知识的理解。正好最近我在研究GIS中地形的绘制,那么我就通过一步一步绘制地形的示例,来总结WebGL的相关知识。如果你不懂GIS这些术语也不要紧,只需要知道我这里的最终目的是想绘制的是一个大地高程模型,是一个包含XYZ坐标的点集,表达了地形的情况。
2. 示例:绘制一个点
编写WebGL程序跟编写Web前端程序的步骤是一样的,包含HTML和JavaScript两个部分,通过浏览器进行调试。
1) HelloPoint1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Draw a point (1)</title>
</head>
<body onload="main()">
<canvas id="webgl" width="400" height="400">
Please use a browser that supports "canvas"
</canvas>
<script src="../lib/webgl-utils.js"></script>
<script src="../lib/webgl-debug.js"></script>
<script src="../lib/cuon-utils.js"></script>
<script src="HelloPoint1.js"></script>
</body>
</html>
这一段HTML非常简单,从实际表现上来说就是创建了一个画布<canvas>。<canvas>是HTML5引入的的一个绘制标签,可以在画布中绘制任意图形。WebGL正是通过<canvas>元素进行绘制的。
除此之外,这段代码还通过<script>标签引入了几个外部JS文件。其中lib目录中的几个JS文件是一些通用的组件(来自《WebGL编程指南》的源码),可以先暂时不用关心其具体实现;最后一个导入的HelloPoint1.js正是我们编写的绘制模块。而在<body>标签中定义的onload事件属性绑定的正是HelloPoint1.js中的main()函数。
2) HelloPoint1.js
// 顶点着色器程序
var VSHADER_SOURCE =
'void main() {/n' +
' gl_Position = vec4(0.0, 0.0, 0.0, 1.0);/n' + // Set the vertex coordinates of the point
' gl_PointSize = 10.0;/n' + // Set the point size
'}/n';
// 片元着色器程序
var FSHADER_SOURCE =
'void main() {/n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);/n' + // Set the point color
'}/n';
function main() {
// 获取 <canvas> 元素
var canvas = document.getElementById('webgl');
// 获取WebGL渲染上下文
var gl = getWebGLContext(canvas);
if (!gl) {
console.log('Failed to get the rendering context for WebGL');
return;
}
// 初始化着色器
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log('Failed to intialize shaders.');
return;
}
// 指定清空<canvas>的颜色
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// 清空<canvas>
gl.clear
(gl.COLOR_BUFFER_BIT);
// 绘制一个点
gl.drawArrays(gl.POINTS, 0, 1);
}
这段JS代码的主要内容就是前面提到的main函数,一旦HTML被浏览器加载成功,这段脚本就会执行。在main函数中主要有一下几步:
(1) 准备工作
document.getElementById(‘webgl’):文档对象模型DOM的函数,获取到HTML页面的<canvas>元素。
getWebGLContext(canvas):获取WebGL渲染上下文,保存在gl变量中。因为不同浏览器获取函数不太一样,所以通过组件cuon-utils提供的函数来统一行为。
(2) 着色器
initShaders:初始化着色器。
首先要知道什么是着色器。如果你只学习过固定管线或者其他的二维绘图组件(如GDI),就会非常困惑着色器是什么,为什么要用着色器。比如说在固定管线中,绘制点就是drawPoint,绘制线就drawLine。而在WebGL中,绘制工作则主要被分解成顶点着色器和片元着色器两个步骤了。
在启动JS程序后,绘制工作首先进入的是顶点着色器,在顶点着色器中描述顶点特性(如位置、颜色等),顶点就是三维空间的点,比如三角形的三个顶点;然后进入到片元着色器,在片元着色器中逐片元处理像素(如光照、阴影、遮挡)。最后片元传入到颜色缓冲区,进行显示。渲染过程如下:
这个过程是一个类似水流的流向过程,所以这个过程被称为渲染管线(Pipeline)。并且,这个过程是需要我们去编程控制的,比如观察者的视角变化需要在顶点着色器去调控;光线对颜色的变化需要在片元着色器去调控等;因此,这个过程就是可编程管线。通过着色器程序,三维图像渲染就更加的灵活强大。
在initShaders()函数中,传入了预先定义的JS字符串VSHADER_SOURCE和FSHADER_SOURCE。需要说明是,着色器程序是以字符串的形式嵌入到JS文件中运行的。这个函数同样是cuon-utils组件提供的,调用之后就告诉WebGL系统着色器已经建立好了并可以随时使用。
(3) 顶点着色器
顶点着色器的定义如下:
// 顶点着色器程序
var VSHADER_SOURCE =
'void main() {/n' +
' gl_Position = vec4(0.0, 0.0, 0.0, 1.0);/n' + // Set the vertex coordinates of the point
' gl_PointSize = 10.0;/n' + // Set the point size
'}/n';
前面说到顶点着色器程序是嵌入在JS中的程序,所以虽然传入的是字符串,但其实本质是着色器描述语言(GLSL:OpenGL Shading Language)。既然是语言也就有自己的函数与变量定义。main()函数是每个着色器程序定义的入口。在main函数中,将顶点的坐标赋值给内置变量gl_Position,点的尺寸赋值给内置变量gl_PointSize。
注意这里的gl_Position是必须赋值的,否则着色器不会正常工作。赋值的类型是vec4,也就是一个四维矢量。一般来说,描述点位只需要三维矢量就可以了,但是很多情况下需要四个分量的齐次坐标。齐次坐标(x,y,z,w)等价于三维坐标(x/w,y/w,z/w)。所以如果第四个分量是1,那么就是普通的三维坐标;如果第四分量为0,就表示无穷远的点。
(4) 片元着色器
片元着色器的定义如下:
// 片元着色器程序
var FSHADER_SOURCE =
'void main() {/n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);/n' + // Set the point color
'}/n';
如同顶点着色器一样,片元着色器将点的颜色赋值给gl_FragColor变量,gl_FragColor是片元着色器唯一的内置变量,控制像素在屏幕上的最终颜色。
(5) 清空缓冲区
gl.clearColor():设置清空的背景色。
gl.clear(gl.COLOR_BUFFER_BIT): 清空颜色缓冲区。
(6) 绘制操作
gl.drawArrays(gl.POINTS, 0, 1):绘制一个点。
顶点着色器只是指定了绘制的顶点,还需要指定顶点到底成点、成线还是成面,gl.drawArrays()就是这样一个函数,这里告诉WebGL系统应该绘制一个点。
3. 结果
最终的运行结果很简单,在Chrome打开HelloPoint1.html,页面显示了一个绘制一个点的窗口:
4. 参考
本来部分代码和插图来自《WebGL编程指南》。
WEBGL学习网 » WebGL基础入门教程(一):第一个简单示例