基于WebGL的三维落叶场景仿真
张文娟;吴琼;曹欣然
【摘 要】烘干窑Based on the third party open source library Three. js of WebGL and used the WebStorm11. 0. 1 as a development environ-ment,we establish a three-dimensional model of leaf particle system after the analysis of the physical movement trails of fallen leaves and simplified the extinction process of particles by controlling the displacement of each particle in the system through the combination of par-ticle system. Because of the simplicity of Three. js,the excess control on Z axis in Cartesian three-dimensional coordinate system is no longer needed to simulate the leaf particle' s perspective effect that the objects look small in the distance and big on the contrary. Mean-while,the scenes of falling leaves in different natural environment can be simulated through the quantity control of particle in the system. By using Three. js,the three-dimensional scenes could be rendered in the webpage directly without extra plug-ins,also the graphic ren-dering speed can be improved due to the better use of the hardware acceleration function. The experiment indicates that this method
has realistic effect in three-dimensional simulation and faster speed in graphic rendering.%基于WebGL的第三方开源库Three.js,结合粒子系统,以WebStorm11.0.1为开发环境,分析落叶的物理运动过程,建立了落叶粒子系统三维模型.通过对系统内各个粒子位移的控制,简化了粒子的消亡过程.结合Three.js的简便性,模拟叶粒子近大远小的透视投影效果,不再需要在笛卡尔三维坐标系的Z轴上引入额外的控制,只需要使用特定的相机.同时,通过对粒子系统内粒子数量的控制,可以模拟出在不同自然条件下叶子落下的场景.使用Three.js可以直接在网页上渲染三维场景,而不需要额外的插件,同时也较好地利用了硬件加速,提高了图形渲染速度.实验结果表明,该方法具有真实的三维仿真效果以及较快的图形渲染速度. 【期刊名称】《计算机技术与发展》
【年(卷),期】2018(028)006
【总页数】5页(P165-169)
【关键词】粒子系统;落叶模拟;Three.js;纹理映射
【作 者】刹车蹄块张文娟;吴琼;曹欣然
【作者单位】西安石油大学 计算机学院,陕西 西安 710000;西安石油大学 计算机学院,陕西 西安 710000;西安石油大学 计算机学院,陕西 西安 710000
【正文语种】中 文
【中图分类】TP301
0 引 言
粒子系统是迄今为止模拟不规则物体最成功的算法之一，目前国内外已有许多成功使用粒子系统与其他技术相结合的案例，以模拟现实生活中雨雪、火焰、爆炸、喷泉等场景。与之相结合的技术主要有OpenGL、WebGL，使用的编程语言也多为C++或者C#。Latta等采用GPU进行粒子系统的模拟，能实时处理超过100万个粒子，使得大规模粒子模拟成为可能，也使越来越多的人开始关注并研究基于GPU的粒子系统动画模拟。李晓萍对基于GPU的粒子系统进行了深入研究，利用基于GPU的粒子系统模拟了喷泉，并在CPU中处理了喷泉粒子的产生和消亡，在GPU中更新粒子的属性，显示粒子[1]。袁霞等对粒子系统的方法
及应用做了较为系统详尽的研究，并利用3D MAX模拟了水泡上升的自然现象[2]。罗维佳等使用C++语言，将雨粒子产生区域定义为一个视图体顶部的外接长方体，用像素点和直线作为对雨粒子的形状、降落过程的重力作用的模拟，完成了对降雨过程的仿真[3]。徐利明等使用将粒子系统与OpenGL相结合的方式，把模拟雨、雪的粒子在一个新的视口中视线有效区域内进行绘制，然后与原视口中的场景一起显示于窗口中，实现了对雨雪效果的模拟[4]。
随着互联网技术的不断发展，网页制作技术起到了越来越重要的作用，在网页制作的过程中，3D技术具有十分明显的优势，它可以使用户对所需浏览的内容的感知更加真实。目前实现3D网页的主要技术有Flash3D、java3D、Unity3D等等[5]。但这些技术在网页上的实现均需要安装特定的插件，而插件的安装则会对网页的稳定性和跨平台性有所影响。其次，很多技术只针对特定的行业，不具备较强的通用性，例如Unity3D只适合游戏开发。而WebGL的产生则解决了这些问题[6]。
WebGL是一项可以在浏览器中绘制、显示三维计算图形并与之交互的技术。曾经只有高端的计算机或专门的游戏终端才能渲染三维图形，因为这需要大量复杂的编程才能实现[7]。
然而随着个人计算机以及浏览器性能的提高，使用网页技术渲染三维图形也成为可能。和OpenGL和Direct3D不同，WebGL程序可存在于网页中并在浏览器中执行，而不必安装任何其他的插件和库[8]。然而，直接使用WebGL编程是十分复杂的，需要了解WebGL的内部细节，学习复杂的着器语法[8]，因此文中使用一个基于WebGL的开源框架Three.js。
Three.js基于WebGL,封装了底层的图形接口，使得使用者不需要掌握冗杂的图形学知识，就能用简单的代码完成三维场景的渲染。理论上，更高的封装程度往往意味着灵活性的牺牲，但Three.js在这方面做得很好，几乎不存在WebGL支持而Three.js不能实现的情况。目前，国内主要将这一技术应用于物体的真实化展示。如高辰飞将其应用于海洋样品的三维可视化研究，实现了对海洋样品的虚拟可视化[9]。
FOSY综上，在研究粒子系统的基础上，利用WebStorm开发工具在Windows平台下进行降雨场景的模拟，建立粒子系统和雨滴系统模型。
1 粒子系统的基本原理
粒子系统由Reeves W T于1983年提出，并成功模拟了灰尘、喷泉等效果。其基本思想是
利用形状简单的微小粒子作为元粒子来描述不规则的模糊物体。粒子系统并不是一个简单的静态系统，而是动态变化的。每个元粒子具有大小、形状、位置、颜、速度以及生命周期等属性[10-11]。与其他描述不规则物体的方法相比，粒子系统具有三个主要特点：
(1)对物体的描述是通过一组定义在空间的原始粒子，而不是利用原始的具有边界的面元[12]。
(2)粒子系统不是一个静态系统，每个粒子的属性均随时间的变化而变化。
(3)粒子系统所描述的物体不是预先定义好的，其相关属性均可使用随机过程来描述[12]。
从应用的角度可将粒子系统分为三类，分别是随机粒子系统、结构化粒子系统、方向粒子系统。随机粒子系统通过可控制的随机过程控制粒子属性的变化，用来生成灰尘、烟、爆炸等场景图像[13]。结构化粒子系统可以用来模拟具有一定结构的现象或物体，如树、草等。方向粒子系统则考虑了粒子间的相互影响，粒子除具有位置和速度等动态属性之外，还应该具有方向属性，用来模拟可变物体。由于落叶场景没有固定的结构，在模拟时亦不需要考虑叶粒子之间的相互作用，因此适合采用随机粒子系统进行模拟。
在随机粒子系统中，随着时间的变化,粒子的运动状态及形式不断发生变化，元粒子状态的改变引起粒子整体的变化。在这一过程中，旧粒子不断死亡，新粒子不断产生，粒子生命周期及其变化都可以使用随机过程进行模拟[3]。通常，粒子系统实现的主要步骤如下：
(1)分析粒子的静态特性，定义新粒子。
(2)引入随机函数，建立粒子属性动态变化特征。
(3)根据粒子动态特性更新粒子属性[14]。
(4)删除生命周期结束的粒子。
(5)渲染产生新粒子。
尼龙袋2 Three.js搭建三维空间
开钻>头笼随着HTML5标准的颁布以及主流浏览器功能的日益强大，直接在浏览器中展示三维图形和动画已经变得越来越容易，也越来越受关注。但是，三维图形和动画本身就比较复杂，不仅需要具备丰富的数学、图形学等方面的基础知识，还需要了解材质、贴图等各种创建三
维场景所必须的要素。除此之外，直接使用WebGL在浏览器中创建动画也十分烦琐[15]。
Three.js的出现解决了这个矛盾，它将WebGL的强大功能融汇在其中，同时语法简单、易于使用，即使使用者对WebGL的底层细节并不清楚，也能借助Three.js创建出绚丽多姿的三维场景和动画。Three.js支持多种渲染器进行场景渲染并提供了点、线、面、向量、矩阵等创建三维物体所必须的要素，同时可以使用十分简单的语法将照相机(镜头)、光线、物体等对象添加到场景当中。
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议