嘎嘎学习之WebGL | 青训营笔记

闫池
90 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的第十二天

1. 什么是WebGL/什么是 GPU

WebGL是什么？

WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航效果以及一些数据的视觉化。

image-20220814145041378

WebGL为什么不像其它前端技术那么简单

image-20220814145346237

图形绘制的过程

image-20220814145552699

2. 初始化WebGL

  1. 创建WebGL上下文
  2. 创建WebGL Program
  3. 将数据存入缓冲区
  4. 将缓冲区数据读到GPU
  5. GPU执行WebGL程序，输出结果

image-20220814160617258

  1. 创建WebGL上上下文

image-20220814160854254

  1. 着色器 （顶点着色器，片源着色器）

image-202208141609196753. 创建program

image-20220814161036211

  1. 坐标系

image-20220814161232747

  1. 缓存/渲染

image-20220814162023939

  1. 输出/绘制

image-20220814162143960

所以现在可以理解为什么WebGL难了

同样的效果如果用2d实现只需要8行代码

image-20220814162803390

3. 认识WebGl

3.1 坐标系

image-20220814161232747

3.2 变换

image-20220814163556537

image-20220814163745925

3.3 3d标准模型的四个齐次矩阵

image-20220814164345195

参考资料

image-20220814164721757

SpriteJs

SpriteJS 是一款由 360 奇舞团开源的跨终端 canvas 绘图库，可以基于 canvas 快速绘制结构化 UI 、动画和交互效果，并发布到任何拥有 canvas 环境的平台上（比如浏览器、小程序和 node ）。

ThreeJS

three.js就是使用javascript 来写3D程序。 在浏览器端，WebGL 是一个底层的标准，在这些标准被定义之后，Chrome、Firefox之类的浏览器实现了这些标准。然后，就能通过 JavaScript 代码，在网页上实现三维图形的渲染了。ThreeJS则是封装了底层的图形接口，更容易来实现3D程序。

ShaderToy

shadertoy是一个编辑，分享和查看shader程序及其实现的效果的网站，上面有许多大佬分享他们制作的酷炫效果的代码，和完全开源的代码，你可以在大佬的代码上进行修改并实时看到修改的效果。非常的好玩！

avatar
文章
阅读
粉丝