Viewport

Defined in: livelink.js/sources/rendering/Viewport.ts:29

A viewport is a rendering area on a RenderingSurfaceBase that is associated with a CameraProjection.

It can have overlays that are rendered on top of the viewport. See OverlayInterface.

Viewports can overlap each other, in which case the one with the highest z-index is rendered on top.

Extends

• TypedEventTarget<ViewportEvents>

Constructors

new Viewport()

new Viewport(params: {
  core: Livelink;
  rendering_surface: RenderingSurfaceBase;
  options: {
     rect: RelativeRect;
     render_target_index: number;
     z_index: number;
     dom_element: HTMLElement;
    };
 }): Viewport

Defined in: livelink.js/sources/rendering/Viewport.ts:226

Creates a new viewport.

Parameters

Parameter	Type	Description
params	{ core: Livelink; rendering_surface: RenderingSurfaceBase; options: { rect: RelativeRect; render_target_index: number; z_index: number; dom_element: HTMLElement; }; }
params.core	Livelink	The Livelink core used to send commands.
params.rendering_surface	RenderingSurfaceBase	The rendering surface on which the viewport is displayed.
params.options?	{ rect: RelativeRect; render_target_index: number; z_index: number; dom_element: HTMLElement; }	The options for the viewport.
params.options.rect?	RelativeRect	The relative position and size of the viewport in relation to the rendering surface.
params.options.render_target_index?	number	The index of the render target that is rendered on the viewport.
params.options.z_index?	number	The z-index of the viewport.
params.options.dom_element?	HTMLElement	The DOM element used for picking.

Returns

Viewport

Overrides

TypedEventTarget<ViewportEvents>.constructor

Properties

Property	Type	Default value	Description
is_camera_controlled_by_current_client	boolean	false	Whether the attached camera is controlled by the current client.

Accessors

rendering_surface

Get Signature

get rendering_surface(): RenderingSurfaceBase

Defined in: livelink.js/sources/rendering/Viewport.ts:105

The rendering surface on which the viewport is displayed.

Returns

RenderingSurfaceBase

---

camera_projection

Get Signature

get camera_projection(): null | CameraProjection

Defined in: livelink.js/sources/rendering/Viewport.ts:112

The camera projection used to render the scene.

Returns

null | CameraProjection

Set Signature

set camera_projection(camera_projection: CameraProjection): void

Defined in: livelink.js/sources/rendering/Viewport.ts:198

Sets the camera projection used to render the scene.

Parameters

Parameter	Type
camera_projection	CameraProjection

Returns

void

---

width

Get Signature

get width(): number

Defined in: livelink.js/sources/rendering/Viewport.ts:119

The width of the viewport in pixels.

Returns

number

---

height

Get Signature

get height(): number

Defined in: livelink.js/sources/rendering/Viewport.ts:126

The height of the viewport in pixels.

Returns

number

---

offset

Get Signature

get offset(): Vec2

Defined in: livelink.js/sources/rendering/Viewport.ts:133

The offset of the viewport in pixels.

Returns

Vec2

---

aspect_ratio

Get Signature

get aspect_ratio(): number

Defined in: livelink.js/sources/rendering/Viewport.ts:143

The aspect ratio of the viewport.

Returns

number

---

z_index

Get Signature

get z_index(): number

Defined in: livelink.js/sources/rendering/Viewport.ts:150

The z-index of the viewport.

Returns

number

Set Signature

set z_index(z_index: number): void

Defined in: livelink.js/sources/rendering/Viewport.ts:182

Sets the z-index of the viewport.

Parameters

Parameter	Type
z_index	number

Returns

void

---

render_target_index

Get Signature

get render_target_index(): number

Defined in: livelink.js/sources/rendering/Viewport.ts:157

The index of the render target that is rendered on the viewport.

Returns

number

Set Signature

set render_target_index(render_target_index: number): void

Defined in: livelink.js/sources/rendering/Viewport.ts:209

The index of the render target that is rendered on the viewport.

-1 means the default render target as defined by the render graph assigned to the camera the viewport is using.

Parameters

Parameter	Type
render_target_index	number

Returns

void

---

relative_rect

Get Signature

get relative_rect(): RelativeRect

Defined in: livelink.js/sources/rendering/Viewport.ts:164

The relative position and size of the viewport in relation to the rendering surface.

Returns

RelativeRect

Set Signature

set relative_rect(rect: RelativeRect): void

Defined in: livelink.js/sources/rendering/Viewport.ts:190

Sets the relative position and size of the viewport in relation to the rendering surface.

Parameters

Parameter	Type
rect	RelativeRect

Returns

void

---

dom_element

Get Signature

get dom_element(): HTMLElement

Defined in: livelink.js/sources/rendering/Viewport.ts:171

DOM element attached to the viewport.

Returns

HTMLElement

Methods

isValid()

isValid(): boolean

Defined in: livelink.js/sources/rendering/Viewport.ts:249

Returns whether the viewport is valid.

A viewport is valid if a camera projection is set on it.

Returns

boolean

---

release()

release(): void

Defined in: livelink.js/sources/rendering/Viewport.ts:256

Releases the resources used by the viewport.

Returns

void

---

activatePicking()

activatePicking(): void

Defined in: livelink.js/sources/rendering/Viewport.ts:266

Activates picking on the viewport.

If picking is activated, the viewport will emit an on-entity-picked event when it is clicked.

Returns

void

---

deactivatePicking()

deactivatePicking(): void

Defined in: livelink.js/sources/rendering/Viewport.ts:282

Deactivates picking on the viewport.

If picking is deactivated, the viewport will no longer emit an EntityPickedEvent event when it is clicked.

Returns

void

---

activateHovering()

activateHovering(): void

Defined in: livelink.js/sources/rendering/Viewport.ts:300

Experimental

Activates entity hovering on the viewport.

If hovering is activated, the viewport will emit an EntityHoveredEvent event when it is hovered.

Returns

void

---

deactivateHovering()

deactivateHovering(): void

Defined in: livelink.js/sources/rendering/Viewport.ts:318

Experimental

Deactivates entity hovering on the viewport.

If hovering is deactivated, the viewport will no longer emit an on-entity-hovered event when it is hovered.

Returns

void

---

castScreenSpaceRay()

castScreenSpaceRay(params: {
  screen_position: Vec2;
  mode: HighlightMode;
 }): Promise<
  | null
  | {
  entity: Entity;
  world_position: Vec3;
  world_normal: Vec3;
}>

Defined in: livelink.js/sources/rendering/Viewport.ts:348

Casts a screen space ray and returns the first entity and world space position and normal that the ray intersects. If no entity is intersected, null is returned.

Note that transparent objects will be picked if they are in front of opaque objects even if their opacity is set to 0.

Do not use this method for picking objects using the mouse cursor. Instead activate picking on the viewport using activatePicking and listen for the on-entity-picked event.

Parameters

Parameter	Type	Description
params	{ screen_position: Vec2; mode: HighlightMode; }
params.screen_position	Vec2	The screen space position to cast the ray from.
params.mode	HighlightMode	The highlight mode to use.

Returns

Promise< | null | { entity: Entity; world_position: Vec3; world_normal: Vec3; }>

The entity and world space position and normal that the ray intersects, or null if no entity is intersected.

---

projectWorldToScreen()

projectWorldToScreen(params: {
  world_position: Vec3;
  out_screen_position: Vec3;
 }): Vec3

Defined in: livelink.js/sources/rendering/Viewport.ts:390

Projects a world space position to screen space.

The position is projected using the camera projection set on the viewport.

Parameters

Parameter	Type	Description
params	{ world_position: Vec3; out_screen_position: Vec3; }
params.world_position	Vec3	The position in world space to project.
params.out_screen_position?	Vec3	The output position in screen space.

Returns

Vec3

The position in screen space.

---

addOverlay()

addOverlay(params: {
  overlay: OverlayInterface;
 }): void

Defined in: livelink.js/sources/rendering/Viewport.ts:419

Adds an overlay to the viewport.

Parameters

Parameter	Type	Description
params	{ overlay: OverlayInterface; }
params.overlay	OverlayInterface	The overlay to add. Must not have been added to the viewport before.

Returns

void

---

removeOverlay()

removeOverlay(params: {
  overlay: OverlayInterface;
 }): void

Defined in: livelink.js/sources/rendering/Viewport.ts:436

Removes an overlay from the viewport.

The overlay is released and should not be used after this method is called.

Parameters

Parameter	Type	Description
params	{ overlay: OverlayInterface; }
params.overlay	OverlayInterface	The overlay to remove. Must have been added to the viewport before.

Returns

void

---

getScreenPositionFromEvent()

getScreenPositionFromEvent(params: {
  event: MouseEvent;
 }): Vec2

Defined in: livelink.js/sources/rendering/Viewport.ts:484

Return the screen position from a mouse event.

Parameters

Parameter	Type	Description
params	{ event: MouseEvent; }
params.event	MouseEvent	The mouse event.

Returns

Vec2

The screen position as a Vec2. (0, 0) is the top-left corner of the viewport, (1, 1) is the bottom-right corner.