webGL的框架与引擎

冷不防 2022-09-16 11:04 300阅读 0赞

> 参考：https://zhuanlan.zhihu.com/p/162878354  
> 吴多益原著：如何选择 WebGL 框架和引擎？  
> 强烈建议详细查看吴大神的原作，本文只是摘抄笔记了部分感兴趣或者常用的库。

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5ZWk_size_20_color_FFFFFF_t_70_g_se_x_16]

### webGL框架和引擎按照定位可以分成这三种类型： ###

**webGL封装**：定位是简化WebGL开发。最大的特点是必须自己写GLSL；  
**渲染引擎**：定位是三维物体及场景展示，一般会抽象出场景，相机，灯光等概念。不需要自己写GLSL；  
**游戏引擎**：定位是游戏开发，在前面的渲染引擎的基础上，还提供了骨骼动画，物理引擎，AI,GUI等功能，以及可视化编辑来设计关卡，支撑大型游戏的开发。

### webGL封装 ###

#### twgl.js ####

> https://github.com/greggman/twgl.js

> This library’s sole purpose is to make using the WebGL API less verbose.  
> 这个库的唯一目的是让使用 WebGL API 变得不那么冗长  
> 所以其主要就是简化了WebGL的代码，对其进行了封装和优化，减少了代码量

在github种creating buffers for a cube 的例子种：

仅需7行代码就可以在twgl.js实现webGL需要近20行实现的内容：  
在GitHub的原文中也提到：

> A simple lit cube in WebGL might easily take over 60 calls into WebGL.

const arrays = { 
      position: [1,1,-1,1,1,1,1,-1,1,1,-1,-1,-1,1,1,-1,1,-1,-1,-1,-1,-1,-1,1,-1,1,1,1,1,1,1,1,-1,-1,1,-1,-1,-1,-1,1,-1,-1,1,-1,1,-1,-1,1,1,1,1,-1,1,1,-1,-1,1,1,-1,1,-1,1,-1,1,1,-1,1,-1,-1,-1,-1,-1],
      normal:   [1,0,0,1,0,0,1,0,0,1,0,0,-1,0,0,-1,0,0,-1,0,0,-1,0,0,0,1,0,0,1,0,0,1,0,0,1,0,0,-1,0,0,-1,0,0,-1,0,0,-1,0,0,0,1,0,0,1,0,0,1,0,0,1,0,0,-1,0,0,-1,0,0,-1,0,0,-1],
      texcoord: [1,0,0,0,0,1,1,1,1,0,0,0,0,1,1,1,1,0,0,0,0,1,1,1,1,0,0,0,0,1,1,1,1,0,0,0,0,1,1,1,1,0,0,0,0,1,1,1],
      indices:  [0,1,2,0,2,3,4,5,6,4,6,7,8,9,10,8,10,11,12,13,14,12,14,15,16,17,18,16,18,19,20,21,22,20,22,23],
    };
    const bufferInfo = twgl.createBufferInfoFromArrays(gl, arrays);

> twgl 的定位只是减少重复代码，并没有进一步抽象，所以使用它和直接用 WebGL  
> 在学习成本上没太大区别，因此非常适合初学者，但也意味着它没什么独特的功能。

#### regl.js ####

![在这里插入图片描述][3713330ce2244de195a0ec4382309202.png]

> Fast functional WebGL

顾名思义，regl对webGL进行了函数式的封装。

> 和 twgl 单纯简化代码相比，regl 提供了跟高层的抽象，将原本的过程式转成了函数式，使得看起来更符合直觉

#### OGL ####

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5ZWk_size_20_color_FFFFFF_t_70_g_se_x_16 1]

> Minimal WebGL library  
> 最小的webGL库

ogl定位比较特别，介于webGL封装和渲染引擎之间。

> https://github.com/oframe/ogl

> https://webglfundamentals.org/webgl/lessons/zh\_cn/ webGL教程WebGL Fundamentals

### 渲染引擎 ###

渲染引擎比webGL教程更加容易上手一些

#### Filament ####

> https://github.com/google/filament  
> https://google.github.io/filament/Filament.html\#about/authors

整体上我觉得它是学习 PBR 渲染实现原理的优秀项目，虽然暂时不适合在 Web 上用，但值得继续关注。

#### Claygl ✳ ####

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5ZWk_size_18_color_FFFFFF_t_70_g_se_x_16]

> http://claygl.xyz/

Claygl 是 ECharts 核心开发者 pissang 大神的开发的 WebGL 引擎

#### osgjs ####

> https://github.com/cedricpinson/osgjs

OSGJS 是一个基于 OpenSceneGraph 概念的 WebGL 框架。它允许个人使用“类似 OpenSceneGraph”的工具箱通过 JavaScript 与 WebGL 交互，并提供将各种资产导出为 osgjs 格式的工具。API 尽可能与 OpenSceneGraph 相似，为库的老手提供熟悉的环境，并向新人介绍流行且经过严格审查的接口集

### 游戏引擎 ###

游戏引擎在渲染器的基础上增加了面向游戏开发的各种功能，包括 AI、物理、编辑器等，工作量巨大，比起图形学算法，更重要还有工程能力。

#### Unreal Engine ####

#### Unity ####

#### Godot ####

#### Three.js ####

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5ZWk_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/c84f410393194a80b6fb154a66984442.png
[3713330ce2244de195a0ec4382309202.png]: /images/20220828/bc8dcf16be214f75a6f89461430bce56.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5ZWk_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/f741afeffdc4454e97f3a2bfdeecb979.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5ZWk_size_18_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/83cbc1038a7d48aab5af47c02983ca4a.png