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
最后
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点,以及我个人的学习方法、学习路线等,当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面,包括但不限于前端基础,HTML,CSS,JavaScript,Vue,ES6,HTTP,浏览器,算法等等
前端视频资料:
学习文档资料出来是给大家的。知识点涉及比较全面,包括但不限于前端基础,HTML,CSS,JavaScript,Vue,ES6,HTTP,浏览器,算法等等
[外链图片转存中…(img-ZIYFTNIh-1719232349918)]
前端视频资料: