在 WebGPU 与 Vulkan 之间做出正确的选择（Making the Right Choice between WebGPU vs Vulkan）

非科班Java出身GISer

已于 2024-07-18 14:08:18 修改

阅读量2.1k

点赞数 21

分类专栏： WebGIS 综合学习文章标签： webgpu vulkan webgpu与vulkan对比 webgpu vulkan对比对比webgpu和vulkan webgpuVSvulkan

于 2024-07-03 09:30:08 首次发布

本文链接：https://blog.csdn.net/linzi19900517/article/details/140103213

版权

WebGIS 综合学习专栏收录该内容

18 篇文章

订阅专栏

在 WebGPU 与 Vulkan 之间做出正确的选择（Making the Right Choice between WebGPU vs Vulkan）

本来想了解一下WebGPU 与 Vulkan的关系与区别，百度搜的都不咋靠谱，偶然发下这篇文章，感觉写的很好。

这里翻一下提供给需要的人。

PS：软件翻的，手动修改了一些别扭的地方，整体还行！

原文章地址：Making the Right Choice between WebGPU vs Vulkan

前言：

对于需要与现代 GPU 硬件高效交互的开发人员，建议使用WebGPU ，尤其是对于基于浏览器的应用程序。它通过最小化 JavaScript 调用和最佳地管理计算资源，表现优于Vulkan。

然而，对于多样化的设备定位和光线追踪的无缝集成，Vulkan仍然是首选。

在这里插入图片描述

WebGPU 和 Vulkan 之间的主要区别

WebGPU 仍处于开发阶段，是一种现代 API，旨在解决 WebGL 的局限性。Vulkan 是一种成熟的跨平台行业标准图形 API。
WebGPU 以最佳方式管理计算资源，减少过多 JavaScript 调用的开销。Vulkan 提供对调度、同步和内存分配的细粒度控制。
WebGPU将现代API（如Direct3D 12、Metal、Vulkan）的先进性带到了Web端，为基于浏览器的编程开辟了新的可能性。Vulkan具有广泛的设备兼容性，并且不断推出新的扩展和改进。
WebGPU 由 Apple、Google、Mozilla、Microsoft 和 Intel 等科技巨头共同开发。Vulkan 允许通过 Khronos 做出贡献，提出改进建议或为开源项目做出贡献。

比较	WebGPU	Vulkan
API 目的	解决 WebGL 的限制并与现代 GPU 硬件有效交互	跨平台图形和视频压缩行业标准 API
发展	自 2017 年起由 W3C “GPU for the Web” 开发	2013 年由 AMD 开发，后来捐赠给 Khronos 集团
可用性	Chrome 113 首次发布，适用于 Windows、ChromeOS 和 MacOS。计划针对 Android 和 Linux	广泛可用，不断发展和频繁扩展
优点	自动处理异常，释放惊人的性能，减少 JavaScript 调用的开销	提供对调度、同步和内存分配的细粒度控制
用例	复杂的视觉效果、机器学习计算和计算资源优化	设备定位、GPU编程、3D性能增强
扩展和添加	W3C 正在设计中的预期功能改进	频繁扩展和添加功能和改进，Vulkan SC 1.0 适用于安全关键系统
表现	基于 Vulkan 构建，性能比 WebGL 更好，CPU/GPU 使用率更均衡	提供更高的性能、更低的 CPU 占用率，支持在多个 CPU 核心之间分配工作
未来的承诺	有望成为 Web 开发人员在安全性、性能和可移植性方面的首选	H.264、H.265 完全加速解码，可移植性

WebGPU 是什么？它适合谁使用？

WebGPU 是一种专为图形和机器工作负载而设计的高级 API。它的出现是为了解决 WebGL（一种基于浏览器的 GPU API，于 2011 年推出）的局限性，并将当代 GPU 的功能引入网络。它旨在为寻求卓越实时数据处理和视觉效果卓越的网络元素的开发人员和组织提供服务。

WebGPU 由 Apple、Google、Mozilla、Microsoft 和 Intel 自 2017 年以来合作开发，基于 Vulkan 构建。它目前可在 ChromeOS、macOS 和 Windows 上的 Chrome 113 上使用，而其他平台仍在筹备中。

在这里插入图片描述

1. WebGPU 的优点

解决 WebGL 限制
高效的 GPU 硬件接口
最佳计算资源管理
减少过多 JavaScript 调用的开销
提供灵活的编程模型
支持在 GPU 上移植算法类

2. WebGPU的缺点

仍处于早期发展阶段
当前默认禁用
未来平台可用性仍不明确

Vulkan 是什么？它适合谁使用？

Vulkan 是一种跨平台的行业标准图形 API，为开发人员提供了一个针对各种设备的平台。它经常进行扩展和添加，并且不断改进。Vulkan 适合那些需要在图形编程中控制调度、同步和内存分配的开发人员。

Vulkan 生态系统还拥有潜在的关键实用程序，例如 Vulkan Portability 和 Vulkan SC 1.0 规范，它们可满足安全关键型系统的需求，简化图形和计算需求。此外，它是第一个具有正式内存模型的图形 API。

在这里插入图片描述

1. Vulkan 的优点

跨平台特性
频繁的扩展和改进
有效控制图形编程的关键方面
对抗平台碎片化的潜力
第一个具有正式内存模型的图形 API

2. Vulkan的缺点

不保证部署时间表和设备支持
复杂 3D 模型的问题

WebGPU 和 Vulkan 的代码示例

1. WebGPU 3D 环面（Torus）

此代码说明了如何使用 WebGPU API 生成 3D 圆环。此示例需要支持 WebGPU 实验功能的现代网络浏览器。


// Create canvas and get WebGPU context
let canvas = document.createElement('canvas');
let context = canvas.getContext('gpupresent');

// Create a GPU device
let adapter = await navigator.gpu.requestAdapter();
let device = await adapter.requestDevice();

// Create a GPU buffer
let buffer = device.createBuffer({
    size: VERTEX_SIZE * NUM_VERTICES,
    usage: GPUBufferUsage.VERTEX,
    mappedAtCreation: true
});

// Generate a 3D Torus
let vertices = new Float32Array(NUM_VERTICES * VERTEX_PER_QUAD);
for(let i = 0; i < NUM_VERTICES; i++) {
    let quadPos = i % VERTEX_PER_QUAD;
    let pos = [quadPos & 2, quadPos & 1];
    vertices.set(pos, i * VERTEX_SIZE / 4);
}

// Unmap buffer and create a vertex buffer layout
buffer.unmap();
let vertexBuffers = [{arrayStride: VERTEX_SIZE, attributes: [{offset: 0, format: 'float32x4', shaderLocation: 0}]}];

2. Vulkan 三角形渲染

此示例演示了一个可以渲染简单三角形的基本 Vulkan 程序。请确保您的环境中已设置 Vulkan SDK，并了解 Vulkan API 的基本概念，例如命令缓冲区、交换链和管道。

// Include Vulkan
#include <vulkan/vulkan.h>

// Create an instance
VkApplicationInfo appInfo = {};
appInfo.pApplicationName = "Hello Triangle";
appInfo.applicationVersion = VK_MAKE_VERSION(1, 0, 0);
appInfo.pEngineName = "No Engine";
appInfo.engineVersion = VK_MAKE_VERSION(1, 0, 0);
appInfo.apiVersion = VK_API_VERSION_1_0;

VkInstanceCreateInfo createInfo = {};
createInfo.sType = VK_STRUCTURE_TYPE_INSTANCE_CREATE_INFO;
createInfo.pApplicationInfo = &appInfo;

uint32_t glfwExtensionCount = 0;
const char** glfwExtensions;

glfwExtensions = glfwGetRequiredInstanceExtensions(&glfwExtensionCount);

createInfo.enabledExtensionCount = glfwExtensionCount;
createInfo.ppEnabledExtensionNames = glfwExtensions;

createInfo.enabledLayerCount = 0;

if (vkCreateInstance(&createInfo, nullptr, &instance) != VK_SUCCESS) {
    throw std::runtime_error("failed to create instance!");
}