WebGL初识 | 青训营笔记

Canivores
120 阅读2分钟

WebGL初识 | 青训营笔记

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

WebGL是什么

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

现代图形系统：

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

GPU

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

CPU VS GPU

CPU 作为强大的执行引擎，CPU 将它数量相对较少的内核集中用于处理单个任务，并快速将其完成。这使它尤其适合用于处理从串行计算到数据库运行等类型的工作。

GPU 最初是作为专门用于加速特定 3D 渲染任务的 ASIC 开发而成的。随着时间的推移，这些功能固定的引擎变得更加可编程化、更加灵活。尽管图形处理和当下视觉效果越来越真实的顶级游戏仍是 GPU 的主要功能，但同时，它也已经演化为用途更普遍的并行处理器，能够处理越来越多的应用程序。

参考博客：CPU 与 GPU 对比：两者有什么区别？ (intel.cn)

图形绘制过程：

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

WebGL VS OpenGL：性质不同、插件支持不同、用途不同

参考博客:

WebGL和OpenGL的联系和区别

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

使用 WebGL

WebGL Startup

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

image.png

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

3D Matrix

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

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

参考博客：

avatar
文章
阅读
粉丝