基于WebGL技术三维模型呈现研究

随着互联网技术的不断发展, Web信息技术研究核心逐渐转向Web3D的应用。近些年来, 在前端领域内HTML5的发展逐渐的趋向成熟, 在制作3D网站上WebGL扮演了愈加重要的角色, 使得在网页上呈现虚拟三维模型成为可能。

在生活中当我们计划去某些博物馆、停车场等一些地方, 我们有时想提前体验一下它们的大体的结构, 这时就需要一个网络上的展示互动平台, 借助于此平台用户可以在线观察展品虚拟模型的三维效果。为了将虚拟三维模型渲染出, 现在许多3D可视化图像制作软件对操作系统配置要求较高, 且实现过程中工程量大。

本文致力于研究一种开源化的3D引擎-Three.js, 它是采用JavaScript编写封装了WebGL一些功能的3D库, 编写少量的代码, 即可将三维模型渲染出来。

一、基于WebGL的3D绘图技术简要分析

(1) WebGL通过联合JavaScript与OpenGL ES 2.0, 在3D绘图技术中变的愈加标准, 其中OpenGL ES在制作三维图形时使用的功能接口是属于OpenGL的API子集, 许多嵌入式设施均是采用OpenGL ES来设计的, H5中绘图元素Canvas只能绘制一些2D图形, 为了让H5的Canvas元素对3D图形进行渲染, 这时可以增加一个JavaScript绑定到OpenGL ES 2.0中。从而使用系统显卡即可加速浏览器中3D网页的渲染。

(2) 当前Web三维动画存在交互上的两个问题:第一, 需要在浏览器端安装大量的插件才可对一些三维模型进行渲染;第二, 有些三维动画只能在指定的平台上才可运行, 不可跨平台;而WebGL很好的克服了以上两个局限性, 它是经过HTML脚本对三维动画渲染, 有着较好的兼容性, 且跨平台性较强。利用WebGL进行绘制3D图形可大致分为以下六个步骤:

(1) 创建画布。在进行绘制3D图形时首先我们的创建出一个图形容器, 以供用户在其中开展绘图操作, 一般用Canvas标签。

(2) 初始化WebGL的上下文。在创建完画布之后, 接下来就要在此画布基础之上运用一定的方法创建出上下文对象, 以后所有的绘图操作均在此对象中展开。

(3) 构建顶点数组。我们在下文中讲到的网格对象又称为顶点数组, 作为顶点数据存储在WebGL缓冲区, 以供着色器来做相应处理。

(4) 矩阵变换。通过对矩阵做出一定的运算处理, 从而实现矩阵对应的模型对象做出相应的变换。

(5) 着色器创建。启动程序将着色器连接到CPU, 通过操作构建顶点数组数据, 进而使得创建场景速度大大提升。

(6) 绘制出面元。将创建出的着色器在画布上渲染出来。

以上用WebGL直接进行3D图像的绘制虽然取得了良好的效果, 但在实现过程中需要编写大量的代码, 为了更加高效快捷地将3D图形渲染出来, 我们可以采用WebGL进行简化与封装形成的一个3D图形库Three.js, 它作为一个轻量级的前端框架, 运行在浏览器中, 用于绘制计算机3D图形图像, 对Web开发人员来说, 不须学习较为复杂的计算机3D图形学的操作, 通过调用相应的Three.js一些API接口就可完成3D场景的渲染。

二、基于Three.js虚拟三维模型的展示

(1) Three.js创建三维模型对象是基于网页端形式来实现的, 能够以三维形式在网页上渲染并展示给用户, 它封装了场景、摄像机、加载器、光源、材质、渲染器、网格、粒子等。从而使得用户更加简单、直观地在网页中呈现三维图形。通过Three.js完成3D模型的渲染并呈现, 大致分为以下几步:

(1) 三维场景的创建。该场景为一个对象数组, Three.js中所有的对象, 包括摄像机、网格、渲染器等对象, 均保存到此数组中。

(2) 设置相机。Three.js场景中相机决定了图形展示的角度, 其中透视投影相机将每个点都投影到三维立体空间中, 而正交投影相机投像时是把物体投射到二维平面。

(3) 设置光源的光照。在三维场景中经过增加一些光源的光照, 可以给场景增添几份美感, 在Three.js场景中根据光照类型不同可把光源分为:聚光灯、点光源、面光源、半球光等。

(4) 加入渲染器。渲染器决定了渲染的输出结果是什么样子, 同时又将三维物体绘制到浏览器页面上。

(5) 加载文件。首先是加载Three.js中的库文件, 即引入three.js文件, 当我们想要在场景中加入其他的模型时我们就要进行引入相应的库文件, 比如加载文件为obj模型类型, 就引入OBJLoader.js库文件。

(6) 模型的构建与导入。以上几个步骤主要构造出了一个三维网页大致框架, 随后就可以在其中绘制网格模型或导入其他3D软件制作的三维模型了, 使用Three.js自带的一些方法可以创建如正方体、球等简易的网格体, 但是对于博物馆、车辆等复杂模型, 采用Three.js自身一些方法来构建会比较困难, 这时可以借助于其他3D软件来制作出并转化为指定的格式, 再通过指定的加载器加载出对应的模型对象, 常见的加载器有:JSONLoader、OBJLoader、MTLLoader等加载器。以下图1与图2分别是展示的网格体与复杂三维模型的效果图。

(2) 以下展示的是场景中正方体网格效果图, 如图1所示。

另外通过加载其他软件制作的模型同样可单独的呈现在Three.js场景中, 图2是使用Blender建模软件建出的博物馆三维模型, 效果如图2。

图3与图4是展示的呈现模型关键部分代码, 在HBuilder软件中进行编辑:

我们所展示的是渲染场景的核心代码, 且向场景中添加的元素均为静态形式的, 若我们想要让元素动起来, 就要向场景中添加动画效果, 目前一般使用requestAnimationFrame () 方法来完成, 通过不断更新屏幕动画, 达到动画的效果。

在three.js中, 也能够应用动画引擎来完成一些动画特效, Tween.js是一款可产生平滑过渡动画效果的js库, 利用它能够完成某个对象的指定属性的属性值在规定时间内不断变化来完成动画效果, 以下代码展示了一个立方体网格经过2000ms在水平方向上移动到-1000的位置上的动画。

var tweenBack=new TWEEN.Tween (cube.position) .to ({x:-1000}, 2000) .start () 。

三、结束语

本文旨在采用WebGL封装好的一种3D库Three.js, 快速地在浏览器页面中呈现出虚拟的三维模型, 并对其中的如何添加动画效果做了简要的分析, 提出了一种无需下载其他插件的渲染方法, 达到了很好的一种展示效果。将来WebGL技术会与其他前端技术相结合来完成3D网站的制作, 值得我们进一步的研究和学习。

摘要：应用WebGL技术可以让浏览器免去下载其他插件情况下渲染出三维图像, 封装了WebGL一些底层API图形接口的Three.js引擎, 使得在网页上高效地进行创建三维模型提供了可能。本文先对WebGL的3D绘图功能进行简单的介绍, 再通过对Three.js开源框架进行研究, 实现了基于网页的虚拟三维模型的呈现, 从而发挥出WebGL免浏览器插件、经过OpenGL接口加速图形渲染的优势。

关键词：WebGL,Three.js,三维模型,网页

参考文献

[1] 任宏康, 祝若鑫, 李风光.基于Three.js的真实三维地形可视化设计与实现[J].测绘与空间地理信息, 2015, 38 (10) :51-54.

[2] 荣艳冬.基于WebGL的3D技术在网页中的运用[J].信息安全与技术, 2015 (8) :90-92.

[3] 郑华, 刘洋.基于WebGL的三维模型及其信息化技术研究[J].石家庄铁路职业技术学院学报, 2017, 16 (1) :64-70.

[4] 曹煊.虚拟现实的技术瓶颈[J].科技导报, 2016, 34 (15) :94.