基于WebGL的3D技术在网页中的运用

基于WebGL的3D技术在网页中的运用

作者：荣艳冬

来源：《信息安全与技术》2015年第08期

【摘要】 WebGL为3D网页制作技术提出了很好的解决方案。文中首先分析了网页3D 技术的发展趋势，以及当前网页所运用3D技术存在的问题，然后分析了WebGL技术的优势、实现过程和存在的问题，最后详细论述了three.js图形引擎库实现网页中3D图形绘制流程、实现过程和3D动画实现方法，从而给出了跨平台和高效的3D网页制作方法。

【关键词】 WebGL；3D；网页；three.js

The Application of 3D Technique Base on WebGL in the Web

Rong Yan-dong

（Inner Mongolia Business and Trade Vocational College Inner Mongolia Hohhot 010070）

【 Abstract 】 WebGL proposed a good solution for the 3D web production technology. This paper first analyzes the development trend of 3D Web technology， and the existing problems of 3D technology in the current web. Then， the advantages， the process and the problems of the WebGL technology are analyzed. At last， the paper discusses the 3D graphics rendering process，realization process and realization method of 3D animation by three.js graphics engine database， and it gives the cross platform and efficient method of 3D web making.

【 Keywords 】 webgl；3d；web；three.js

1 引言

随着互联网技术不断的发展，网页制作技术起到的作用越来越重要，这个作用不单纯体现在PC端，移动终端网页技术也被使用的越来越普遍，但是网页3D技术并没有被广泛的使用，更多的图形和动画是通过2D的方式实现，用户对于3D网页技术的需求越来越强烈，例如3D商品展示、3D网页游戏、3D巡游动画等被运用的越来越多。随着HTML5规范不断地成熟，WebGL给出了更加合理的3D网页动画技术解决方案。本文主要讨论这项技术的特点和优势，以及如何利用这项技术完成网页3D图形和动画。

2 当前3D网站技术分析

3D技术的优势非常明显，它可以使用户更加直观的浏览所需内容，有身临其境的感觉。网页设计与制作人员一直尝试通过各种技术实现3D网页，其中包括“Flash3D”、“Java3D”、

“Unity3D”、“CopperCube”和“Sliverlight”等。这些技术存在几个问题：一是这些技术都需要安装特定的插件，插件的安装影响网页的稳定性和跨平台性，尤其限制了在移动终端网页中的应用；二是很多技术只针对特定行业，通用性不强，例如Unity3D只适合游戏的开发；三是技术实现困难，制作效率低下，开发成本高。

3 基于WebGL的3D网页技术分析

WebGL是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，WebGL可以为HTML5的 Canvas标签提供硬件3D加速渲染，这样Web开发人员可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型。

WebGL解决了现有的Web交互式三维动画的两个问题：第一，在无需安装浏览器插件的情况下，通过Javascript脚本语言实现Web交互式三维图形绘制和动画制作；第二，通过统一的、标准的、跨平台的OpenGL接口实现利用底层的图形硬件加速功能进行的图形渲染。利用WebGL进行绘图的流程如图1所示。

（1）画布创建。画布创建的目的是为3D图形绘制提供容器，可以选择HTML5提供的canvas标签作为画布，也可以选择其他容器。

（2）初始化WebGL上下文。如果在canvas上绘图，需要获得canvas上下文，在WebGL 规范中可以通过getContext（"experimental-webgl"）来获取 WebGLRenderingContext上下文对象，以后可以利用这个对象进行图形绘制。

（3）构建顶点数组。形状在 WebGL 中被称为网格，通过描述顶点数组中的一组三角形进行构建。除此之外，顶点数组还可以被用来表述颜色等。定义好的顶点数组被绑定在WebGL缓冲区，以供着色器使用。

（4）定义矩阵。定义矩阵的目的是能够实现模型大小、位移、旋转等操作。

（5）创建着色器。着色器包括顶点着色器和片元着色器两种，着色器程序将它们及其数据组合在一起。然后，启用程序并链接到 GPU，这个运算过程就交由显卡来处理，从而提高场景创建的运算速度。

（6）绘制图元。将渲染后着色器显示在画布之上。

4 3D图形引擎库

通过以上内容可以发现，如果使用原生WebGL 进行3D网页制作，其过程非常的繁琐，开发难度很多，这会严重影响WebGL的开发效率，由于WebGL直接使用Javascript脚本语言开发，所以很多机构将WebGL封装为3D图形引擎库，例如“three.js“、“scenceJS”、“Oak3D”

和“sim.js”等，这些引擎库能够让用户更加方便地进行3D图形绘制和动画的制作，本文重点讨论如何利用“three.js”引擎库实现网页3D图形和动画。

4.1 three.js绘制3D图形

three.js是基于WebGL的3D Javascript库，它封装了场景、相机、几何、3D模型加载器、灯光、材质、着色器、动画、粒子、数学工具等。这样的封装让用户能够更加直观的在网页中制作3D图形和动画。利用three.js绘图的流程如图2所示。

在three.js中场景、相机和渲染器是3D图形绘制的基础：场景是所有对象放置和展示的平台；相机决定图形展示的角度；渲染器决定了渲染的结果应该画在页面的什么元素上面，并且以怎样的方式来绘制。以下代码给出了图形绘制的具体过程，如果3D模型很复杂，可以在专门的3D绘图软件中进行绘制，然后由three.js加载图形：

//创建场景

var scene = new THREE.Scene（）；

//创建相机

var camera = new THREE.PerspectiveCamera（75，window.innerWidth/window.innerHeight，0.1，1000 ）；

//创建渲染器

var renderer = new THREE.WebGLRenderer（）；

renderer.setSize（ window.innerWidth， window.innerHeight ）；

document.body.appendChild（ renderer.domElement ）；

//绘制立方体

var geometry = new THREE.BoxGeometry（ 1， 1， 1 ）；

//给立方体贴材质

var material = new THREE.MeshBasicMaterial（ { color： 0x00ff00 } ）；

var cube = new THREE.Mesh（ geometry， material ）；