webgpu示例解析1

最新推荐文章于 2025-03-24 10:47:57 发布

WEEKEND_WOW

最新推荐文章于 2025-03-24 10:47:57 发布

阅读量412

点赞数 1

分类专栏： webgpu 文章标签：图形渲染

本文链接：https://blog.youkuaiyun.com/WEEKEND_WOW/article/details/127235590

版权

本文详细解析了WebGPU如何使用图形渲染技术绘制三角形的过程。从CPU的角度出发，介绍了如何通过commandEncoder开始pass绘制，设置渲染管线，包括着色器和图元绘制模式，以及如何完成并提交绘制操作。此外，还提到了device、navigator、presentationFormat等关键变量的创建和作用。

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

import { makeSample, SampleInit } from '../../components/SampleLayout';

import triangleVertWGSL from '../../shaders/triangle.vert.wgsl';
import redFragWGSL from '../../shaders/red.frag.wgsl';

const init: SampleInit = async ({ canvasRef }) => {
  const adapter = await navigator.gpu.requestAdapter();
  const device = await adapter.requestDevice();

  if (canvasRef.current === null) return;
  const context = canvasRef.current.getContext('webgpu') as GPUCanvasContext;

  const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
  context.configure({
    device,
    format: presentationFormat,
    alphaMode: 'opaque',
  });

  const pipeline = device.createRenderPipeline({
    layout: 'auto',
    vertex: {
      module: device.createShaderModule({
        code: triangleVertWGSL,
      }),
      entryPoint: 'main',
    },
    fragment: {
      module