如何实现一个基于WebGPU的通用计算程序？_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何实现一个基于WebGPU的通用计算程序？

2025-10-05

浏览次数：次

返回列表

实现基于WebGPU的通用计算需先获取设备，再创建缓冲区上传数据，编写WGSL计算着色器定义并行逻辑，通过管线和绑定组关联资源，最后提交命令执行并读回结果。

如何实现一个基于webgpu的通用计算程序？

实现一个基于WebGPU的通用计算程序，核心在于利用其计算着色器（compute shader）在GPU上并行执行数据密集型任务。整个流程包括请求设备、创建缓冲区、编写计算逻辑、调度执行等步骤。下面分关键环节说明如何构建这样一个程序。

初始化WebGPU环境

要运行WebGPU代码，首先需要获取WebGPU上下文并请求适配器和设备。

检查浏览器是否支持WebGPU：

if (!n*igator.gpu) {
throw new Error('WebGPU not supported');
}

获取GPU适配器和设备：

const adapter = await n*igator.gpu.requestAdapter();
const device = await adapter.requestDevice();

设备是后续所有操作的基础，用于创建缓冲区、管线和命令编码器。

准备数据与缓冲区管理

通用计算通常处理大量数据，需将数据上传至GPU内存。这通过创建GPUBuffer完成。

例如，有两个输入数组和一个输出数组：

const input1 = new Float32Array([1, 2, 3, 4]);
const input2 = new Float32Array([5, 6, 7, 8]);
const output = new Float32Array(input1.length);

创建对应的GPU缓冲区：

使用COPY_DST表示可从CPU写入，COPY_SRC表示结果可复制回CPU。

编写计算着色器并创建管线

计算着色器用WGSL（WebGPU Shading Language）编写，定义每个线程的运算逻辑。

例如，实现向量加法：

华友协同办公自动化OA系统

华友协同办公管理系统(华友OA)，基于微软最新的.net 2.0平台和SQL Server数据库，集成强大的Ajax技术，采用多层分布式架构，实现统一办公平台，功能强大、价格便宜，是适用于企事业单位的通用型网络协同办公系统。系统秉承协同办公的思想，集成即时通讯、日记管理、通知管理、邮件管理、新闻、考勤管理、短信管理、个人文件柜、日程安排、工作计划、工作日清、通讯录、公文流转、论坛、在线调查、

0 查看详情华友协同办公自动化OA系统

const computeShaderCode = `@group(0) @binding(0) var inputData1 : array;
@group(0) @binding(1) var inputData2 : array;
@group(0) @binding(2) var outputData : array;

@compute @workgroup_size(64)
fn main(@builtin(global_invocation_id) gid : vec3) {
  let i = gid.x;
  if (i     outputData[i] = inputData1[i] + inputData2[i];
  }
}`;

然后编译着色器并创建计算管线：

const shaderModule = device.createShaderModule({ code: computeShaderCode });
const pipeline = device.createComputePipeline({
  layout: 'auto',
  compute: {
    module: shaderModule,
    entryPoint: 'main'
  }
});

@workgroup_size(64) 表示每个工作组包含64个线程，合理设置能提升性能。

绑定资源并提交计算任务

需要将缓冲区绑定到管线，并通过命令编码器调度执行。

创建绑定组：

const bindGroup = device.createBindGroup({
  layout: pipeline.getBindGroupLayout(0),
  entries: [
    { binding: 0, resource: { buffer: buffer1 } },
    { binding: 1, resource: { buffer: buffer2 } },
    { binding: 2, resource: { buffer: outputBuffer } }
  ]
});

编码命令并提交：

const commandEncoder = device.createCommandEncoder();
const passEncoder = commandEncoder.beginComputePass();
passEncoder.setPipeline(pipeline);
passEncoder.setBindGroup(0, bindGroup);
passEncoder.dispatchWorkgroups(Math.ceil(input1.length / 64));
passEncoder.end();
// 将输入数据写入GPU缓冲区
device.queue.writeBuffer(buffer1, 0, input1);
device.queue.writeBuffer(buffer2, 0, input2);
// 提交命令
device.queue.submit([commandEncoder.finish()]);

dispatchWorkgroups参数决定启动多少个工作组，应根据数据总量和工作组大小计算。

读取计算结果

由于GPU操作异步，需通过映射缓冲区将结果传回JS。

创建一个暂存缓冲区用于读取：

const readBackBuffer = device.createBuffer({
size: output.byteLength,
usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST
});
const copyEncoder = device.createCommandEncoder();
copyEncoder.copyBufferToBuffer(outputBuffer, 0, readBackBuffer, 0, output.byteLength);
device.queue.submit([copyEncoder.finish()]);

await readBackBuffer.mapAsync(GPUMapMode.READ);
const result = new Float32Array(readBackBuffer.getMappedRange());
console.log(result); // 输出 [6, 8, 10, 12]