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简易教程(六)：第一个三维示例(使用模型视图投影变换)
目录 1. 概述 2. 示例:绘制多个三角形 2.1. Triangle_MVPMatrix.html 2.2. Triangle_MVPMatrix.js 2.2.1. 数据加入Z值 2.2.2. ...
- WebGL简易教程(二)：向着色器传输数据
目录 1. 概述 2. 示例:绘制一个点(改进版) 1) attribute变量 2) uniform变量 3) varying变量 3. 结果 4. 参考 1. 概述 在上一篇教程<WebGL ...
- WebGL简易教程(三)：绘制一个三角形(缓冲区对象)
目录 1. 概述 2. 示例:绘制三角形 1) HelloTriangle.html 2) HelloTriangle.js 3) 缓冲区对象 (1) 创建缓冲区对象(gl.createBuffer( ...
- WebGL简易教程(七)：绘制一个矩形体
目录 1. 概述 2. 示例 2.1. 顶点索引绘制 2.2. MVP矩阵设置 2.2.1. 模型矩阵 2.2.2. 投影矩阵 2.2.3. 视图矩阵 2.2.4. MVP矩阵 3. 结果 4. 参考 ...
- WebGL简易教程(十三)：帧缓存对象(离屏渲染)
目录 1. 概述 2. 示例 2.1. 着色器部分 2.2. 初始化/准备工作 2.2.1. 着色器切换 2.2.2. 帧缓冲区 2.3. 绘制函数 2.3.1. 初始化顶点数组 2.3.2. 传递非 ...
- WebGL简易教程——目录
目录 1. 绪论 2. 目录 3. 资源 1. 绪论 最近研究WebGL,看了<WebGL编程指南>这本书,结合自己的专业知识写的一系列教程.之前在看OpenGL/WebGL的时候总是感觉 ...
- WebGL简易教程(四)：颜色
目录 1. 概述 2. 示例:绘制三角形 1) 数据的组织 2) varying变量 3. 结果 4. 理解 1) 图形装配和光栅化 2) 内插过程 5. 参考 1. 概述 在上一篇教程<Web ...
- WebGL简易教程(九)：综合实例：地形的绘制
目录 1. 概述 2. 实例 2.1. TerrainViewer.html 2.2. TerrainViewer.js 3. 结果 4. 参考 1. 概述 在上一篇教程<WebGL简易教程(八 ...
- WebGL简易教程(十四)：阴影
目录 1. 概述 2. 示例 2.1. 着色器部分 2.1.1. 帧缓存着色器 2.1.2. 颜色缓存着色器 2.2. 绘制部分 2.2.1. 整体结构 2.2.2. 具体改动 3. 结果 4. 参考 ...
- WebGL简易教程(十一)：纹理
目录 1. 概述 2. 实例 2.1. 准备纹理 2.2. 配置纹理 2.3. 使用纹理 3. 结果 4. 参考 1. 概述 在之前的之前的教程<WebGL简易教程(九):综合实例:地形的绘制& ...
随机推荐
- flask模板语言 jinja2 以及render_template 深度用法
是时候开始写个前端了,Flask中默认的模板语言是Jinja2 现在我们来一步一步的学习一下 Jinja2 捎带手把 render_template 中留下的疑问解决一下 首先我们要在后端定义几个字符 ...
- scrapy实战3利用fiddler对手机app进行抓包爬虫图片下载（重写ImagesPipeline）：
关于fiddler的使用方法参考(http://jingyan.baidu.com/article/03b2f78c7b6bb05ea237aed2.html) 本案例爬取斗鱼 app 先利用fidd ...
- MySQL login-path 本地快捷登陆
目录 1.什么是 login-path 2. 配置 login-path 2.2.配置: 2.3.显示配置: 2.3.1.显示执行的login-path配置 2.3.2.显示所有的login-path ...
- 构建工具--glup如何压缩,丑化代码
目录 为什么使用 实现 为什么使用 最近在迭代公司的项目,发现项目有如下缺点: 代码没有压缩,js文件,内存大,放在服务器上占空间: 源代码没有混淆或者丑化处理,本公司的程序员写出来的代码和高质量逻辑 ...
- JavaScript控制语句结构、函数部分
HTML页面代码: <html> <head> <meta charset="UTF-8"> <title>HelloWorld&l ...
- Go语言解密上篇中用java aes实现的加密
上一篇java aes文件加解密中加密的梅须逊雪三分白,雪却输梅一段香.使用go语言解密. 解密代码如下: AESUtil.go package util import ( "crypto/ ...
- 如何入门 MySQL
如何入门MySQL 前言: 关于如何入门MySQL,后台有好多同学咨询我,可能部分读者刚开始学习MySQL,我前面发的文章对部分同学来说暂时接触不到.原本写技术文章的目的是记录自己的工作学习,没有考虑 ...
- golang http json http://www.alexedwards.net/blog/golang-response-snippets
http://www.alexedwards.net/blog/golang-response-snippets https://gist.github.com/andreagrandi/97263a ...
- UVA1103 古代象形符号 Ancient Messages 题解
题目链接: https://www.luogu.org/problemnew/show/UVA1103 题目分析: 我们可以先进行矩阵的还原 for(int k=1;k<=4;k++) { a[ ...
- [leetcode] 621. Task Scheduler(medium)
原题 思路: 按频率最大的字母来分块,频率最大的字母个数-1为分成的块数,每一块个数为n+1 比如AAABBCE,n=2, 则分为A-A- +A AAABBBCCEE,n=2,则分为AB-AB- +A ...