gpu-curtains
    Preparing search index...

    Create a 1x1 quad (or plane) covering the full viewport, useful for postprocessing or background effects.

    It consists of a PlaneGeometry and RenderMaterial and a few utilities method to help create MediaTexture and Texture.

    If one or all shaders are missing, the library will use default ones.

    struct VSOutput {
    @builtin(position) position: vec4f,
    @location(0) uv: vec2f,
    };

    @vertex fn main(
    attributes: Attributes,
    ) -> VSOutput {
    var vsOutput: VSOutput;

    vsOutput.position = vec4f(attributes.position, 1.0);
    vsOutput.uv = attributes.uv;

    return vsOutput;
    }
    @fragment fn main() -> @location(0) vec4f {
    return vec4(0.0, 0.0, 0.0, 1.0);
    }
    // set our main GPUCurtains instance
    const gpuCurtains = new GPUCurtains({
    container: '#canvas' // selector of our WebGPU canvas container
    })

    // set the GPU device
    // note this is asynchronous
    await gpuCurtains.setDevice()

    // create a fullscreen plane
    const fullscreenPlane = new FullscreenPlane(gpuCurtains, {
    label: 'My fullscreen plane',
    shaders: {
    fragment: {
    code: fragmentCode, // assume it is a valid WGSL fragment shader
    },
    },
    })

    Hierarchy (View Summary)

    Index
    type: string

    The type of the FullscreenPlane.

    size: { document: RectBBox }

    Object defining the FullscreenPlane size.

    Type Declaration

    • document: RectBBox

      document HTML size.

    uuid: string

    The universal unique id of the MeshBaseClass.

    index: number

    Index of this MeshBaseClass, i.e. creation order.

    renderer: Renderer

    The Renderer used.

    Options used to create this MeshBaseClass.

    material: RenderMaterial

    Geometry used by this MeshBaseClass.

    outputTarget: RenderTarget

    RenderTarget to render this Mesh to instead of the canvas context, if any.

    additionalOutputTargets?: RenderTarget[]

    Additional output RenderTarget onto which render this Mesh, besides the main outputTarget or screen. Useful for some effects that might need to render the same Mesh twice or more. Beware tho that the Mesh pipeline has to exactly fit the provided RenderTarget render passes descriptors as no checks will be performed here.

    renderBundle: RenderBundle

    RenderBundle used to render this Mesh, if any.

    renderOrder: number

    Controls the order in which this MeshBaseClass should be rendered by our Scene.

    _transparent: boolean

    Whether this MeshBaseClass should be treated as transparent. Impacts the render pipeline blend properties.

    _ready: boolean

    Flag indicating whether this MeshBaseClass is ready to be drawn.

    userData: Record<string, unknown>

    Empty object to store any additional data or custom properties into your Mesh.

    _onReadyCallback: () => void

    Function assigned to the onReady callback.

    _onBeforeRenderCallback: () => void

    function assigned to the onBeforeRender callback.

    _onRenderCallback: () => void

    function assigned to the onRender callback.

    _onAfterRenderCallback: () => void

    Function assigned to the onAfterRender callback.

    _onAfterResizeCallback: () => void

    function assigned to the onAfterResize callback.

    onReady: (callback: () => void) => MeshBaseClass | ProjectedMeshBaseClass

    Callback to execute when a Mesh is ready - i.e. its material and geometry are ready.

    Type Declaration

    onBeforeRender: (callback: () => void) => MeshBaseClass | ProjectedMeshBaseClass

    Callback to execute before updating the Scene matrix stack. This means it is called early and allows to update transformations values before actually setting the Mesh matrices (if any). This also means it won't be called if the Mesh has not been added to the Scene. The callback won't be called if the Renderer is not ready or the Mesh itself is neither ready nor visible.

    Type Declaration

    onRender: (callback: () => void) => MeshBaseClass | ProjectedMeshBaseClass

    Callback to execute right before actually rendering the Mesh. Useful to update uniforms for example. The callback won't be called if the Renderer is not ready or the Mesh itself is neither ready nor visible.

    Type Declaration

    onAfterRender: (callback: () => void) => MeshBaseClass | ProjectedMeshBaseClass

    Callback to execute just after a Mesh has been rendered. The callback won't be called if the Renderer is not ready or the Mesh itself is neither ready nor visible.

    Type Declaration

    onAfterResize: (callback: () => void) => MeshBaseClass | ProjectedMeshBaseClass

    Callback to execute just after a Mesh has been resized.

    Type Declaration

    • Add a Mesh to the renderer and the Scene.

      Parameters

      • OptionaladdToRenderer: boolean

      Returns void

    • Remove a Mesh from the renderer and the Scene.

      Parameters

      • OptionalremoveFromRenderer: boolean

      Returns void

    • Called when the device has been lost to prepare everything for restoration. Basically set all the GPUBuffer to null so they will be reset next time we try to draw the Mesh.

      Returns void

    • Assign or remove a RenderTarget to this Mesh. Since this manipulates the Scene stacks, it can be used to remove a RenderTarget as well.

      Parameters

      • outputTarget: RenderTarget

        The RenderTarget to assign or null if we want to remove the current RenderTarget.

      Returns void