webgl

AMD: require(["esri/views/3d/webgl"], (webgl) => { /* code goes here */ });
ESM: import * as webgl from "@arcgis/core/views/3d/webgl.js";
Object: esri/views/3d/webgl
Since: ArcGIS Maps SDK for JavaScript 4.29

A convenience module for importing RenderNode classes when developing with TypeScript.

import RenderNode from "esri/views/3d/webgl/RenderNode";
import ManagedFBO from "esri/views/3d/webgl/ManagedFBO";

You can use this module to import them on a single line:

import { RenderNode, ManagedFBO } from "esri/views/3d/webgl";
See also

Method Overview

Name Return Type Summary Object
Number[]|Float32Array|Float64Array

Transforms positions from the internal rendering coordinate system to the output spatial reference.

webgl
Number[]|Float32Array

Computes a 4x4 affine transformation matrix that constitutes a linear coordinate transformation from a local Cartesian coordinate system to the virtual world coordinate system.

webgl
Number[]|Float32Array|Float64Array

Transforms positions from the given spatial reference to the internal rendering coordinate system.

webgl

Method Details

fromRenderCoordinates

Method
fromRenderCoordinates(srcCoordinates, srcStart, destCoordinates, destStart, destSpatialReference, count){Number[]|Float32Array|Float64Array}

Transforms positions from the internal rendering coordinate system to the output spatial reference. The allowable output spatial reference is limited and depends on the viewingMode:

  • In global mode, it can either be Web Mercator or WGS84.
  • In local mode, it has to match view.spatialReference, and the call to this function simply copies the coordinates from srcCoordinates to destCoordinates.

If these conditions are not met, nothing is written to destCoordinates and the function returns null.

Parameters

The view related to the input coordinates.

A linear array of one or more vectors that are interpreted as XYZ coordinates. For example, two position vectors would be represented as [x1, y1, z1, x2, y2, z2]. This must contain at least srcStart + 3 * count elements.

srcStart Number

An index in srcCoordinates from which the coordinates will start being read.

A reference to an array in which the results will be written.

destStart Number

An index in destCoordinates in which the coordinates will start to be written.

destSpatialReference SpatialReference

The spatial reference of the output coordinates. When null, view.spatialReference is used instead.

count Number

The number of vertices to be transformed.

Returns
Type Description
Number[] | Float32Array | Float64Array Returns a reference to destCoordinates if the operation succeeded, otherwise returns null.
Example
let cameraPositionGeographic = new Array(3);
webgl.fromRenderCoordinates(view,
  context.camera.eye, 0,
  cameraPositionGeographic, 0, SpatialReference.WGS84,
1);

renderCoordinateTransformAt

Method
renderCoordinateTransformAt(origin, srcSpatialReference, dest){Number[]|Float32Array}

Computes a 4x4 affine transformation matrix that constitutes a linear coordinate transformation from a local Cartesian coordinate system to the virtual world coordinate system. For example, this matrix can be used to transform the vertices of a 3D model to the rendering coordinate system.

The local Cartesian system is defined by its origin and the following axis definition:

  • X: Easting
  • Y: Northing
  • Z: Elevation

externalRenderers-renderCoordinateTransformAt

When view.viewingMode is global, a linear transformation does not take the curvature of the globe or other non-linear projection aspects into account. Thus, the resulting coordinates will only appear correct within a small region around the origin of the local Cartesian system.

The allowable spatial reference of origin depends on the viewingMode:

  • In global mode, it can either be Web Mercator or WGS84.
  • In local mode, it has to match view.spatialReference.

If these conditions are not met, nothing will be written to dest and the function will return null.

Parameters

The view for which the transformation will be used.

The global coordinates of the origin in the local Cartesian coordinate system.

srcSpatialReference SpatialReference
optional

The spatial reference of the origin coordinates. If undefined, view.spatialReference is used instead.

optional

A reference to an array where the 16 matrix elements will be stored. The resulting matrix follows OpenGL conventions where the translation components occupy the 13th, 14th and 15th elements. If undefined, a newly created matrix returned.

Returns
Type Description
Number[] | Float32Array Returns a reference to dest if the operation succeeds, otherwise returns null.
Example
// places a tetrahedron in New York
let verticesLocal = [[10, 10, 10], [10, −10, −10], [−10, 10, −10], [−10, −10, 10]],
  transformation = new Array(16),
  geographicCoordinates = [
  //  lon     lat   elevation
      -74,   40.71,    10]

webgl.renderCoordinateTransformAt(view, geographicCoordinates, SpatialReference.WGS84, transformation);

let verticesGlobal = verticesLocal.map(function(vertexLocal) {
  // transform the coordinates with the computed transformation (using the syntax of glMatrix, see http://glmatrix.net)
  return vec3.transformMat4(new Array(3), vertexLocal, transformation);
});

toRenderCoordinates

Method
toRenderCoordinates(srcCoordinates, srcStart, srcSpatialReference, destCoordinates, destStart, count){Number[]|Float32Array|Float64Array}

Transforms positions from the given spatial reference to the internal rendering coordinate system. The allowable input spatial reference is limited and depends on the viewingMode:

  • In global mode, it can either be Web Mercator or WGS84.
  • In local mode, it has to match view.spatialReference; the call to this function simply copies the coordinates from srcCoordinates to destCoordinates.

If these conditions are not met, nothing is written to destCoordinates and the function returns null.

Parameters

The view in which the coordinates will be used.

A linear array of one or more vectors which are interpreted as XYZ coordinates. For example, two position vectors would be represented as [x1, y1, z1, x2, y2, z2]. This must contain at least srcStart + 3 * count elements.

srcStart Number

An index in srcCoordinates from which the coordinates start to be read.

srcSpatialReference SpatialReference

The spatial reference of the input coordinates. When null, view.spatialReference is used instead.

A reference to an array where the results will be written.

destStart Number

An index in destCoordinates to which the coordinates will start to be written.

count Number

The number of vertices to be transformed.

Returns
Type Description
Number[] | Float32Array | Float64Array Returns a reference to destCoordinates if the operation succeeds, otherwise returns null.
Example
// A linear list of coordinate triples
let geographicCoordinates = [
  //  lon     lat   elevation
    -117.19, 34.05,   414,
     47.39,   8.51,   408];

// Allocate storage for the result
let renderCoordinates = new Array(6);

webgl.toRenderCoordinates(view,
  geographicCoordinates, 0, SpatialReference.WGS84,
  renderCoordinates, 0,
2);

Type Definitions

ConsumedNodes

Type Definition
ConsumedNodes Object

Describes the input framebuffer objects of a custom RenderNode.

Properties

One or more required inputs. If a required input is not available, the render function will not be called.

optional

One or more optional inputs. You can use an optional input if you want the render function to be called even if this input is not available.

RenderCamera

Type Definition
RenderCamera Object

The camera object passed to render function.

This is not the same as Camera. All properties are read-only and defined in the internal render coordinate system (see the section on coordinate systems).

Vectors (Vec3 and Vec4) are presented as arrays. Matrices (Mat4) are presented as linear arrays with 16 elements following the OpenGL conventions where the translation components occupy the 13th, 14th, and 15th elements.

Properties
viewMatrix Mat4

A 4x4 matrix that transforms coordinates from world space to camera space.

viewInverseTransposeMatrix Mat4

The inverse transpose of viewMatrix, used to transform normals from world space to camera space.

projectionMatrix Mat4

A 4x4 matrix that defines the perspective projection transformation.

eye Vec3

The position of the camera in the internal Cartesian rendering coordinate system.

center Vec3

The camera target ("look at") position in the internal Cartesian rendering coordinate system.

up Vec3

The camera up vector.

near Number

The distance to the near plane.

far Number

The distance to the far plane.

fovX Number

The horizontal field of view.

fovY Number

The vertical field of view.

pixelRatio Number

The render pixel ratio. This can be used to adjust screen sizes so that they correctly match up to CSS pixel sizes when rendered in HiDPI.

viewport Vec4

The viewport (x, y, width, height).

RenderNodeInput

Type Definition
RenderNodeInput String

Describes a specific RenderNodeInput.

RenderNodeInput Description FBO attachments
normals Contains the normals in camera space for the front-most visible content in the SceneView per pixel stored in RGB. color0
highlights Contains the currently selected highlights in the SceneView. Only available when the scene has highlights. color0

Furthermore all RenderNodeOutput framebuffers may also be used as an input.

Normals encoding

The normals color0 attachment is an rgba texture, where the rgb components encode the normal. To get the normal in camera space, the following glsl code can be used:

  vec3 normal = 2.0 * texture(normalsTexture, uv).xyz - vec3(1.0);

Using the normals for a custom RenderNode can have measurable performance impact in some settings due to the additional render tasks necessary to provide the normal information.

Highlight encoding

The highlights color0 attachment is an rgba texture. A highlighted pixel has a red value of 1. If the highlighted geometry is behind another geometry (it is occluded) its green value is additionally set to 1.

Possible Values:"composite-color"|"opaque-color"|"transparent-color"|"normals"|"highlights"

See also

RenderNodeOutput

Type Definition
RenderNodeOutput String

Describes a specific RenderNodeOutput.

RenderNodeOutput Description Available RenderNodeInput FBOs FBO attachments
opaque-color Contains the rendered image after all opaque geometries have been drawn. opaque-color, normals color0, depth
transparent-color Contains the rendered image after all opaque and transparent geometries have been drawn. transparent-color, normals color0, depth
composite-color Contains the rendered image without any post processes applied. composite-color, normals, highlights (if scene has highlights) color0, depth

Possible Values:"composite-color"|"opaque-color"|"transparent-color"

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.