https://github.com/tengge1/webgl-study-notes

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

learn-webgl webgl webgl-programming webgl-tutorials

Last synced: 4 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/tengge1/webgl-study-notes
• Owner: tengge1
• License: mit
• Created: 2017-10-14T03:54:06.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-04-23T03:58:38.000Z (almost 8 years ago)
• Last Synced: 2025-01-14T18:08:44.518Z (about 1 year ago)
• Topics: learn-webgl, webgl, webgl-programming, webgl-tutorials
• Language: HTML
• Homepage:
• Size: 419 KB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# 《WebGL编程指南》学习笔记

01 [DrawPoint](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/01_DrawPoint.html) 画点

02 [DrawMultiPoint](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/02_DrawMultiPoint.html) 画多个点

03 [ClickPoint](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/03_ClickPoint.html) 点击鼠标画点

04 [ClickColorPoint](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/04_ClickColorPoint.html) 点击鼠标画带颜色的点

05 [DrawTriangle](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/05_DrawTriangle.html) 画三角形（TRIANGLES）

06 [DrawTriangleStrip](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/06_DrawTriangleStrip.html) 画三角形带（TRIANGLE_STRIP）

07 [DrawTriangleFan](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/07_DrawTriangleFan.html) 画三角形扇（TRIANGLE_FAN）

08 [DrawLine](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/08_DrawLine.html) 画线（LINES）

09 [DrawLineStrip](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/09_DrawLineStrip.html) 画线带（LINE_STRIP）

10 [DrawLineLoop](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/10_DrawLineLoop.html) 画线圈（LINE_LOOP）

11 [RotateTriangle](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/11_RotateTriangle.html) 使用三角函数旋转三角形

12 [RotateTriangleMatrix](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/12_RotateTriangleMatrix.html) 使用矩阵旋转三角形

13 [ScaleTriangleMatrix](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/13_ScaleTriangleMatrix.html) 使用矩阵缩放三角形

14 [TranslateTriangle](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/14_TranslateTriangle.html) 使用向量平移三角形

15 [TranslateTriangleMatrix](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/15_TranslateTriangleMatrix.html) 使用矩阵平移三角形

16 [ColorTriangle](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/16_ColorTriangle.html) 给三角形染颜色

17 [ColorFragCoord](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/17_ColorFragCoord.html) 通过gl_FragCoord给三角形染颜色

18 [VertexAndColor](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/18_VertexAndColor.html) 将顶点位置和颜色放到同一个缓冲区

19 [UseTexture](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/19_UseTexture.html) 使用纹理

20 [UseTextureRepeat](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/20_UseTextureRepeat.html) 纹理重复方式

21 [UseTextureFlipY](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/21_UseTextureFlipY.html) 翻转Y轴

22 [Cube](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/22_Cube.html) 立方体（颜色插值、VP矩阵）

23 [ColorCube](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/23_ColorCube.html) 带颜色的立方体（每个面一个颜色）

24 [DepthBuffer](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/24_DepthBuffer.html) 深度测试（DEPTH_TEST）

25 [RotateTriangle](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/25_RotateTriangle.html) 旋转三角形（MVP矩阵）

26 [RotateTriangleWithKey](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/26_RotateTriangleWithKey.html) 使用左右方向键旋转三角形

27 [OrthoViewWithKey](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/27_OrthoViewWithKey.html) 正视投影（使用上下左右控制near和far的大小）

28 [Zfighting](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/28_Zfighting.html) 使用PolygonOffset解决ZFighting问题（两个面共面绘制问题）

29 [RotateCubeWithKey](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/29_RotateCubeWithKey.html) 使用上下左右旋转带颜色的正方体

30 [LightingCube](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/30_LightingCube.html) 光照（平行光）

31 [AmbientLight](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/31_AmbientLight.html) 环境光

32 [PointLight](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/32_PointLight.html) 点光源

33 [LightingSphere](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/33_LightingSphere.html) 球体

34 [MoveAround](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/34_MoveAround.html) 一个球围着另一个球转（多个物体同时运动）

35 [TestClick](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/35_TestClick.html) 点击正方体（如何判断是否点击到正方体）

36 [BlendCube](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/36_BlendCube.html) 颜色混合

37 [Fog](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/37_Fog.html) 雾效

38 [FramebufferObject](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/38_FramebufferObject.html) 帧缓冲区的使用（3D笔记本屏幕里演示3D物体效果）

39 [2D3D](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/39_2D3D.html) 在3D中用半透明平板显示2D文字图形信息