Pixi’VNClass: RenderTargetSystem<RENDER_TARGET>
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/renderTarget/RenderTargetSystem.d.ts:154
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
// 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!
Advanced
Extended by
Type Parameters
RENDER_TARGET
RENDER_TARGET extends RendererRenderTarget
Implements
Constructors
Constructor
> new RenderTargetSystem<RENDER_TARGET>(renderer): RenderTargetSystem<RENDER_TARGET>
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/renderTarget/RenderTargetSystem.d.ts:197
Parameters
renderer
Returns
RenderTargetSystem<RENDER_TARGET>
Properties
adaptor
> readonly adaptor: RenderTargetAdaptor<RENDER_TARGET>
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/renderTarget/RenderTargetSystem.d.ts:181
a reference to the adaptor that interfaces with WebGL / WebGP
defaultClearColor
> readonly defaultClearColor: RgbaArray
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/renderTarget/RenderTargetSystem.d.ts:179
the default clear color for render targets
layer
> layer: number
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/renderTarget/RenderTargetSystem.d.ts:170
the current array layer being rendered to (for array-backed targets)
mipLevel
> mipLevel: number
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/renderTarget/RenderTargetSystem.d.ts:168
the current mip level being rendered to (for texture subresources)
onRenderTargetChange
> readonly onRenderTargetChange: SystemRunner
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/renderTarget/RenderTargetSystem.d.ts:175
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 projectionMatrix: Matrix
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/renderTarget/RenderTargetSystem.d.ts:177
the projection matrix that is used by the shaders based on the active render target and the viewport
renderingToScreen
> renderingToScreen: boolean
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/renderTarget/RenderTargetSystem.d.ts:160
A boolean that lets the dev know if the current render pass is rendering to the screen. Used by some plugins
renderSurface
> renderSurface: RenderSurface
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/renderTarget/RenderTargetSystem.d.ts:164
the current active render surface that the render target is created from
renderTarget
> renderTarget: RenderTarget
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/renderTarget/RenderTargetSystem.d.ts:162
the current active render target
rootRenderTarget
> rootRenderTarget: RenderTarget
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/renderTarget/RenderTargetSystem.d.ts:156
When rendering of a scene begins, this is where the root render surface is stored
rootViewPort
> rootViewPort: Rectangle
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/renderTarget/RenderTargetSystem.d.ts:158
This is the root viewport for the render pass
viewport
> readonly viewport: Rectangle
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/renderTarget/RenderTargetSystem.d.ts:166
the current viewport that the gpu is using
Methods
bind()
> bind(renderSurface, clear?, clearColor?, frame?, mipLevel?, layer?): RenderTarget
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/renderTarget/RenderTargetSystem.d.ts:245
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:
frameis treated as base mip (mip 0) pixel space.- When
mipLevel > 0, the viewport derived fromframeis scaled by (2^{mipLevel}) and clamped to the mip dimensions. This keeps "render the same region" semantics consistent across mip levels. - When
renderSurfaceis 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
the render surface to bind
clear?
the clear mode to use. Can be true or a CLEAR number 'COLOR | DEPTH | STENCIL' 0b111
clearColor?
the color to clear to
frame?
the frame to render to
mipLevel?
number
the mip level to render to
layer?
number
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
the render target that was bound
clear()
> clear(target?, clear?, clearColor?, mipLevel?, layer?): void
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/renderTarget/RenderTargetSystem.d.ts:246
Parameters
target?
clear?
clearColor?
mipLevel?
number
layer?
number
Returns
void
contextChange()
> protected contextChange(): void
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/renderTarget/RenderTargetSystem.d.ts:247
Returns
void
copyToTexture()
> copyToTexture(sourceRenderSurfaceTexture, destinationTexture, originSrc, size, originDest): Texture<TextureSource<any>>
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/renderTarget/RenderTargetSystem.d.ts:308
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
the render surface to copy from
destinationTexture
the texture to copy to
originSrc
the origin of the copy
x
number
the x origin of the copy
y
number
the y origin of the copy
size
the size of the copy
height
number
the height of the copy
width
number
the width of the copy
originDest
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>>
Example
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)
destroy()
> destroy(): void
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/renderTarget/RenderTargetSystem.d.ts:324
nukes the render target system
Returns
void
Implementation of
ensureDepthStencil()
> ensureDepthStencil(): void
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/renderTarget/RenderTargetSystem.d.ts:322
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
finishRenderPass()
> finishRenderPass(): void
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/renderTarget/RenderTargetSystem.d.ts:199
called when dev wants to finish a render pass
Returns
void
getGpuRenderTarget()
> getGpuRenderTarget(renderTarget): RENDER_TARGET
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/renderTarget/RenderTargetSystem.d.ts:326
Parameters
renderTarget
Returns
RENDER_TARGET
getRenderTarget()
> getRenderTarget(renderSurface): RenderTarget
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/renderTarget/RenderTargetSystem.d.ts:268
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
the render surface to get the render target for
Returns
the render target for the render surface
pop()
> pop(): void
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/renderTarget/RenderTargetSystem.d.ts:260
Pops the current render target from the renderer and restores the previous render target.
Returns
void
postrender()
> postrender(): void
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/renderTarget/RenderTargetSystem.d.ts:219
Returns
void
push()
> push(renderSurface, clear?, clearColor?, frame?, mipLevel?, layer?): RenderTarget
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/renderTarget/RenderTargetSystem.d.ts:258
Push a render surface to the renderer. This will bind the render surface to the renderer,
Parameters
renderSurface
the render surface to push
clear?
boolean | CLEAR
the clear mode to use. Can be true or a CLEAR number 'COLOR | DEPTH | STENCIL' 0b111
clearColor?
the color to clear to
frame?
the frame to use when rendering to the render surface
mipLevel?
number
the mip level to render to
layer?
number
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
renderStart()
> renderStart(options): void
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/renderTarget/RenderTargetSystem.d.ts:211
called when the renderer starts to render a scene.
Parameters
options
clear
the clear mode to use. Can be true or a CLEAR number 'COLOR | DEPTH | STENCIL' 0b111
clearColor
the color to clear to
frame?
the frame to render to
layer?
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.
mipLevel?
number
the mip level to render to
target
the render target to render to
Returns
void
resetState()
> resetState(): void
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/renderTarget/RenderTargetSystem.d.ts:327
Returns
void