Class: Viewport

Defined in: livelink.js/sources/rendering/camera/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

Constructor

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/camera/Viewport.ts:233

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/camera/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/camera/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/camera/Viewport.ts:205

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/camera/Viewport.ts:119

The width of the viewport in pixels.

Returns

number

---

height

Get Signature

get height(): number;

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

The height of the viewport in pixels.

Returns

number

---

offset

Get Signature

get offset(): Vec2;

Defined in: livelink.js/sources/rendering/camera/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/camera/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/camera/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/camera/Viewport.ts:189

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/camera/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/camera/Viewport.ts:216

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/camera/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/camera/Viewport.ts:197

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/camera/Viewport.ts:171

DOM element attached to the viewport.

Returns

HTMLElement

---

overlay_dom_elements

Get Signature

get overlay_dom_elements(): HTMLElement[];

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

The DOM elements of the overlays attached to the viewport.

Returns

HTMLElement[]

Methods

isValid()

isValid(): boolean;

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

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/camera/Viewport.ts:263

Releases the resources used by the viewport.

Returns

void

---

activatePicking()

activatePicking(): void;

Defined in: livelink.js/sources/rendering/camera/Viewport.ts:273

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/camera/Viewport.ts:289

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/camera/Viewport.ts:307

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/camera/Viewport.ts:325

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/camera/Viewport.ts:355

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/camera/Viewport.ts:397

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/camera/Viewport.ts:426

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/camera/Viewport.ts:443

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/camera/Viewport.ts:491

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.