WebGL

Awesome WebGL Awesome

这是一个精选的 WebGL 库、资源和更多内容的精选列表.

What is WebGL

WebGL(Web 图形库)是一个 JavaScript API,用于在内部渲染交互式 3D 计算机图形和 2D 图形. 任何兼容的网络浏览器,无需使用插件. WebGL 完全集成到所有 Web 标准中 浏览器允许 GPU 加速使用物理和图像处理以及效果作为网页画布的一部分.

WebGL 元素可以与其他 HTML 元素混合并与页面或页面背景的其他部分合成. WebGL 程序由用 JavaScript 编写的控制代码和在计算机图形上执行的着色器代码组成 处理单元(GPU).

WebGL

> 处理 WebGL 的所有事情

WebGL sub-categories

Articles

> WebGL 文章和/或博客文章(非教程)

Blog Series

> 博客系列 WebGL 主题

Books

> 关于 WebGL 的热门书籍

  • Interactive Computer Graphics: A Top-Down Approach with WebGL 作者:Edward AngelDave Shreiner - 适合计算机科学与工程专业的本科生,具有良好编程技能的其他学科的学生,以及对使用最新版本的计算机动画和图形感兴趣的专业人士WebGL.
  • Professional WebGL Programming 作者:Andreas Anyuru - 您需要了解的有关使用 WebGL 开发硬件加速 3D 图形的所有信息.
  • Programming 3D Applications with HTML5 and WebGL 作者:Tony Parisi - 使用 HTML5 和相关技术(如 CSS3 和 WebGL(新兴的 Web 图形标准))为 Web 创建高性能、视觉上令人惊叹的 3D 应用程序.
  • WebGL Beginner's guide 作者:Diego CantorBrandon Jones - 适用于希望通过 WebGL 进行 3D Web 开发的 JavaScript 开发人员.
  • WebGL Hotshot 作者:Mitch Williams - 适用于希望扩展 3D 图形概念知识并拓宽现有技能的网页设计师.
  • WebGL Insights 作者:Patrick Cozzi - 通过汇集经验丰富的 WebGL 引擎和应用程序开发人员、GPU 供应商、浏览器开发人员、研究人员和教育工作者的贡献,为中级和高级 WebGL 开发人员展示了实际技术.
  • Book's Personal Site
  • WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL Kouichi MatsudaRodger Lea - WebGL 编程指南将帮助您快速开始交互式 WebGL 3D 编程,即使您没有 HTML5、JavaScript、3D 图形、数学或 OpenGL 的先验知识.

Bug Reporting

> 从长远来看,报告错误对每个人都有帮助

GLSL Editors

> 在线 GLSL 编辑器

> 注意: WebGL must conform to The OpenGL ES Shading Language, Version 1.00

Official Specs for GLSL Version 1.00

Official Specs for Open ES Version 2.0.25

  • Fractal Lab - 在线分形浏览器,让您可以探索 2D 和 2D 分形.
  • GLSL Sandbox - 片段着色器的在线实时编辑器.
  • GLSLbin - 片段着色器沙箱支持 glslify.
  • Shader Toy - 最流行的片段着色器实时编辑器.
  • ShaderFrog - WebGL 着色器编辑器和作曲家.
  • SHDR Editor - 实时 GLSL 着色器编辑器、查看器和验证器.
  • ShaderExpo - 具有内联错误日志、自动完成、模型和纹理加载的无依赖性着色器编辑器.

References

> WebGL 参考

Talks

> WebGL 相关讲座

Tools/Debugging

> 开发和调试 WebGL 的工具

  • Khronos Dev Tools - 有用的 WebGL 开发工具,旨在用作 ES6 模块.
  • Spector.js - 用于探索和排除 WebGL 场景故障的不可知 JavaScript 框架.
  • WebGL Inspector - 受 gDEBugger 和 PIX 启发的工具,其目标是使高级 WebGL 应用程序的开发更容易.
  • WebGl Playground - 编辑器让您可以方便地同时处理 JavaScript 代码和 GLSL 顶点/片段着色器(如果有的话). 一切都按照您的意愿组织、格式化和突出显示.
  • WebGL Report - 查看浏览器支持 WebGL 的详细信息的方式.
  • WebGL Support Stats - 交互式仪表板显示不同浏览器和设备中对 WebGL 功能的支持.
  • WebGL Texture Tester - 尝试加载 WebGL 支持的每种纹理格式之一,旨在快速显示您的浏览器/设备支持的格式.
  • Web Tracing Framework - 一组用于跟踪和调查复杂 Web 应用程序的库、工具和可视化工具.

Chrome Specific Tools/Debugger

Firefox Specific Tools/Debugger

  • Canvas Debugger - 快速教程如何使用 Firefox 的开发人员工具调试 WebGL 着色器.
  • Firefox Developer Tools - 所有 Firefox 调试器工具的官方列表.
  • Shader Editor - 快速教程如何使用 Firefox 的开发人员工具调试 WebGL 着色器.

Tutorials

> 在线 WebGL 教程(非视频)

Videos

> WebGL 相关视频

WebGL 2

> 有关即将推出的 WebGL 2 规范的信息

> 任何有关 WebGL 的一般信息都可以在 WebGL 部分

WebGL 2 sub-categories

Articles

> WebGL 2 文章和/或博客文章(非教程)

References

> WebGL 2 参考

Tutorials

Videos

> WebGL 相关视频

WebVR

> 有关新的和即将到来的 WebVR 生态系统不同部分的信息

> 与更多开发者相关的所有项目,而不是关于在哪里可以找到 WebVR 内容作为娱乐的项目

WebVR sub-categories

Articles

> WebVR 文章和/或博客文章(非教程)

Blog Series

> 维护博客系列 WebVR 重点主题

Platforms

> WebVR 设计的体验平台

  • JanusVR - 网页作为由门户互连的协作 3D 网络空间.

References

> WebVR 参考

Libraries

More detailed information about the different libraries can be found in the Libraries directory.

2D

  • p2.js - 用 Ja​​vaScript 编写的 2D 刚体物理引擎.
  • Phaser - 用于 Canvas 和 WebGL 的开源 HTML5 2D 游戏框架,支持移动网络浏览器.
  • PixiJS - 强大的基于 WebGL 的 2D Javascript 渲染器.
  • Planck.js - 用于跨平台 HTML5 游戏开发的 2D 物理引擎.
  • Stage.js - 用于跨平台 HTML5 游戏开发的 2D 库.

Compute (GPGPU)

Computer Vision

  • GammaCV - 用于浏览器的 WebGL 加速计算机视觉库.

Particles

  • Phenomenon - 非常小的、低级的 WebGL 库,提供了交付高性能体验的基本要素.

Maps and Visualizations

  • Cesium - 世界一流的 3D 地球仪和地图的开源库.
  • Deck.gl - 用于 React 的 WebGL 覆盖套件,提供一组高性能数据可视化覆盖.
  • Luma.gl - 用于 GPU 驱动的数据可视化和计算的 WebGL2 驱动框架.
  • xeogl - WebGL 上的数据驱动 3D 可视化引擎.

Math

  • glMatrix - 用于高性能 WebGL 应用程序的 Javascript 矩阵和矢量库.
  • Sylvester - Sylvester 是 JavaScript 的向量、矩阵和几何库.
  • TWGL - 唯一的目的是减少使用 WebGL API 的冗长.

Rendering

  • GLBoost - 3D 图形极客的渲染库.
  • GrimoireGL - Web 工程师和 CG 工程师之间的桥梁.
  • Hilo3d - 用于 3D 游戏的 WebGL 渲染引擎.

Physics

  • Ammo.js - 使用 Emscripten 将 Bullet 物理引擎直接移植到 JavaScript.
  • Cannon.js - 用于网络的轻量级和简单的 3D 物理引擎.

WebGL 2

  • PicoGL.js - 最小的 WebGL 2-only 渲染库.

WebVR

  • A-Frame - 用于构建虚拟现实体验的 Web 框架.
  • Awesome-AFrame
  • Hologram - 桌面应用程序可让您以交互方式创建和原型 WebVR,无需先前的编码知识.
  • LÖVR - 使用 Lua 创建 VR 的简单框架.
  • React 360 - 使用 React 构建 VR 网站和交互式 360 度体验.
  • Primrose - 在浏览器中快速制作 VR 应用程序原型.

Others

  • Babylon.js - 使用 HTML5、WebGL 和 Web Audio 构建 3D 游戏的完整 JavaScript 框架.
  • Blend4Web - 互联网上交互式 3D 可视化工具.
  • ClayGL - WebGL graphic Library for building scalable Web3D applications.
  • CopperLicht - 用于创建游戏和 3D 应用程序的 JavaScript 库和 WebGL 3D 引擎.
  • GLGE - 旨在简化 WebGL 使用的 Javascript 库.
  • Lightgl.js - 帮助原型的轻量级和显式库.
  • OSG.js - 基于 OpenSceneGraph 概念的 WebGL 框架与 WebGL 交互.
  • Pex-gl - 在 Plask/Node.js 和 WebGL 中用于计算思维的 JavaScript 库.
  • PlayCanvas - 构建互动体验的游戏引擎平台.
  • Pocket.gl - 完全可定制的 webgl 着色器沙箱以嵌入您的页面.
  • Regl - 轻量的声明性和无状态库,WebGL 的功能抽象.
  • Scene.js - 可扩展的基于 WebGL 的引擎,用于高细节 3D 可视化.
  • Three.js - 旨在创建一个易于使用的轻量级 3D 库.
  • Turbulenz - 模块化 3D 和 2D 游戏框架,用于为浏览器、台式机和移动设备制作 HTML5 驱动的游戏.
  • Verge3D - 一个艺术家友好的工具包,用于创建 3D 网络体验.
  • Whitestorm.js - 用于开发具有物理特性的 3D Web 应用程序的框架.

Community

> 类似的很棒的列表

  • awesome - 精选的精彩列表列表.
  • awesome-opengl - 精选的 OpenGL 库、调试器和资源列表. 灵感来自很棒的-...东西.
  • awesome-vulkan - 精选的 Vulkan 项目和生态系统列表.
  • gamedev - 很棒的游戏开发列表.
  • glTF - 专为网络设计的运行时 3D 资产交付.
  • graphics-resources - 图形编程资源列表.

Contributing

请参阅 CONTRIBUTING 详情.

Testing

Travis CI 测试自动化归功于 awesome_bot!

License

CC0

在法律允许的范围内, Spencer Fricke 已放弃本作品的所有版权和相关或邻接权.