WebGL、ThreeJS、BabylonJS、SceneJS和Cesium框架对比及简介

主要介绍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都支持。

⦁ 速度

        同Three.js类似,加载大模型时速度较慢。需提供正在载入信息提示,尽可能提高用户体验。不过Babylon为了尽可能的提高加载速度,提供了工具可以将.babylon文件转换成几个文件,缓式加载以提高显示速度。

⦁ 运行环境

        运行Web端应用,需先在本地搭建应用服务器环境。例如:Apache、Tomcat、JBoss等。

⦁ 相关资源网址

主站:http://www.babyon.js.com/

文档:Home | Babylon.js Documentation

论坛:http://www.html5gamedevs.com/forum/16-babylonjs/

PlayGround: http://babylonjs-playground.azurewebsites.net/

在线开发工具:新建作品 - 踏得网

工具:http://doc.babylonjs.com/tutorials/using_the_incremental_loading_system

下载地址:Babylon.js/Exporters at master · BabylonJS/Babylon.js · GitHub

模型预览:Babylon.js Sandbox - View glTF, glb, obj and babylon files

格式解析: https://github.com/h53d/babylonjs-doc-cn

                http://doc.babylonjs.com/generals/file_format_map

编辑工具:http://materialeditor.raananweber.com/

Shader在线查看(GLSL语言编写:Vertex Shader和Pixel Shader):

部分核心示例地址:

        Babylon.js - Sponza demo

        Babylon.js - Mansion demo

        DiStraction

        Babylon.js - Actions demo

        Babylon.js - Train demo

        Babylon.js - CYOS

二、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 的发展十分迅速,然而配套的学习材料却比较匮乏,于是便有了当前的这个课程。

        2、缺点

        没有提供一些基础建模软件的插件,比如3dsmax的模型导出插件,虽然说提供一些读3ds格式,fbx格式的场景。要配合更多扩展库完成,因为你可能会需要联网通信功能的封装、声音普通控制甚至高级频谱控制、输入设备信息的处理等诸多渲染以外的功能。国内学习资料多,但加载速度慢、缺少碰撞检测等功能

(五)相关资料网址

        Three.js – JavaScript 3D Library

        three.js examples

        https://www.wjceo.com/blog/threejs/

        WebGL

三、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,并且全部免费使用,包括商用。

        2、缺点

        有些功能与问题,官方文档没提到。

底层技术

        关于as/js/ts语言的选择,演讲者表示,LayaAir现在对as的支持最好;不过as毕竟是停止更新的语言,LayaAir以后对它的支持也会慢慢淡化,直至脱钩。在js和ts之间,演讲者建议选择ts,因为ts的类型健壮,而且ts编译成js的过程效率很高。

(五)相关网址

        次世代3D游戏引擎Layabox官方网站 | 2D\3D\AR\VR | 浏览器\APP\小游戏全平台发布|追求极致性能 | LayaAir 2.0 | AS3 JavaScript TypeScript开发语言| LayaAir | 免费引擎

        LayaAir引擎开发(基于JS开发)_explor8的博客-CSDN博客

        LayaAir引擎学习日志4----创建JS项目并详解目录结构_菲菲家的吴先森-CSDN博客

        https://www.layabox.com/

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

(一)特点

        它是针对计算机辅助设计的要求。 开源的JavaScript3D引擎,特别适合需要高精度细节的模型需求,比如工程学和医学上常用的高精度模型。

(二)适用范围

        它是针对计算机辅助设计的要求。 开源的JavaScript3D引擎,特别适合需要高精度细节的模型需求,比如工程学和医学上常用的高精度模型。

(三) 支持格式

        模型预览: http://sandbox.babylonjs.com/

        格式解析:

        https://github.com/h53d/babylonjs-doc-cn

        http://doc.babylonjs.com/generals/file_format_map_(.babylon)

        编辑工具: http://materialeditor.raananweber.com/

        Shader在线查看(GLSL语言编写:Vertex Shader和Pixel Shader):

        Babylon.js - CYOS

(四)优缺点

        1、优点

        专门用于快速绘制大量单独连接的对象,而没有像阴影、反射等游戏引擎效果。SceneJS的API和JSON相似,它学习起来很简单。

        2、缺点

        相关社群几乎没有,中国很少人用。缺少碰撞检测等功能。加载大模型时速度较慢。需提供正在载入信息提示,尽可能提高用户体验。(可用工具可以将.babylon文件转换成几个文件,缓式加载以提高显示速度。)Firefox浏览器在本地同时打开多个较大模型时,会提示浏览器性能不足问题。另外,模型在100M以上时可能存在无法加载的现象。

(五) 相关网址

        http://scenejs.org/

        SceneJS and xeoEngine

        https://developer.tizen.org/community/

        SceneJS, Three.js and PhiloGL – WebGL performance test – Steffe.se

        http://scenejs.org/examples/index.html

        http://scenejs.org/examples/index.html#scenegraph

五、总结

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

六、扩充资料

WebGL分类       

        三维图形库市面上的三维图形库很多,基本分为Web端(WebGL)与非Web端(OpenGL/OpenGLES)、商用收费与免费开源两类。目前主流的三维图形库大致如下所示:

商用收费

        ArcGIS Engine

        superMap

        U3D

        OverDrive

        Hightopo

免费开源

        Ossimplanet

        Wings 3D

        OGRE

        Cesium

        OSG

        OPEN CASCADE

        Potree

        SceneJS

        Three.js

        BabylonJS

技术选型

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

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

(二)Web端三维图形库

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

(三)分析

        根据业务需求,优先考虑Web端三维开发。可选的范围在Potree、Hightopo、Three.js和BabylonJS之间。

        Potree研究了Potree中最接近于三维漫游与热点切换的例子。加载速度很快,但清晰度太差,达不到业务需求。

大场景基于earth的开源三维js引擎

cesiumjs

        优点:有较多的demo,详细的api文档,有测试平台,比较丰富的展示特性和扩展。

webglearth

        demo较少,但一些基本的gis功能都有,简单实用,好像没什么更新过。

openwebglobe

————————————————

原文链接:https://blog.csdn.net/u013869554/article/details/120910636

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,290评论 6 491
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,107评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,872评论 0 347
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,415评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,453评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,784评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,927评论 3 406
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,691评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,137评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,472评论 2 326
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,622评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,289评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,887评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,741评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,977评论 1 265
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,316评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,490评论 2 348

推荐阅读更多精彩内容