总结
我在成长过程中也是一路摸爬滚打,没有任何人的指点,所以走的很艰难。例如在大三的时候,如果有个学长可以阶段性的指点一二,如果有已经工作的师兄可以告诉我工作上需要什么,我应该前面的三年可以缩短一半;后来去面试bat,失败了有5、6次,每次也不知道具体是什么原因,都是靠面试回忆去猜测可能是哪方面的问题,回来学习和完善,当你真正去招人的时候,你就会知道面试记录是多么重要,面试官可以从面试记录里看到你的成长,总是去面试,总是没有成长,就会被定义为缺乏潜力。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
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 ✳
性能优化
1.webpack打包文件体积过大?(最终打包为一个js文件)
2.如何优化webpack构建的性能
3.移动端的性能优化
4.Vue的SPA 如何优化加载速度
5.移动端300ms延迟
6.页面的重构
所有的知识点都有详细的解答,我整理成了280页PDF《前端校招面试真题精编解析》。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
cn/20210323221747467.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1Z28yMzM=,size_16,color_FFFFFF,t_70)