Awesome WebGL
Last updated
Last updated
這是一個很棒的 WebGL 庫、資源等的精選列表。
WebGL（Web 圖形庫）是一種 JavaScript API，用於在內部渲染交互式 3D 計算機圖形和 2D 圖形 任何不使用插件的兼容網絡瀏覽器。WebGL 已完全集成到所有 Web 標準中 瀏覽器允許 GPU 加速使用物理和圖像處理以及作為網頁畫布一部分的效果。
WebGL 元素可以與其他 HTML 元素混合，並與頁面或頁面背景的其他部分合成。 WebGL 程序由用 JavaScript 編寫的控制代碼和在計算機圖形上執行的著色器代碼組成 處理單元 (GPU)。
＃＃ 內容
所有與 WebGL 打交道的事情
WebGL 文章和/或博客文章（非教程）
上下文丟失和預加載 - 當您遇到可怕的上下文丟失時如何管理 WebGL。
WebGL Off the Main Thread - 如何在 WebGL 中使用 Web Workers。
優化場景以獲得更好的 WebGL 性能 - 經證明適用於創建基於 WebGL 的交互的優化技術.
WebGL 的第一步 - 通過繪製三角形了解什麼是 WebGL 及其工作原理。
WebGL 主題博客系列
Codeflow - 許多關於不同技巧和技術的博客。
實時渲染 - 這是《實時渲染》一書的博客。
WebGL 最佳實踐 - Mozilla 的官方最佳實踐集。
WebGL Insights - 這是 WebGL Insights 一書的博客。
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 編輯器
Fractal Lab - 在線分形瀏覽器，讓您探索 2D 和 2D 分形。
GLSL Sandbox - 片段著色器的在線實時編輯器。
Shader Toy - 最流行的片段著色器實時編輯器。
ShaderFrog - WebGL 著色器編輯器和作曲器。
SHDR 編輯器 - 實時 GLSL 著色器編輯器、查看器和驗證器。
ShaderExpo - 無依賴性著色器編輯器，具有內聯錯誤日誌、自動完成、模型和紋理加載功能。
＃＃＃ 參考
WebGL 參考資料
Google Project ANGLE - Windows 平台上 Google Chrome 和 Mozilla Firefox 的默認 WebGL 後端。
Khronos 官方維基 - WebGL 的官方維基。
WebVR Community Group - 其目標是幫助將高性能虛擬現實帶入開放網絡。
WebGL 勘誤表 - 圖形驅動程序中的已知錯誤會影響一致性套件，從而影響代碼的可移植性。
WebGL 擴展 - WebGL 擴展列表
WebGL 參考卡 - 用於打印的 WebGL 1.0 API 快速參考卡。
WebGL 源代碼 - 查看和貢獻的源代碼。
WebGL 規格表 - 關於 WebGL 的所有詳細信息。
WebGL 相關講座
演示列表 - Khronos 提供的各種 WebGL 相關演示列表。
Web 上的下一代 3D 圖形 - 來自 Ricardo Cabello (MrDoob) 的 Google I/O 19 演講。
用於開發和調試 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 應用程序的庫、工具和可視化工具集。
GLSL Shader Editor Extension - Chrome DevTools 擴展，可幫助您在瀏覽器中實時編輯著色器。
Spector.js 擴展 - 輕鬆探索 WebGL 和 WebGL2 場景並排除故障。
Webgl Insight - Chrome 擴展 WebGL 調試工具包，提供多種功能。
Canvas Debugger - 如何使用 Firefox 的開發者工具調試 WebGL 著色器的快速教程.
Firefox Developer Tools - Firefox 所有調試器工具的官方列表。
Shader Editor - 快速教程如何使用 Firefox 的開發者工具調試 WebGL 著色器.
###教程
在線 WebGL 教程（非視頻）
Directional Shadow Mapping - 實時定向光影映射背後的概念。
入門教程 - Khronos 的教程如何啟動和運行 WebGL。
WebGL 入門 - Mozilla 基金會 WebGL 入門指南。
Learn WebGL - Tutorials Point 系列文章，讓您熟悉 WebGL 術語。
學習 WebGL - 來自_WebGL Up and Running_作者的教程。
使用 Blendmap 進行多紋理處理 - 如何使用 blendmap 對地形進行多紋理處理。
通過廣告牌的粒子效果 - 通過應用稱為廣告牌的技術創建粒子效果。
The Book of Shaders - 循序漸進地指導片段著色器抽象而復雜的世界。
WebGL Academy - 簡化的在線 IDE，具有自動縮進、HTML、Javascript、GLSL 和 Python 語法突出顯示。您可以運行您的代碼並下載您的項目。
WebGL 基礎知識 - 包含代碼示例和現場演示的在線教程系列。
WebGL Workshop - 交互式研討會讓您開始使用 WebGL。
WebGL 相關視頻
WebGL 編程簡介 - SIGGRAPH 大學對 WebGL 的 3 小時概述。
WebGL 教程 - YouTube - 來自 YouTube 上 Indigo Code 的一系列講座式視頻教程。
有關即將推出的 WebGL 2 規範的信息
一般與 WebGL 有關的任何內容都可以在 WebGL 部分找到
WebGL 2 文章和/或博客文章（非教程）
WebGL 2 新增功能 - 查看 WebGL 2 中添加的新功能。
WebGL 2.0 的新功能 - 查看 WebGL 2 即將推出的功能。
WebGL 2 SIGGRAPH Asia 2015 - Zhenyao Mo、Ken Russell 在 SIGGRAPH Asia 2015 期間的演講。
WebGL 2 Lands in Firefox - 從 Firefox 51 開始支持 WebGL 2 的信息。
WebGL 2 基礎知識 - 關於 WebGL 2 入門的博文。
WebGL 2 新功能 - 關於 WebGL 2 的新功能和酷炫功能的博客文章。
＃＃＃ 參考
WebGL 2 參考資料
WebGL 2 規格表（編輯草案） - 關於 WebGL 2 的所有詳細信息。
WebGL 2 參考卡 - 用於打印的 WebGL 2.0 API 快速參考卡。
WebGL 2 兼容圖表 - 顯示當前支持 WebGL 2 的瀏覽器的圖表
###教程
WebGL 2 Fundamentals- 包含代碼示例和現場演示的在線教程系列。
WebGL 2 Samples - 許多不同的 WebGL 2 工作的重要來源以及非常好的評論。
WebGL 2 示例 - 在原始 WebGL 2 中實現的渲染算法。
WebGL 相關視頻
Fun with WebGL 2.0 - WebGL 2 入門視頻教程系列，仍在積極添加視頻。
WebGL 2.0 現已推出：您需要了解的內容 - Khronos 網絡研討會 2017 年 4 月。
關於新的和即將到來的 WebVR 生態系統的不同部分的信息
所有項目都與更多的開發人員相關，而較少涉及在哪裡可以找到 WebVR 內容作為娛樂
WebVR 文章和/或博客文章（非教程）
維護了以 WebVR 為重點的主題的博客系列
Mozilla VR 博客 - 來自 Firefox 製造商的專注於 WebVR 的博客。
WebVR 設計的平台來體驗
JanusVR - 網頁作為通過門戶互連的協作 3D 網絡空間。
＃＃＃ 參考
WebVR 參考資料
瀏覽器支持 - 顯示瀏覽器、耳機和操作系統的支持。
Mozilla VR - Mozilla 的官方 WebVR 頁面。
VR 用戶體驗 - 幫助在 WebVR 中創建良好用戶體驗的精選資源列表。
WebXR 設備 API - WebXR 的 W3C 草案 API。
WebVR 規範 - 官方 W3C WebVR 規範（舊版）。
p2.js - 用 JavaScript 編寫的 2D 剛體物理引擎。
Phaser - 用於 Canvas 和 WebGL 的開源 HTML5 2D 遊戲框架，支持移動網絡瀏覽器。
PixiJS - 基於 WebGL 的強大的 2D Javascript 渲染器。
Planck.js - 用於跨平台 HTML5 遊戲開發的 2D 物理引擎。
Stage.js - 用於跨平台 HTML5 遊戲開發的 2D 庫。
＃＃＃＃ 計算機視覺
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 渲染引擎。
###物理
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 已放棄該作品的所有版權和相關或鄰接權。
