初识WebGL | 青训营笔记

xcdval
143 阅读3分钟

初识WebGL | 青训营笔记

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

一、WebGL定义

WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。

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

image-20220818085551965

1.轮廓提取

2.光栅化

3.帧缓存

4.渲染

The Pipeline

image-20220818085904795

三、GPU和CPU的区别

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

CPU主要用来处理复杂问题

四、WebGL和OpenGL的区别

WebGL（全称全写Web Graphics Library）可以为HTML5 Canvas提供硬件3D加速渲染，可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面。

WebGL基于OpenGL ES，它缺少常规OpenGL具有的许多功能，例如仅支持顶点和片段着色器。OpenGL具有WebGL所不具备的功能，例如几何体着色器，镶嵌细分着色器和计算着色器

五、WebGL Startup过程
  • 创建WebGL上下文
  • 创建WebGL Program
  • 将数据存入缓冲区
  • 将缓冲区数据读取到GPU
  • GPU执行WebGL程序，输出结果

image-20220818090504551

六、Create WebGL Context
const canvas = document.querySelecor('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) {
            
        }
        if(context) {
            break;
        }
    }
    return context;
}
七、The Shaders

  • Vertex Shader 顶点着色器是一组指令代码，这组指令代码在顶点被渲染时执行。 同一时间内，只能激活一个顶点着色器。

  • Fragment Shader 通过编程控制编程控制屏幕上显示颜色的阶段叫做片元着色阶段。这个阶段处理OpenGL光栅化之后生成的独立片元，使用着色器计算片元的最终颜色和它的的深度值。

  • Rasterization 光栅化是判断某一部分几何体(点、线或者三角形)所覆盖的屏幕空间。因为屏幕是由一个个的像素点构成的，如果要画一条线，就要判断这条线在哪几个像素点表示

八、3d matrix

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

  • 投影矩阵 Projection Matrix

  • 模型矩阵 Model Matrix

  • 视图矩阵 View Matrix

  • 法向量矩阵 Normal Matrix

avatar
文章
阅读
粉丝