webGL的框架与引擎_filament 库 与 webgl 关系，阿里大牛教你自己写前端第三方库

最后

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

前端视频资料： 开源分享：docs.qq.com/doc/DSmRnRG…

在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封装和渲染引擎之间。

github.com/oframe/ogl

webglfundamentals.org/webgl/lesso… webGL教程WebGL Fundamentals

渲染引擎

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

Filament

github.com/google/fila…
google.github.io/filament/Fi…

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

Claygl ✳

claygl.xyz/

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

osgjs

github.com/cedricpinso…

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

游戏引擎

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。