使用WebGL 2.0更快地渲染 3D

2021-01-13 谷歌開發者


發布人：Google 軟體工程師 Zhenyao Mo


WebGL JavaScript API 將硬體加速 3D 圖形技術帶入網絡。Chrome 56 帶來了對 WebGL 2.0 的支持，後者是對此 API 的一次重大升級，其解鎖了各種新圖形功能和高級渲染技術。WebGL 2.0 目前可供擁有當代圖形硬體並運行 Windows、macOS 和 Linux 的 Chrome 用戶使用，很快還會推廣到 Android 平臺上。



WebGL 2.0 轉換反饋演示：

github.com/toji/webgl2-particles-2


WebGL 1.0 首次引入 Chrome 是在 6 年前，有了它，開發者能夠創造免插件的沉浸式圖形體驗，從實時重混世界盃賽事到可視化一篇新聞文章裡的攀巖路線，精彩不斷。WebGL 2.0 進一步簡化了 3D 網絡應用的構建，可以更快速地實時渲染，支持全新類型的紋理和著色器，還減少了視頻的內存佔用。 現在，包括延遲著色、色調映射、容積效應、粒子效應在內的各種技術均可高效實現。全新 API 還為 WebGL 帶來了與 OpenGL ES 3.0 相仿的功能，後者是移動遊戲中常用的圖形平臺之一。


除了最新的渲染功能之外，WebGL 2.0 還引入了一個經過大幅擴容、包含超過 34 萬個測試用例的合規性測試套件，用於幫助確保不同的網絡瀏覽器提供兼容的圖形平臺。Chrome 在使用不同供應商的 GPU 的所有桌面平臺上都通過了 100% 的測試用例，確保了其 WebGL 2.0 的實現穩定可靠並且始終如一。


要開始使用 WebGL 2.0，請查閱 WebGL 2.0 樣例包：

github.com/WebGLSamples/WebGL2Samples


其中包含了小巧的自包含樣例，展示了大多數的新 API 功能。您還可以在 After the Flood1 中查看 WebGL 2.0 實例，後者是 PlayCanvas 與 Mozilla 聯合創造的一段互動演示。最後，請回來檢查有關未來圖形功能（例如 OpenGL ES 3.1 支持）的更多消息，探索支持新的顯式圖形界面（例如 Vulkan、Metal 和 DirectX 12）的低級網絡圖形 API。


[1] 如果此演示或其他 WebGL 2.0 內容在您的機器上無法運行，您可能需要更新您的圖形硬體或驅動程序。


推薦閱讀：

Python Fire開源—用於自動生成命令行界面的內容庫

FlexboxLayout幫助您完成聰明的UI布局

Chrome渲染管道的性能改進

Chrome 57 Beta 新特性



3.21 Google Doodle: 2017 母親節（MENA 地區）

相關焦點

  • WebGL 3D程序開發
    WebGL全稱Web Graphics Library，是一項新的Web 3D圖形標準，一種3D繪圖協議，也是HTML5大家庭中的一員，一項用來在網頁上繪製和渲染複雜三維圖形（3D圖形），並允許用戶與之交互的技術。
  • 圖形學基礎——WebGL 基礎(上)
    我們是通過對 GPU 進行編程，進行渲染圖形：對於 GPU 編程主要從下面兩個方面進行編程：webgl：API glTranslate/glRotatefGLSL：頂點著色器 - gl_Position 和 片元著色器 - gl_FragColor#webgl 渲染管線JavaScript通過顯存的Buffer來實現頂點著色器與片元著色器的數據傳遞
  • webgl 迷宮項目開發總結
    項目簡介項目分為兩個部分：第一部分是一個迷宮Maze， 首先生成矩形cell數組，每個cell有4個side，然後一步一步地remove side（不包括迷宮邊緣的side），直到全部的cell 都連通（connected）。然後在迷宮的左邊緣創建一個入口，在右邊緣創建一個出口。
  • 讓3D深度學習更快更靈活,Facebook開源PyTorch3D
    魚羊 發自 麥蒿寺量子位 報導 | 公眾號 QbitAI現在，你的神經網絡可以更輕鬆地和 3D 數據搭配使用了。Facebook AI 已經推出了用於 3D 深度學習的開源工具包，PyTorch3D。顧名思義，PyTorch3D 是一個基於 PyTorch 的高度模塊化，且經過優化的庫。
  • WebGL 1.0標準規範正式公布 3D網際網路開啟
    WebGL 1.0定義了和OpenGL ES 2.0綁定在一起的JavaScript，可在瀏覽器內部實現富3D圖形，而且可用於任何支持OpenGL、OpenGL ES業界標準圖形API的平臺。有了這一標準，開發人員就可以直接使用JavaScript訪問OpenGL級別圖形，並且自由地將3D與其他HTML內容融合在一起，推動Web遊戲、教育、培訓應用和富圖形用戶界面的創新。
  • 一鍵生成3d城市，免費實現3d地圖
    進入到ThingJS的在線開發中，找到一鍵3d城市的入口，進行新建地圖城市，輸入地圖/城市項目名稱，選擇一鍵城市，選取城市範圍，確定使用3d城市模板，最後進入編輯狀態，即可生成3d城市，可以說，前期的操作就是點點點，這樣一個3d城市或者說是3d地圖就展現出來了，我們可以根據這個展現的3d城市進行下一步的操作，不論是去給他替換模型或者說是控制視角進行巡遊，亦或者是增加圖表來顯示對應數據，或者是點擊出現對應大樓名稱
  • 八大瘋狂的 HTML5 Canvas 及 WebGL 動畫效果
    在過去的幾年中，我們想要製作卓越的網頁動畫只能使用Flash和Java Applet。而現在，使用腳本語言和渲染器在瀏覽器中實現瘋狂的動畫效果已經成為可能。究其原因，大概有以下幾點： 處理器的性能越來越高。我們的電腦已經有足夠的強大的能力去渲染最為複雜的動畫效果。 現在瀏覽器和web技術的不斷發展。
  • 如何使用 WebGL 進行實時視頻處理
    要將圖像內容映射到特定字符，我通過使用亮度圖選擇最佳匹配。我計算每個 4x4 正方形的像素。獲取有關詳細指導，建議您訪問 https://webglfundamentals.org對於 WebGL，一個常見誤解是把它當作瀏覽器中的 3D 引擎。儘管 WebGL 技術能使我們在瀏覽器中提供 GPU 加速的 3D 內容，但 WebGL 本身不是 3D 引擎。
  • webgl、Javascript、HTML、ThingJS、cesium都是什麼鬼?
    webgl——是一種3D繪圖協議，這種繪圖技術標準允許把JavaScript和OpenGL ES 2.0結合在一起，通過增加OpenGL ES 2.0的一個JavaScript綁定，WebGL可以為HTML5。Canvas提供硬體3D加速渲染，這樣Web開發人員就可以藉助系統顯卡來在瀏覽器裡更流暢地展示3D場景和模型了，還能創建複雜的導航和數據視覺化。
  • 瀏覽器中禁用WebGL
    Chrome上禁止WebGL的方法: 在啟動快捷方式裡加上–disable-webgl。 Firefox4上禁止WebGL的方法：瀏覽器地址欄輸入about:config進入設置頁，在Filter中輸入webgl，找到 webgl.disabled，設置成true。如果結果中存在webgl.enabled_for_all_sites的話，設成false。然後重啟瀏覽器。
  • FaceBook開源PyTorch3D:基於PyTorch的新3D計算機視覺庫
    使用 PyTorch 的算子；2. 可以使用異構的批數據；3. 可微分；4. 能夠使用 GPU 加速；這樣一來，PyTorch3D 吸收了深度學習框架的優勢，同時能夠專門針對 3D 建模渲染等進行計算，有著很好的性能和應用優勢。
  • 3900X配RTX3080視頻剪輯、3D建模渲染電腦配置方案
    渲染這類應用對於硬體要求的特點來做講解說明。做3d設計的電腦什麼價格？」 做內容創作的電腦不同於遊戲電腦，遊戲中達到一定的幀數，玩家可能已經察覺不出來效果了，而在內容創作中始終是性能越高越好，更高的性能意味著可以減少工作過程中的等待時間，提升工作效率。所以說，做視頻剪輯、3d設計的電腦價格沒有上限，三千、五千、一萬……都可以，只要你能接受這個價位應有的工作效率就可以。
  • 3900X配RTX3080視頻剪輯、3D建模渲染電腦配置方案
    本文就不按照以往那樣方式一個一個的去講解硬體了，我們以問答的方式，根據視頻剪輯、3d渲染這類應用對於硬體要求的特點來做講解說明。1、首先回答一個很多人常問的問題「做視頻剪輯的主機需要多少錢？做3d設計的電腦什麼價格？」
  • 讓你的After Effects渲染更快的14個技巧
    如果您使用的是低於標準價的卡，則切換時可能會看到即時渲染速度提高。 2.升級您的RAM(內存) 如果您在After Effects中日以繼夜地工作，那麼升級RAM是必經之路。Adobe建議至少要有4GB的RAM來運行After Effects，但您將從中受益更多。
  • WebGL 入門-原生API介紹
    當前，大部分瀏覽器都使用語法 canvas.getContext("experimental-webgl") 來獲取 WebGLRenderingContext。//從Canvas中獲取上下文function initWebGL(canvas) {    var gl;    try {        gl = canvas.getContext("experimental-webgl") || canvas.getContext("webgl");    } catch (
  • DAZ3D.com提供免費3D軟體,其中包含3D動畫軟體
    等大多數3D軟體應用程式中使用的附加產品。」3D模型套件提供廣泛的數字內容，包括3D人物模型、3D解剖模型、服裝、動物、交通工具、建築、環境和3D動畫。定價和上市免費3D軟體只能從即日起至2012年2月29日在DAZ3D.com下載。下載的每款產品均享受免費更新和未來版本升級價格，可節省數百美元。
  • 3D Max如何繪製並渲染出照片級的效果圖?
    雲渲染效果圖示例如何製作並渲染出一張照片級的效果圖？所以，具體操作可以從製作流程上分解：1、建模軟體很多（MAYA、C4D、3D MAX等等），效果圖適合使用3d max，那就多練習，把模型建好。2、3D裡面，現在做材質、燈光那些，除了VRAY，還有corona被大家廣泛使用，很多照片級效果圖都是使用CR製作出來的。目前VRAY迭代到了4.3，Corona迭代到了5.0,找個適合自己用的就好。
  • 八大瘋狂的HTML5 Canvas及WebGL動畫效果
    在過去的幾年中，我們想要製作卓越的網頁動畫只能使用Flash和Java Applet。而現在，使用腳本語言和渲染器在瀏覽器中實現瘋狂的動畫效果已經成為可能。究其原因，大概有以下幾點： 處理器的性能越來越高。我們的電腦已經有足夠的強大的能力去渲染最為複雜的動畫效果。現在瀏覽器和web技術的不斷發展。
  • 基於Web的3D繪圖標準 —— WebGL發布1.0版本
    WebGL 是一種3D繪圖標準，這種繪圖技術標準允許把JavaScript和OpenGL ES 2.0結合在一起，通過增加OpenGL ES 2.0的一個JavaScript綁定，WebGL可以為HTML5 Canvas提供硬體3D加速渲染，這樣Web開發人員就可以藉助系統顯卡來在瀏覽器裡更流暢地展示3D場景和模型了，還能創建複雜的導航和數據視覺化。
  • ps基礎工具使用-批量工具和3D工具
    批量工具使用 動作面板-記錄和執行動作。 進入記錄狀態，開始錄製步驟和參數。 首先先建立一個組。 在新的組下建立動作。