关于前端:WebGL-基础笔记

WebGL

WebGL 是什么：WebGL（Web Graphics Library）是一种3D绘图协定，这种绘图技术标准容许把 JavaScript和 OpenGL ES 2.0联合在一起，通过减少 OpenGL ES 2.0 的一个 JavaScript 绑定，WebGL 能够为 HTML5 Canvas 提供硬件 3D 减速渲染
GPU ≠ WebGL ≠ 3D
WebGL 很大水平上在和 GPU 打交道但不仅仅是 GPU 渲染
WebGL 不仅仅是绘制3D，把浏览器作为一个桥梁，是浏览器上的 OpenGL

古代计算机图形学零碎

光栅（Raster）：简直所有的古代图形系统都是基于光栅来绘制图形的，光栅就是指形成图像的像素阵列
像素（Pixel）：一个像素对应图像上的一个点，它通常保留图像上的某个具体位置的色彩等信息
帧缓存（Frame Buffer）：在绘图过程中，像素信息被寄存在帧缓存中，帧缓存是一块内存地址
CPU（Central Processing Unit）：地方处理单元，负责逻辑计算
GPU（Graphics Processing Unit）：图形处理单元，负责图形计算。GPU 由大量的小运算单元形成，每个运算单元只负责解决很简略的计算。每个运算单元彼此独立。因而所有计算能够并行处理
CPU VS GPU : CPU 适宜解决简单计算工作，不适宜解决数量十分大的简略工作，则这种工作交给 GPU 来解决
WebGL 和 OpenGL 的关系：WebGL 是 OpenGL 在浏览器上的一种实现
图形计算渲染过程：
- 轮廓提取/ meshing
- 光栅化
- 帧缓存
- 渲染

利用 WebGL 进行图形渲染

利用 WebGL 绘图步骤：
1. 创立 WebGL 上下文
2. 创立 WebGL Program
3. 将数据存入缓冲区
4. 将缓冲区数据读取到 GPU
5. GPU 执行 WebGL 程序，输入后果
创立 WebGL 上下文
- 在 HTML 中创立一个宽高 1000 的canvas画布：<canvas id="canvas" width="1000" height="1000"></canvas>
- 在 JavaScript 中获取 DOM 后调用getContext('webgl')获取对应的上下文
```
const canvas = document.getElementById("canvas");const gl = canvas.getContext('webgl');
```
- canvas.getContext() 函数接管的参数在不同浏览器中会不同。因为晚期 WebGL 的 context，还不能通过正式的名称webgl来获取，必须应用experimental-webgl来获取 context 对象，当初很多浏览器也反对 webgl2 等其余参数，所以能够封装成一个具备个性检测的函数
```
function create3DContext(canvas,options) {  const names = ['webgl', 'experimental-webgl','webkit-3d', ' moz-webgl'];  if (options && 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;}
```

创立 WebGL Program

顶点着色器 Vertex Shader : 用于解决顶点的地位

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

片元着色器 Fragment Shader : 并行处理顶点突围内的所有像素，解决次数更多。色彩取值从 0.0 - 1.0 的浮点范畴
```
precision mediump float;void main(){  gl_FragColor = vec4(1.0,0.0,0.0,1.0);}
```

Create Program

// 顶点着色器代码const vertexShaderCode = `attribute vec2 position;void main(){    gl_PointSize = 1.0;    gl_Position = vec4(position,1.0,1.0);}`;// 片元着色器代码const fragmentShaderCode = `precision mediump float;void main(){    gl_FragColor = vec4(1.0,0.0,0.0,1.0);}`;// 顶点着色器const vertexShader = gl.createShader(gl.VERTEX_SHADER);gl.shaderSource(vertexShader, vertexShaderCode);gl.compileShader(vertexShader);// 片元着色器const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);gl.shaderSource(fragmentShader, fragmentShaderCode);gl.compileShader(fragmentShader);// 创立程序const program = gl.createProgram();gl.attachShader(program, vertexShader);gl.attachShader(program, fragmentShader);gl.linkProgram(program);gl.useProgram(program);

创立并应用着色器的相干步骤：
- 创立着色器对象gl.createShader()
- 向着色器对象中填充着色器程序的源代码gl.shaderSource()
- 编译着色器gl.compileShader()
- 创立程序对象gl.createProgram()
- 为程序对象调配着色器gl.attachShader()
- 连贯程序对象gl.linkProgram()
- 应用程序对象gl.useProgram()

将数据存入缓冲区（Frame Buffer）
- 坐标系：canvas 和浏览器的坐标轴都是左上角为原点，x 轴向右为正方向，y 轴向下为正方向。在 WebGL 的坐标体系中，是一个以绘制画布的核心为原点，范畴从 -1 到 1。在 3D 的状况下，z 轴正方向是向外的

绘制一个三角形：

用浮点类型数组示意顶点数据，创立 buffer 后将返回的 bufferid 绑定到上下文，最初绑定数据到缓冲区

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

将缓冲区数据读取到 GPU

做一个指针的绑定

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

GPU 执行 WebGL 程序，输入后果
- 革除缓冲区数据，再以三角形图元形式绘制三角形，gl.drawArrays() 的三个参数，第一个是绘制的模式（三角形），第二个是绘制的 points 的起始下标，最初一个是绘制的顶点个数，因为每个点是一个二维的向量，length为 6，所以绘制三角形须要除以 2
```
gl.clear(gl.COLOR_BUFFER_BIT);  //革除缓冲区gl.drawArrays(gl.TRIANGLES, 0 ,points.length / 2);  //绘制
```
- 后果

其余形式绘制图形

用 canvas 2D 绘制三角形
- 在 HTML 中创立一个宽高 1000 的canvas画布：<canvas id="canvas" width="1000" height="1000"></canvas>
- 在 JavaScript 中获取 canvas 后通过 beginPath，moveTo，lineTo 等 API 绘制出图形
```
const canvas = document.getElementById('canvas');const ctx = canvas.getContext('2d');ctx.beginPath();ctx.moveTo(250, 0);ctx.lineTo(500, 500);ctx.lineTo(0, 500);ctx.fillStyle = 'red';ctx.fill();
```

The book of shaders
Mesh.js
glsl-doodle
SpriteJS
ThreeJS
shadertoy

WebGL 和 canvas

WebGL 能够看成 OpenGL 的在浏览器上的一种实现，OpenGL 则是能够间接调用计算机 GPU 算力的一个 3d API。canvas 是在浏览器上的 2d 画布，通过 WebGL 转译光栅后在 canvas 上显示进去
相比 canvas，WebGL性能更好。如果须要实现简单成果，倡议应用 WebGL
WebGL 能够压缩雷同材质的图形，通过 GPU 一次渲染成千上万个图形，而 canvas 通过浏览器渲染，性能较差

WebGL

古代计算机图形学零碎

利用 WebGL 进行图形渲染

其余形式绘制图形

Read More

WebGL 和 canvas