webGL的框架与引擎

最新推荐文章于 2025-05-07 09:01:12 发布

Yoo前端

最新推荐文章于 2025-05-07 09:01:12 发布

阅读量1.2k

点赞数 1

分类专栏：数据可视化文章标签： webGL javascript 渲染游戏引擎渲染引擎

本文链接：https://blog.csdn.net/qq_43277404/article/details/120827027

版权

数据可视化专栏收录该内容

3 篇文章

订阅专栏

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

在这里插入图片描述

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

在这里插入图片描述

Fast functional WebGL

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

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

OGL

在这里插入图片描述

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 ✳

在这里插入图片描述

http://claygl.xyz/

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

osgjs

https://github.com/cedricpinson/osgjs

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