分享
查看: 1944|回复: 0

[分享] 基于WebGL的虚拟太阳系漫游技术实现 ThingJS 科幻片

[复制链接]

基于WebGL的虚拟太阳系漫游技术实现 ThingJS 科幻片

发表于 2020-12-31 17:39:34 来自 分享 阅读模式 倒序浏览
zzv_icon1944 zzr_icon0 查看全部


#三维可视化##3D开发#
  1. 虚拟功能需求
2. 太阳系运行需求
3. 3D模型呈现
4. ThingJS技术分析
5. 系统实现步骤

基于WebGL的虚拟太阳系漫游技术实现 ThingJS 科幻片

3D可视化技术逐渐应用到现代多媒体的课堂教学中。
虚拟太阳系是一款天文类的3D可视化应用,它借助3D在线浏览,模拟了一个“真实”的太阳系,以太阳为中心,八大行星逆时针围绕太阳公转,还有很多卫星绕转在行星或者小天体周围。ThingJS平台在线提供教学演示链接,在中小学生的地理课堂或网上天文馆作为虚拟课程案例使用。
以下是具体需求分析。

一、功能需求

  1. B/S架构为主,通过浏览器在线访问,无需安装任何插件
  2. 可观察太阳系中太阳和各行星的3D模型及其运行状况
  3. 各行星运行轨道可视化
  4. 简单操作键盘鼠标可实现自由漫游
  5. 点击太阳或行星时显示该天体的常识信息
  6. 随时控制太阳系运行速度
  7. 准确度高,基于各项真实太阳系数据及运行制作
  8. 运行基本无卡顿,对用户输入实时响应

二、运行需求

要求跨平台、跨终端在线展示,兼容PC电脑、手机、平板电脑等设备。
ThingJS 的 3D 可视化应用是 B/S 架构的,3D 场景是运行在客户端的浏览器中。3D 场景渲染展示对客户端设备要求较高,特别是显卡,一般必须是独立显卡。推荐的客户端配置如下:
(1)客户端
系统:Windows 7 及以上
CPU:双核 CPU2.8GHz及以上
内存:8G 及以上
显卡:最低 GTX650,推荐 GTX960 及以上,显存 2G 及以上
硬盘:300GB 及以上
ThingJS 若是离线部署,需要部署到服务器端,ThingJS 对服务器端的要求并不高。
(2)服务器端
系统:Windows Server 2003 及以上
CPU:双核 CPU2.8GHz 及以上
内存:8G 及以上
硬盘:500GB及以上
软件环境:JDK 1.6 及以上

三、模型呈现

经分析,由于虚拟太阳系的运行功能集中在浏览器端,服务器端只需满足HTTP的静态响应即可,无需动态技术。浏览器端功能可分为模型展示、场景漫游、运行控制三个部分。

基于WebGL的虚拟太阳系漫游技术实现 ThingJS 科幻片

(1)基于webGL技术,ThingJS可以将虚拟太阳系各星体3D模型和脚本运行情况相结合,最终呈现虚拟太阳系的3D可视化效果。
(2)场景漫游是系统借助3D技术中的摄像机控制原理,通过控制鼠标和键盘上的预定按键,以及移动摄像机的位置来实现,同时对应位置控制和视向控制的场景漫游技术。
位置控制。可以控制虚拟漫游者所在点的位置,在技术上就是摄像机的位置由键盘控制,有上下左右四个方向,系统预定WSAD为移动键:W:前进、S:后退、A:左移、D:右移。同时增加鼠标点击操作,即可以通过鼠标的左键进行前进,右键进行后退。
视向控制。可以控制用户看向任意哪个方向,技术上是摄像机的视向(lookAt),由鼠标的移动控制。通过第一人称或第三人称视角进行切换,给用户较强的沉浸感。由于视向容易偏离画布中心,设定空格键为锁定键,完整的一次空格键点击作为视向控制的开关。
(3)运行控制是用户通过界面上的控制面板,对虚拟太阳系的运行速度进行控制。真实的太阳系下,公转周期最短的水星,绕太阳一周需要88天,不便于用户观察,运行控制提供1百万倍于真实运行速度的滑杆操纵,3D场景加入动画、特效,便于用户理解和操作。

四、ThingJS技术分析

ThingJS平台为了Web开发而生,旨在加速3D开发,它与Web浏览器深度整合。ThingJS的所有接口功能都要通过 Javascript调用。当初,WebGL的诞生解决了在浏览器内无插件呈现3D图像的难题;ThingJS则加速了3D专业开发效率,利用可视化开发组件可完成场景搭建、脚本开发、数据对接和项目部署,极大地促进3D可视化技术在应用端普及化。
比起Three.js的开源技术探索者风格,ThingJS是更为顶层的封装库,ThingJS继承了webgl的技术优点,并且提供了较为全面的物联网开发逻辑(如地球、城市、建筑、设备等等)。

基于WebGL的虚拟太阳系漫游技术实现 ThingJS 科幻片

ThingJS开发特点如下:
  • 掩盖了渲染细节。将 webGL原生API的细节抽象化,3D场景拆解为网格、材质和光源。
  • 面向对象。开发者可以使用顶层的 Javascript对象进行编程。
  • 功能丰富。包含了许多实用的内置对象,可以方便地应用于3D动画、高分辨率模型和一些特殊的视觉效果制作。
  • 支持交互。提供了拾取和选择功能,常用鼠标完成一些操作,如变色。
  • 提供数学库。作为数学类辅助功能进行坐标相加等三维运算。
  • 内置文件格式支持。支持3D插件下载3D建模软件如3DMAS导出文本格式的文件,以及CampusBuilder平台的场景文件格式。
  • 扩展性强。可以使用 ThingJS封装自定义的数据结构,进行定制化3D开发。

五、系统实现步骤

ThingJS提供CampusBuider软件搭建3D场景,并在ThingJS平台调用3D源码进行脚本开发,减少了代码开发工作量。ThingJS从管理建模的角度出发,让开发和设计达成良好的协作。况且建模软件如3DSMAX的制作成本过高,并不适合小团队的开发思路。
ThingJS系统工作流程如下图。

基于WebGL的虚拟太阳系漫游技术实现 ThingJS 科幻片

太阳是恒星,其他的行星如金星、木星、水星、火星等,每个行星都有自己的魅力。
行星模型的搭建过程总结如下。

基于WebGL的虚拟太阳系漫游技术实现 ThingJS 科幻片

在太阳系外的背景星空中有着遥远、众多的恒星,反映出来是星星点点的光芒,可以通过粒子系统来实现。ThingJS定义了点在空间中的位置和材质,材质定义了颜色、所绘制单一颜色和尺寸的点。

基于WebGL的虚拟太阳系漫游技术实现 ThingJS 科幻片

基于浏览器端的3D仿真系统在商业、教育等领域将会有广阔的应用前景,ThingJS可视化平台支持智慧教育可视化系统应用发展,利用数字孪生技术将更多培训内容生成虚拟场景,用户理解更加直观、高效。

基于WebGL的虚拟太阳系漫游技术实现 ThingJS 科幻片


avatar
游客~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

130700ppkpl8x3t7tt1b1t