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

这篇具有很好参考价值的文章主要介绍了初识 WebGPU 以及遇到 WebGPU not supported 错误的解决方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

因公司需求,开始接触 WebGPU,偶然遇到问题,网上搜索无效,后来通过逐步判断,终于定位到问题,这里记录一下,为其他遇到此问题的网友提供解决思路。

本包含 WebGPU学习资源、初识WebGPU、遇到并解决问题、在线示例四部分。


WebGPU学习资源


1. 学习API WebGPU_API 。

初识 WebGPU 以及遇到 WebGPU not supported 错误的解决方法,WebGL 基础学习,WebGIS 综合学习,前端学习笔记,webgpu,webgpu 报错,webgpu 初始化,webgpu介绍,webgpu学习

3. 基础学习 WebGPU 理论基础。

初识 WebGPU 以及遇到 WebGPU not supported 错误的解决方法,WebGL 基础学习,WebGIS 综合学习,前端学习笔记,webgpu,webgpu 报错,webgpu 初始化,webgpu介绍,webgpu学习

4. 在线示例 WebGPU Samples。

初识 WebGPU 以及遇到 WebGPU not supported 错误的解决方法,WebGL 基础学习,WebGIS 综合学习,前端学习笔记,webgpu,webgpu 报错,webgpu 初始化,webgpu介绍,webgpu学习

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 性能效果对比

初识 WebGPU 以及遇到 WebGPU not supported 错误的解决方法,WebGL 基础学习,WebGIS 综合学习,前端学习笔记,webgpu,webgpu 报错,webgpu 初始化,webgpu介绍,webgpu学习

初识 WebGPU 以及遇到 WebGPU not supported 错误的解决方法,WebGL 基础学习,WebGIS 综合学习,前端学习笔记,webgpu,webgpu 报错,webgpu 初始化,webgpu介绍,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 以及遇到 WebGPU not supported 错误的解决方法,WebGL 基础学习,WebGIS 综合学习,前端学习笔记,webgpu,webgpu 报错,webgpu 初始化,webgpu介绍,webgpu学习

开始以为没有开启 WebGPU,后经过查看以及其他 WebGL 程序测试,确认已经开启 WebGPU。

2. 解决问题

经过不断调试代码以及运行环境,最终发现,应该是 WebGPU 权限问题。

结论:WebGPU 只允许本地访问或者 https 访问!!!

即,浏览器地址只能是:localhost、127.0.0.1 或者 https + 其他地址

如果 http + 其他地址则会报以上错误!

2. 错误原因,没搜索到,放上文心一言的回答

初识 WebGPU 以及遇到 WebGPU not supported 错误的解决方法,WebGL 基础学习,WebGIS 综合学习,前端学习笔记,webgpu,webgpu 报错,webgpu 初始化,webgpu介绍,webgpu学习

测试地址:

http + WebGPU 初始化(报错)

初识 WebGPU 以及遇到 WebGPU not supported 错误的解决方法,WebGL 基础学习,WebGIS 综合学习,前端学习笔记,webgpu,webgpu 报错,webgpu 初始化,webgpu介绍,webgpu学习

https + WebGPU 初始化(正常)

初识 WebGPU 以及遇到 WebGPU not supported 错误的解决方法,WebGL 基础学习,WebGIS 综合学习,前端学习笔记,webgpu,webgpu 报错,webgpu 初始化,webgpu介绍,webgpu学习


在线示例

初识 WebGPU 以及遇到 WebGPU not supported 错误的解决方法,WebGL 基础学习,WebGIS 综合学习,前端学习笔记,webgpu,webgpu 报错,webgpu 初始化,webgpu介绍,webgpu学习

webgpu 在线示例:webgpu 绘制三角形文章来源地址https://www.toymoban.com/news/detail-774006.html

到了这里,关于初识 WebGPU 以及遇到 WebGPU not supported 错误的解决方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 请求后端出现“Content type ‘application/octet-stream‘not supported“错误解决方案

    首先看报错。此报错是Springboot 报错。 看看Postman 正确的传递方式。 Vue应该怎么传递呢?使用 FormData 对象。 说明: 主要的解决思路是,要指定上传文件时其他附加信息的 contentType,那么去FormData对象如何指定某个参数的 contentType属性。 参考: https://blog.csdn.net/weixin_44030791/

    2024年02月11日
    浏览(46)
  • Docker 启动容器遇到 operation not permitted 错误的解决

    问题 在 Linux 启动容器报错 operation not permitted ,容器运行失败 (但在 Mac 上运行正常,注 Mac 上的 Docker 版本不同于 Linux) 报错示例: 原因 与 Linux 的权限安全保护相关 https://bugzilla.redhat.com/show_bug.cgi?id=1764152 https://blog.twtnn.com/2021/09/docker-containeroperation-not-permitted.html ...Linux為了

    2024年02月11日
    浏览(53)
  • C4D常遇到的错误提示以及解决方案汇总

    MAXON Cinema 4D 是一款领先的 3D 软件,可提供出色的建模、雕刻、动画和渲染功能,实现非常高效的 3D 工作流程。Maxon 要求 Cinema 4D 用户拥有许可证才能使用授权的 Cinema 4D。 在本文中,赞奇云工作站将指导您处理使用 C4D 软件时遇到的一些问题。 原因 电脑未识别出司机卡或卡

    2024年02月04日
    浏览(45)
  • 遇到错误:Error response from daemon: network xxxx not found解决方案

    遇到启动的服务网络错误时: 网络丢失,或是操作不当导致。 可以尝试以下解决方案: 1、检查现有可用的网络: 2、绑定网络: 3、启动 4、可能存在问题,已绑定一个不可用的网络如【mynet】,需要解绑  

    2024年02月11日
    浏览(51)
  • 安装SQL Server 2014的坎坷之路(安装中遇到的错误以及解决方案)

    目录 目录 一、SQL Server 2014下载、安装与使用 二、SQL Server 2014安装的坎坷之路 1、解决SQL安装规则需要 Microsoft .NET Framework 3.5 Service Pack 1失败 (1)检查电脑中是否有net 3.5  (2)安装net 3.5 2.解决“未能加载文件或程序集\\\"Microsoft.SqlServer.Sqm, Version=12.0.0.0,Culture=neutral”问题 3、解

    2024年02月04日
    浏览(76)
  • Cloning into ‘XXXX‘... fatal: protocol ‘?https‘ is not supporte 报错解决方法

    git bash 中出现信息如下信息: Cloning into \\\'XXXX\\\'... fatal: protocol \\\'?https\\\' is not supporte  经过百度搜索: 可能存在问题一:git clone 使用的时候不支持https,可能需要换成SSH方式 你可以通过命令git remote set-url origin 你仓库的SSH地址,去除SSH认证。 但是感觉不太实际。 然后继续看下一篇

    2023年04月12日
    浏览(49)
  • Java实现方法接口入参同时包含文件、字段和对象等多种类型。HTTP请求返回415状态,Content type ‘application/octet-stream‘ not supported错误。

    方法一:对象不使用注解 使用Postman测试,直接将subject对象的字段填在key的位置 方法二:对象使用注解@RequestPart 使用Postman测试,将字段包装在subject对象里,使用Content type:application/json的内容类型 注:方法二在开发本地测试执行成功,但是在测试人员机子下不通过,执行报

    2024年02月12日
    浏览(40)
  • WordPress 提示“此站点遇到了致命错误”的解决方法

    WordPress 提示“此站点遇到了致命错误”的解决方法 WordPress 网站博客提示“此站点遇到了致命错误。”如何解决?今天老唐不幸遇到了这个问题,搜了一下解决方法,发现致命错误原因有很多,所以需要先打开 WordPress 的 WP_DEBUG 功能,然后根据提示进行下一步操作。WordPress

    2024年02月09日
    浏览(59)
  • mac安装程序, 安装器遇到错误导致安装失败解决方法

    网上找了很久没有可行的方式,自己尝试如下: 如果没有显示任何来源选项,则需要恢复允许“任何来源”的选项,即关闭系统的Gatekeeper,我们可以在“启动台(系统界面下方Dock栏中的小火箭图标)”—“其他”—“终端”中使用spctl命令:sudo spctl --master-disable 1、回车后输入

    2024年02月08日
    浏览(46)
  • 【MySql】Navicat 连接数据库出现1251 - Client does not support authentication protocol ...... 问题的解决方法

    Navicat 连接 mysql,连接时出现问题:1251 client does not support authentication protocol requested by server… 再次安装MySQL后,使用 Navicat 或者 MySQL yog都会出现上面这个异常。 其实这是一个简单的权限与安全问题,只需要在 MySQL Shell 中输入两行命令就可以解决问题啦。 1、以管理员身份运行

    2024年02月09日
    浏览(66)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包