WebGPU 开源项目教程

WebGPU 开源项目教程

webgpuWebGPU for Node [Deprecated, Unmaintained]项目地址:https://gitcode.com/gh_mirrors/we/webgpu

项目介绍

WebGPU 是一个基于 Web 的图形处理 API，旨在提供现代 GPU 功能的高性能访问。该项目由 maierfelix 开发，旨在为 Web 开发者提供一种新的方式来利用现代 GPU 的能力，从而在浏览器中实现更复杂的图形渲染和计算任务。

项目快速启动

环境准备

在开始之前，请确保你的开发环境已经安装了最新版本的 Node.js 和 npm。

安装项目

1. 克隆项目仓库：

   git clone https://github.com/maierfelix/webgpu.git
   

2. 进入项目目录：

   cd webgpu
   

3. 安装依赖：

   npm install
   

运行示例

1. 启动开发服务器：

   npm start
   

2. 打开浏览器，访问 http://localhost:8080，你将看到一个简单的 WebGPU 示例。

示例代码

以下是一个简单的 WebGPU 示例代码，展示了如何初始化 WebGPU 并绘制一个三角形：

async function init() {
  const adapter = await navigator.gpu.requestAdapter();
  const device = await adapter.requestDevice();

  const canvas = document.createElement('canvas');
  document.body.appendChild(canvas);
  const context = canvas.getContext('webgpu');

  const presentationFormat = navigator.gpu.getPreferredFormat(adapter);
  context.configure({
    device,
    format: presentationFormat,
  });

  const vertices = new Float32Array([
    0.0, 0.5, 0.0,
    -0.5, -0.5, 0.0,
    0.5, -0.5, 0.0,
  ]);

  const vertexBuffer = device.createBuffer({
    size: vertices.byteLength,
    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
  });
  device.queue.writeBuffer(vertexBuffer, 0, vertices);

  const pipeline = device.createRenderPipeline({
    vertex: {
      module: device.createShaderModule({
        code: `
          [[stage(vertex)]]
          fn main([[location(0)]] pos: vec3<f32>) -> [[builtin(position)]] vec4<f32> {
            return vec4<f32>(pos, 1.0);
          }
        `,
      }),
      entryPoint: 'main',
      buffers: [{
        arrayStride: 12,
        attributes: [{
          format: 'float32x3',
          offset: 0,
          shaderLocation: 0,
        }],
      }],
    },
    fragment: {
      module: device.createShaderModule({
        code: `
          [[stage(fragment)]]
          fn main() -> [[location(0)]] vec4<f32> {
            return vec4<f32>(1.0, 0.0, 0.0, 1.0);
          }
        `,
      }),
      entryPoint: 'main',
      targets: [{
        format: presentationFormat,
      }],
    },
    primitive: {
      topology: 'triangle-list',
    },
  });

  function render() {
    const commandEncoder = device.createCommandEncoder();
    const passEncoder = commandEncoder.beginRenderPass({
      colorAttachments: [{
        view: context.getCurrentTexture().createView(),
        loadValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
        storeOp: 'store',
      }],
    });
    passEncoder.setPipeline(pipeline);
    passEncoder.setVertexBuffer(0, vertexBuffer);
    passEncoder.draw(3);
    passEncoder.endPass();
    device.queue.submit([commandEncoder.finish()]);
  }

  render();
}

init();

应用案例和最佳实践

应用案例

1. 图形渲染：WebGPU 可以用于在浏览器中实现复杂的 3D 图形渲染，如

webgpuWebGPU for Node [Deprecated, Unmaintained]项目地址:https://gitcode.com/gh_mirrors/we/webgpu