# webgl-study-notes **Repository Path**: fengwei232/webgl-study-notes ## Basic Information - **Project Name**: webgl-study-notes - **Description**: 《WebGL编程指南》学习笔记，从最简单的点线面的绘制，到复杂的MVP矩阵变换、光源、混合、雾效、帧缓冲区、多个物体处理都有代码示例，非常全面。 - **Primary Language**: HTML - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 2 - **Created**: 2023-08-18 - **Last Updated**: 2023-08-18 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## 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文字图形信息