{"id":16321473,"url":"https://github.com/doodlewind/webgl-seminar","last_synced_at":"2025-10-16T12:06:11.998Z","repository":{"id":80193217,"uuid":"173934526","full_name":"doodlewind/webgl-seminar","owner":"doodlewind","description":"代码清晰、直接、可追溯的一系列 WebGL 示例","archived":false,"fork":false,"pushed_at":"2019-04-05T11:51:29.000Z","size":63,"stargazers_count":108,"open_issues_count":0,"forks_count":10,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-02-27T10:36:07.601Z","etag":null,"topics":["example","tutorial","webgl"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/doodlewind.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2019-03-05T11:32:55.000Z","updated_at":"2024-12-02T08:26:54.000Z","dependencies_parsed_at":"2023-07-20T10:46:02.018Z","dependency_job_id":null,"html_url":"https://github.com/doodlewind/webgl-seminar","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doodlewind%2Fwebgl-seminar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doodlewind%2Fwebgl-seminar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doodlewind%2Fwebgl-seminar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doodlewind%2Fwebgl-seminar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/doodlewind","download_url":"https://codeload.github.com/doodlewind/webgl-seminar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243818195,"owners_count":20352629,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["example","tutorial","webgl"],"created_at":"2024-10-10T22:47:53.994Z","updated_at":"2025-10-16T12:06:06.941Z","avatar_url":"https://github.com/doodlewind.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WebGL Seminar\nWebGL 学习小组整理的入门资料\n\n\n## What's This\n这个项目提供：\n\n* 以代码清晰、直接、可追溯为目标而编写的一系列 WebGL 示例。\n* 与示例配套的讲解文档。\n\n图形学的代码以繁冗而著称——从教程中的概念到实际的实现，往往隔着巨大的工程量鸿沟。虽然 WebGL 已经非常方便，但其相关的示例仍往往有着这个领域里常见的潦草感，会让你有停留在上一个时代的错觉。但在今天，我们已经能够在 Web 前端组织出清晰、简洁、模块化的代码了。因此，我们使用现代的前端工程标准重写了一系列经典的 WebGL 示例，这些示例编写的都是「干净」的代码，甚至无需安装依赖，无需构建流程就能查看。\n\n和这些代码配套的，是相应例子的讲解文档。当然，要入门 WebGL，你也许仍然需要一份经典教材，但我们十分相信，这里的内容能帮助你显著地改善入门这一领域时的心情。示例包括：\n\n* [绘制三角形](./examples/triangle)\n* [绘制立方体](./examples/cube)\n* [绘制纹理](./examples/texture)\n* [实现基础光照](./examples/lighting)\n* [实现冯氏光照](./examples/phong)\n* [实现图像滤镜](./examples/image-filter)\n* [使用帧缓冲区](./examples/fbo)\n\n\n## Run Examples\n示例代码均只需在项目根目录下启动静态服务器即可运行，无需构建与依赖管理：\n\n[Online Demo](https://doodlewind.github.io/webgl-seminar/examples)\n\n``` bash\nnpm i -g http-server \u0026\u0026 http-server .\n```\n\n在 docs 目录下则包含了每个示例对应的注释资料。\n\n一个非常有意义的事情，是去确认各个示例是如何逐渐从最基本的三角形而演化出来的。这时，你可以使用形如这样的命令：\n\n``` bash\n# 从三角形到立方体\ngit diff --no-index ./examples/triangle ./examples/cube\n\n# 从立方体到纹理\ngit diff --no-index ./examples/cube ./examples/texture\n\n# 从立方体到基础光照\ngit diff --no-index ./examples/cube ./examples/lighting\n\n# 从基础光照到冯氏光照\ngit diff --no-index ./examples/lighting ./examples/phong\n\n# 从纹理绘制到图像滤镜\ngit diff --no-index ./examples/texture ./examples/image-filter\n\n# 从纹理绘制到渲染帧缓冲区对象\ngit diff --no-index ./examples/texture ./examples/fbo\n```\n\n我们对代码的一致性有很高的要求，故而你完全可以将这样的 diff 作为从学习 A 过渡到学习 B 的时候，没有冗余的最短路径。\n\nEnjoy the power of GPU!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoodlewind%2Fwebgl-seminar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdoodlewind%2Fwebgl-seminar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoodlewind%2Fwebgl-seminar/lists"}