Home Blog Resources

Awesome WebGL

這是一個很棒的 WebGL 庫、資源等的精選列表。

什麼是 WebGL

WebGL（Web 圖形庫）是一種 JavaScript API，用於在內部渲染交互式 3D 計算機圖形和 2D 圖形 任何不使用插件的兼容網絡瀏覽器。WebGL 已完全集成到所有 Web 標準中 瀏覽器允許 GPU 加速使用物理和圖像處理以及作為網頁畫布一部分的效果。

WebGL 元素可以與其他 HTML 元素混合，並與頁面或頁面背景的其他部分合成。 WebGL 程序由用 JavaScript 編寫的控制代碼和在計算機圖形上執行的著色器代碼組成 處理單元 (GPU)。

＃＃ 內容

WebGL

所有與 WebGL 打交道的事情

WebGL 子類別

文章

WebGL 文章和/或博客文章（非教程）

博客系列

WebGL 主題博客系列

書籍

關於 WebGL 的熱門書籍

  • 交互式計算機圖形：使用 WebGL 的自上而下方法 Edward Angel 和 * Dave Shreiner* - 適合計算機科學與工程專業的本科生，具有良好編程技能的其他學科的學生，以及對使用最新版本的 WebGL 的計算機動畫和圖形感興趣的專業人士。

  • Professional WebGL Programming 作者 Andreas Anyuru - 關於開發硬件加速 3D 你需要知道的一切使用 WebGL 的圖形。

  • Programming 3D Applications with HTML5 and WebGL by Tony Parisi - 創建高性能，視覺震撼Web 的 3D 應用程序，使用 HTML5 和相關技術，例如 CSS3 和 WebGL——新興的 Web 圖形標準。

  • WebGL 初學者指南 作者：Diego Cantor 和 Brandon Jones - 適用於 JavaScript 開發人員想通過 WebGL 涉足 3D 網絡開發。

  • WebGL Hotshot by Mitch Williams - 適用於希望擴展 3D 圖形概念知識的網頁設計師並拓寬您現有的技能組合。

  • WebGL Insights 作者：Patrick Cozzi -通過匯集經驗豐富的 WebGL 引擎和應用程序開發人員、GPU 供應商、瀏覽器開發人員、研究人員和教育工作者的貢獻，為中級和高級 WebGL 開發人員展示真實世界的技術。

  • WebGL 編程指南：使用 WebGL 進行交互式 3D 圖形編程 Kouichi Matsuda 和 **Rodger Lea ** - WebGL 編程指南將幫助您快速開始交互式 WebGL 3D 編程，即使您事先不了解 HTML5、JavaScript、3D 圖形、數學或 OpenGL。

錯誤報告

從長遠來看，報告錯誤對每個人都有幫助

  • Chrome 錯誤報告 - Chrome 相關錯誤

  • Khronos Github 問題頁面 - 規範或一致性相關的錯誤

  • Mozilla BugZilla - Firefox 相關錯誤

  • [WebKit Bugzilla](https://bugs.webkit.org/enter_bug.cgi?assigned_to=cmarrin%40apple.com&attachurl=&blocked=&bug_file_loc=http%3A%2F%2F&bug_severity=Normal&bug_status=NEW&comment=&component=WebGL&contenttypeentry=&contenttypemethod= autodetect&contenttypeselection=text%2Fplain&data=&dependson=&description=&flag_type-1=X&flag_type-3=X&form_name=enter_bug&keywords=&maketemplate=Remember%20values%20as%20bookmarkable%20template&op_sys=Mac%20OS%20X%2010.5&priority=P2&product=WebKit&hordesc&rep_platform=P2&產品=WebKit&hordesc&rep_platform= =528%2B%20%28Nightly%20build%29) - Safari 相關的錯誤

GLSL 編輯器

在線 GLSL 編輯器

注意：WebGL 必須符合 OpenGL ES 著色語言，版本 1.00

GLSL 1.00 版官方規範

Open ES 版本 2.0.25 的官方規範

  • Fractal Lab - 在線分形瀏覽器，讓您探索 2D 和 2D 分形。

  • GLSL Sandbox - 片段著色器的在線實時編輯器。

  • GLSLbin - 片段著色器沙箱支持 glslify。

  • Shader Toy - 最流行的片段著色器實時編輯器。

  • ShaderFrog - WebGL 著色器編輯器和作曲器。

  • SHDR 編輯器 - 實時 GLSL 著色器編輯器、查看器和驗證器。

  • ShaderExpo - 無依賴性著色器編輯器，具有內聯錯誤日誌、自動完成、模型和紋理加載功能。

＃＃＃ 參考

WebGL 參考資料

會談

WebGL 相關講座

工具/調試

用於開發和調試 WebGL 的工具

  • Khronos Dev Tools - 有用的 WebGL 開發工具，旨在用作 ES6 模塊。

  • Spector.js - 不可知的 JavaScript 框架，用於探索 WebGL 場景並對其進行故障排除。

  • WebGL Inspector - 受 gDEBugger 和 PIX 啟發的工具，旨在簡化高級 WebGL 應用程序的開發。

  • WebGl Playground - 該編輯器讓您可以同時處理 JavaScript 代碼和 GLSL 頂點/片段著色器（如果有的話）方便的方式。一切都按照您的意願進行了組織、格式化和突出顯示。

  • WebGL 報告 - 查看您的瀏覽器對 WebGL 支持的詳細信息的方法。

  • WebGL 支持統計 - 交互式儀表板顯示不同瀏覽器和設備對 WebGL 功能的支持。

  • WebGL Texture Tester - 嘗試加載 WebGL 支持的每種紋理格式之一，旨在快速顯示您的瀏覽器/設備支持哪些格式。

  • Web Tracing Framework - 用於跟踪和調查復雜 Web 應用程序的庫、工具和可視化工具集。

Chrome 特定工具/調試器

Firefox 特定工具/調試器

  • Canvas Debugger - 如何使用 Firefox 的開發者工具調試 WebGL 著色器的快速教程.

  • Firefox Developer Tools - Firefox 所有調試器工具的官方列表。

  • Shader Editor - 快速教程如何使用 Firefox 的開發者工具調試 WebGL 著色器.

###教程

在線 WebGL 教程（非視頻）

視頻

WebGL 相關視頻

WebGL 2

有關即將推出的 WebGL 2 規範的信息

一般與 WebGL 有關的任何內容都可以在 WebGL 部分找到

WebGL 2 子類別

文章

WebGL 2 文章和/或博客文章（非教程）

＃＃＃ 參考

WebGL 2 參考資料

###教程

視頻

WebGL 相關視頻

網絡虛擬現實

關於新的和即將到來的 WebVR 生態系統的不同部分的信息

所有項目都與更多的開發人員相關，而較少涉及在哪裡可以找到 WebVR 內容作為娛樂

WebVR 子類別

文章

WebVR 文章和/或博客文章（非教程）

博客系列

維護了以 WebVR 為重點的主題的博客系列

平台

WebVR 設計的平台來體驗

  • JanusVR - 網頁作為通過門戶互連的協作 3D 網絡空間。

＃＃＃ 參考

WebVR 參考資料

庫

關於不同庫的更多詳細信息可以在庫目錄中找到。

二維

  • p2.js - 用 Ja​​vaScript 編寫的 2D 剛體物理引擎。

  • Phaser - 用於 Canvas 和 WebGL 的開源 HTML5 2D 遊戲框架，支持移動網絡瀏覽器。

  • PixiJS - 基於 WebGL 的強大的 2D Javascript 渲染器。

  • Planck.js - 用於跨平台 HTML5 遊戲開發的 2D 物理引擎。

  • Stage.js - 用於跨平台 HTML5 遊戲開發的 2D 庫。

計算 (GPGPU)

＃＃＃＃ 計算機視覺

  • GammaCV - 用於瀏覽器的 WebGL 加速計算機視覺庫。

＃＃＃＃ 粒子

  • 現象 - 非常小的低級 WebGL 庫，提供提供高性能體驗的要素。

地圖和可視化

  • Cesium - 世界級 3D 地球儀和地圖的開源庫。

  • Deck.gl - 用於 React 的 WebGL 覆蓋套件，提供一組高性能數據可視化覆蓋。

  • Luma.gl - WebGL2 驅動的框架，用於 GPU 驅動的數據可視化和計算。

  • xeogl - WebGL 上的數據驅動 3D 可視化引擎。

＃＃＃ 數學

  • glMatrix - 用於高性能 WebGL 應用程序的 Javascript 矩陣和向量庫。

  • Sylvester - Sylvester 是一個用於 JavaScript 的矢量、矩陣和幾何庫。

  • TWGL - 唯一目的是使 WebGL API 的使用不那麼冗長。

渲染

  • GLBoost - 3D 圖形極客的渲染庫。

  • GrimoireGL - Web 工程師和 CG 工程師之間的橋樑。

  • Hilo3d - 用於 3D 遊戲的 WebGL 渲染引擎。

###物理

  • Ammo.js - 使用 Emscripten 將 Bullet 物理引擎直接移植到 JavaScript。

  • Cannon.js - 用於網絡的輕量級和簡單的 3D 物理引擎。

WebGL 2

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

網絡虛擬現實

  • A-Frame - 用於構建虛擬現實體驗的 Web 框架。

  • 全息圖 - 桌面應用程序，讓您無需先前的編碼知識即可以交互方式創建 WebVR 和原型。

  • LÖVR - 使用 Lua 創建 VR 的簡單框架。

  • React 360 - 使用 React 構建 VR 網站和交互式 360 度體驗。

  • Primrose - 在您的瀏覽器中快速構建 VR 應用程序原型。

＃＃＃ 其他

  • Babylon.js - 用於使用 HTML5、WebGL 和 Web Audio 構建 3D 遊戲的完整 JavaScript 框架。

  • Blend4Web - 互聯網上交互式 3D 可視化工具。

  • ClayGL - 用於構建可擴展的 Web3D 應用程序的 WebGL 圖形庫。

  • 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 - 用於高細節 3D 可視化的可擴展的基於 WebGL 的引擎。

  • Three.js - 旨在創建一個易於使用、輕量級的 3D 庫。

  • Turbulenz - 模塊化 3D 和 2D 遊戲框架，用於為瀏覽器、桌面和移動設備製作 HTML5 驅動的遊戲。

  • Verge3D - 一個藝術家友好的工具包，用於創建 3D 網絡體驗。

  • Whitestorm.js - 用於開發具有物理特性的 3D 網絡應用程序的框架。

＃＃ 社區

相關列表

類似的很棒的列表

  • awesome - 精選的精選列表。

  • awesome-opengl - 很棒的 OpenGL 庫、調試器和資源的精選列表。靈感來自 awesome-... 東西。

  • awesome-vulkan - 精選的 Vulkan 項目和生態系統列表。

  • gamedev - 關於遊戲開發的精彩列表。

  • glTF - 專為網絡設計的運行時 3D 資產交付。

  • graphics-resources - 圖形編程資源列表。

貢獻

有關詳細信息，請參閱 CONTRIBUTING。

測試

感謝 awesome_bot 的 Travis CI 測試自動化！

＃＃ 執照

在法律允許的範圍內，Spencer Fricke 已放棄該作品的所有版權和相關或鄰接權。

PreviousContribution GuidelinesNextCONTRIBUTING

Last updated