初识WebGL | 青训营笔记

程序猿小郭
62 阅读1分钟

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

Why WebGL / Why GPU?

WebGL是什么？

    - GPU≠WebGL≠3D

    - WebGL为什么不像其他前端技术那么简单？

  • 图形的绘制过程 image.png

处理单元为何要分成CUP和GPU

CPU处理千万，百万数量的像素效率比较低。GPU有大量的小运算单元构成，每个运算单元只负责处理很简单的计算每个运算单元彼此独立，因此所有计算可以并行处理。

image.png

WebGL是OpenGL的一个子集

image.png

WebGL Startup

  • 1、创建WebGL上下文

image.png

(旧版本)

image.png

着色器

image.png

  • 2、创建WebGL Program

image.png

  • 3、将数据存入缓冲区
  • Data to Frame Buffer

image.png

  • 4、将缓冲区数据读取到GPU Frame Buffer to GPU

image.png

  • 5、GPU执行WebGL程序，输出结果

image.png

image.png

Transforms

image.png

image.png

为什么WebGL那么难呢？

image.png

Mesh.js

image.png

Transforms

image.png

image.png

3D Matrix

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

  • 1、投影矩阵
  • 2、模型矩阵
  • 3、视图矩阵
  • 4、法向量矩阵
avatar
文章
阅读
粉丝