WebGL学习笔记（一）

内容简介：WebGL学习笔记（一）

作者：朱金灿

（一） WebGL 是什么？

WebGL 是一门在网页上显示三维图形的技术，你可以把它理解为把 OpenGL 从 C/S 端搬到了 B/S 端。因此它也就继承了 OpenGL 的跨平台的优势，同时它是以 js 程序的形式表现出来的，因此比起 OpenGL 程序多了一个优势：一次编写的代码满足目前所有的设备，包括 PC 、平板和手机。同时 WebGL 的底层渲染引擎其实是 OpenGL ，因此其程序逻辑和相关数据结构和 OpenGL 程序也高度类似。

WebGL 程序的结构由两部分组成： html 代码和 js 程序。 html 代码实际上只是充当一个容器的作用，在 html 容器里包裹 js 程序。 WebGL 程序实现三维图形绘制代码以及相关交互的代码实际上是放在 js 程序里。因此 js 程序才是 WebGL 程序的精髓所在。

（二）一个简单的 WebGL 程序

下面以一个简单的 WebGL 程序来具体说明 WebGL 程序的具体结构是怎么样的。首先介绍 WebGL 程序的开发工具。 WebGL 程序的开发工具可以很简单，简单到可以只是一个文本编辑工具，比如记事本或 NotePad++ 。不过我建议你使用专业的 js 程序开发工具，比如 Sublime Text ，它的样子是这样的：

WebGL学习笔记（一）

简单使用了一下它，发现它专业的地方在：以工程的形式来展示一个文件夹的代码（ js 程序一般没有工程文件，而是全部放在一个文件夹中，我曾尝试把一个文件夹作为一个工程导入到 Eclipse 中，半天没有成功）；有文档缩略图；可以调用浏览器打开 html 文件。

现在我们用 Sublime Text 新建一个 html 文件，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Draw a blue rectangle (canvas version)</title>
</head>
<body onload="main()"> 
<canvas id="example" width="400" height="400">
Please use a browser that support "canvas"
</canvas>
<script type="text/javascript" src="DrawRectangle.js"></script>
</body>
</html>

// DrawRectangle.js的代码如下：
function main()
{ 
   // 获取vancas
   var canvas = document.getElementById("example"); 
   if(!canvas)
  {
     console.log('Failed to retrive the <canvas> element');
     return;	
  }
  var ctx = canvas.getContext('2d'); // 获取二维设备上下文
  ctx.fillStyle = 'rgba(0,0,255,1.0)'; // 设置图形颜色
  ctx.fillRect(120,10,150,150); // 设置矩形的左上角坐标和宽高
}

效果图如下：

简单解释下上面的代码：

html 页面中需要嵌入一个 canvas ，这个 canvas 实现 WebGL 的绘图区域， html 页面还得指定加载页面后的 js 响应函数和对应的 js 源码文件。在 js 文件需要实现响应函数。绘图步骤是这样：首先获取 html 页面中的 canvas ，然后获取设备上下文，然后使用设备上下文进行绘制。