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

用户3911297210902
118 阅读3分钟

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

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

WebGL介绍

  • WebGL 以 OpenGL Embedded System (ES) 为基础，这是用于访问 3D 硬件的低级过程 API。OpenGL（由 SGI 在 20 世纪 90 年代初创建）现在被视为是一个易于理解且成熟的 API。WebGL 让 JavaScript 开发人员有史以来第一次能够以接近原生的速度访问设备上的 3D 硬件。
  • 基本工作原理：
    • WebGL利用JavaScript来准备数据，将数据通过共享数据结构（ArrayBuffer) 传递给GPU，由GPU进行着色处理，然后再将处理后的数据输出到帧缓冲区，最后再渲染出来。

Modern Graphics Systems

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

GPU 与 CPU

  • GPU：GPU英文全称Graphic Processing Unit，中文翻译为“图形处理器”。GPU是专门为处理图形任务而产生的芯片。从这个任务定位上面来说，不仅仅在计算机的显卡上面，在手机、游戏机等等各种有多媒体处理需求的地方都可以见到GPU的身影。
  • CPU：
    • CPU由运算器（ALU）和控制器（CU）两大部件组成。此外，还有若干个寄存器和高速缓冲存储器及实现它们之间联系的数据、控制及状态总线。
    • CPU是一步步来处理数据的。在处理大规模与高速数据时，CPU很难满足需要。
  • 区别：

    • GPU采用了数量众多的计算单元和超长的流水线，但只有非常简单的控制逻辑并省去了Cache。而CPU不仅被Cache占据了大量空间，而且还有有复杂的控制逻辑和诸多优化电路，相比之下计算能力只是CPU很小的一部分。

    • CPU（Central Processing Unit）是电脑最主要的部件，他的主要功能是解释计算机指令以及处理计算机软件中的数据，说白了就是做指挥工作，统筹各方面。CPU相当于整个电脑的心脏，而GPU相当于显卡的心脏

WebGL使用

WebGL Startup

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

Create WebGL Context

Transform

  • 平移，旋转，与缩放

image.png

  • 旋转加缩放属于线性变换

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

  1. 投影矩阵 Projection Matrix
  2. 模型矩阵 Model Matrix
  3. 视图矩阵 View Matrix
  4. 法向量矩阵 Normal Matrix
avatar
文章
阅读
粉丝