WebGL| 青训营笔记

zayyo
108 阅读6分钟

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

WebGL是什么

GPU ≠ WebGL ≠ 3D

WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了。

Modern Graphics System

image.png

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

图形绘制过程：

  1. 轮廓提取/meshing
  • 轮廓提取是将三维模型表面的轮廓提取出来，以便于进一步处理。
  • Meshing则是将三维模型转换为网格模型，即将三维模型中的点、线、面等元素转换为网格模型的点、线、面等元素，以便于进行后续的处理和渲染。
  1. 光栅化
  • 光栅化是将3D场景中的几何体元素（如三角形、线段等）转换为2D像素的过程。
  • 在光栅化过程中，图形系统将每个几何体元素与像素网格进行交互，并将每个像素的颜色值、深度值等信息计算出来，以生成最终的2D图像。
  1. 帧缓存
  • 帧缓存是用来存储计算机图形渲染过程中生成的图像数据的内存区域。
  • 每一次渲染完成后，生成的图像数据将被存储在帧缓存中，以便于后续的显示或者处理。
  1. 渲染
  • 渲染是将3D场景转换为2D图像的过程，其中包括几何处理、着色处理、光照处理、深度测试、纹理映射等多个步骤。
  • 通过渲染，计算机可以生成高质量的2D图像，并为各种应用场景（如游戏、虚拟现实、工业设计、科学可视化等）提供支持。

image.png

WebGL Startup

  1. 创建 WebGL 上下文（通过获取 WebGL 的上下文对象）。
  • canvas.getContext("webgl") 或 canvas.getContext("experimental-webgl")
  1. 编译和链接 WebGL Program（即着色器程序）。
  • gl.createShader(type)：创建指定类型的着色器对象（参数 type 可以为 gl.VERTEX_SHADER 或 gl.FRAGMENT_SHADER）。
  • gl.shaderSource(shader, source)：为指定的着色器对象指定 GLSL 着色器代码。
  • gl.compileShader(shader)：编译指定的着色器对象。
  • gl.getShaderParameter(shader, pname)：获取着色器编译状态。
  • gl.getShaderInfoLog(shader)：获取着色器编译错误信息。
  • gl.createProgram()：创建 WebGL 程序对象。
  • gl.attachShader(program, shader)：将编译好的着色器对象附加到 WebGL 程序对象上。
  • gl.linkProgram(program)：链接 WebGL 程序对象。
  • gl.getProgramParameter(program, pname)：获取 WebGL 程序链接状态。
  • gl.getProgramInfoLog(program)：获取 WebGL 程序链接错误信息
  1. 将顶点数据存入缓冲区（通过创建缓冲对象，并将数据写入缓冲区）。
  • gl.createBuffer()：创建缓冲区对象。
  • gl.bindBuffer(target, buffer)：绑定缓冲区对象。
  • gl.bufferData(target, data, usage)：将数据写入缓冲区对象中。
  1. 将缓冲区数据读取到 GPU 中（通过绑定缓冲区对象，并使用 gl.bufferData() 方法将数据传递给 GPU）。
  • gl.bindBuffer(target, buffer)：绑定缓冲区对象。
  • gl.bufferData(target, data, usage)：将数据写入缓冲区对象中。
  1. 设置绘制参数（通过设置视口大小、清空颜色缓冲区等）。
  • gl.viewport(x, y, width, height)：设置视口大小。
  • gl.clearColor(red, green, blue, alpha)：设置清空颜色缓冲区的颜色。
  • gl.clear(mask)：清空指定的缓冲区。
  1. GPU 执行 WebGL 程序，输出结果（通过调用 gl.drawArrays() 或 gl.drawElements() 方法进行绘制）。
  • gl.drawArrays(mode, first, count)：按顺序绘制一组图元（图元类型由 mode 参数指定）。
  • gl.drawElements(mode, count, type, offset)：按顺序绘制一组图元（图元类型由 mode 参数指定），每个图元的顶点从索引数组中读取。

值得注意的是，虽然webGL与canvas2d都可以暴露在canvas元素中，但webGL的坐标系是以画布中心为坐标原点的坐标系而非canvas2d那种以左上角为原点的坐标系。

两个重要着色器

Vertex Shader：顶点着色器，主要负责顶点的几何关系等的运算 Fragment Shader：片源着色器，负责片源颜色等的计算

为什么选择GPU

选择GPU的原因：处理好点阵信息，用简单运算处理，不用复杂运算（CPU）

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

CPU vs GPU

  • CPU：由数百万个晶体管组成，有多个处理内核，被称为计算机的大脑，是所有现代计算系统必不可缺的组成部分，主要执行计算机和操作系统所需要的命令和流程。
  • GPU：由大量的小运算单元构成，每个运算单元只负责处理简单的计算，由于每一个单元都是独立的，所以所有计算都可以并行处理。
  • 两个都是基本的计算引擎，GPU适合用在处理从串行计算到数据库运行这种一系列广泛的工作中，而GPU则更适合用在图像处理和游戏中。

WebGL主要应用

WebGL完美地解决了现有的Web交互式三维动画的两个问题：

  • 通过HTML脚本本身实现Web交互式三维动画的制作，WebGL无需任何浏览器插件支持；
  • WebGL利用底层的图形硬件可以加速进行图形渲染。

图像基本概念

图像分辨率：用于确定组成一幅图像的像素数据，就是指在水平和垂直方向上图像所具有的像素个数。

图像深度：图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色值，或可能的灰度级数。

视频基本概念

分辨率：每个帧的图像分辨率

帧率：视频单位时间内包含的视频帧的数量

码率：就是指视频单位时间内传输的数据量，一般我们用kbps来表示，即千位每秒

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

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

基本图元：

  • 点
  • 线
  • 三角

任意的多边形都可以由三角形组成：三角剖分。

avatar
文章
阅读
粉丝