CreateCapture

import { CreateCapture } from "jsr:@ende/webgpu";

interface

interface CreateCapture

Return value for createCapture.

Properties

`texture`

texture: GPUTexture

Texture to be used as view to render to.

`outputBuffer`

outputBuffer: GPUBuffer

Represents the output buffer of the rendered texture. Can then be used to access and retrieve raw image data.

Source

`createCapture`

import { createCapture } from "jsr:@ende/webgpu";

function

function createCapture(device: GPUDevice, width: number, height: number): CreateCapture

Creates a texture and buffer to use as a capture.

device: GPUDevice: The device to use for creating the capture.
width: number: The width of the capture texture.
height: number: The height of the capture texture.

Returns

The texture to render to and buffer to read from.

Example: Usage

import { createCapture } from "@ende/webgpu/create-capture";
import { getRowPadding } from "@ende/webgpu/row-padding";

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter?.requestDevice()!;

const dimensions = {
  width: 200,
  height: 200,
};

const { texture, outputBuffer } = createCapture(device, dimensions.width, dimensions.height);

const encoder = device.createCommandEncoder();
encoder.beginRenderPass({
  colorAttachments: [
    {
      view: texture.createView(),
      storeOp: "store",
      loadOp: "clear",
      clearValue: [1, 0, 0, 1],
    },
  ],
}).end();

const { padded } = getRowPadding(dimensions.width);

encoder.copyTextureToBuffer(
  {
    texture,
  },
  {
    buffer: outputBuffer,
    bytesPerRow: padded,
  },
  dimensions,
);

device.queue.submit([encoder.finish()]);

// outputBuffer contains the raw image data, can then be used
// to save as png or other formats.

Source