tengge1 / webgl-study-notes

《WebGL编程指南》学习笔记,从最简单的点线面的绘制,到复杂的MVP矩阵变换、光源、混合、雾效、帧缓冲区、多个物体处理都有代码示例,非常全面。

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

《WebGL编程指南》学习笔记

01 DrawPoint 画点

02 DrawMultiPoint 画多个点

03 ClickPoint 点击鼠标画点

04 ClickColorPoint 点击鼠标画带颜色的点

05 DrawTriangle 画三角形(TRIANGLES)

06 DrawTriangleStrip 画三角形带(TRIANGLE_STRIP)

07 DrawTriangleFan 画三角形扇(TRIANGLE_FAN)

08 DrawLine 画线(LINES)

09 DrawLineStrip 画线带(LINE_STRIP)

10 DrawLineLoop 画线圈(LINE_LOOP)

11 RotateTriangle 使用三角函数旋转三角形

12 RotateTriangleMatrix 使用矩阵旋转三角形

13 ScaleTriangleMatrix 使用矩阵缩放三角形

14 TranslateTriangle 使用向量平移三角形

15 TranslateTriangleMatrix 使用矩阵平移三角形

16 ColorTriangle 给三角形染颜色

17 ColorFragCoord 通过gl_FragCoord给三角形染颜色

18 VertexAndColor 将顶点位置和颜色放到同一个缓冲区

19 UseTexture 使用纹理

20 UseTextureRepeat 纹理重复方式

21 UseTextureFlipY 翻转Y轴

22 Cube 立方体(颜色插值、VP矩阵)

23 ColorCube 带颜色的立方体(每个面一个颜色)

24 DepthBuffer 深度测试(DEPTH_TEST)

25 RotateTriangle 旋转三角形(MVP矩阵)

26 RotateTriangleWithKey 使用左右方向键旋转三角形

27 OrthoViewWithKey 正视投影(使用上下左右控制near和far的大小)

28 Zfighting 使用PolygonOffset解决ZFighting问题(两个面共面绘制问题)

29 RotateCubeWithKey 使用上下左右旋转带颜色的正方体

30 LightingCube 光照(平行光)

31 AmbientLight 环境光

32 PointLight 点光源

33 LightingSphere 球体

34 MoveAround 一个球围着另一个球转(多个物体同时运动)

35 TestClick 点击正方体(如何判断是否点击到正方体)

36 BlendCube 颜色混合

37 Fog 雾效

38 FramebufferObject 帧缓冲区的使用(3D笔记本屏幕里演示3D物体效果)

39 2D3D 在3D中用半透明平板显示2D文字图形信息

About

《WebGL编程指南》学习笔记,从最简单的点线面的绘制,到复杂的MVP矩阵变换、光源、混合、雾效、帧缓冲区、多个物体处理都有代码示例,非常全面。

License:MIT License


Languages

Language:HTML 50.0%Language:JavaScript 49.6%Language:C# 0.4%Language:CSS 0.0%