初识 WebGL | 青训营笔记

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

1、WebGL是什么？

WebGL是一个与具有丰富特性的 HTML5 一起运行的 3D JavaScript API。

现代图形系统：

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

图形绘制过程：

1.轮廓提取/meshing

2.光栅化

3.帧缓存

4.渲染

2、使用 WebGL

开始

创建 WebGL上下文

2．创建WebGL Program

将数据存入缓冲区

4．将缓冲区数据读取到GPU

GPU 执行WebGL程序，输出结果

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;
}

着色器

顶点着色器

主要用于处理图形轮廓，用来描述顶点的位置、颜色等特性。顶点是指二维或三维空间中的一个点，比如二维或三维图形的端点或交点。

attribute vec2 position;

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

片元着色器

主要用于处理颜色，进行逐片元处理过程如光照的程序。片元是一个WebGL术语，可以将其理解为像素。

precision mediump float;

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

创建项目

这个流程主要分为:

1、创建对应的着色器(顶点着色器，片元着色器), createShader()

2、设置着色器的数据源(设置着色器的GLSL程序代码), shaderSource()

3、编译创建的着色器(使其成为为二进制数据，然后就可以被WebGLProgram对象所使用)，compileShader()

4、添加到 WebGL 渲染上下文中，attachShader()

5、链接，从而完成为程序的片元和顶点着色器准备GPU代码的过程

6、将创建的着色器添加到当前的渲染状态中 useProgram()

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,vertexShader);
gl.attachShader(program,fragmentShader);
gl.linkProgram(program);

gl.useProgram(program);

坐标系

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

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

3、3D Matrix

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

1.投影矩阵 Projection Matrix

2.模型矩阵Model Matrix

3.视图矩阵View Matrix

4.法向量矩阵Normal Matrix