WebGL与动画实现|青训营笔记

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

WebGL是什么？

GPU 不等于WebGL 不等于 3D

Modern Graphics System

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

图形绘制过程

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

GPU

GPU由大量的小运算单元构成

每个运算单元只负责处理很简单的计算

每个运算单元彼此独立

因此所有计算可以并行处理

WebGl Startup

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

const canvas = document.querySelector('canvas')
const gl = canvas.getContext('webgl')

function create3DContext(canvas, options) {
  const names = ['webgl', 'experimental-webgl', 'webkit-3d','moz-webgl']
  if(options.webgl2) names.unshift('webgl2')
  let context = null
  for(let ii = 0; ii < name.length; ++ii) {
    try {
      context = canvas.getContext(names[ii], options)
    }catch(e) {

    }
    if(context) {
      break
    }
  }
  return context
}

The Shaders

1.Vertex Shader

attribute vec2 position

void main() {
    gl_PointSize = 1.0
    gl_Position = vec4(position, 1.0, 1.0)
}

2.Fragment Shader

precision mediump float

void main() {
    gl_FragColor = vec4(1.0 , 0.0, 0.0, 1.0)
}

3.Create Program

4.Data to Frame Buffer

Draw Polygon with 2D Triangulations

使用Earcut 进行三角剖分

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

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