初识WebGL|青训营笔记

来到人间看海
71 阅读1分钟

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

前端基础班第14节：初识WebGL。

一.什么是WebGL

image.png

现代图形系统

image.png image.png

渲染管线：

image.png

CPU VS GPU

image.png image.png

WebGL & OpenGL

image.png

二.使用webGL

image.png

1.创建webGL上下文

image.png

2.写着色器

image.png

3.创建webGL项目

image.png

4.数据存入缓冲区

坐标系

image.png

5.缓冲区数据读取到GPU

image.png

6.2D vs webGL

image.png

7.绘制多边形

image.png image.png

对于简单多边形： 使用Earcut进行三角剖分 image.png

8.处理多边形

2D：transforms image.png

image.png

使用transforms

image.png

3D Matrix

image.png
avatar
文章
阅读
粉丝