Oasis Engine v0.3 发布

我心飞翔 分类:javascript

本次里程碑 PM:胡松(gz65555)

随着春天的脚步,Oasis Engine 发布 v0.3 啦!Oasis 如新春的嫩芽一样,正茁壮成长。v0.3 重点重构:

  • 重新梳理了网格系统,功能大幅增强并提升易用性;
  • 优化了内置材质,对材质的基础功能进行了增强;
  • 完成 2D 部分的 Sprite 和 Spine 的基础重构。

官网国内用户可以访问国内官网镜像:oasis-engine.gitee.io,内容和 oasisengine.cn 一致。

网格系统升级

v0.2 中的网格系统用户概念冗杂,包含两个渲染器组件: MeshRendererGeometryRenderer ,两个数据类: BufferGeometryMesh ,功能薄弱并且定位模糊。v0.3 将渲染器统一整合为 MeshRenderer  ,可以接收任何 Mesh 相关的数据对象,包括 BufferMeshModelMesh

  • BufferMesh: 定位面向 GPU,数据以 Buffer 为概念,以功能强大、灵活、高性能为设计目标(详见 手册 Playground)。
  • ModelMesh**:**定位面向模型,数据以模型顶点为概念,以功能易用,简洁为设计目标(详见 手册 Playground)。

此外,v0.2 的基本几何体概念较多(如:SphereGeometryCuboidGeometryCircleGeometry),v0.3 重新调整了基本网格功能,精简了网格类的数量,统一收敛到ModelMesh ,开发者可以通过 PrimitiveMesh(详见 手册 Playground) 基本网格工具类创建不同的基本几何体(如通过 createSphere 创建球体的方法), 返回类型均为 ModelMesh

网格系统相关类的关系图如下:
Oasis Engine v0.3 发布

材质系统升级

材质作为渲染流程中用户必然要频繁接触的对象,提升材质易用性功能性成为本次里程碑的主要改动方向。在 v0.2 中各大渲染组件的材质接口并不统一,对开发者来说凌乱 。v0.3 对渲染器的材质接口进行了统一设计,并支持了多材质功能和实例材质功能。我们重新梳理了网格常用材质的基本功能,分别是:

  • UnlitMaterial** : **无光材质。
  • BlinnPhongMaterial**:**BlinnPhong 光照模型材质。
  • PBRMaterial**:金属工作流 **PBR 光照模型材质。
  • PBRSpecularMaterial**: 高光工作流 PBR 光照模型材质。 **

统一常用渲染状态**:**

  • isTransparent: 用来控制材质是否透明;
  • blendMode: 用来控制当材质为 透明 时的颜色混合模式;
  • renderFace: 用来控制渲染正面、背面还是双面;
  • alphaCutoff: 用来设置透明度裁剪值,可以裁剪透明通道小于此值的片元(非透明也可以设置透明通道)。

统一常用材质功能:

  • baseColor: **UnlitMaterial **设置基础颜色,**BlinnPhongMaterial **设置基础(漫反射) 颜色,**PBRMaterial/PBRSpecularMaterial **设置基础(反照率)颜色;
  • baseTexture: **UnlitMaterial **设置基础纹理,**BlinnPhongMaterial **设置基础(漫反射)纹理,**PBRMaterial/PBRSpecularMateria **设置基础(反照率)纹理。
  • tilingOffset**:**用来控制纹理坐标的缩放和偏移,达到偏移纹理和循环平铺纹理的功能,比如用于平铺地表的纹理(详见 Playground)。

此外,对于材质的功能梳理和效果提升并没有彻底完成,我们会在以后的里程碑中持续提升打磨。

2D 精灵升级

为了保障引擎 2D 方向的健康发展,v0.3 对 Sprite 系统进行了底层重构和设计调整,相比 v0.2 在功能和性能上面均有小幅提升 (详见 手册):

  • 增加了 flip 功能,可对精灵进行 x 轴或 y轴的镜像翻转(详见 Playground)。
  • 支持了自定义材质,开发者可对2D Sprite 自定义着色器(详见 Playground)。

除了提供更多的功能外,底层渲染管线也针对精灵的渲染进行了多项优化,我们把 chrome performance 工具降频到 1/6,在不合并 drawCall 的情况下 v0.3 的性能是 v0.2 的 2.1 倍:

  • 重构前 24 FPS:

image.png

  • 重构后 50 FPS:      

image.png

测试环境:
MacBook Pro (13-inch, 2018, Four Thunderbolt 3 ports)
处理器 2.7 GHz 四核Intel Core i7
内存 16 GB 2133 MHz LPDDR3
图形卡 Intel Iris Plus Graphics 655 1536 MB
chorme浏览器 版本 89.0.4389.90

此外,2D 相关的 Sprite 仍在发展初期,后续的里程碑我们会对引擎的 2D 能力进行重点投入。

Spine

Oasis spine 仓库

Spine(详见 Playground) 是在 2D 开发中非常流行的动画软件,广泛支持行业设计生态一直是 Oasis 的目标之一。Oasis 官方为其深度定制了二方运行库,在 v0.3 中 oasis-spine 利用引擎的 BufferMeshMaterial API 实现了 SpineAnimation 组件来渲染 spine 动画。相较于 v0.2 的 API 使用层面做了一定的优化和精简,提升易用性。性能方面相对 buffer 的上传逻辑进行了诸多优化,性能提升了1.6倍

以 60 个相同的 spine 动画为例:

  • oasis-spine runtime 旧版运行时,在30fps左右:

image.png

  • oasis-spine runtime新版运行时,在50fps左右:

image.png

测试环境:
MacBook Pro (16-inch, 2019)
处理器 2.6 GHz 六核Intel Core i7
内存 16 GB 2667 MHz DDR4
图形卡 Intel UHD Graphics 630 1536 MB
chorme浏览器 版本 89.0.4389.90

更新说明

版本更新日志详见:github.com/oasis-engin…。

Playground

新增

  • Sprite:精灵渲染演示
  • Sprite-Flip:精灵翻转功能演示
  • Sprite-Color:精灵颜色功能演示
  • Sprite-CustomShader:精灵自定义着色器功能演示
  • Spine:Spine 渲染演示
  • Primitive-Mesh:基本网格渲染演示
  • ModelMesh:ModelMesh 能力演示
  • Transform:位移、旋转、缩放能力演示
  • Material tillingOffset:材质偏移和平铺纹理功能演示

单测

整体单测覆盖率从 v0.2 的 37% 提升到了 43%

最后

欢迎大家 star 我们的 github 仓库,也可以随时关注我们后续 v0.4 的规划,也可以在 issues 里给我们提需求和问题。开发者可以加入到我们的钉钉群里来跟我们吐槽和探讨一些问题:

image.png

无论你是渲染、TA 、Web 前端或是游戏方向,只要你和我们一样,渴望实现心中的绿洲,欢迎投递简历到 chenmo.gl@antgroup.com。岗位描述详见:www.yuque.com/oasis-engin…。

回复

我来回复
  • 暂无回复内容