WebGL与动画实现 | 青训营笔记

YorkWu
96 阅读3分钟

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

WebGL与动画实现

Why WebGL / Why GPU

  • 为什么WebGL不像其他前端一样简单

    • WebGL涉及许多系统以及底层的操作

现代图形系统

  • 光栅：现代图形系统基本都基于光栅，光栅就是一个像素阵列。

  • CPU：用于逻辑运算。

  • GPU：用于图形运算。

  • 现代图形系统的渲染过程

    • 轮廓提取（网格化）
    • 光栅化
    • 帧缓存
    • 渲染

  • 渲染管线（Pipeline）

    • 将数据进行处理后，放入帧缓存，设备将像素从帧缓存中取出然后显示。
    • 可以理解为活字印刷——将很多部分拼接起来光栅化放入帧缓存。

  • CPU vs GPU

    • CPU就像一个处理能力强的管线，将一个比较复杂的问题扔给他可以处理
    • 图像渲染，例如一个800*600的图片，需要计算480000个像素，但每个像素都只需要简单计算出颜色，对CPU来说即使运算简单但仍然需要一个一个执行，计算速度慢。
    • GPU像处理能力弱的很多管线，虽然不能计算复杂逻辑运算，但是数量很多，对于图形渲染这类问题可以并行计算，速度快。

WebGL & OpenGL

  • WebGL是OpenGL的一个在Web方面的子集，OpenGL是一个图形渲染引擎。

WebGL

启动WebGL

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

image-20220819233801325

  • 创建WebGL上下文

     const canvas = document.querySelector("canvas");
 const gl = canvas.getContext("webgl")

  • 着色器

    • 使用着色器处理数据，创建出WebGL Program

Polygon

  • 多边形如何绘制？

    • 三角剖分（使用Earcut三角剖分）

  • 三维渲染时，一般在设计工具中进行三角剖分渲染时直接绘制三角形

变换

2D

  • 平移

    • {x=x0+x1y=y0+y1\left\{ \begin{array}{cl} x=x_0+x_1\\ y=y_0+y_1\\ \end{array} \right.

  • 旋转

    • {x=x0cosθ−y0sinθy=x0sinθ+y0cosθ\left\{ \begin{array}{cl} x=x_0cos\theta -y_0sin\theta\\ y=x_0sin\theta +y_0cos\theta\\ \end{array} \right.

  • 缩放

    • {x=sxx0y=syy0\left\{ \begin{array}{cl} x=s_x x_0\\ y=s_y y_0\\ \end{array} \right.

  • 旋转+缩放是线性变换

  • 变换可以变为矩阵运算，3d只需要改为3维矩阵运算即可

3D Matrix

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

    • 投影矩阵

      • 用于处理设计坐标系，例如坐标系具有的最大最小值，左手/右手系等等

    • 模型矩阵

      • 用于模型的变换，改变模型的大小，方向，位置，旋转等等

    • 视图矩阵

      • 对于摄像机的模拟，不改变物体模型，改变摄像机的位置，对视图进行处理

    • 法向量矩阵

      • 物体的某个点向外的法向量由此矩阵给出，用于处理光线，阴影等信息

总结

  • 经过本节课的学习，了解到现代图形系统的工作原理，明白了一个数学函数如何通过渲染，光栅化等等操作从数据显示到显示器上，同时了解到了在数学模型中对于模型，摄像机的变换方法和原理。
avatar
文章
阅读
粉丝