在Nextjs使用WebGPU_js webgpu-CSDN博客

本文链接：https://blog.csdn.net/m0_60667349/article/details/137411712

本文详细介绍了如何在Next.js项目中集成WebGPU，包括安装依赖、配置环境、编写并使用WGSLshader，以及创建和绘制三角形的过程。作者还分享了使用Uniform和Storagebuffer的不同方法以及它们的性能差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在博客搭建起来之前，暂用CSDN记录一下WebGPU的学习过程

Mark的一些有用的资源

WebGPU

WGSL语言

Demo

官方Demo

Tutorial

webgpufundamentals

使用Nextjs以及配置基础环境

首先安装nextjs脚手架，注意需要使用typescript，CSS按需是否使用TailWind
安装WebGPU需要用到的依赖npm install @webgpu/types
配置项目，因为webgpu需要用到WGSL去写shader，因此需要将wgsl文件转换为纯文本引入，这里使用ts-shader-loader，需要安装 npm install ts-shader-loader

之后在next.config.(m)js中进行配置

/** @type {import('next').NextConfig} */
const nextConfig = {
     
    reactStrictMode: false,
    webpack: (config) => {
     

        // shaders loader
        config.module.rules.push({
     
            test: /\.(wgsl|glsl|vs|fs)$/,
            loader: 'ts-shader-loader'
        })

        return config
    },
}
export default nextConfig;

在src目录先创建wgsl.d.ts文件，增加对于.wgsl文件类型的描述，将其全部转换为string类型导入
```
declare module '*.wgsl'
{
     
	const value: string;
	export default value;
}
```
在src目录下创建webgpu.d.ts文件，告诉TypeScript编译器需要包含一个额外的类型定义文件（笔者对于nextjs基本一窍不通，所以不知道为什么再tsconfig里面typeRoot引入vscode还是会找不到类型，因此就这么搞了）
```
/// <reference types="@webgpu/types" />
```
到这里环境就配置好了，之后就可以画三角形了

绘制三角形

首先初始化GPU，这里对代码就不解释了

async function initWebGPU(canvas: HTMLCanvasElement) {
     
    const adapter = await navigator.gpu.requestAdapter(
        {
     
            powerPreference: "high-performance"
        }
	);
    const device = await adapter?.requestDevice() as GPUDevice;
    const context = canvas.getContext("webgpu") as GPUCanvasContext;
    const format = navigator.gpu.getPreferredCanvasFormat();
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    canvas.width = Math.max(1, Math.min(width, device.limits.maxTextureDimension2D));
    canvas.height = Math.max(1, Math.min(height, device.limits.maxTextureDimension2D));
    console.log(canvas.width, canvas.height)
    const size = {
      width: canvas.width, height: canvas.height }
    context.configure({
     
        device: device!,
        format: format,
        alphaMode: "opaque"
    });
    return {
      device, context, format, size };
}

创建写一个shader去定义vertex以及fragment，有种rust的美感，记得引入该shader，import shader from "./shaders.wgsl"

struct Fragment {
     
    @builtin(position) Position : vec4<f32>,
    @location(0) Color : vec4<f32>
};
@vertex
fn vs_main(@builtin(vertex_index) v_id: u32) -> Fragment {
     
    var positions = array<vec2<f32>, 3> (
        vec2<f32>( 0.0,  0.5),
        vec2<