GagaGL

介绍

基于Typescript实现的WebGL渲染器

为Web端数字孪生应用最优解，JS提供Web平台的3D渲染能力。

Web平台有很多的开源引擎，如：Cesium，three.js，BabylonJS，PlayCanvas，ClayGL，Oasis等，以及在CS端也有，如：Unity、UE4、CityEngine、Ogre等引擎，我们对其中一些引擎做了较深入的研究和项目实践，但发现这些引擎并不能完全满足我们所面对的数字孪生领域的需求。这种情况下，我们结合了之前使用C++开发的引擎经验、WebGL的开发经验、上述引擎的使用经验、以及项目中的实践经验，开发了WebGL版的可视化引擎，以便更好地服务于Web平台的3D渲染。

在gaga引擎的框架设计中，主要分为四层：标准封装层，渲染逻辑层，场景资源层和扩展层。

标准封装层，渲染逻辑层，场景资源层构成核心库 gaga.js。

核心库是一个Web优先的，最小可运行的通用图形渲染库。Web优先指的是gaga.js主要基于WebGL和WebGPU作为底层绘图标准。通用图形渲染库指的是gaga.js并不限定图形渲染以外的其它逻辑，适用性与扩展性比较好。

另外，官方提供常用需求的扩展，作为第二方库供开发者使用。至于定制化的需求，支持由开发者基于gaga开发第三方库。

使用

import gagam from 'gagam/index.js' let{View, Plane,Material}=gagam let gaga = new View("#canvas"); let plane = new Plane({ material:new Material.WaterMaterial() }); gaga.add(plane);

**改进：**渲染引擎封装的功能，从大的分类来说，可以分为：场景树，几何体，材质，渲染管线，下面我来简要介绍一下gaga在这些方面的改进。

场景树

改进了场景树矩阵更新的逻辑，基于内置的矩阵标脏系统，可以进行触发式更新。简单理解就是，有改变再更新，不改变不更新，在大多数项目中，可以极大提高矩阵更新效率，从而提升渲染帧率。

优化Uniform的预处理，场景中全局参数，灯光参数，可以单独进行更新并cache，提高Uniform上传效率。

可扩展的渲染层级列表，更方便的渲染排序。基于渲染层级，可方便地实现背景，场景，覆盖物的排序分离，并基于深度缓冲分层，满足特定渲染需求。能一定程度上解决透明图标遮挡问题，满足alwaysOnTop，Overlay的需求等等。（three.js由于没有渲染分层功能，同一场景内的渲染节点不能通过一次遍历分发到不同的渲染数组中，很难高效地实现上述功能。

几何体

核心库提供Geometry，Attribute，Buffer类，提供逐顶点的几何体描述。同时支持Instance绘制。基于几何体的封装，我们可以接收多种类型的数据进行渲染：

模型加载器，例如核心库示例部分提供的GLTFLoader，VoxLoader等。程序生成，例如：点，线，面，管，挤出等。

自定义数据，例如第三方GIS数据，实时传输数据等。

材质

一般的Web渲染引擎中，很难基于内置材质进行扩展。例如three.js，材质的Uniform上传与材质类型是深度耦合的，因此很难基于Standard材质实现扫光等材质特效。gaga提供了材质继承机制，只需要简单插入着色器逻辑，即可实现对PBR材质的快捷修改。

渲染管线

在常见的WebGL引擎中，渲染器的渲染功能容易是过度耦合的。gaga面向基于GPU加速的图形接口，即WebGL与WebGPU，基于这样的思路，我们抽离出RenderPass的概念

目前我们提供WebGLRenderPass作为默认的渲染通道，未来，几乎可以无缝切换到WebGPURenderPass。这样在我们推出WebGPU渲染器后，不需要改变上层代码逻辑，即可直接实现WebGPU的渲染。