初识 WebGPU 以及遇到 WebGPU not supported 错误的解决方法

发布时间:2023年12月17日

初识 WebGPU 以及遇到 WebGPU not supported 错误的解决方法

因公司需求,开始接触 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">
    // 异步方法
    // 判断是否支持 WebGPU
    async function init() {
        // 是否支持 WebGPU
        if (!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 绘制三角形

文章来源:https://blog.csdn.net/linzi19900517/article/details/134509925
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。