专栏首页acoolgiser_zhuanlanwebgl图库研究(包括BabylonJS、Threejs、LayaboxJS、SceneJS、ThingJS等框架的特性、适用范围、支持格式、优缺点、相关网址)

webgl图库研究(包括BabylonJS、Threejs、LayaboxJS、SceneJS、ThingJS等框架的特性、适用范围、支持格式、优缺点、相关网址)

3D图库框架范围与示例

摘要:

为实现企业80%以上的生产数据进行智能转化,在烟草、造纸、能源、电力、机床、化肥等行业,赢得领袖企业青睐,助力企业构建AI赋能中心,实现智能化转型升级。“远舢文龙数据处理平台”以AI驱动,构建5G时代下企业数智基础,从根本上改变了数据采集、存储和使用的方式,是当下企业构建数字化与智能化能力的首选产品。“远舢知识图谱平台”,作为国内第一批落地应用的“知识图谱”,平均缩短智能化应用开发周期70%,延长企业分析决策应用生命周期150%。“远舢Hybrid Twin”构建面向未来智能工厂全场景的全息交互模式,实现物理空间与数字空间的混合孪生。为国产工业AI新锐,以远舢工业云平台为核心,以AI驱动的方式,打造一个用户可以自研APP的智能云平台,变革未来企业IT消费模式,输送企业转型升级动能,为企业创造可量化价值。我们在这领域展示出来的强大产品竞争力,以及公司团队深耕制造、脚踏实地、坚持打造极致产品的理念,持续提供增值服务,我们期待和坚信远舢公司能成为未来企业级人工智能领域的独角兽! 本文为选择合适的webGl框架,为后续项目奠定基础;避免盲目选择框架,导致后续项目重构带来不必要的成本浪费。本文清楚的讲述了各个框架的特点,适用范围,优缺点以及相关网址范例;以便于后续更快速的开发,提高生产效率,最后进行总结。

关键词:WebGl框架 一、 BabylonJS(适用于小场景,开源;JavaScript、TypeScript)

(一)特点 强大,美观,简单和开放的3D渲染体验。 (二)适用范围 Babylon.js是一款WebGL开发框架。 适合做中大型项目,尤其是多种媒体混杂的或者是游戏项目VR体验项目 (三)支持格式 glTF,OBJ,STL,.babylon (常用格式)。 (四)优缺点 1、 优点 功能较为全面,功能比较丰富、灵活、模型显示不失真。有微软背景,有不少的demo,有较详细的api文档,有供测试的平台,有提供3dsmax转换模型的插件,比three.js成熟;几经更新 与完善之后,Babylon.js已更新至1.12版本,相比之前的版本,除了不断的Bug修复之外,Babylon.js还新增了.许多非常牛叉的新特性,并对已有功能进行了完善。更方便快捷地完成光线、轮船纹理、海浪等的3D建模,从而带来最佳的呈现效果。 2) 缺点 学习难度大、周期长,需要进行大量深入的学习与研究。另外,在模型文件较大或较多时,浏览器打开时会等待较长时间; 中文资料很少,没有系统的中文教程,如从入门到精通都可以给你讲一遍系统的教程,论坛也会被墙,相关的qq群较少,群里的人也不多,所以能真正指导我们的大牛也比较少。国内资料基本没有。同Three.js类似,Firefox浏览器在本地同时打开多个较大模型时,会提示浏览器性能不足问题。另外,模型在100M以上时可能存在无法加载的现象。.babylon模型预览,可以通过官方提供的沙盒地址,通过拖放.babylon文件进行查看。经过测试,发现个别.babylon模型仍难以打开。 ⦁ 浏览器支持 对目前主流的IE11以上、Chrome和FireFox都支持,本人已在Chrome v 57.0.2970.0和Microsoft EdgeHTML 14.14393测试通过。 ⦁ 速度 同Three.js类似,加载大模型时速度较慢。需提供正在载入信息提示,尽可能提高用户体验。不过Babylon为了尽可能的提高加载速度,提供了工具可以将.babylon文件转换成几个文件,缓式加载以提高显示速度。 ⦁ 运行环境 运行Web端应用,需先在本地搭建应用服务器环境。例如:Apache、Tomcat、JBoss等。 相关网址: 主站:http://www.babyon.js.com/ 文档:http://doc.babylonjs.com/ 论坛:http://www.html5gamedevs.com/forum/16-babylonjs/ PlayGround:http://babylonjs-playground.azurewebsites.net/ 在线开发工具:http://wow.techbrood.com/fiddle/new 工具:http://doc.babylonjs.com/tutorials/using_the_incremental_loading_system 下载地址:https://github.com/BabylonJS/Babylon.js/tree/master/Exporters 模型预览:http://sandbox.babylonjs.com/ 格式解析: https://github.com/h53d/babylonjs-doc-cn/blob/master/target/generals/General/File_Format_Map_(.babylon).md http://doc.babylonjs.com/generals/file_format_map_(.babylon) 编辑工具:http://materialeditor.raananweber.com/ Shader在线查看(GLSL语言编写:Vertex Shader和Pixel Shader): 重点示例 http://www.babylonjs.com/demos/sponza/ http://www.babylonjs.com/demos/mansion/ http://www.babylonjs.com/demos/distraction/ http://www.babylonjs.com/demos/actions/ http://www.babylonjs.com/demos/train/ http://cyos.babylonjs.com/

二、ThreeJS(适用于小场景,开源,JavaScript)

(一)特点 Three.js 是一款 webGL 开源框架,易用、简单、直观的方式封装了 3D 图形编程中常用的对象。在开发中使用了很多图形引擎的高级技巧,提高了性能。内置了很多常用对象和极易上手的工具,功能强大。 (二)适用范围 可以做中小型的重表现的Web项目。Three.js以简单、直观的方式封装了3D图形编程中常用的对象。更方便快捷地完成光线、轮船纹理、海浪等的3D建模,从而带来最佳的呈现效果。 (三)支持格式 stl,obj+mtl+png,FBX,gltf格式(主要格式) (四) 优缺点 1) 优点 国内用的比较多,所以中文的资料也会比较多,有比较系统的中文教程如从入门到精通。用的人比较多,所以相关的qq群较多,群里的人也较多,接触到的大牛应该也会比较多。在WebGL的引入之前已经创建了three.js独特方便的模块化渲染接口,并在不用WebGL的情况下允许它使用SVG和HTML5画布元素。近些年,浏览器的功能越来越强大,渐渐得成为了复杂应用和图形的平台。同时,现有大多数浏览器实现了对 WebGL 的支持,但要直接使用 WebGL 相关接口进行开发,则需要学习复杂的着色器语言,且开发周期长,不利于项目的快速开发。 面对这种情况,Three.js 应运而生,它不但对 WebGL 进行了封装,将复杂的接口简单化,而且基于面向对象思维,将数据结构对象化,非常方便我们开发。Three.js 的发展十分迅速,然而配套的学习材料却比较匮乏,于是便有了当前的这个课程。 1) 缺点 没有提供一些基础建模软件的插件,比如3dsmax的模型导出插件,虽然说提供一些读3ds格式,fbx格式的场景。要配合更多扩展库完成,因为你可能会需要联网通信功能的封装、声音普通控制甚至高级频谱控制、输入设备信息的处理等诸多渲染以外的功能。国内学习资料多,但加载速度慢、缺少碰撞检测等功能 (五)相关网址 https://threejs.org/ https://threejs.org/examples/ https://www.wjceo.com/blog/threejs/ http://www.yanhuangxueyuan.com/

三、LayaboxJS(layaair底层开发Ar,JS,TS)

(一)特点 LayaAir引擎的产品性能已达到原生APP的水准,甚至可以直接用于开发APP、HTML5、Flash的多端版本产品。裸跑性能堪比APP,支持2D,3D,VR开发。 (二)适用范围 大型游戏开发项目与游戏上市企业,广告,营销,教育,应用开发等领域。 (三)格式支持 Spline。 (四)优缺点 1) 优点 裸跑性能堪比APP 多版本发布、知名CP首选引擎 极致性能:LayaAir优先使用webgl渲染,如果webgl不可用,自动无缝转为canvas渲染,引擎设计过程中处处以性能为优先原则,LayaAir是为裸跑而设计的HTML5引擎。 轻量易用:LayaAir API设计上追求精简,简单易用,上手容易,引擎本身非常注意自身大小,是目前同等功能最小的HTML5引擎。 支持多语言开发:LayaAir同时支持ActionScript3、TypeScript、JavaScript三种语言开发HTML使用任意一种自己喜欢的语言开发即可。 功能齐全:同时支持2D,3D,VR、时间轴动画,缓动、UI系统、粒子动画、骨骼动画、物理系统等。提供可视化辅助开发及工具流。LayaAirIDE提供代码开发工具及可视化编辑器,清晰的工作流,让美术,策划,程序紧密配合,提高开发效率。 开源免费:引擎全部开源并托管到github,并且全部免费使用,包括商用。 1) 缺点 有些功能与问题,官方文档没提到,网上搜到同样问题的帖子,却没人回答。作为一个开源免费的引擎,不是每个问题,官方都能准时解答的,甚至你发个帖子,很长一段时间都没有一个答案,这时只能自己慢慢摸索一下了。这里我就把自己遇到的一些小问题及解决思路记录下来,希望对那些遇到同样问题的人有帮助。这些问题并不大,却有点烦人,你明知道实现某个功能可能就是一行代码的事,却没有关于如何使用的说明,这让人很苦恼。 ⦁ 底层技术 关于as/js/ts语言的选择,演讲者表示,LayaAir现在对as的支持最好;不过as毕竟是停止更新的语言,LayaAir以后对它的支持也会慢慢淡化,直至脱钩。在js和ts之间,演讲者建议选择ts,因为ts的类型健壮,而且ts编译成js的过程效率很高。 (五)相关网址 https://ldc2.layabox.com/ https://blog.csdn.net/explor8/article/details/51487097 https://blog.csdn.net/wxq_wuxingquan/article/details/53926432 https://www.layabox.com/

四、SceneJS(开源;Lindsay Kay底层开发)

(一)特点 它是针对计算机辅助设计的要求。 开源的JavaScript3D引擎,特别适合需要高精度细节的模型需求,比如工程学和医学上常用的高精度模型。 (二)适用范围 它是针对计算机辅助设计的要求。 开源的JavaScript3D引擎,特别适合需要高精度细节的模型需求,比如工程学和医学上常用的高精度模型。 (三) 支持格式 模型预览: http://sandbox.babylonjs.com/ 格式解析: https://github.com/h53d/babylonjs-doc-cn/blob/master/target/generals/General/File_Format_Map_(.babylon).md http://doc.babylonjs.com/generals/file_format_map_(.babylon) 编辑工具: http://materialeditor.raananweber.com/ Shader在线查看(GLSL语言编写:Vertex Shader和Pixel Shader): http://cyos.babylonjs.com/ (四)优缺点 1) 优点 专门用于快速绘制大量单独连接的对象,而没有像阴影、反射等游戏引擎效果。SceneJS的API和JSON相似,它学习起来很简单。 1) 缺点 相关社群几乎没有,中国很少人用。缺少碰撞检测等功能。加载大模型时速度较慢。需提供正在载入信息提示,尽可能提高用户体验。(可用工具可以将.babylon文件转换成几个文件,缓式加载以提高显示速度。)Firefox浏览器在本地同时打开多个较大模型时,会提示浏览器性能不足问题。另外,模型在100M以上时可能存在无法加载的现象。 (五) 相关网址 http://scenejs.org/ http://slides.com/xeolabs/deck/ https://developer.tizen.org/community/tip-tech/scenejs-%E2%80%93-creating-javascript-controlled-animated-3d-character-part-1 http://steffe.se/?p=475 http://scenejs.org/examples/index.html#scenegraph_firstExample http://scenejs.org/examples/index.html#scenegraph_firstExample

五、ThinkJS(node.js的框架,底层开发JavaScript)

(一)特性 是一个快速、简单的基于MVC和面向对象的轻量级Node.js开发框架,遵循MIT协议发布。秉承简洁易用的设计原则,在保持出色的性能和至简的代码同时,注重开发体验和易用性,为WEB应用开发提供强有力的支持。 Thinkjs里面很多特性来源于ThinkPHP,同时根据Node.js的特点,使用了Promise, WebSocket等特性,让代码更简洁、优雅。 (二)优点 开发更简单更快速,团队合作更便捷。快速搭建项目,可以让你把注意力放在业务本身,尤其是 Thinkjs 2.0 以上支持 ES2015/ES2016 的各种特性,用起来非常方便.这是我用 Thinkjs 做的一个项目,两天就搞定,方便快捷 github resume。Thinkjs 是一个快速、简单的基于MVC和面向对象的轻量级Node.js开发框架,遵循MIT协议发布。秉承简洁易用的设计原则,在保持出色的性能和至简的代码同时,注重开发体验和易用性,为WEB应用开发提供强有力的支持。 Thinkjs里面很多特性来源于ThinkPHP,同时根据Node.js的特点,使用了Promise, WebSocket等特性,让代码更简洁、优雅。 Thinkjs最大的特色是对目前比较潮的语法特性支持的特别好,比如es6、es7、typescript等,有了这些,对aysnc/await等特性支持,让代码更加fashion。 相关网址 https://thinkjs.org/ https://thinkjs.org/zh-cn/doc/2.2/index.html https://www.w3ctech.com/topic/637 http://www.thinkjs.org/doc/

六、ThingJS(底层开发JavaScript)

(一)特性

强大的3d引擎,简化模型制作,提高开发效率,在线开发部署,支持离线部署。 ThingJS面向物联网的3D可视化PaaS开发平台.基于WebGL兼容各种浏览器及移动设备.零门槛、高效率、低成本开发各类3D应用。 基于 Koa 2.x,兼容 middleware; 内核小巧,支持 Extend、Adapter 等插件方式; 性能优异,单元测试覆盖程度高; 内置自动编译、自动更新机制,方便快速开发; 使用更优雅的 async/await 处理异步问题,不再支持 */yield; 从 3.2 开始支持 TypeScript。 (二)适用范围 ThingJS 名称源于 物联网 Internet of things(IoT) 中的 Thing (物),意为面向物联网可视化开发的 Javascript 库。 主要针对以一栋或多栋建筑所组成的园区级别的场景,可以应用于数据中心、仓储、学校、医院、安防、预案,城市、园区、建筑、楼层、房间、设备等多种领域。 而且这些层次的对象在ThingJS的场景加载完成后,是以JS对象的方式直接暴露给用户使用,简单方便。 (三)支持格式 .tjs (四)优缺点 1、优点 ThingJS 基于 HTML5 和 WebGL 技术,可方便地在主流浏览器上进行浏览和调试,支持 PC 和移动设备。ThingJS 为可视化应用提供了简单、丰富的功能,只需要具有基本的 Javascript 开发经验即可上手; ThingJS 提供了对场景的加载、分层级的浏览,对象的访问、搜索、以及对象的多种控制方式和丰富的效果展示,可以通过绑定事件进行各种交互操作,还提供了摄像机视角控制、点线面效果、温湿度云图、界面数据展示、粒子效果等等各种可视化功能;面对这种情况,Three.js 应运而生,它不但对 WebGL 进行了封装,将复杂的接口简单化,而且基于面向对象思维,将数据结构对象化,非常方便我们开发。Three.js 的发展十分迅速,然而配套的学习材料却比较匮乏,于是便有了当前的这个课程。 在功能接口提供的粒度上,ThingJS和其他开发工具相比,站在了更高的封装层面, 用尽可能简洁的接口,直接提供了场景的加载与展示、物联网设备的创建与特效;还提供了信息点、线路、管线、区域、热图、粒子、动画等丰富功能;提供了摄影机控制、第一人称行走、寻路 导航和视点线路工具;可扩展的界面、头顶信息牌、内嵌视频监控等丰富的信息展示方式。这些接口大部分已经在在线例子中可以找到,可以边改参数边看到效果;帮助用户以最快的速度 学习、开发与部署。 2、缺点 没有不是开源的。ThingJS所定位的物联网可视化应用,侧重宏观场景表现,并不针对局部细节的效果,而且由于WebGL技术的性能局限,在性能上不能和Unity等原生程序相比,性能和效果的侧重也更偏向前者,就像电纸书和手机有着不同的定位;所以,ThingJS不适合做场景细节要求高的应用。 (五)相关网址 http://www.thingjs.com/guide/ http://www.3dmomoda.com/ http://forum.thingjs.com/ http://www.thingjs.com https://baijiahao.baidu.com/s?id=1611474740563954882&wfr=spider&for=pc

七、总结

利用3d图形库技术范围和示例等研究成果,有利于根据公司的需求去选择合适的webGL框架去开发,节约了时间、人力成本,提高了开发效率。

附件:

一、三维图形库 市面上的三维图形库很多,基本分为Web端(WebGL)与非Web端(OpenGL/OpenGLES)、商用收费与免费开源两类。目前,主流的三维图形库大致如下所示。 ArcGIS Engine(收费) U3D (收费) OverDrive(收费) Hightopo(收费)(http://www.hightopo.com/) Ossimplanet(开源)(http://trac.osgeo.org/ossim/wiki/OssimPlanet) Wings 3D(开源)(http://www.wings3d.com/) OGRE(开源)(https://github.com/OGRECave/ogre)? Cesium(开源)(http://cesiumjs.org) OSG(开源)(https://github.com/openscenegraph/OpenSceneGraph) OPEN CASCADE(开源)(https://www.opencascade.com) Potree(开源)(http://potree.org/) SceneJS(开源)(http://scenejs.org) Three.js(开源)(https://threejs.org/) BabylonJS(开源)(http://www.babylonjs.com/)

二、技术选型

(一) 非Web端三维图形库 数量多、性能好、API丰富。

因为属于Native APP范畴,所以缺点是不能一次编码,跨平台运行,需针对不同平台单独集成编码。

(二)Web端三维图形库

伴随HTML 5诞生,故目前可用库较少、在浏览器内运行也导致性能略差、功能与移动设备支持的三维标准OpenGL ES类似,都是从OpenGL剪裁而来。最大的优点是跨平台性,即一次编码,可四处运行(只要浏览器支持WebGL标准)。

(三)分析

根据业务需求,优先考虑Web端三维开发。可选的范围在Potree、Hightopo、Three.js和BabylonJS之间。 Potree 研究了Potree中最接近于三维漫游与热点切换的例子。加载速度很快,但清晰度太差,达不到业务需求。 三、大场景基于earth的开源三维js引擎

cesiumjs(http://cesiumjs.org/) 优点:有较多的demo,详细的api文档,有测试平台,比较丰富的展示特性和扩展。 webglearth(http://www.webglearth.com/) demo较少,但一些基本的gis功能都有,简单实用,好像没什么更新过。 openwebglobe(http://world.openwebglobe.org/) 效果不是很好,加载不流畅,展示的功能也比较少,后面就没有进步了解了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 干货 | 2D+1D | vivo官网Web 3D应用开发与实战

    在近20年的前端发展史中,前端经历了铁器时代(小前端),信息时代(大前端)以至现在的全能前端时代。经历了几个时代的沉淀之后,前端领域开始更加细分。

    CloudBest
  • 2D+1D | vivo官网Web 3D应用开发与实战

    在近20年的前端发展史中,前端经历了铁器时代(小前端),信息时代(大前端)以至现在的全能前端时代。经历了几个时代的沉淀之后,前端领域开始更加细分。

    2020labs小助手
  • 基于WebGL的3D可视化告警系统关键技术解析 ThingJS

    WebGL是一种在网页浏览器中渲染3D图形的 JavaScript API,无需加装插件,只需编写网页代码即可实现3D图形的展示。WebGL技术相较于传统的We...

    森友鹿锘
  • 基于HTML5的电信网管3D机房监控应用

    先上段视频,不是在玩游戏哦,是规规矩矩的电信网管企业应用,嗯,全键盘的漫游3D机房: ? 随着PC端支持HTML5浏览器的普及,加上主流移动终端Android...

    HT for Web
  • 基于HTML5的WebGL电信网管3D机房监控应用

    先上段视频,不是在玩游戏哦,是规规矩矩的电信网管企业应用,嗯,全键盘的漫游3D机房: http://www.hightopo.com/guide/guide/c...

    HT for Web
  • 原 基于HTML5的WebGL电信网管3D

    HT_hightopo
  • 基于HTML5的WebGL电信网管3D机房监控应用

    HT_hightopo
  • 基于WebGL无插件虚拟场景漫游关键技术(完整版)ThingJS

    如果要构建一个具有交互性和拓展性的沉浸式漫游场景,常用到3DSMAX、three.js等软件技术,学习门槛较高;ThingJS可视化组件更加轻量化,B/S架构下...

    森友鹿锘
  • ThingJS PaaS平台

    ThingJS是优锘科技开发的一套面向物联网应用的在线3D可视化应用开发及运营PaaS平台,以“ThingJS云视PaaS服务”形式面向广大物联网企业提供全生命...

    要不要吃火锅

扫码关注云+社区

领取腾讯云代金券