WebGL 月影带练 | 青训营笔记

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

一、本堂课重点内容：

WebGL介绍与实战

二、详细知识点介绍：

Modern Graphics System（现代图形系统）

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

如何工作

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

GPU

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

WebGL Startup过程

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

Create 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 < names.length; ++ii) {
    try {
      context = canvas.getContext(names[ii], options);
    } catch (e) {
      // no-empty
    }
    if (context) {
      break;
    }
  }
  return context;
}

The Shaders

Vertex Shader

attribute vec2 position;

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

Fragment Shader

percision mediump float;

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

Create Program

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertex);
gl.compileShader(vertexShader);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragment);
gl.compileShader(fragmentShader);

const program = gl.createProgram();
gl.attachShader(program, vertextShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

gl.useProgram(program);

Data to Frame Buffer

const points = new Float32Array([
  -1, -1,
  0, 1,
  1, -1,
]);

const bufferId = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
gl.bufferData(gl.ARRAT_BUFFER, points, gl.STATIC_DRAW);

Frame Buffer to GPU

const vPosition = gl.getAttribLocation(program, 'position'); //获取顶点着色器中position变量的地址
gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0); //给变量设置长度和类型
gl.enableVertexAttribArray(vPosition); //激活这个变量

position

attribute vec2 position;

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

Output

l.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, points.length / 2);

三、引用参考：

月影老师的WebGL课程 ppt

---