webgl | 青训营笔记

117 阅读1分钟

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

一、❗ 本堂课重点内容:

本节课主要讲述了图形绘制、WEBGL等等的相关知识。

二、❗ 详细知识点介绍:

  • 光栅(Raster):几乎所有的现代图形系统都是基于光栅来绘制图形的,光栅就是指构成图像的像素阵列。
  • 像素(Pixel):一个像素对应图像上的一个点,它通常保存图像上的某个具体位置的颜色等信息。
  • 帧缓存(Frame Buffer)︰在绘图过程中,像素信息被存放于帧缓存中,帧缓存是一块内存地址。
  • CPU (Central Processing Unit):中央处理单元,负责逻辑计算。
  • GPU (Graphics Processing Unit):图形处理单元,负责图形计算。

✨图形绘制

  1. 轮廓提取/ meshing
  2. 光栅化
  3. 帧缓存
  4. 渲染

❌CPU相当于管道,每次处理一个计算

image.png ⬇️处理几十万像素,效率很低 image.png

✔️GPU大量计算单元

  • GPU由大量的小运算单元构成
  • 每个运算单元只负责处理很简单的计算
  • 每个运算单元彼此独立
  • 因此所有计算可以并行处理

image.png

😃webGL相当于openGL ES在浏览器端的对应 image.png

the pipline

graph TD
Data --> Processor --> FrameBuffer -->Pixels

WEBGL start⛵

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

3D标准模型的四个齐次矩阵(mat4)✈️

  1. 投影矩阵Projection Matrix
  2. 模型矩阵Model Matrix
  3. 视图矩阵View Matrix
  4. 法向量矩阵Normal Matrix

参考资料📕

thebookofshaders.com/

github.com/mesh-js/mes…

doodle.webgl.group/

spritejs.com/#/

threejs.org/

www.shadertoy.com/