初識 WebGPU 以及遇到 WebGPU not supported 錯誤的解決方法
- WebGPU學習資源
- 初識WebGPU
- 遇到并解決問題
- 在線示例
因公司需求，開始接觸 WebGPU，偶然遇到問題，網上搜索無效，后來通過逐步判斷，終于定位到問題，這里記錄一下，為其他遇到此問題的網友提供解決思路。
本包含 WebGPU學習資源、初識WebGPU、遇到并解決問題、在線示例四部分。
WebGPU學習資源
1. 學習API WebGPU_API 。
3. 基礎學習 WebGPU 理論基礎。
4. 在線示例 WebGPU Samples。
5. WebGPU 與 WebGL 對比：WebGL 與 WebGPU 比對
根據以上學習資源，快速了解什么是 WebGPU 以及完成 helloworld 入門。
初識WebGPU
1. 什么是 WebGPU以及為什么要用WebGPU？
網上資料一搜一大堆，這里我簡單說一下自己的理解：
對于計算機圖形（二維三維）而言，需要大量的計算，這些計算通常需要交給 GPU，而 WebGL提供了調用 GPU 的接口，使得在 Web 端也可以很輕松的加載酷炫的效果。
但是 WebGL 是通過 OpenGL 驅動 GPU，存在一定的局限性，不能完全發揮 GPU 的性能，因此 WebGPU 出現了。
以下是 WebGPU 的介紹（復制的）：
WebGPU API 使 web 開發人員能夠使用底層系統的 GPU（圖形處理器）進行高性能計算并繪制可在瀏覽器中渲染的復雜圖形。
WebGPU 是 WebGL 的繼任者，為現代 GPU 提供更好的兼容、支持更通用的 GPU 計算、更快的操作以及能夠訪問到更高級的 GPU 特性。
WebGPU 解決了WebGL 中的一些問題，其提供了與現代 GPU API 兼容的更新的通用架構，它會讓你感到更加絲滑。它支持圖形渲染，同時對 GPGPU 計算也有一流的支持。在 CPU 端渲染單個對象的成本要低得多，并且它支持現代化的 GPU 渲染特性，例如，基于計算的粒子和用于后期處理的濾鏡，如顏色效果、銳化和景深模擬。此外，它也可以直接在 GPU 上處理諸如剔除和骨骼動畫模型等耗費大量計算資源的任務。
總之就是：WebGPU 作為下一代圖形計算，非常有前景，非常牛，最好學學！
這里放一個 WebGL 和 WebGPU 在線對比：WebGL 和 WebGPU 性能效果對比
2. WebGPU helloworld
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"></head><body><script type="text/javascript">// 異步方法// 判斷是否支持 WebGPUasync function init() {// 是否支持 WebGPUif (!navigator.gpu) {alert("WebGPU not supported.");throw Error("WebGPU not supported.");}// 適配器const adapter = await navigator.gpu.requestAdapter();if (!adapter) {throw Error("Couldn't request WebGPU adapter.");}// 獲取邏輯設備const device = await adapter.requestDevice();console.log(device)alert("WebGPU supported.");//...}init()
</script>
</body></html>遇到并解決問題
1. 遇到問題應該也很普遍：WebGPU not supported.
開始以為沒有開啟 WebGPU，后經過查看以及其他 WebGL 程序測試，確認已經開啟 WebGPU。
2. 解決問題
經過不斷調試代碼以及運行環境，最終發現，應該是 WebGPU 權限問題。
結論：WebGPU 只允許本地訪問或者 https 訪問！！！
即，瀏覽器地址只能是：localhost、127.0.0.1 或者 https + 其他地址！
如果 http + 其他地址則會報以上錯誤！
2. 錯誤原因，沒搜索到，放上文心一言的回答
測試地址：
http + WebGPU 初始化（報錯）
https + WebGPU 初始化（正常）
在線示例
webgpu 在線示例：webgpu 繪制三角形
![[GPT]Andrej Karpathy微軟Build大會GPT演講(上)--GPT如何訓練](http://pic.xiahunao.cn/[GPT]Andrej Karpathy微軟Build大會GPT演講(上)--GPT如何訓練)
 call 解決方法)
