这是我参与「第五届青训营 」伴学笔记创作活动的第 15 天

初识WebGL

现代图形系统（Modern Graphics System）

• 光栅(Raster)︰几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列。

• 像素(Pixel):一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息。

• 帧缓存(Frame Buffer)︰在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址。

• CPU (Central Processing Unit);中央处理单元，负责逻辑计算。

• GPU (Graphics Processing Unit):图形处理单元，负责图形计算。

• 工作

  • 轮廓提取/ meshing
  • 光栅化
  • 帧缓存
  • 渲染

  

  • 数据处理
  • 缓存
  • 输出

  

• CPU vs GPU

  • CPU则很难满足太多核运算
  • GPU由大量的小运算单元构成，每个运算单元只负责处理很简单的计算，每个运算单元彼此独立，因此所有计算可以并行处理

WebGL

• OpenGL：OpenGL, OpenGL ES, WebGL, GLSL, GLSL ES API Tables (umich.edu)

• webGL Startup

  

  • 创建WebGL 上下文
  • 创建WebGL Program
  • 将数据存入缓冲区
  • 将缓冲区数据读取到GPU
  • GPU 执行WebGL程序，输出结果

• 使用[Earcut](GitHub - mapbox/earcut: The fastest and smallest JavaScript polygon triangulation library for your WebGL apps)进行三角剖分

• [3D Meshing](SpriteJS/next - The next generation of spritejs.)

• Transforms

  

  • 转换平移

  

• [Apply Transforms](青训营-WebGL-4 - 码上掘金 (juejin.cn))

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

  • 投影矩阵 Projection Matrix
  • 模型矩阵Model Matrix
  • 视图矩阵 View Matrix
  • 法向量矩阵Normal Matrix

• Read more

  • [The book of shaders](The Book of Shaders)
  • [Mesn.js](GitHub - mesh-js/mesh.js: A graphics system born for visualization 😘.)
  • [glsl-doodle](Glsl Doodle (webgl.group))
  • [SpriteJS](SpriteJS ~ Next - 下一代 SpriteJS)
  • [ThreeJS](Three.js – JavaScript 3D Library (threejs.org))
  • [ShaderToy](Shadertoy BETA)