{"id":20339937,"url":"https://github.com/tengge1/webgl-study-notes","last_synced_at":"2026-02-16T06:31:43.106Z","repository":{"id":111393612,"uuid":"106896315","full_name":"tengge1/webgl-study-notes","owner":"tengge1","description":"《WebGL编程指南》学习笔记，从最简单的点线面的绘制，到复杂的MVP矩阵变换、光源、混合、雾效、帧缓冲区、多个物体处理都有代码示例，非常全面。","archived":false,"fork":false,"pushed_at":"2018-04-23T03:58:38.000Z","size":429,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-07T23:39:57.207Z","etag":null,"topics":["learn-webgl","webgl","webgl-programming","webgl-tutorials"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tengge1.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-14T03:54:06.000Z","updated_at":"2024-07-02T16:20:32.000Z","dependencies_parsed_at":"2023-03-13T13:41:05.627Z","dependency_job_id":null,"html_url":"https://github.com/tengge1/webgl-study-notes","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tengge1/webgl-study-notes","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tengge1%2Fwebgl-study-notes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tengge1%2Fwebgl-study-notes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tengge1%2Fwebgl-study-notes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tengge1%2Fwebgl-study-notes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tengge1","download_url":"https://codeload.github.com/tengge1/webgl-study-notes/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tengge1%2Fwebgl-study-notes/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29501914,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-16T05:57:17.024Z","status":"ssl_error","status_checked_at":"2026-02-16T05:56:49.929Z","response_time":115,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["learn-webgl","webgl","webgl-programming","webgl-tutorials"],"created_at":"2024-11-14T21:19:02.486Z","updated_at":"2026-02-16T06:31:43.082Z","avatar_url":"https://github.com/tengge1.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 《WebGL编程指南》学习笔记\n\n01 [DrawPoint](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/01_DrawPoint.html) 画点\n\n02 [DrawMultiPoint](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/02_DrawMultiPoint.html) 画多个点\n\n03 [ClickPoint](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/03_ClickPoint.html) 点击鼠标画点\n\n04 [ClickColorPoint](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/04_ClickColorPoint.html) 点击鼠标画带颜色的点\n\n05 [DrawTriangle](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/05_DrawTriangle.html) 画三角形（TRIANGLES）\n\n06 [DrawTriangleStrip](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/06_DrawTriangleStrip.html) 画三角形带（TRIANGLE_STRIP）\n\n07 [DrawTriangleFan](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/07_DrawTriangleFan.html) 画三角形扇（TRIANGLE_FAN）\n\n08 [DrawLine](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/08_DrawLine.html) 画线（LINES）\n\n09 [DrawLineStrip](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/09_DrawLineStrip.html) 画线带（LINE_STRIP）\n\n10 [DrawLineLoop](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/10_DrawLineLoop.html) 画线圈（LINE_LOOP）\n\n11 [RotateTriangle](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/11_RotateTriangle.html) 使用三角函数旋转三角形\n\n12 [RotateTriangleMatrix](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/12_RotateTriangleMatrix.html) 使用矩阵旋转三角形\n\n13 [ScaleTriangleMatrix](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/13_ScaleTriangleMatrix.html) 使用矩阵缩放三角形\n\n14 [TranslateTriangle](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/14_TranslateTriangle.html) 使用向量平移三角形\n\n15 [TranslateTriangleMatrix](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/15_TranslateTriangleMatrix.html) 使用矩阵平移三角形\n\n16 [ColorTriangle](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/16_ColorTriangle.html) 给三角形染颜色\n\n17 [ColorFragCoord](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/17_ColorFragCoord.html) 通过gl_FragCoord给三角形染颜色\n\n18 [VertexAndColor](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/18_VertexAndColor.html) 将顶点位置和颜色放到同一个缓冲区\n\n19 [UseTexture](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/19_UseTexture.html) 使用纹理\n\n20 [UseTextureRepeat](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/20_UseTextureRepeat.html) 纹理重复方式\n\n21 [UseTextureFlipY](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/21_UseTextureFlipY.html) 翻转Y轴\n\n22 [Cube](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/22_Cube.html) 立方体（颜色插值、VP矩阵）\n\n23 [ColorCube](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/23_ColorCube.html) 带颜色的立方体（每个面一个颜色）\n\n24 [DepthBuffer](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/24_DepthBuffer.html) 深度测试（DEPTH_TEST）\n\n25 [RotateTriangle](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/25_RotateTriangle.html) 旋转三角形（MVP矩阵）\n\n26 [RotateTriangleWithKey](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/26_RotateTriangleWithKey.html) 使用左右方向键旋转三角形\n\n27 [OrthoViewWithKey](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/27_OrthoViewWithKey.html) 正视投影（使用上下左右控制near和far的大小）\n\n28 [Zfighting](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/28_Zfighting.html) 使用PolygonOffset解决ZFighting问题（两个面共面绘制问题）\n\n29 [RotateCubeWithKey](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/29_RotateCubeWithKey.html) 使用上下左右旋转带颜色的正方体\n\n30 [LightingCube](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/30_LightingCube.html) 光照（平行光）\n\n31 [AmbientLight](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/31_AmbientLight.html) 环境光\n\n32 [PointLight](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/32_PointLight.html) 点光源\n\n33 [LightingSphere](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/33_LightingSphere.html) 球体\n\n34 [MoveAround](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/34_MoveAround.html) 一个球围着另一个球转（多个物体同时运动）\n\n35 [TestClick](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/35_TestClick.html) 点击正方体（如何判断是否点击到正方体）\n\n36 [BlendCube](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/36_BlendCube.html) 颜色混合\n\n37 [Fog](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/37_Fog.html) 雾效\n\n38 [FramebufferObject](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/38_FramebufferObject.html) 帧缓冲区的使用（3D笔记本屏幕里演示3D物体效果）\n\n39 [2D3D](https://github.com/tengge1/webgl-study-notes/blob/master/webgl-study-notes/39_2D3D.html) 在3D中用半透明平板显示2D文字图形信息\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftengge1%2Fwebgl-study-notes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftengge1%2Fwebgl-study-notes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftengge1%2Fwebgl-study-notes/lists"}