【WebGPU】简介和开始

简介

WebGPU 是一种 API,用于在 Web 应用中访问 GPU 的功能。在 WebGPU 出现之前,有一个 WebGL,它提供了 WebGPU 的部分功能。它开创了一种新的富媒体 Web 内容类别,并且开发者也利用它构建了许多精彩的内容。不过,它基于 2007 年发布的 OpenGL ES 2.0 API,而该 API 基于更旧的 OpenGL API。在那段时间里,GPU 取得了显著进步,用来与 GPU 进行交互的原生 API 也在与 Direct3D 12、Metal 和 Vulkan 一起发展。

WebGPU 将这些现代 API 的进展带到了 Web 平台。它专注于以跨平台的方式启用 GPU 功能,同时提供在 Web 上感觉自然并且比它所基于的一些原生 API 更简洁的 API。

GPU 通常与快速渲染详细图形相关,WebGPU 也不例外。它具有支持当今桌面和移动 GPU 上许多最流行的渲染技术所需的功能,并为未来随着硬件功能的不断发展添加新功能提供了途径。

除了渲染之外,WebGPU 还可以释放 GPU 用于执行通用、高度并行工作负载的潜力。这些计算着色器可以独立使用(无需任何渲染组件),也可以作为渲染流水线紧密集成的一部分使用。

代码基础

基础组成部分可以包括以下内容:

导入库(Import Libraries):根据需要导入所需的库或模块,例如图形库、计算库或WebGPU相关的库。

创建设备(Create Device):通过调用适当的函数或方法创建WebGPU设备对象。设备对象表示计算机上的物理或虚拟GPU。

创建上下文(Create Context):使用设备对象创建WebGPU上下文对象。上下文对象用于执行WebGPU操作,并与设备关联。

创建缓冲区(Create Buffers):使用上下文对象创建缓冲区对象。缓冲区对象用于存储数据,例如顶点数据、纹理数据或计算所需的数据。

创建纹理(Create Textures):使用上下文对象创建纹理对象。纹理对象用于表示图像数据,例如颜色、深度或阴影信息。

创建着色器(Create Shaders):使用上下文对象创建着色器对象。着色器对象是执行计算和图形渲染的程序,可以是顶点着色器、片段着色器或计算着色器。

创建管道(Create Pipeline):使用上下文对象创建管道对象。管道对象定义了图形渲染或计算操作的配置,包括着色器、渲染状态和其他信息。

创建绑定组(Create Bind Groups):使用上下文对象创建绑定组对象。绑定组对象用于将资源绑定到着色器,包括缓冲区、纹理和采样器等资源。

创建命令缓冲区(Create Command Buffers):使用上下文对象创建命令缓冲区对象。命令缓冲区对象用于存储要在GPU上执行的命令。

提交和执行命令(Submit and Execute Commands):使用队列对象将命令缓冲区提交到GPU上的执行队列中,以便按顺序执行命令。

开始

使用 WebGPU 进行计算,则可以使用 WebGPU 而不在屏幕上显示任何内容。但是,要进行可视化的时候,则需要画布。

创建一个新的 HTML 文档,其中包含一个 元素,以及用于查询画布元素的

<html><head><meta charset="utf-8"><title>WebGPU Life</title></head><body><canvas width="512" height="512"></canvas><script type="module">const canvas = document.querySelector("canvas");// Your WebGPU code will begin here!</script></body>
</html>

WebGPU 的 API 可能需要一段时间才能传播到整个 Web 系统。因此,首先检查浏览器是否可以使用 WebGPU。

检查是否存在用作 WebGPU 入口点的 navigator.gpu 对象,以下代码:

index.htmlif (!navigator.gpu) {throw new Error("WebGPU not supported on this browser.");
}

理想情况下,如果 WebGPU 不可用,则您需要通过让页面回退到不使用 WebGPU 的模式来通知用户。(也许可以改用 WebGL?)不过,在此 Codelab 中,您只需抛出一个错误即可阻止代码进一步执行。

确定浏览器支持 WebGPU 后,为应用初始化 WebGPU 的第一步就是请求 GPUAdapter。您可以将适配器视为 WebGPU 代表设备中特定的 GPU 硬件的表示形式。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/650963.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

领域驱动设计(Domain-Driven Design DDD)——通过重构找到深层次模型1

一、概述 重构就是在不改变软件功能的前提下重新设计它。开发人员无需在着手开发之前做出详细的设计决策&#xff0c;只需要在开发过程中不断小幅调整设计即可&#xff0c;这不但能够保证软件原有的功能不变&#xff0c;还可使整个设计更加灵活易懂。 我们面临的真正挑战是找到…

【机器视觉实验】机器视觉实验四——基于knn的场景图像检索、基于SVM的人脸图像识别

一、实验内容 实验内容包含要进行什么实验,实验的目的是什么,实验用到的算法及其原理的简单介绍。 (1) 编程实现基于knn的场景图像检索 a) 至少实现三种特征组合进行检索; b) 使用recall与precision分析不同特征组合对检索精度的影响。 (2) 实现基于SVM的人脸图像识…

java使用MD5加密

java使用MD5加密 源字符串&#xff1a;三四五 使用 UTF-8字符集字符集加密后的结果为:f2615f1dab4520fc1e1a79ed6a4f7b37 用 GB2312 字符集加密后的结果为:1dbb006b41466197c486592727af516f 用 GBK 字符集加密后的结果为:1dbb006b41466197c486592727af516f

TCP 状态转换以及半关闭

TCP 状态转换&#xff1a; 上图中还没有进行握手的时候状态是关闭的。 三次握手状态的改变&#xff1a; 客户端发起握手。 调用 connect() 函数时状态转化为&#xff1a;SYN_SENT。调用 listen() 函数时状态转换为&#xff1a;LISTEN。ESTABLISHED是被连接的状态。 四次挥手…

Python系列(7)—— 运算符的优先级

一、引言 在Python中&#xff0c;当一个表达式包含多个运算符时&#xff0c;运算符的优先级决定了这些运算符的执行顺序。高优先级的运算符会先于低优先级的运算符进行计算。了解和掌握运算符的优先级对于编写正确的Python代码至关重要。 二、Python中的运算符优先级 Python…

2023-2024年广东省职业院校技能大赛信息安全管理与评估赛项规程

2023-2024 年度广东省职业院校技能大赛“信息安全管理与评估”赛项规程 一、赛项名称 赛项编号&#xff1a;GZ032 赛项名称&#xff1a;信息安全管理与评估 英语翻译&#xff1a;Information Security Management and Evaluation 赛项组别&#xff1a;高职组 竞赛形式&am…

httprunnerV4.X的基本使用详解

目录 1、httprunner概述 1.1、httprunner的优点 2、httprunner的安装 3、基本命令的使用 3.1、生成脚手架 3.2、将har文件转换为测试用例文件 3.3、执行测试用例 3.4、为项目创建虚拟环境&#xff0c;然后安装httprunner库 3.4、执行测试用例生成测试报告 4、httprun…

CSS 双色拼接按钮效果

<template><view class="sss"><button> <!-- 按钮 --><view class="span"> 按钮 </view> <!-- 按钮文本 --></button></view></template><script></script><style>body {b…

【Git】windows系统安装git教程和配置

一、何为Git Git(读音为/gɪt/)是一个开源的分布式版本控制系统&#xff0c;可以有效、高速地处理从很小到非常大的项目版本管理。 二、git安装包 有2种版本&#xff0c;Git for Windows Setup和Git for Windows Portable(便携版)两个版本都可以。 三、Git for Windows Por…

js设计模式实例

js设计模式 设计模式&#xff08;Design pattern&#xff09;代表了最佳的实践&#xff0c;通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误…

Linux命令-arj命令(用于创建和管理.arj压缩包)

补充说明 arj命令 是 .arj 格式的压缩文件的管理器&#xff0c;用于创建和管理 .arj 压缩包。 语法 arj(参数)参数 操作指令&#xff1a;对 .arj 压缩包执行的操作指令压缩包名称&#xff1a;指定要操作的arj压缩包名称

应急响应红蓝工程师白帽子取证Linux和windows入侵排查还原攻击痕迹,追溯攻击者,以及各种木马和病毒以及恶意脚本文件排查和清除

应急响应红蓝工程师白帽子取证Linux入侵排查还原攻击痕迹,追溯攻击者,以及各种木马和病毒以及恶意脚本文件排查和清除。 一般服务器被入侵的迹象,包括但不局限于:由内向外发送大量数据包(DDOS肉鸡)、服务器资源被耗尽(挖矿程序)、不正常的端口连接(反向shell等)、服务…

Go 知识chan

Go 知识chan 1. 基本知识1.1 定义1.2 操作1.3 操作限定1.4 chan 读写 2. 原理2.1 数据结构2.2 环形队列2.3 等待队列2.4 类型消息2.5 读写数据2.6 关闭chan 3. 使用3.1 操作符使用3.2 select3.3 for-range https://a18792721831.github.io/ 1. 基本知识 chan是go里面里面提供…

源码篇--Redis 五种数据类型

文章目录 前言一、 字符串类型&#xff1a;1.1 字符串的编码格式&#xff1a;1.1.1 raw 编码格式:1.1.2 empstr编码格式:1.1.3 int 编码格式:1.1.4 字符串存储结构展示: 二、 list类型&#xff1a;2.1 List 底层数据支持&#xff1a;2.2 List 源码实现&#xff1a;2.3 List 结构…

微信小程序-04

rpx&#xff08;responsive pixel&#xff09;是微信小程序独有的&#xff0c;用来解决屏适配的尺寸单位。 import 后跟需要导入的外联样式表的相对路径&#xff0c;用 ; 表示语句结束。 定义在 app.wxss 中的样式为全局样式&#xff0c;作用于每一个页面。 在页面的 .wxss 文…

独享http代理安全性是更高的吗?

不同于共享代理&#xff0c;独享代理IP为单一用户提供专用的IP&#xff0c;带来了一系列需要考虑的问题。今天我们就一起来看看独享代理IP的优势&#xff0c;到底在哪里。 我们得先来看看什么是代理IP。简单来说&#xff0c;代理服务器充当客户机和互联网之间的中间人。当你使用…

Android拍照的方式:调用系统相机、自定义 Camera

一、调用系统相机&#xff1a; 清单文件配置授权、打开相机获取照片注意事项 1、清单文件配置 A、配置使用相机权限 <uses-featureandroid:name"android.hardware.camera"android:required"false" /><uses-permission android:name"andro…

自动驾驶代客泊车AVP泊车规划模块详细设计

目录 1. 背景... 3 2. 泊车模块架构图... 4 3. 泊车规划模块信号... 5 3.1 输入信号... 5 3.2 输出信号... 5 4. 模块预处理... 6 4.1 坐标系转换... 6 4.2 车库及轨迹处理策略... 7 5. 泊车规划模块算法设计... 8 5.1 泊入规划模块... 8 5.1.1 泊入…

幻兽帕鲁一键开私服?超简单小白教程一看就会!

如何自建幻兽帕鲁服务器&#xff1f;基于阿里云服务器搭建幻兽帕鲁palworld服务器教程来了&#xff0c;一看就懂系列。本文是利用OOS中幻兽帕鲁扩展程序来一键部署幻兽帕鲁服务器&#xff0c;阿里云服务器网aliyunfuwuqi.com分享官方基于阿里云服务器快速创建幻兽帕鲁服务器教程…

Python学习之路-Django基础:PythonWeb

Python学习之路-Django基础:PythonWeb Python Web 框架要点 处理流程 图片来源于未来的小牛的CSDN博客 意义 用于搭建Web应用程序&#xff0c;免去不同Web应用相同代码部分的重复编写&#xff0c;只需关心Web应用核心的业务逻辑实现 Web应用程序的本质 接收并解析HTTP请求…