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