pixi.js
    Preparing search index...

    Class CanvasRenderTargetSystemAdvanced

    The Canvas adaptor for the render target system.

    Hierarchy (View Summary)

    Index

    Constructors

    Properties

    a reference to the adaptor that interfaces with WebGL / WebGP

    defaultClearColor: RgbaArray = ...

    the default clear color for render targets

    layer: number = 0

    the current array layer being rendered to (for array-backed targets)

    mipLevel: number = 0

    the current mip level being rendered to (for texture subresources)

    onRenderTargetChange: SystemRunner = ...

    a runner that lets systems know if the active render target has changed. Eg the Stencil System needs to know so it can manage the stencil buffer

    projectionMatrix: Matrix = ...

    the projection matrix that is used by the shaders based on the active render target and the viewport

    renderingToScreen: boolean

    A boolean that lets the dev know if the current render pass is rendering to the screen. Used by some plugins

    renderSurface: RenderSurface

    the current active render surface that the render target is created from

    renderTarget: RenderTarget

    the current active render target

    rootRenderTarget: RenderTarget

    When rendering of a scene begins, this is where the root render surface is stored

    rootViewPort: Rectangle = ...

    This is the root viewport for the render pass

    viewport: Rectangle = ...

    the current viewport that the gpu is using

    Methods

    • Binding a render surface! This is the main function of the render target system. It will take the RenderSurface (which can be a texture, canvas, or render target) and bind it to the renderer. Once bound all draw calls will be rendered to the render surface.

      If a frame is not provided and the render surface is a Texture, the frame of the texture will be used.

      IMPORTANT:

      • frame is treated as base mip (mip 0) pixel space.
      • When mipLevel > 0, the viewport derived from frame is scaled by (2^{mipLevel}) and clamped to the mip dimensions. This keeps "render the same region" semantics consistent across mip levels.
      • When renderSurface is a Texture, renderer.render({ container, target: texture, mipLevel }) will render into the underlying TextureSource (Pixi will create/use a RenderTarget for the source) using the texture's frame to define the region (in mip 0 space).

      Parameters

      • renderSurface: RenderSurface

        the render surface to bind

      • clear: CLEAR_OR_BOOL = true

        the clear mode to use. Can be true or a CLEAR number 'COLOR | DEPTH | STENCIL' 0b111

      • OptionalclearColor: RgbaArray

        the color to clear to

      • Optionalframe: Rectangle

        the frame to render to

      • mipLevel: number = 0

        the mip level to render to

      • layer: number = 0

        the layer (or slice) of the render surface to render to. For array textures, 3D textures, or cubemaps, this specifies the target layer or face. Defaults to 0 (the first layer/face). Ignored for surfaces that do not support layers.

      Returns RenderTarget

      the render target that was bound

    • Copies a render surface to another texture.

      NOTE: for sourceRenderSurfaceTexture, The render target must be something that is written too by the renderer

      The following is not valid:

      Parameters

      • sourceRenderSurfaceTexture: RenderTarget

        the render surface to copy from

      • destinationTexture: Texture

        the texture to copy to

      • originSrc: { x: number; y: number }

        the origin of the copy

        • x: number

          the x origin of the copy

        • y: number

          the y origin of the copy

      • size: { height: number; width: number }

        the size of the copy

        • height: number

          the height of the copy

        • width: number

          the width of the copy

      • originDest: { x: number; y: number }

        the destination origin (top left to paste from!)

        • x: number

          the x origin of the paste

        • y: number

          the y origin of the paste

      Returns Texture<TextureSource<any>>

      const canvas = document.createElement('canvas')
      canvas.width = 200;
      canvas.height = 200;

      const ctx = canvas2.getContext('2d')!
      ctx.fillStyle = 'red'
      ctx.fillRect(0, 0, 200, 200);

      const texture = RenderTexture.create({
      width: 200,
      height: 200,
      })
      const renderTarget = renderer.renderTarget.getRenderTarget(canvas2);

      renderer.renderTarget.copyToTexture(renderTarget,texture, {x:0,y:0},{width:200,height:200},{x:0,y:0});

      The best way to copy a canvas is to create a texture from it. Then render with that.

      Parsing in a RenderTarget canvas context (with a 2d context)
    • ensures that we have a depth stencil buffer available to render to This is used by the mask system to make sure we have a stencil buffer.

      Returns void

    • Gets the render target from the provide render surface. Eg if its a texture, it will return the render target for the texture. If its a render target, it will return the same render target.

      Parameters

      • renderSurface: RenderSurface

        the render surface to get the render target for

      Returns RenderTarget

      the render target for the render surface

    • Pops the current render target from the renderer and restores the previous render target.

      Returns void

    • Push a render surface to the renderer. This will bind the render surface to the renderer,

      Parameters

      • renderSurface: RenderSurface

        the render surface to push

      • clear: boolean | CLEAR = CLEAR.ALL

        the clear mode to use. Can be true or a CLEAR number 'COLOR | DEPTH | STENCIL' 0b111

      • OptionalclearColor: RgbaArray

        the color to clear to

      • Optionalframe: Rectangle

        the frame to use when rendering to the render surface

      • mipLevel: number = 0

        the mip level to render to

      • layer: number = 0

        The layer of the render surface to render to. For array textures or cube maps, this specifies which layer or face to target. Defaults to 0 (the first layer).

      Returns RenderTarget

    • called when the renderer starts to render a scene.

      Parameters

      • options: {
            clear: CLEAR_OR_BOOL;
            clearColor: RgbaArray;
            frame?: Rectangle;
            layer?: number;
            mipLevel?: number;
            target: RenderSurface;
        }
        • clear: CLEAR_OR_BOOL

          the clear mode to use. Can be true or a CLEAR number 'COLOR | DEPTH | STENCIL' 0b111

        • clearColor: RgbaArray

          the color to clear to

        • Optionalframe?: Rectangle

          the frame to render to

        • Optionallayer?: number

          The layer of the render target to render to. Used for array or 3D textures, or when rendering to a specific layer of a layered render target. Optional.

        • OptionalmipLevel?: number

          the mip level to render to

        • target: RenderSurface

          the render target to render to

      Returns void