editor › Globals › CanvasSpaceHelper
Class: CanvasSpaceHelper
This class helps with common mapping functions.
Camera space has its origin in the 'middle' of the view frustum and correspond to where on the screen something is visible if rendered with a given camera. x and y are depicted below. The z coordinates map the space between [-1,1] to [near plane, far plane] but non-linearly. So the value 0 is much closer to the near plane than to the far plane. Furthermore, x and y coordinates are flipped behind the camera. The *Intuitive methods circumvent this peculiarity so that +x always means 'right' etc.
┌─────────────────────────────────┐(1, 1)
│ ↑ y-axis │
│ ┆ │
│ ┆ x-axis │
│ (0,0)┄┄┄┄┄┄┄┄→ │
│ │
│ │
└─────────────────────────────────┘
(-1, -1)
The canvas coordinate system has its origin in the middle the canvas (similar to camera space).
┌─────────────────────────────────┐(screenWidth / 2, screenHeight / 2)
│ ↑ y-axis │
│ ┆ │
│ ┆ x-axis │
│ (0,0)┄┄┄┄┄┄┄┄→ │
│ │
│ │
└───────────────┬─┬───────────────┘
│ │ (screenWidth / 2, -screenHeight / 2)
└─┘
The windows coordinate system has its origin in the top left ┌─────────────────────────────────┐ │(0,0) ┄┄┄┄┄┄┄┄→ x-axis │ │ ┆ │ │ ┆ │ │ ↓ │ │y-axis │ │ │ └───────────────┬─┬───────────────┘(screenWidth) (screenHeight) │ │ └─┘
Hierarchy
- CanvasSpaceHelper
Index
Methods
- getCanvasDimensions
- getMapWorldToCameraFunction
- getMapWorldToCameraIntuitiveFunction
- mapCanvasPositionToCanvasSpace
- mapCanvasToWindow
- mapPagePositionToCameraSpace
- mapPagePositionToCanvasPosition
- mapWorldTo2DCamera
- mapWorldTo2DCameraIntuitive
- mapWorldToCamera
- mapWorldToCameraIntuitive
- mapWorldToCanvas
- mapWorldToCanvas3D
Methods
Static getCanvasDimensions
▸ getCanvasDimensions(canvas: HTMLCanvasElement): object
Defined in src/util/CanvasSpaceHelper.ts:83
Parameters:
| Name | Type |
|---|---|
canvas |
HTMLCanvasElement |
Returns: object
-
height: number
-
width: number
Static getMapWorldToCameraFunction
▸ getMapWorldToCameraFunction(camera: Camera): function
Defined in src/util/CanvasSpaceHelper.ts:147
This is an optimized implementation of CanvasSpaceHelper.mapWorldToCamera for performing the same mapping operations many times.
Parameters:
| Name | Type |
|---|---|
camera |
Camera |
Returns: function
▸ (worldPosition: ReadonlyVector3, target?: Vector3): Vector3
Parameters:
| Name | Type |
|---|---|
worldPosition |
ReadonlyVector3 |
target? |
Vector3 |
Static getMapWorldToCameraIntuitiveFunction
▸ getMapWorldToCameraIntuitiveFunction(camera: Camera): function
Defined in src/util/CanvasSpaceHelper.ts:166
This is an optimized implementation of CanvasSpaceHelper.mapWorldToCamera for performing the same mapping operations many times.
Parameters:
| Name | Type |
|---|---|
camera |
Camera |
Returns: function
▸ (worldPosition: ReadonlyVector3, target?: Vector3): Vector3
Parameters:
| Name | Type |
|---|---|
worldPosition |
ReadonlyVector3 |
target? |
Vector3 |
Static mapCanvasPositionToCanvasSpace
▸ mapCanvasPositionToCanvasSpace(canvasPixelsX: number, canvasPixelsY: number, canvas: HTMLCanvasElement): Vector3
Defined in src/util/CanvasSpaceHelper.ts:133
Determines the position of an event in canvas space. X and Y of the returned vector are relative to the canvas width and height.
memberof interactionHelper
Parameters:
| Name | Type | Description |
|---|---|---|
canvasPixelsX |
number | the x coordinate in the canvas |
canvasPixelsY |
number | the y coordinate in the canvas |
canvas |
HTMLCanvasElement | the canvas that is being rendered on |
Returns: Vector3
Static mapCanvasToWindow
▸ mapCanvasToWindow(canvasPosition: ReadonlyVector3): Vector3
Defined in src/util/CanvasSpaceHelper.ts:107
Maps a position in canvas space to window space.
Parameters:
| Name | Type |
|---|---|
canvasPosition |
ReadonlyVector3 |
Returns: Vector3
the position mapped to window space
Static mapPagePositionToCameraSpace
▸ mapPagePositionToCameraSpace(pageX: number, pageY: number, canvas: HTMLCanvasElement, camera: Camera): Vector3
Defined in src/util/CanvasSpaceHelper.ts:245
Determines the position of the event in camera space
memberof interactionHelper
Parameters:
| Name | Type | Description |
|---|---|---|
pageX |
number | the x coordinate in the document |
pageY |
number | the y coordinate in the document |
canvas |
HTMLCanvasElement | the canvas that is being used |
camera |
Camera | the camera that is being used |
Returns: Vector3
Static mapPagePositionToCanvasPosition
▸ mapPagePositionToCanvasPosition(pageX: number, pageY: number, canvas: HTMLCanvasElement): Vector3‹›
Defined in src/util/CanvasSpaceHelper.ts:111
Parameters:
| Name | Type |
|---|---|
pageX |
number |
pageY |
number |
canvas |
HTMLCanvasElement |
Returns: Vector3‹›
Static mapWorldTo2DCamera
▸ mapWorldTo2DCamera(worldPosition: ReadonlyVector3, camera: Camera): Vector3
Defined in src/util/CanvasSpaceHelper.ts:227
Maps a position in world space to camera space with z = 0
Parameters:
| Name | Type | Description |
|---|---|---|
worldPosition |
ReadonlyVector3 | - |
camera |
Camera | The camera to use for projection |
Returns: Vector3
Static mapWorldTo2DCameraIntuitive
▸ mapWorldTo2DCameraIntuitive(worldPosition: ReadonlyVector3, camera: Camera): Vector3
Defined in src/util/CanvasSpaceHelper.ts:231
Parameters:
| Name | Type |
|---|---|
worldPosition |
ReadonlyVector3 |
camera |
Camera |
Returns: Vector3
Static mapWorldToCamera
▸ mapWorldToCamera(worldPosition: ReadonlyVector3, camera: Camera): Vector3
Defined in src/util/CanvasSpaceHelper.ts:99
Maps a position in world space to camera space. The coordinates can be interpreted as follows: - if x, y and z are within [-1, 1] the point is visible - if x is > 1 the point is right of the viewport, left if it is < -1, reversed if behind the camera - if y is > 1 the point is above the viewport, below if it is < -1, reversed if behind the camera - if z is in [-Infinity, -1] the point is between camera and near plane
Parameters:
| Name | Type | Description |
|---|---|---|
worldPosition |
ReadonlyVector3 | - |
camera |
Camera | The camera to use for projection |
Returns: Vector3
the position mapped to camera space
Static mapWorldToCameraIntuitive
▸ mapWorldToCameraIntuitive(worldPosition: ReadonlyVector3, camera: Camera): Vector3
Defined in src/util/CanvasSpaceHelper.ts:206
Maps a position in world space to camera space. The coordinates can be interpreted as follows: - if x, y and z are within [-1, 1] the point is visible - if x is > 1 the point is right of the viewport, left if it is < -1 - if y is > 1 the point is above the viewport, below if it is < -1 - if z is > 1 the point is further away than the far plane - if z is < -1 the point is closer than the near plane or behind the camera
Parameters:
| Name | Type | Description |
|---|---|---|
worldPosition |
ReadonlyVector3 | - |
camera |
Camera | The camera to use for projection |
Returns: Vector3
the position mapped to camera space
Static mapWorldToCanvas
▸ mapWorldToCanvas(worldPosition: ReadonlyVector3, camera: Camera, canvasDimensions: object): Vector3
Defined in src/util/CanvasSpaceHelper.ts:54
Maps a world position to a position on the canvas. ToDo: Use optimized getMapWorldToCameraFunction for performing the same mapping operations many times and change usages (eg in HintManager)
Parameters:
▪ worldPosition: ReadonlyVector3
▪ camera: Camera
▪ canvasDimensions: object
| Name | Type |
|---|---|
height |
number |
width |
number |
Returns: Vector3
Static mapWorldToCanvas3D
▸ mapWorldToCanvas3D(worldPosition: Vector3, camera: Camera, canvasDimensions: HTMLCanvasElement): Vector3
Defined in src/util/CanvasSpaceHelper.ts:72
Similar to ee mapWorldToCanvas, but preserves the z component (distance to the camera). The values are not mapped linearly to the distance to the camera: - [-Infinity, -1] The point is between camera and near plane - [-1, 1] The point is between near and far plane - >1 The point is either further away than the far plane or behind the camera
Parameters:
| Name | Type |
|---|---|
worldPosition |
Vector3 |
camera |
Camera |
canvasDimensions |
HTMLCanvasElement |
Returns: Vector3