top
all js glsl

Primitive

Primitive

new

A primitive represents geometry in the Scene. The geometry can be from a single GeometryInstance as shown in example 1 below, or from an array of instances, even if the geometry is from different geometry types, e.g., an RectangleGeometry and an EllipsoidGeometry as shown in Code Example 2.

A primitive combines geometry instances with an Appearance that describes the full shading, including Material and RenderState. Roughly, the geometry instance defines the structure and placement, and the appearance defines the visual characteristics. Decoupling geometry and appearance allows us to mix and match most of them and add a new geometry or appearance independently of each other.

Combining multiple instances into one primitive is called batching, and significantly improves performance for static data. Instances can be individually picked; Scene#pick returns their GeometryInstance#id. Using per-instance appearances like PerInstanceColorAppearance, each instance can also have a unique color.

Geometry can either be created and batched on a web worker or the main thread. The first two examples show geometry that will be created on a web worker by using the descriptions of the geometry. The third example shows how to create the geometry on the main thread by explicitly calling the createGeometry method.

Parameters:
Name Type Argument Default Description
options.geometryInstances Array | GeometryInstance <optional>
 The geometry instances - or a single geometry instance - to render.
options.appearance Appearance <optional>
 The appearance used to render the primitive.
options.show Boolean <optional>
 true Determines if this primitive will be shown.
options.vertexCacheOptimize Boolean <optional>
 false When true, geometry vertices are optimized for the pre and post-vertex-shader caches.
options.releaseGeometryInstances Boolean <optional>
 true When true, the primitive does not keep a reference to the input geometryInstances to save memory.
options.allow3DOnly Boolean <optional>
 false When true, each geometry instance will only be rendered in 3D to save GPU memory.
options.allowPicking Boolean <optional>
 true When true, each geometry instance will only be pickable with Scene#pick. When false, GPU memory is saved.
options.asynchronous Boolean <optional>
 true Determines if the primitive will be created asynchronously or block until ready.
options.debugShowBoundingVolume Boolean <optional>
 false For debugging only. Determines if this primitive's commands' bounding spheres are shown.
Example
// 1. Draw a translucent ellipse on the surface with a checkerboard pattern
var instance = new Cesium.GeometryInstance({
  geometry : new Cesium.EllipseGeometry({
      vertexFormat : Cesium.VertexFormat.POSITION_AND_ST,
      ellipsoid : ellipsoid,
      center : ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(-100, 20)),
      semiMinorAxis : 500000.0,
      semiMajorAxis : 1000000.0,
      rotation : Cesium.Math.PI_OVER_FOUR
  }),
  id : 'object returned when this instance is picked and to get/set per-instance attributes'
});
var primitive = new Cesium.Primitive({
  geometryInstances : instance,
  appearance : new Cesium.EllipsoidSurfaceAppearance({
    material : Cesium.Material.fromType('Checkerboard')
  })
});
scene.primitives.add(primitive);

// 2. Draw different instances each with a unique color
var rectangleInstance = new Cesium.GeometryInstance({
  geometry : new Cesium.RectangleGeometry({
    vertexFormat : Cesium.VertexFormat.POSITION_AND_NORMAL,
    rectangle : new Cesium.Rectangle(
      Cesium.Math.toRadians(-140.0),
      Cesium.Math.toRadians(30.0),
      Cesium.Math.toRadians(-100.0),
      Cesium.Math.toRadians(40.0))
    }),
  id : 'rectangle',
  attribute : {
    color : new Cesium.ColorGeometryInstanceAttribute(0.0, 1.0, 1.0, 0.5)
  }
});
var ellipsoidInstance = new Cesium.GeometryInstance({
  geometry : new Cesium.EllipsoidGeometry({
    vertexFormat : Cesium.VertexFormat.POSITION_AND_NORMAL,
    radii : new Cesium.Cartesian3(500000.0, 500000.0, 1000000.0)
  }),
  modelMatrix : Matrix4.multiplyByTranslation(Cesium.Transforms.eastNorthUpToFixedFrame(
    ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(-95.59777, 40.03883))), new Cesium.Cartesian3(0.0, 0.0, 500000.0)),
  id : 'ellipsoid',
  attribute : {
    color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.AQUA)
  }
});
var primitive = new Cesium.Primitive({
  geometryInstances : [rectangleInstance, ellipsoidInstance],
  appearance : new Cesium.PerInstanceColorAppearance()
});
scene.primitives.add(primitive);

// 3. Create the geometry on the main thread.
var primitive = new Cesium.Primitive({
  geometryInstances : new Cesium.GeometryInstance({
      geometry : Cesium.EllipsoidGeometry.createGeometry(new Cesium.EllipsoidGeometry({
        vertexFormat : Cesium.VertexFormat.POSITION_AND_NORMAL,
        radii : new Cesium.Cartesian3(500000.0, 500000.0, 1000000.0)
      })),
      modelMatrix : Cesium.Matrix4.multiplyByTranslation(Cesium.Transforms.eastNorthUpToFixedFrame(
        ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(-95.59777, 40.03883))), new Cesium.Cartesian3(0.0, 0.0, 500000.0)),
      id : 'ellipsoid',
      attribute : {
        color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.AQUA)
      }
  }),
  appearance : new Cesium.PerInstanceColorAppearance()
});
scene.primitives.add(primitive);
See:
Source:

Members

<readonly> :Boolean

When true, each geometry instance will only be rendered in 3D to save GPU memory.
Default Value:
  • false

<readonly> :Boolean

When true, each geometry instance will only be pickable with Scene#pick. When false, GPU memory is saved. *
Default Value:
  • true

:Appearance

The Appearance used to shade this primitive. Each geometry instance is shaded with the same appearance. Some appearances, like PerInstanceColorAppearance allow giving each instance unique properties.
Default Value:
  • undefined

<readonly> :Boolean

Determines if the geometry instances will be created and batched on a web worker.
Default Value:
  • true

:Boolean

This property is for debugging only; it is not for production use nor is it optimized.

Draws the bounding sphere for each DrawCommand in the primitive.

Default Value:
  • false

:Array

The geometry instances rendered with this primitive. This may be undefined if options.releaseGeometryInstances is true when the primitive is constructed.

Changing this property after the primitive is rendered has no effect.

Default Value:
  • undefined

:Matrix4

The 4x4 transformation matrix that transforms the primitive (all geometry instances) from model to world coordinates. When this is the identity matrix, the primitive is drawn in world coordinates, i.e., Earth's WGS84 coordinates. Local reference frames can be used by providing a different transformation matrix, like that returned by Transforms.eastNorthUpToFixedFrame. This matrix is available to GLSL vertex and fragment shaders via czm_model and derived uniforms.
Example
var origin = ellipsoid.cartographicToCartesian(
  Cesium.Cartographic.fromDegrees(-95.0, 40.0, 200000.0));
p.modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(origin);
Default Value:
  • Matrix4.IDENTITY
See:

<readonly> :Boolean

When true, the primitive does not keep a reference to the input geometryInstances to save memory.
Default Value:
  • true

:Boolean

Determines if the primitive will be shown. This affects all geometry instances in the primitive.
Default Value:
  • true

<readonly> :Boolean

When true, geometry vertices are optimized for the pre and post-vertex-shader caches.
Default Value:
  • true

Methods

Destroys the WebGL resources held by this object. Destroying an object allows for deterministic release of WebGL resources, instead of relying on the garbage collector to destroy this object.

Once an object is destroyed, it should not be used; calling any function other than isDestroyed will result in a DeveloperError exception. Therefore, assign the return value (undefined) to the object as done in the example.

Throws:
DeveloperError : This object was destroyed, i.e., destroy() was called.
Returns:
Example
e = e && e.destroy();
See:

Returns true if this object was destroyed; otherwise, false.

If this object was destroyed, it should not be used; calling any function other than isDestroyed will result in a DeveloperError exception.

Returns:
Boolean true if this object was destroyed; otherwise, false.
See:

<static>

Returns the modifiable per-instance attributes for a GeometryInstance.

Parameters:
Name Type Description
id Object The id of the GeometryInstance.
Throws:
DeveloperError : must call update before calling getGeometryInstanceAttributes.
Returns:
Object The typed array in the attribute's format or undefined if the is no instance with id.
Example
var attributes = primitive.getGeometryInstanceAttributes('an id');
attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(Cesium.Color.AQUA);
attributes.show = Cesium.ShowGeometryInstanceAttribute.toValue(true);