SEIN.JS - 渐进式Web3D解决方案

SEIN.JS - 渐进式Web3D解决方案

SEIN.JS(官网Github)致力于打造一个专业的多平台(目前已支持Web、小程序、小游戏,未来还会更多)的3D开发解决方案。它提供了从简单快速开发到复杂稳健设计的各个过渡阶段,来灵活应对各个项目的需求,目前已经经过了支付宝五福、蚂蚁庄园登山赛等多个大流量项目验证。本引擎借鉴了许多成熟的游戏引擎中优秀的特点,也结合了作者本人在Web前端领域的经验,加上了许多针对Web端的特别设计和优化,使其在开发效率和运行效率之间保持了平衡,并拥有不俗的扩展性和复用性。本引擎致力于让前端开发者在更加简单地进行游戏开发的同时,也能够学习到游戏开发的一些优秀规范,借此培养起良好的开发习惯。

SEIN的整体被设计为几个部分——Runtime(内核+渲染层),Unity作为场景编辑器,Webpack作为工程构建工具,先来看一个Unity工具的例子:

知乎视频www.zhihu.com图标知乎视频www.zhihu.com图标

Runtime

SEIN的框架完全由Typescrpit编写,其设计很纯粹——集成必要的功能保证内核的精简,并提供强大的扩展性。

框架内核

以此为原则,SEIN集成了渲染系统、资源系统、玩法系统等等游戏必要的系统,并提供了强大的扩展能力,来为未来的逻辑复用和业务需求预留了可能。无论是一个单纯的逻辑组件如相机控制器,还是复杂一些的资源加载器、事件触发器,甚至是整个音频系统、UI系统等,都可以借由扩展性来实现。同时出于对稳定性的追求,SEIN专门提供了异常链系统,能够帮助开发者轻松监控并精准定位异常。

渲染系统

由于Web游戏的特殊性,SEIN的渲染系统相较于传统的游戏引擎所占的比例较大。其基于我们团队单独开发的分离的渲染引擎Hilo3d,这是一个优秀的基于WebGL1.0的前向渲染引擎,完全亲和glTF标准,目前可以应对大部分的Web端上场景。但由于SEIN的目标更加广大,所以我们已然开始规划下一代的渲染引擎,其将是一个基于RHI的跨图形API的、具有可编程管线的渲染系统。

研发体系

对于一个解决方案,研发体系和内核具有同等的重要性。我们目前选择的是拥抱标准,对业界工具最佳实践整合,提供了一套基于CLIUnityglTFVSCodeWebpackInspector的标准工作流程。这套流程灵活强大,引入了许多游戏领域和Web领域的优化技术,能够满足我们对工程管理、场景布置、脚本绑定、代码开发、调试、发布各个环节的要求。

Unity扩展

Unity扩展提供了给美术人员便捷的调整和预览模式,支持Unity相当多的功能导出,包括节点、动画、灯光、相机、Lightmap、全局光照、全局反射等,以及给开发人员方便得逻辑绑定方式。基于这套体系,我们还提供了高效的模型压缩方案以及简单易用的跨平台(目前主要是小程序/小游戏)方案,让开发和最终的用户体验进一步提升。

Webpack Loaders

我们从Unity导出了GLTF,那自然就需要将其加载到SEIN中。不仅仅是GLTF,我们可能还有独立的图片、音频等等资源,对于这些资源我们经常希望在构建阶段做一些优化处理,在发布时能选择其发布到CDN上。而Webpack Loader就为我们提供了这个可能。
以此为动机,我提供了seinjs-gltf-loader、seinjs-atlas-loader、seinjs-url-loader等,帮助开发者精确管理开发用到的资源。
以gltf-loader为例,我们提供了模型压缩、打包GLB、资源预处理器以及资源发布器功能:


跨平台

以Webpack为核心,SEIN还提供了seinjs-cli来作为标准工程的初始化,支持多种模板和扩展容器(包括小程序/小游戏)。同时结合Webpack工作流,来达到很灵活的资源管理。使用一个Webpack的Plugin还能非常容易得适配小程序和小游戏,目前已支持微信和支付宝的小游戏以及小程序。


Inspector

最后,SEIN还提供了提供了Inspector帮助Debug,拥有Chrome扩展和代码引入两种方式,支持开发者自定义对象的检视器。

知乎视频www.zhihu.com图标

生态扩展

由于在设计之初就明确的扩展体系,SEIN得以非常便于建立起一个扩展生态系统,对于这整个生态我们也有明确的规划。我们的主要目标是不断扩展可用的扩展组件和系统、提供各种丰富的模板以及优质的资源,使得开发更加简单以及更容易。目前已经有许多一方扩展来帮助开发者了,未来还会有更多。

项目支持

从SEIN第一版发布以来,我们已经支持了不少项目,并还有不少项目正在筹划上线中(包括跑酷、换装等项目),其中有不少大家熟悉的项目:

知乎视频www.zhihu.com图标知乎视频www.zhihu.com图标知乎视频www.zhihu.com图标知乎视频www.zhihu.com图标知乎视频www.zhihu.com图标知乎视频www.zhihu.com图标知乎视频www.zhihu.com图标

欢迎参与

整个SEIN的成果离不开它的建设团队:我们的团队,目前SEIN的整个体系已经完全开源,也欢迎更多同好一起参与建设!

编辑于 07-20

文章被以下专栏收录