Directory portal: juejin.cn/post/701059…

Corresponding to the chapter Canvas Rendering in the specification

1 GPUCanvasContext

The GPUCanvasContext type, whose object is called a WebGPU context.

Its function is to make the Canvas element on HTML, as a texture in WebGPU, interact with WebGPU for rendering.

It is obtained using the same method as WebGLRenderingContext:

const canvas = document.createElement('canvas')
const context = canvas.getContext('webgpu')
Copy the code

However, the biggest difference between it and WebGLRenderingContext is that it is only responsible for communication with Canvas. It simply acts as a bridge between Canvas and WebGPU on the WebGPU side, making Canvas act as a texture object. The latter includes creating WebGL child objects, binding, compiling shaders, triggering renderings, and so on.

It is defined as follows:

[Exposed=(Window, DedicatedWorker), SecureContext]
interface GPUCanvasContext {
  readonly attribute (HTMLCanvasElement or OffscreenCanvas) canvas;

  undefined configure(GPUCanvasConfiguration configuration);
  undefined unconfigure();

  GPUTextureFormat getPreferredFormat(GPUAdapter adapter);
  GPUTexture getCurrentTexture();
};
Copy the code
  • canvasProperty, you can get the Canvas element;
  • configureMethod to configure the Canvas context and tell WebGPU what texture object this Canvas can act as; It receives an object parameter of type [GPUCanvasConfiguration](#2 GPUCanvasConfiguration type);
  • unconfigureThe configure method is the reverse of the configure method, that is, unconfigure and remove the texture object generated during configuration.
  • getPrefferedFormatMethod receives an adapter object and returns an appropriate adapter object texture format;
  • getCurrentTextureMethod returns the GPUTexture object played by Canvas,One thing to noteEach frame should use this method to get the corresponding GPUTexture (if the rendering pipeline uses a color attachment for output).

2 GPUCanvasConfiguration type

The type of the Canvas object parameter.

enum GPUCanvasCompositingAlphaMode { "opaque", "premultiplied", }; dictionary GPUCanvasConfiguration { required GPUDevice device; required GPUTextureFormat format; GPUTextureUsageFlags usage = 0x10; // gpuTextureUsage. RENDER_ATTACHMENT GPUPredefinedColorSpace colorSpace = "SRGB "; GPUCanvasCompositingAlphaMode compositingAlphaMode = "opaque"; GPUExtent3D size; };Copy the code
  • device, that is, device object;
  • usageThe texture function of Canvas is used as color attachment by default, which is the default value0x10;
  • colorSpace, Canvas color space, can only be “SRGB”;
  • format.GPUTextureFormatType, the format of the texture object represented by the Canvas;
  • compositingAlphaMode, [GPUCanvasCompositingAlphaMode] (# GPUCanvasCompositingAlphaMode enumerated types) enumerated types, indicates the transparency of synthesis to the Canvas options, the default “opaque” (opaque);
  • sizeTo indicate the size of the texture acted by the Canvas. By default, the Canvas width is used (not the CSS width).

For example,

context.configure({
  device: someDevice,
  format: context.getPreferredFormat(someDevice.adapter),
  size: [
    context.canvas.clientWidth * devicePixelRatio,
    context.canvas.clientHeight * devicePixelRatio,
  ]
})
Copy the code

GPUCanvasCompositingAlphaMode enumerated type

“Opaque” indicates that the composition option for the texture played by Canvas is opaque; Premultiplied “means that the texture object played by Canvsa is premultiplied with transparency when composited to Canvas.

3 Canvas size change

The size property of the GPUCanvasContext object is unchanged unless set again using the configure method.

If size is not explicitly specified when the configure method is called, it will use the Canvas’s width and height.

If the texture object does not match in terms of dimension, it will automatically scale to match.

Unlike webGL or 2D context objects, the canvas width and height of the WebGPU context object’s corresponding canvas element (rather than the CSS width and height) is only affected by two factors:

  • Default width and height of canvas (if not hidden by CSS)
  • WebGPU context object callconfiguremethods

.

The size of the WebGPU’s drawing area, which can be modified in no other way than using the context object’s Configure method to reset. If size is not specified when the configure method is called to reset, it automatically reads the Canvas width (not CSS width) of the Canvas element.

You can use the following code to achieve automatic drawing resolution matching:

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

const resizeObserver = new ResizeObserver(entries= > {
  for (const entry of entries) {
    if(entry ! = canvas) {continue; }
    context.configure({
      device: someDevice,
      format: context.getPreferredFormat(someDevice.adapter),
      size: {
        width: entry.devicePixelContentBoxSize[0].inlineSize,
        height: entry.devicePixelContentBoxSize[0].blockSize, } }); }}); resizeObserver.observe(canvas);Copy the code

In WebGL, the resize function is usually performed for each frame to ensure that CSS resolution is consistent with canvas resolution, and then the ViewPort is reset.