PIXI.ProjectionSystem

class ProjectionSystem implements PIXI.ISystem

System plugin to the renderer to manage the projection matrix.

The projectionMatrix is a global uniform provided to all shaders. It is used to transform points in world space to normalized device coordinates.

Constructor

new PIXI.ProjectionSystem(renderer: PIXI.Renderer) → {}

Parameters:
Name	Type	Description
renderer	PIXI.Renderer	The renderer this System works for.

Summary

Properties from ProjectionSystem

PIXI.Rectangle	defaultFrame Default destination frame
PIXI.Rectangle	destinationFrame The destination frame used to calculate the current projection matrix.
PIXI.Matrix	projectionMatrix Projection matrix
PIXI.Rectangle	sourceFrame The source frame used to calculate the current projection matrix.
PIXI.Matrix	transform A transform to be appended to the projection matrix.

Methods from ProjectionSystem

void

calculateProjection(_destinationFrame: PIXI.Rectangle, sourceFrame: PIXI.Rectangle, _resolution: number, root: boolean)

void

setTransform(_matrix: PIXI.Matrix)

void

update(destinationFrame: PIXI.Rectangle, sourceFrame: PIXI.Rectangle, resolution: number, root: boolean)

Updates the projection-matrix based on the sourceFrame → destinationFrame mapping provided.

Public Properties

defaultFrame ProjectionSystem.ts:42

defaultFrame: PIXI.Rectangle

Default destination frame

This is not used internally. It is not advised to use this feature specifically unless you know what you're doing. The update method will default to this frame if you do not pass the destination frame.

destinationFrame ProjectionSystem.ts:16

destinationFrame: PIXI.Rectangle

The destination frame used to calculate the current projection matrix.

The destination frame is the rectangle in the render-target into which contents are rendered. If rendering to the screen, the origin is on the top-left. If rendering to a framebuffer, the origin is on the bottom-left. This "flipping" phenomenon is because of WebGL convention for (shader) texture coordinates, where the bottom-left corner is (0,0). It allows display-objects to map their (0,0) position in local-space (top-left) to (0,0) in texture space (bottom-left). In other words, a sprite's top-left corner actually renders the texture's bottom-left corner. You will also notice this when using a tool like SpectorJS to view your textures at runtime.

The destination frame's dimensions (width,height) should be equal to the source frame. This is because, otherwise, the contents will be scaled to fill the destination frame. Similarly, the destination frame's (x,y) coordinates are (0,0) unless you know what you're doing.

projectionMatrix ProjectionSystem.ts:51

projectionMatrix: PIXI.Matrix

Projection matrix

This matrix can be used to transform points from world space to normalized device coordinates, and is calculated from the sourceFrame → destinationFrame mapping provided.

The renderer's globalUniforms keeps a reference to this, and so it is available for all shaders to use as a uniform.

sourceFrame ProjectionSystem.ts:34

sourceFrame: PIXI.Rectangle

The source frame used to calculate the current projection matrix.

The source frame is the rectangle in world space containing the contents to be rendered.

transform ProjectionSystem.ts:63

transform: PIXI.Matrix

A transform to be appended to the projection matrix.

This can be used to transform points in world-space one last time before they are outputted by the shader. You can use to rotate the whole scene, for example. Remember to clear it once you've rendered everything.

Public Methods

calculateProjection ProjectionSystem.ts:128

calculateProjection(_destinationFrame: PIXI.Rectangle, sourceFrame: PIXI.Rectangle, _resolution: number, root: boolean) → {void}

Calculates the projectionMatrix to map points inside sourceFrame to inside destinationFrame.

Parameters:
Name	Type	Description
_destinationFrame	PIXI.Rectangle	The destination frame in the render-target.
sourceFrame	PIXI.Rectangle	The source frame in world space.
_resolution	number	The render-target's resolution, i.e. ratio of CSS to physical pixels.
root	boolean	Whether rendering into the screen. Otherwise, if rendering to a framebuffer, the projection is y-flipped.

Returns:
Type	Description
void

setTransform ProjectionSystem.ts:150

setTransform(_matrix: PIXI.Matrix) → {void}

Sets the transform of the active render target to the given matrix.

Parameters:
Name	Type	Description
_matrix	PIXI.Matrix	The transformation matrix

Returns:
Type	Description
void

update ProjectionSystem.ts:86

update(destinationFrame: PIXI.Rectangle, sourceFrame: PIXI.Rectangle, resolution: number, root: boolean) → {void}

Updates the projection-matrix based on the sourceFrame → destinationFrame mapping provided.

NOTE: It is expected you call renderer.framebuffer.setViewport(destinationFrame) after this. This is because the framebuffer viewport converts shader vertex output in normalized device coordinates to window coordinates.

NOTE-2: RenderTextureSystem#bind updates the projection-matrix when you bind a render-texture. It is expected that you dirty the current bindings when calling this manually.

Parameters:
Name	Type	Description
destinationFrame	PIXI.Rectangle	The rectangle in the render-target to render the contents into. If rendering to the canvas, the origin is on the top-left; if rendering to a render-texture, the origin is on the bottom-left.
sourceFrame	PIXI.Rectangle	The rectangle in world space that contains the contents being rendered.
resolution	number	The resolution of the render-target, which is the ratio of world-space (or CSS) pixels to physical pixels.
root	boolean	Whether the render-target is the screen. This is required because rendering to textures is y-flipped (i.e. upside down relative to the screen).

Returns:
Type	Description
void