WebGL 月影带练|青训营笔记

PureNight
43 阅读2分钟

这是我参加[第五届青训营]伴学笔记创作活动的第15天

本课程重要知识

了解WebGL的原理以及跟随月影老师一起学习和实践相关知识

初识webGL

渲染：GPU≠WebGL≠3D

现代图形系统(Modern Graphics System) image.png 使用GPU而非CPU 图形处理过程：

  1. 轮廓提取/meshing-顶点轮廓提取后网格化
  2. 光栅化-转化成像素点，推送给帧缓存
  3. 帧缓存-存储数据
  4. 渲染-设备从帧缓存获取数据然后进行图形渲染

CPU vs GPU

CPU

CPU是电脑的中央处理器，在电脑中起着控制计算机运行的作用；GPU是一个附属型的处理器，主要处理计算机中与图形计算有关的工作，并将数据更好地呈现在显示器中。

GPU

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

图形渲染的像素处理数量一般都是非常大的，但是每个像素的计算量却不大，所以GPU处理图形渲染就非常有优势。

WebGL是OpenGL的家族成员

image.png

WebGL Startup

image.png

  1. 创建WebGL上下文 image.png
  2. 创建WebGL Program

Shaders（着色器：）Vertex Shader（顶点着色器）和Fragment Shader（片源着色器） image.png

image.png 3. 将数据存入缓冲区 image.png 4. 将缓冲区数据读取到GPU image.png 5. GPU执行WebGL程序,输出结果

image.png WebGL的封装库-Mesh.js

Polygons

绘制一个多边形的过程--使用Earcut进行三角剖分 image.png

3D Meshing

3D的模型较为复杂，是在设计软件里先设计好再导出，而不是像2D一样实时计算。

Transforms

image.png 旋转+缩放是线性变换

image.png

3D Matrix

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

  • 投影矩阵 Projection Matrix
  • 模型矩阵 Model Matrix
  • 视图矩阵 View Matrix
  • 法向量矩阵 Normal Matrix

Read more

上一篇补充

avatar
文章
阅读
粉丝