Class Viewport

Controls the rendering of a branch, using the given ComponentCamera, and the propagation of the rendered image from the offscreen renderbuffer to the target canvas through a series of Framing objects. The stages involved are in order of rendering Render.viewport -> Viewport.source -> Viewport.destination -> DOM-Canvas -> Client(CSS)

Authors

Jascha Karagöl, HFU, 2019 | Jirka Dell'Oro-Friedl, HFU, 2019-2022 | Jonas Plotzky, HFU, 2023

Link

https://github.com/JirkaDellOro/FUDGE/wiki/Viewport

Hierarchy (view full)

EventTargetUnified
- Viewport
  - XRViewport

Constructors

constructor

new Viewport(): Viewport
Returns Viewport
Inherited from EventTargetUnified.constructor
- Defined in node_modules/typescript/lib/lib.dom.d.ts:8185

Properties

adjustingCamera

adjustingCamera: boolean = true

adjustingFrames

adjustingFrames: boolean = true

camera

camera: ComponentCamera = null

componentsPick

componentsPick: RecycableArray<ComponentPick> = ...

frameCanvasToDestination

frameCanvasToDestination: FramingComplex = ...

frameClientToCanvas

frameClientToCanvas: FramingScaled = ...

frameDestinationToSource

frameDestinationToSource: FramingScaled = ...

frameSourceToRender

frameSourceToRender: FramingScaled = ...

name

name: string = "Viewport"

physicsDebugMode

physicsDebugMode: PHYSICS_DEBUGMODE = PHYSICS_DEBUGMODE.NONE

rectDestination

rectDestination: Rectangle

rectSource

rectSource: Rectangle

renderingGizmos

renderingGizmos: boolean = false

Accessors

canvas

get canvas(): HTMLCanvasElement
Retrieve the destination canvas

Returns HTMLCanvasElement
- Defined in Core/Source/Render/Viewport.ts:49

context

get context(): CanvasRenderingContext2D
Retrieve the 2D-context attached to the destination canvas

Returns CanvasRenderingContext2D
- Defined in Core/Source/Render/Viewport.ts:55

hasFocus

get hasFocus(): boolean
Returns true if this viewport currently has focus and thus receives keyboard events

Returns boolean
- Defined in Core/Source/Render/Viewport.ts:42

Methods

addEventListener

addEventListener(_type, _handler, _options?): void
See EventTarget.addEventListener for reference. Works with EventListenerUnified and EventUnified
Parameters
- _type: string
- _handler: EventListenerUnified
- Optional _options: boolean | AddEventListenerOptions
Returns void
Inherited from EventTargetUnified.addEventListener
- Defined in Core/Source/Event/Event.ts:91

adjustCamera

adjustCamera(): void
Adjust the camera parameters to fit the rendering into the render viewport

Returns void
- Defined in Core/Source/Render/Viewport.ts:243

adjustFrames

adjustFrames(): void
Adjust all frames involved in the rendering process from the display area in the client up to the renderer canvas

Returns void
- Defined in Core/Source/Render/Viewport.ts:201

dispatchEvent

dispatchEvent(_event): boolean
See EventTarget.dispatchEvent for reference. Works with with EventUnified
Parameters
- _event: EventUnified
Returns boolean
Inherited from EventTargetUnified.dispatchEvent
- Defined in Core/Source/Event/Event.ts:105

dispatchPointerEvent

dispatchPointerEvent(_event): void
Performs a pick on all ComponentPicks in the branch of this viewport using a ray from its camera through the client coordinates given in the event. Dispatches the event to all nodes hit.
If PICK.CAMERA was chosen as the method to pick, a pick property gets added to the event, which holds the detailed information, but is overwritten for each node.
Parameters
- _event: PointerEvent
Returns void
- Defined in Core/Source/Render/Viewport.ts:172

draw

draw(_prepareBranch?): void
Draw this viewport displaying its branch. By default, the transforms in the branch are recalculated first. Pass false if calculation was already done for this frame
Parameters
- _prepareBranch: boolean = true
Returns void
- Defined in Core/Source/Render/Viewport.ts:111

getBranch

getBranch(): Node
Retrieve the branch this viewport renders

Returns Node
- Defined in Core/Source/Render/Viewport.ts:102

getCanvasRectangle

getCanvasRectangle(): Rectangle
Retrieve the size of the destination canvas as a rectangle, x and y are always 0

Returns Rectangle
- Defined in Core/Source/Render/Viewport.ts:77

getClientRectangle

getClientRectangle(): Rectangle
Retrieve the client rectangle the canvas is displayed and fit in, x and y are always 0

Returns Rectangle
- Defined in Core/Source/Render/Viewport.ts:83

getRayFromClient

getRayFromClient(_point): Ray
Returns a Ray in world coordinates from this camera through the point given in client space
Parameters
- _point: Vector2
Returns Ray
- Defined in Core/Source/Render/Viewport.ts:259

initialize

initialize(_name, _branch, _camera, _canvas): void
Connects the viewport to the given canvas to render the given branch to using the given camera-component, and names the viewport as given.
Parameters
- _name: string
- _branch: Node
- _camera: ComponentCamera
- _canvas: HTMLCanvasElement
Returns void
- Defined in Core/Source/Render/Viewport.ts:62

pointClientToProjection

pointClientToProjection(_client): Vector2
Returns a point on a projection surface in the hypothetical distance of 1 to the camera
matching the given point on the client rectangle TODO: examine, if this should be a camera-method. Current implementation is for central-projection
Parameters
- _client: Vector2
Returns Vector2
- Defined in Core/Source/Render/Viewport.ts:317

pointClientToRender

pointClientToRender(_client): Vector2
Returns a point on the render-rectangle matching the given point on the client rectangle
Parameters
- _client: Vector2
Returns Vector2
- Defined in Core/Source/Render/Viewport.ts:305

pointClientToScreen

pointClientToScreen(_client): Vector2
Returns a point in the browser page matching the given point of the viewport
Parameters
- _client: Vector2
Returns Vector2
- Defined in Core/Source/Render/Viewport.ts:360

pointClientToSource

pointClientToSource(_client): Vector2
Returns a point on the source-rectangle matching the given point on the client rectangle
Parameters
- _client: Vector2
Returns Vector2
- Defined in Core/Source/Render/Viewport.ts:284

pointClipToCanvas

pointClipToCanvas(_normed): Vector2
Returns a point in the client rectangle matching the given point in normed clipspace rectangle, which stretches from -1 to 1 in both dimensions, y pointing up
Parameters
- _normed: Vector2
Returns Vector2
- Defined in Core/Source/Render/Viewport.ts:352

pointClipToClient

pointClipToClient(_normed): Vector2
Returns a point in the client rectangle matching the given point in normed clipspace rectangle, which stretches from -1 to 1 in both dimensions, y pointing up
Parameters
- _normed: Vector2
Returns Vector2
- Defined in Core/Source/Render/Viewport.ts:337

pointSourceToRender

pointSourceToRender(_source): Vector2
Returns a point on the render-rectangle matching the given point on the source rectangle
Parameters
- _source: Vector2
Returns Vector2
- Defined in Core/Source/Render/Viewport.ts:295

pointWorldToClient

pointWorldToClient(_position): Vector2
Returns a point on the client rectangle matching the projection of the given point in world space
Parameters
- _position: Vector3
Returns Vector2
- Defined in Core/Source/Render/Viewport.ts:275

prepare

prepare(_prepareBranch?): void
Adjusts all frames and the camera to fit the current size of the canvas. Prepares the branch for rendering.
Parameters
- _prepareBranch: boolean = true
Returns void
- Defined in Core/Source/Render/Viewport.ts:138

prepareBranch

prepareBranch(): void
Prepares all nodes in the branch for rendering by updating their world transforms etc.

Returns void
- Defined in Core/Source/Render/Viewport.ts:155

removeEventListener

removeEventListener(_type, _handler, _options?): void
See EventTarget.removeEventListener for reference. Works with EventListenerUnified and EventUnified
Parameters
- _type: string
- _handler: EventListenerUnified
- Optional _options: boolean | AddEventListenerOptions
Returns void
Inherited from EventTargetUnified.removeEventListener
- Defined in Core/Source/Event/Event.ts:98

setBranch

setBranch(_branch): void
Set the branch to be drawn in the viewport.
Parameters
- _branch: Node
Returns void
- Defined in Core/Source/Render/Viewport.ts:92

Class Viewport

Authors

Link

Hierarchy (view full)

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Returns Viewport

Properties

adjustingCamera

adjustingFrames

camera

componentsPick

frameCanvasToDestination

frameClientToCanvas

frameDestinationToSource

frameSourceToRender

name

physicsDebugMode

rectDestination

rectSource

renderingGizmos

Accessors

canvas

Returns HTMLCanvasElement

context

Returns CanvasRenderingContext2D

hasFocus

Returns boolean

Methods

addEventListener

Parameters

Returns void

adjustCamera

Returns void

adjustFrames

Returns void

dispatchEvent

Parameters

Returns boolean

dispatchPointerEvent

Parameters

Returns void

draw

Parameters

Returns void

getBranch

Returns Node

getCanvasRectangle

Returns Rectangle

getClientRectangle

Returns Rectangle

getRayFromClient

Parameters

Returns Ray

initialize

Parameters

Returns void

pointClientToProjection

Parameters

Returns Vector2

pointClientToRender

Parameters

Returns Vector2

pointClientToScreen

Parameters

Returns Vector2

pointClientToSource

Parameters

Returns Vector2

pointClipToCanvas

Parameters

Returns Vector2

pointClipToClient

Parameters

Returns Vector2