PixiJS

Class: RenderTargetSystem

RenderTargetSystem

A system that manages render targets. A render target is essentially a place where the shaders can color in the pixels. The render target system is responsible for binding the render target to the renderer, and managing the viewport. Render targets can be pushed and popped.

To make it easier, you can also bind textures and canvases too. This will automatically create a render target for you. The render target itself is a lot more powerful than just a texture or canvas, as it can have multiple textures attached to it. It will also give ou fine grain control over the stencil buffer / depth texture.

Example

 ```js

 // create a render target
 const renderTarget = new RenderTarget({
   colorTextures: [new TextureSource({ width: 100, height: 100 })],
 });

 // bind the render target
 renderer.renderTarget.bind(renderTarget);

 // draw something!
 ```

Implements

Members

adaptor RenderTargetAdaptor<RENDER_TARGET> readonly

a reference to the adaptor that interfaces with WebGL / WebGP

defaultClearColor RgbaArray readonly

the default clear color for render targets

onRenderTargetChange readonly

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 readonly

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

This is the root viewport for the render pass

viewport readonly

the current viewport that the gpu is using

Methods

bind (renderSurface, clear, clearColor, frame) RenderTarget

ts:233

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 provide and the render surface is a texture, the frame of the texture will be used.

Name Type Attributes Default Description
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
clearColor RgbaArray <optional>

the color to clear to
frame Rectangle <optional>

the frame to render to
Returns:
Type Description
RenderTarget the render target that was bound

copyToTexture (sourceRenderSurfaceTexture, destinationTexture, originSrc, size, originDest)

ts:394

Copies a render surface to another texture

Name Type Description
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
originSrc.x

the x origin of the copy
originSrc.y

the y origin of the copy
size {
   width: number,
   height: number
}

the size of the copy
size.width

the width of the copy
size.height

the height of the copy
originDest {
   x: number,
   y: number
}

the destination origin (top left to paste from!)
originDest.x

the x origin of the paste
originDest.y

the y origin of the paste

destroy ()

ts:460

nukes the render target system

ensureDepthStencil ()

ts:446

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.

finishRenderPass ()

ts:192

called when dev wants to finish a render pass

getRenderTarget (renderSurface) RenderTarget

ts:376

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.

Name Type Description
renderSurface RenderSurface

the render surface to get the render target for
Returns:
Type Description
RenderTarget the render target for the render surface

pop ()

ts:366

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

push (renderSurface, clear, clearColor, frame)

ts:342

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

Name Type Attributes Description
renderSurface RenderSurface

the render surface to push
clear CLEAR | boolean

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

the color to clear to
frame Rectangle <optional>

the frame to use when rendering to the render surface

renderStart (options) void

ts:198

called when the renderer starts to render a scene.

Name Type Description
options {
   target: RenderSurface,
   clear: CLEAR_OR_BOOL,
   clearColor: RgbaArray,
   frame?: Rectangle
}
options.target RenderSurface

the render target to render to
options.clear CLEAR_OR_BOOL

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

the color to clear to
options.frame Rectangle

the frame to render to