WebGL 月影带练 ｜ 青训营笔记

LeslieChueng
49 阅读1分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第十七天

课程重点

  • 初识WebGL
  • 相关案例

详细知识点介绍

image.png

image.png

image.png

image.png

image.png

image.png

image.png

APITables

WebGL Startup

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

Create WebGL Context

image.png

The Shaders

image.png

Create Program

image.png

Data to Frame Buffer

image.png

Frame Buffer to GPU

image.png

output

output

image.png

2d vs webgl

image.png

2d vs webgl

mesh.js

image.png

2d

mesh.js

Polygons

image.png

Draw Polygon with 2D Triangulations

earcut

image.png

3d meshing

image.png

3d meshing

transforms

image.png

image.png

image.png

Apply Transforms

3D Matrix

image.png

read more

image.png

The book of shaders

Mesh.js

glsl-doodle

spriteJS

threeJs

shaderToy

稀土掘金

相关案例

Shaping - 码上掘金

Shaping 2 - 码上掘金

Shaping 3 - 码上掘金

Shaping 4 - 码上掘金

Polar - 码上掘金

引用参考

WebGL 月影带练

avatar
文章
阅读
粉丝