如何使用HTML5和webgl在网页上绘制一个点

原创
|
浏览：835
|
更新：2016-11-18 00:06

HTML5作为最新的HTML标准，扩展了传统HTML的特性，如二维图形、网络传输、本地数据存储等。HTML5时代的到来使浏览器正在迅速地从简单的展示工具转变为更复杂的应用平台，人们希望网页不仅仅由二维图形组成。WebGL被设计出来的目的，就是在网页上创建三维的应用和用户体验。下面将接受webgl的一个简单示例，带领初学者进入webgl世界。

工具/原料

JavaScript开发工具，可用webstorm，也可用其他的
支持html5的浏览器，如火狐浏览器

方法/步骤

1
首先，介绍一下webgl的程序结构。在HTML中，动态网页包括HTML和JavaScript两种语言。引入webgl后，还需要加入着色器语言GLSL ES，也就是说，webgl包含了三种语言：HTML5、JavaScript和GLSL ES。然而，因为通常GLSL ES是（以字符串的形式）在JavaScript中编写的，实际上webgl程序也只需用到HTML文件和JavaScript文件。
2
下面将展示如何在页面上绘制一个点，以介绍webgl的使用。绘制的程序流程如图所示。后面会详细解释每一步的具体实现。
3
在编写js代码之前需要导入需要的引用js文件，类似于库文件，直接使用。参考资料中会给出库文件的下载地址。完整的代码如图所示。
4
字符变量VSHADER_SRC和FSHADER_SRC是上面提到的GLSL ES语言，其中VSHADER_SRC代表顶点着色器，用来设置点的位置和大小等信息；FSHADER_SRC是片元着色器用来设置点显示的颜色。字符串中的语句会传给webgl系统，进行绘制。
5
页面加载后会触发onload事件，继而调用main()函数。main函数的第一行，即是获得canvas对象。
6
将得到的canvas对象作为参数传入getWebGLContext中，该函数返回值为用于绘制点的对象。
7
然后，初始化顶点着色器和片元着色器，设置背景色、清空颜色缓存并调用绘制函数。其中，绘制函数gl.drawArrays(gl.POINTS,0,1)，第一个参数为绘制的类型，第二个参数为绘制的起点，第三个参数为绘制点的个数。
8
运行查看绘制效果，如图所示。
END
8
相关内容未经授权抓取自百度经验