3D技术对比

2021-07-06 by uino 246 3D ThingJS 行业知识

3D技术分层

首先,看一下和3D相关的技术,可以分为哪些层: image.png

这几层都解决了什么问题:

  • 操作系统层:解决计算机、移动设备的使用问题;
  • 渲染接口层:是对显卡功能进行封装,解决的是最基础的3D使用问题,如:图元绘制、像素操作、缓冲区、视图矩阵;
  • 渲染引擎层:对渲染接口层进行封装,解决的是通用的3D使用问题,如:模型、材质、灯光、摄影机、物理、动画;
  • 工具平台层:除了包含渲染引擎外,还包括了周边生产工具、资源库等,用来解决的某具体行业应用的问题,如:游戏行业、建筑行业、汽车行业、影视行业等;

拿ThingJS来说,ThingJS平台就包括了渲染引擎T3D(ThingJS 3D Engine)、对外的接口API(1.0, 2.0等)、场景/城市搭建工具、模型库等资源库、2D工具和API、图表界面等工具等等;UE4、Unity本身也是属于游戏行业的平台,他们具有自己的渲染引擎(内置),同时也包含周边工具、资源、商店等;

上面图中虚线以下的部分一般被称为底层

渲染接口和引擎

底层范畴中,市场上有很多渲染引擎和接口,下图展开一下,举例了解一下常见的都有哪些。 image.png 渲染接口:其中DirectX(D3D)是微软公司提供的(不能跨平台),OpenGL是行业通用标准(跨平台),Vulkan是OpenGL的下一代,Metal是由苹果公司提供的苹果系统专用的渲染接口,WebGL是OpenGL ES的标准在浏览器上的实现,WebGPU是多家公司正在制定的基于D3D、Vulkan和Metal的新渲染接口标准,被认为有可能成为下一代浏览器3D渲染接口标准; image.png 渲染引擎:Unity和Unreal4(UE4、虚幻引擎)是目前最主流的游戏引擎,CryEngine也是一款著名的游戏引擎;Ogre、OpenSceneGraph、Godot等都是老牌的开源引擎;T3D早期是用C++开发,使用浏览器插件或扩展运行在浏览器下的,目前已经使用WebGL;three.js、babylon.js、playcanvas等都是基于WebGL的渲染引擎,osg.js是上面OpenSceneGraph的WebGL版被用于Skechfab网站;G3D是阿里的一款基于WebGL的"绘图"引擎; <br/> 渲染接口层渲染引擎层的具体区别,如果有兴趣想详细对比的,可以参考:OpenGL文档 vs Unity文档 <br/> 任何一个引擎,都不能适合所有的情况,如下图取自《游戏引擎架构》的一段描述: image.png 比如:UE4适合3A级游戏大作,尤其适合第一人称、第三人称的射击游戏的,有着最好的渲染质量,但如果想开发或修改UE4的游戏,则要安装30G大小的UE4编辑器,每次修改都需要很长的输出时间,需要使用C++或蓝图开发,C++开发3D程序有着很高的门槛,而当蓝图用于细的颗粒度3D接口控制时也会有很大复杂度;与UE4相比,ThingJS虽然在渲染效果和性能上有差距,但是ThingJS使用Javascript语言,和浏览器页面无缝结合,直接使用Chrome的devtools就可以运行时调试,可以很方便的接受动态数据、并能控制场景中各种粒度的对象,所以ThingJS更适合数字孪生可视化应用的开发。

ThingJS和UE4、Unity对比

ThingJS和UE4、Unity相比,提供了很多数字孪生可视化应用中常见的概念和常用功能,并且为这个行业的开发者提供了更适合的开发方式、更低的使用门槛。下面就从这两方面,用ThingJS和UE4、Unity进行一些对比。

常用类型和功能

在ThingJS中,我们提供了园区Campus、建筑Building、楼层Floor、房间Room等这些概念,用户可以直接使用,来控制自己的场景。而拿UE4做对比,UE4所提供的类型,比如:Actor、ActorCompoent、SceneComponent等,都是非常基础的场景节点和组件,如果想把他们组成一个场景层级结构还需要做很多的开发工作,如下图; image.png

在ThingJS的组件中,还提供了比如:摄像头、机柜等各种行业类型。摄像头类型可以实现 “打开实时的视频流投射到平面” 上这样的功能;机柜类型可以提供机柜开门、创建设备、显示空间容量等功能,这些类型和功能是Unity、UE4中所不提供的,如图中所示: image.png 再比如一些常见的功能,如:温度云图、物体沟边、矩形选择、头顶信息牌、视频流……等等,在UE4和Unity中都没有直接提供,都需要进行一定的封装才能实现;而像城市、地球等大场景的渲染,以及GIS等功能UE4、Unity也是不提供的。所以ThingJS比他们提供了更多的贴近行业的类型和功能,用户可以直接使用而不用重新开发;

开发方式

ThingJS为行业开发者提供了更适合的开发方式和更低的门槛,首先ThingJS是运行在浏览器下,用Javascript进行开发,可以使用VSCode或直接在线开发,可以在chrome下的控制台进行灵活调试,非常适合我们目标客户的开发群体。 image.png 在游戏行业,Unity提供的是C#、UE4提供的是C++和蓝图,而且都需要安装编辑器,其实这都反应的是游戏行业的开发者群体的需求和习惯,C++虽然对性能很有好处,但除了有很高的入门门槛外,C++还是静态语言需要编译,部署到客户哪里是没法进行修改和调试的,这对于我们的客户来说都是较高的门槛;

举一些具体的例子,比如我们开发中经常用到click事件,也就是点击事件,返回我点击到的物体,类似这样的功能,ThingJS就直接提供了click这样的事件,代码如下图中所示,同样的还有mouseover、mousemove等这样的事件。而这一功能,在Unity、UE4中都没有直接提供,而是通过供射线检测完成的。比如说Unity,他要用物理接口发出一个射线,参数是射线发射点和方向,然后从射线的返回值中的Renderer再转换成对象,才能获得拾取到的物体;而在UE4中,如果用蓝图实现,就需要绘制如下图中的一个蓝图,包括获把鼠标位置转换到屏幕空间、获取世界未知,向量相加、再进行射线检测,结果再转换拾取到的对象: image.png

上面UE4和Unity的两种方式和ThingJS的代码对比,很明显ThingJS的代码是最符合前端开发者的使用方式的。

几种技术对比

image.png * 注:Ventuz是一款以多媒体制作为主的软件,在广告、媒体行业应用较多,也用于制作城市、建筑的可视化项目

技术适用场景

image.png

为什么选择WebGL

基于以上对3D技术的分析,ThingJS选择WebGL作为主要的渲染底层的原因是:

  1. 选择WebGL是为了基于浏览器和Javascript作为数字孪生可视化开发的基础;
  2. 目前JS依然是 前端开发者 使用最广泛的脚本语言;
  3. 在我们的目标客户中,JS的普及率很高;
  4. 依照DCV的历史经验来看,JS是开发最灵活、需求响应最迅速的语言;
  5. 在交付给用户后,JS是最适合用户进行二次开发的语言;
  6. Chrome浏览器的调试工具(devtools),是最成熟的运行时调试工具
  7. T3D也是从C++导出接口到JS,所以这也是对之前技术的继承
  8. 而目前在浏览器下,3D渲染主要是依靠WebGL来支持,这就是选择WebGL的原因;
  9. 除了浏览器JS也可以运行在NodeJS中,这也对未来ThingJS和非WebGL引擎的整合提供了基础;

在ThingJS 2.0中,已经提供了对UE4和Unity的部分能力支持,ThingJS未来可以运行在UE4和Unity中,实现跨引擎的支持。