WebGPU跨平台应用开发

对于 Web 开发人员来说,WebGPU 是一个 Web 图形 API,可提供对 GPU 的统一和快速访问。WebGPU 公开了现代硬件功能,并允许在 GPU 上进行渲染和计算操作,类似于 Direct3D 12、Metal 和 Vulkan。

虽然这是真的,但这个故事并不完整。WebGPU 是协作努力的结果,包括 Apple、Google、Intel、Mozilla 和 Microsoft 等大公司。其中一些人意识到 WebGPU 可能不仅仅是一个 JavaScript API,而是一个跨平台的图形 API,适用于除 Web 之外的跨生态系统的开发人员。

为了满足主要用例,Chrome 113 中引入了 JavaScript API。然而,与之一起开发的另一个重要项目是:webgpu.h C API。这个 C 头文件列出了 WebGPU 的所有可用过程和数据结构。它充当与平台无关的硬件抽象层,允许您通过在不同平台上提供一致的接口来构建特定于平台的应用程序。

在本文档中,我们将学习如何使用 WebGPU 编写一个可在 Web 和特定平台上运行的小型 C++ 应用。剧透警告:只需对代码库进行少量调整,你就会获得浏览器窗口和桌面窗口中出现的相同红色三角形。

NSDT工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器 - REVIT导出3D模型插件 - 3D模型语义搜索引擎 - AI模型在线查看 - Three.js虚拟轴心开发包 - 3D模型在线减面 - STL模型在线切割 - 3D道路快速建模 

1、它是如何工作的?

要查看完整的应用程序,请查看 WebGPU 跨平台应用程序存储库。

该应用程序是一个极简的 C++ 示例,展示了如何使用 WebGPU 从单个代码库构建桌面和 Web 应用程序。在底层,它通过名为 webgpu_cpp.h 的 C++ 包装器使用 WebGPU 的 webgpu.h 作为与平台无关的硬件抽象层。

警告:webgpu.h 和 webgpu_cpp.h API 可能会发生变化。

在 Web 上,该应用程序是针对 Emscripten 构建的,它在 JavaScript API 之上具有实现 webgpu.h 的绑定。在特定平台(如 macOS 或 Windows)上,可以针对 Chromium 的跨平台 WebGPU 实现 Dawn 构建此项目。值得一提的是,webgpu.h 的 Rust 实现 wgpu-native 也存在,但在本文档中未使用。

2、开始

首先,你需要一个 C++ 编译器和 CMake,以便以标准方式处理跨平台构建。在专用文件夹中,创建一个 main.cpp 源文件和一个 CMakeLists.txt 构建文件。

main.cpp 文件目前应包含一个空的 main() 函数。

int main() {}

CMakeLists.txt 文件包含项目的基本信息。最后一行指定可执行文件名称为“app”,其源代码为 main.cpp

cmake_minimum_required(VERSION 3.13) # CMake version check
project(app)                         # Create project "app"
set(CMAKE_CXX_STANDARD 20)           # Enable C++20 standardadd_executable(app "main.cpp")

运行 cmake -B build 在“build/”子文件夹中创建构建文件,并运行 cmake --build build 实际构建应用程序并生成可执行文件。

# Build the app with CMake.
$ cmake -B build && cmake --build build# Run the app.
$ ./build/app

应用程序运行但尚未输出,因为您需要一种在屏幕上绘制内容的方法。

3、获取 Dawn

要绘制三角形,你可以利用 Dawn,这是 Chromium 的跨平台 WebGPU 实现。这包括用于在屏幕上绘图的 GLFW C++ 库。下载 Dawn 的一种方法是将其作为 git 子模块添加到你的存储库。以下命令将其提取到“dawn/”子文件夹中。

$ git init
$ git submodule add https://dawn.googlesource.com/dawn

然后,按如下方式附加到 CMakeLists.txt 文件:

  • CMake DAWN_FETCH_DEPENDENCIES 选项获取所有 Dawn 依赖项。
  • dawn/ 子文件夹包含在目标中。
  • 你的应用将依赖于 dawn::webgpu_dawn、 glfw 和 webgpu_glfw 目标,以便稍后可以在 main.cpp 文件中使用它们。
…
set(DAWN_FETCH_DEPENDENCIES ON)
add_subdirectory("dawn" EXCLUDE_FROM_ALL)
target_link_libraries(app PRIVATE dawn::webgpu_dawn glfw webgpu_glfw)

4、打开窗口

现在 Dawn 已可用,使用 GLFW 在屏幕上绘制内容。为方便起见,此库包含在 webgpu_glfw 中,允许你编写与平台无关的窗口管理代码。

要打开名为“WebGPU 窗口”且分辨率为 512x512 的窗口,请按如下方式更新 main.cpp 文件。请注意,此处使用 glfwWindowHint() 来请求不进行任何特定的图形 API 初始化。

#include <GLFW/glfw3.h>const uint32_t kWidth = 512;
const uint32_t kHeight = 512;void Start() {if (!glfwInit()) {return;}glfwWindowHint(GLFW_CLIENT_API, GLFW_NO_API);GLFWwindow* window =glfwCreateWindow(kWidth, kHeight, "WebGPU window", nullptr, nullptr);while (!glfwWindowShouldClose(window)) {glfwPollEvents();// TODO: Render a triangle using WebGPU.}
}int main() {Start();
}

重建应用程序并像以前一样运行它现在会显示一个空窗口。我们正在取得进展!

5、获取 GPU 设备

在 JavaScript 中, navigator.gpu 是访问 GPU 的入口点。在 C++ 中,你需要手动创建一个用于相同目的的 wgpu::Instance 变量。为方便起见,在 main.cpp 文件顶部声明实例,并在 main() 中调用 wgpu::CreateInstance()

…
#include <webgpu/webgpu_cpp.h>wgpu::Instance instance;
…int main() {instance = wgpu::CreateInstance();Start();
}

由于 JavaScript API 的形状,访问 GPU 是异步的。在 C++ 中,创建两个辅助函数,分别称为 GetAdapter() 和 GetDevice(),它们分别返回带有 wgpu::Adapter 和 wgpu::Device 的回调函数。

注意:当 WebAssembly JavaScript Promise Integration API 可用时,此示例会简化。撰写本文时情况并非如此。
#include <iostream>
…void GetAdapter(void (*callback)(wgpu::Adapter)) {instance.RequestAdapter(nullptr,[](WGPURequestAdapterStatus status, WGPUAdapter cAdapter,const char* message, void* userdata) {if (status != WGPURequestAdapterStatus_Success) {exit(0);}wgpu::Adapter adapter = wgpu::Adapter::Acquire(cAdapter);reinterpret_cast<void (*)(wgpu::Adapter)>(userdata)(adapter);}, reinterpret_cast<void*>(callback));
}void GetDevice(void (*callback)(wgpu::Device)) {adapter.RequestDevice(nullptr,[](WGPURequestDeviceStatus status, WGPUDevice cDevice,const char* message, void* userdata) {wgpu::Device device = wgpu::Device::Acquire(cDevice);device.SetUncapturedErrorCallback([](WGPUErrorType type, const char* message, void* userdata) {std::cout << "Error: " << type << " - message: " << message;},nullptr);reinterpret_cast<void (*)(wgpu::Device)>(userdata)(device);}, reinterpret_cast<void*>(callback));
}

为了方便访问,在 main.cpp文件顶部声明两个变量 wgpu::Adapter 和 wgpu::Device。更新 main() 函数以调用 GetAdapter() 并将其结果回调分配给适配器,然后调用 GetDevice() 并将其结果回调分配给设备,然后再调用 Start()

wgpu::Adapter adapter;
wgpu::Device device;
…int main() {instance = wgpu::CreateInstance();GetAdapter([](wgpu::Adapter a) {adapter = a;GetDevice([](wgpu::Device d) {device = d;Start();});});
}

6、绘制三角形

交换链未在 JavaScript API 中公开,因为浏览器会处理它。在 C++ 中,你需要手动创建它。

再次,为了方便起见,在 main.cpp 文件的顶部声明一个 wgpu::Surface变量。在 Start() 中创建 GLFW 窗口后,立即调用 wgpu::glfw::CreateSurfaceForWindow() 函数来创建 wgpu::Surface(类似于 HTML 画布),并通过调用 InitGraphics() 中的新辅助程序 ConfigureSurface() 函数对其进行配置。你还需要调用 surface.Present() 来在 while 循环中呈现下一个纹理。这没有可见的效果,因为尚未发生渲染。

#include <webgpu/webgpu_glfw.h>
…wgpu::Surface surface;
wgpu::TextureFormat format;void ConfigureSurface() {wgpu::SurfaceCapabilities capabilities;surface.GetCapabilities(adapter, &capabilities);format = capabilities.formats[0];wgpu::SurfaceConfiguration config{.device = device,.format = format,.width = kWidth,.height = kHeight};surface.Configure(&config);
}void InitGraphics() {ConfigureSurface();
}void Render() {// TODO: Render a triangle using WebGPU.
}void Start() {…surface = wgpu::glfw::CreateSurfaceForWindow(instance, window);InitGraphics();while (!glfwWindowShouldClose(window)) {glfwPollEvents();Render();surface.Present();instance.ProcessEvents();}
}

现在是使用以下代码创建渲染管道的好时机。为了更方便访问,请在 main.cpp 文件顶部声明一个 wgpu::RenderPipeline 变量,并在 InitGraphics() 中调用辅助函数 CreateRenderPipeline()

wgpu::RenderPipeline pipeline;
…const char shaderCode[] = R"(@vertex fn vertexMain(@builtin(vertex_index) i : u32) ->@builtin(position) vec4f {const pos = array(vec2f(0, 1), vec2f(-1, -1), vec2f(1, -1));return vec4f(pos[i], 0, 1);}@fragment fn fragmentMain() -> @location(0) vec4f {return vec4f(1, 0, 0, 1);}
)";void CreateRenderPipeline() {wgpu::ShaderModuleWGSLDescriptor wgslDesc{};wgslDesc.code = shaderCode;wgpu::ShaderModuleDescriptor shaderModuleDescriptor{.nextInChain = &wgslDesc};wgpu::ShaderModule shaderModule =device.CreateShaderModule(&shaderModuleDescriptor);wgpu::ColorTargetState colorTargetState{.format = format};wgpu::FragmentState fragmentState{.module = shaderModule,.targetCount = 1,.targets = &colorTargetState};wgpu::RenderPipelineDescriptor descriptor{.vertex = {.module = shaderModule},.fragment = &fragmentState};pipeline = device.CreateRenderPipeline(&descriptor);
}void InitGraphics() {…CreateRenderPipeline();
}

最后,在每帧调用的 Render()函数中向GPU发送渲染命令。

void Render() {wgpu::SurfaceTexture surfaceTexture;surface.GetCurrentTexture(&surfaceTexture);wgpu::RenderPassColorAttachment attachment{.view = surfaceTexture.texture.CreateView(),.loadOp = wgpu::LoadOp::Clear,.storeOp = wgpu::StoreOp::Store};wgpu::RenderPassDescriptor renderpass{.colorAttachmentCount = 1,.colorAttachments = &attachment};wgpu::CommandEncoder encoder = device.CreateCommandEncoder();wgpu::RenderPassEncoder pass = encoder.BeginRenderPass(&renderpass);pass.SetPipeline(pipeline);pass.Draw(3);pass.End();wgpu::CommandBuffer commands = encoder.Finish();device.GetQueue().Submit(1, &commands);
}

使用 CMake 重建应用程序并运行它,现在会在窗口中显示期待已久的红色三角形!

7、编译为 WebAssembly

现在让我们看一下调整现有代码库以在浏览器窗口中绘制此红色三角形所需的最小更改。同样,该应用程序是针对 Emscripten 构建的,Emscripten 是一种将 C/C++ 程序编译为 WebAssembly 的工具,它在 JavaScript API 之上具有实现 webgpu.h 的绑定。

7.1 更新 CMake 设置

安装 Emscripten 后,按如下方式更新 CMakeLists.txt 构建文件。突出显示的代码是你唯一需要更改的内容。

  • set_target_properties 用于自动将“html”文件扩展名添加到目标文件。换句话说,你将生成一个“app.html”文件。
  • USE_WEBGPU 应用程序链接选项是启用 Emscripten 中的 WebGPU 支持所必需的。没有它,你的 main.cpp 文件就无法访问 webgpu/webgpu_cpp.h 文件。
  • 此处还需​​要 USE_GLFW 应用程序链接选项,以便可以重用 GLFW 代码。
cmake_minimum_required(VERSION 3.13) # CMake version check
project(app)                         # Create project "app"
set(CMAKE_CXX_STANDARD 20)           # Enable C++20 standardadd_executable(app "main.cpp")if(EMSCRIPTEN)set_target_properties(app PROPERTIES SUFFIX ".html")target_link_options(app PRIVATE "-sUSE_WEBGPU=1" "-sUSE_GLFW=3")
else()set(DAWN_FETCH_DEPENDENCIES ON)add_subdirectory("dawn" EXCLUDE_FROM_ALL)target_link_libraries(app PRIVATE dawn::webgpu_dawn glfw webgpu_glfw)
endif()

7.2 更新代码

在 Emscripten 中,创建 wgpu::surface 需要 HTML 画布元素。为此,请调用 instance.CreateSurface() 并指定 #canvas 选择器以匹配 Emscripten 生成的 HTML 页面中的相应 HTML 画布元素。

不要使用 while 循环,而是调用 emscripten_set_main_loop(Render) 以确保以适当的平滑速率调用 Render() 函数,以便与浏览器和显示器正确对齐。

#include <GLFW/glfw3.h>
#include <webgpu/webgpu_cpp.h>
#include <iostream>
#if defined(__EMSCRIPTEN__)
#include <emscripten/emscripten.h>
#else
#include <webgpu/webgpu_glfw.h>
#endif
void Start() {if (!glfwInit()) {return;}glfwWindowHint(GLFW_CLIENT_API, GLFW_NO_API);GLFWwindow* window =glfwCreateWindow(kWidth, kHeight, "WebGPU window", nullptr, nullptr);#if defined(__EMSCRIPTEN__)wgpu::SurfaceDescriptorFromCanvasHTMLSelector canvasDesc{};canvasDesc.selector = "#canvas";wgpu::SurfaceDescriptor surfaceDesc{.nextInChain = &canvasDesc};surface = instance.CreateSurface(&surfaceDesc);
#elsesurface = wgpu::glfw::CreateSurfaceForWindow(instance, window);
#endifInitGraphics();#if defined(__EMSCRIPTEN__)emscripten_set_main_loop(Render, 0, false);
#elsewhile (!glfwWindowShouldClose(window)) {glfwPollEvents();Render();surface.Present();instance.ProcessEvents();}
#endif
}

7.3 使用 Emscripten 构建应用程序

使用 Emscripten 构建应用程序所需的唯一更改是使用神奇的 emcmake shell 脚本添加 cmake 命令。这次,在 build-web 子文件夹中生成应用程序并启动 HTTP 服务器。最后,打开浏览器并访问 build-web/app.html

# Build the app with Emscripten.
$ emcmake cmake -B build-web && cmake --build build-web# Start a HTTP server.
$ npx http-server


原文链接:WebGPU跨平台应用开发 - BimAnt

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

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

相关文章

Java项目实战II基于Java+Spring Boot+MySQL的智能推荐的卫生健康系统(开发文档+数据库+源码)

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。获取源码联系方式请查看文末 一、前言 基于Java、…

DDR Study - PIM Technical

参考来源&#xff1a;In-memory processing - Wikipedia&#xff0c;What is processing in memory (PIM) and how does it work? (techtarget.com)&#xff0c;《Processing-in-memory: A workload-driven perspective》 LPDDR Initial → LPDDR Write Leveling and DQ Train…

企业如何通过架构蓝图实现数字化转型

数字化转型的关键——架构蓝图的力量 在当今的商业世界&#xff0c;数字化转型已经不再是一个选择&#xff0c;而是企业生存与发展不可回避的战略行动。企业希望通过数字化提高效率、增强灵活性&#xff0c;并为客户提供更好的体验。然而&#xff0c;数字化转型不仅仅涉及技术…

NVR监测软件/设备EasyNVR多品牌NVR管理工具/设备对城市安全有哪些具体益处?

在智慧城市的建设中&#xff0c;各种先进的技术系统正发挥着越来越重要的作用。其中&#xff0c;NVR监测软件/设备EasyNVR作为一种高效的视频边缘计算网关&#xff0c;不仅能够实现视频数据的采集、编码和存储&#xff0c;还能与其他智慧城市系统进行深度集成&#xff0c;共同推…

20241102解决荣品PRO-RK3566开发板刷Rockchip原厂的Buildroot使用荣品的DTS出现

20241102解决荣品PRO-RK3566开发板刷Rockchip原厂的Buildroot使用荣品的DTS出现fiq_debugger问题 2024/11/2 9:46 缘起&#xff1a;给荣品PRO-RK3566开发板刷Rockchip原厂的Buildroot时&#xff0c;DEBUG波特率是1.5Mbps。 但是启动到FIQ阶段&#xff0c;在你使用荣品的DTS的时…

ctfshow文件包含web78~81

目录 web78 方法一&#xff1a;filter伪协议 方法二&#xff1a;input协议 方法三&#xff1a;data协议 web79 方法一:input协议 方法二&#xff1a;data协议 web80 方法一&#xff1a;input协议 方法二&#xff1a;日志包含getshell web81 web78 if(isset($_GET[file]…

电能表预付费系统-标准传输规范(STS)(30)

6.5.3.2 CONTROLBlock construction The 1 6 digit CONTROLBlock is constructed from the data elements in the APDU as defined in Table 36 and Table 37.The most significant digit is in position 1 5 and the least significant digit in position 0. APDU中的数据元素…

基于YOLO11/v10/v8/v5深度学习的维修工具检测识别系统设计与实现【python源码+Pyqt5界面+数据集+训练代码】

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…

人工智能基础-opencv-图像处理篇

一.图像预处理 图像翻转 cv2.flip 是 OpenCV 库中的一个函数&#xff0c;用于翻转图像。翻转可以是水平翻转、垂直翻转或同时水平和垂直翻转。这个函数接受两个参数&#xff1a;要翻转的图像和一个指定翻转类型的标志。 img cv2.imread(../images/car2.png) #翻转 0&#xf…

Hive学习笔记

1 Hive基本概念 1.1 Hive定义 Hive&#xff1a;由 Facebook 开源用于解决海量结构化日志的数据统计工具。 Hive 是基于 Hadoop 的一个数据仓库工具&#xff0c;可以将结构化的数据文件映射为一张表&#xff0c;并 提供类 SQL 查询功能。 利用MapReduce去查询数据文件中的某些内…

用图说明 CPU、MCU、MPU、SoC 的区别

CPU CPU 负责执行构成计算机程序的指令&#xff0c;执行这些指令所指定的算术、逻辑、控制和输入/输出&#xff08;I/O&#xff09;操作。 MCU (microcontroller unit) 不同的 MCU 架构如下&#xff0c;注意这里的 MPU 表示 memory protection unit MPU (microprocessor un…

HTML 语法规范——代码注释、缩进与格式、标签与属性、字符编码等

文章目录 一、代码注释1.1 使用注释的主要目的1.2 使用建议二、标签的使用2.1 开始标签和结束标签2.2 自闭合标签2.3 标签的嵌套2.4 标签的有效性三、属性四、缩进与格式4.1 一致的缩进4.2 元素单独占用一行4.3 嵌套元素的缩进4.4 避免冗长的行五、字符编码六、小结在开发 HTML…

虚拟现实与增强现实:重塑娱乐和教育的边界!

内容概要 在这个瞬息万变的时代&#xff0c;虚拟现实&#xff08;VR&#xff09;和增强现实&#xff08;AR&#xff09;正如两位魔法师&#xff0c;腾云驾雾间掀起了一场教育与娱乐的革命。虚拟现实带我们飞跃平凡&#xff0c;进入一个充满奇迹的数字宇宙&#xff0c;仿佛我们…

中仕公考:上海市25年公务员考试今日报名

2025年上海市公务员考试于今日开始报名 考试报名采取网络报名方式进行&#xff0c;报考者可在2024年11月2日0:00至11月8日12:00期间登录专题网站进行报名。 年龄在18周岁以上&#xff0c;35周岁以下(1988年11月至2006年11月期间出生)&#xff0c;应届硕士、博士研究生报考的&…

Diving into the STM32 HAL-----HAL_GPIO

1、怎么看待外设&#xff1a; 从总线连接的角度看&#xff0c;外设和Core、DMA通过总线交换数据&#xff0c;正所谓要想富先修路。要注意&#xff0c;这些总线中的每一个都连接到不同的时钟源&#xff0c;这些时钟源决定了连接到该总线的外设操作的最大速度。 从内存分配的角度…

【表格解决问题】EXCEL行数过多,WPS如何按逐行分别打印多个纸张中

1 问题描述 如图&#xff1a;我的表格行数太多了。打印在一张纸上有点不太好看 2 解决方式 Step01&#xff1a;先选中你需要打印的部分&#xff0c;找到【页面】->【打印区域】->【设置打印区域】 Step02&#xff1a;先选中一行&#xff0c;找到【插入分页符】 Step0…

提升安全上网体验:Windows 11 启用 DOH(阿里公共DNS)

文章目录 阿里公共 DNS 介绍免费开通云解析 DNS 服务Windows 编辑 DNS 设置配置 IPv4配置 IPv6 路由器配置 DNS 阿里公共 DNS 介绍 https://alidns.com/ 免费开通云解析 DNS 服务 https://dnsnext.console.aliyun.com/pubDNS 开通服务后&#xff0c;获取 DOH 模板&#xff0…

如何在Linux下部署自己的ZFile开源网盘

ZFile 项目介绍 ZFile是一个功能强大、灵活的开源网盘系统&#xff0c;为用户提供安全便捷的文件存储和共享方案。 项目概述 ZFile由ZFile, Inc.开发和维护&#xff0c;基于Docusaurus构建。其用户友好的界面支持多种文件存储和共享功能&#xff0c;并具备高度的可定制性和扩…

Spring AI : 让ChatGPT成为你构建应用的核心亮点

本文是一篇介绍spring ai的文章&#xff0c;主要介绍了生成文本内容&#xff0c;以及读取图片中内容两个能力。 之所以介绍这两个能力&#xff0c;是因为 大模型目前最适合做的事情有两个&#xff1a; 1&#xff09; 非结构化数据的结构化&#xff08;图片转文字&#xff0c;…

Windows 命令提示符(cmd)中输入 mysql 并收到错误消息“MySQL不是内部或外部命令,也不是可运行的程序或批处理文件?

目录 背景: 过程&#xff1a; 1.找到MySQL安装的路径 2.编辑环境变量 3.打开cmd&#xff0c;输入mysql --version测试成功 总结: 背景: 很早之前安装了Mysql数据库&#xff0c;想查询一下当前安装的MySQL客户端的版本号&#xff0c;我在命令行界面输入mysql --verion命令回…