WebGL | 青训营笔记

用户4738855737073
55 阅读2分钟

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

1.WebGL介绍

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

CPU和GPU对比

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

image.png

WebGL开始过程

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

image.png

示例代码

创建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("wegl2")
    let context = null;
    for(let i=0;i<name.length;i++){
        try{
            context = canvas.getContext(names[i],options);
        }catch(e){
        
        }
        if(context) break
        
    }
    return context
}
复制代码
复制代码

3D矩阵

  1. 投影矩阵
  2. 模型矩阵
  3. 视图矩阵
  4. 法向量矩阵

webgl原理

WebGL 在 GPU 上的工作主要分为两个部分，

  1. 顶点着色器所做的工作（将顶点转换为裁剪空间坐标）
  2. 片元着色器所做的工作（基于顶点着色器的计算结果绘制像素点）。

假设我们需要绘制一个三角形，此时 GPU 上进行的工作便是先调用三次顶点着色器计算出三角形的 3 个顶点在裁剪空间坐标系中的对应位置，并通过变量 gl_Position 保存在 GPU 中，然后调用片元着色器完成每个顶点颜色值的计算，并通过变量 gl_FragColor 将对应的颜色值存储在 GPU 中。完成这些工作后我们已经得到了绘制三角形所需的像素点，最后便是光栅化三角形了

avatar
文章
阅读
粉丝