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/hs-furtwangen/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:8273

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 = ...

gizmosEnabled

gizmosEnabled: boolean = false

gizmosFilter

gizmosFilter: {
[_gizmo: string]: boolean;
} = ...

Type declaration

[_gizmo: string]: boolean

gizmosSelected

gizmosSelected: Node[]

name

name: string = "Viewport"

physicsDebugMode

physicsDebugMode: PHYSICS_DEBUGMODE = PHYSICS_DEBUGMODE.NONE

rectDestination

rectDestination: Rectangle

rectSource

rectSource: Rectangle

Accessors

canvas

get canvas(): HTMLCanvasElement
Retrieve the destination canvas

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

context

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

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

hasFocus

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

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

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 Source/Core/Event/Event.ts:91

adjustCamera

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

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

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 Source/Core/Render/Viewport.ts:210

dispatchEvent

dispatchEvent(_event): boolean
See EventTarget.dispatchEvent for reference. Works with with EventUnified
Parameters
- _event: EventUnified
Returns boolean
Inherited from EventTargetUnified.dispatchEvent
- Defined in Source/Core/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 Source/Core/Render/Viewport.ts:181

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 Source/Core/Render/Viewport.ts:117

getBranch

getBranch(): Node
Retrieve the branch this viewport renders

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

getCanvasRectangle

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

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

getClientRectangle

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

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

getGizmos

getGizmos(_nodes?): Gizmo[]
Returns all the gizmos in the branch of this viewport that are active, filtered by gizmosFilter
Parameters
- _nodes: Node[] = ...
Returns Gizmo[]
- Defined in Source/Core/Render/Viewport.ts:378

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 Source/Core/Render/Viewport.ts:268

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 Source/Core/Render/Viewport.ts:68

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 Source/Core/Render/Viewport.ts:326

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 Source/Core/Render/Viewport.ts:314

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 Source/Core/Render/Viewport.ts:369

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 Source/Core/Render/Viewport.ts:293

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 Source/Core/Render/Viewport.ts:361

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 Source/Core/Render/Viewport.ts:346

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 Source/Core/Render/Viewport.ts:304

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 Source/Core/Render/Viewport.ts:284

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 Source/Core/Render/Viewport.ts:147

prepareBranch

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

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

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 Source/Core/Event/Event.ts:98

setBranch

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

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

gizmosEnabled

gizmosFilter

Type declaration

[_gizmo: string]: boolean

gizmosSelected

name

physicsDebugMode

rectDestination

rectSource

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

getGizmos

Parameters

Returns Gizmo[]

getRayFromClient

Parameters

Returns Ray

initialize

Parameters

Returns void

pointClientToProjection

Parameters

Returns Vector2

pointClientToRender

Parameters

Returns Vector2

pointClientToScreen

Parameters

Returns Vector2

pointClientToSource

Parameters