# PerInstanceColorAppearance

#### new Cesium.PerInstanceColorAppearance(options)
engine/Source/Scene/PerInstanceColorAppearance.js 70

An appearance for `GeometryInstance` instances with color attributes. This allows several geometry instances, each with a different color, to be drawn with the same `Primitive` as shown in the second example below.

Name | Type | Description
--- | --- | ---
`options` | object | optional Object with the following properties:
Name | Type | Default | Description
--- | --- | --- | ---
`flat` | boolean | `false` | optional When `true`, flat shading is used in the fragment shader, which means lighting is not taking into account.
`faceForward` | boolean | `!options.closed` | optional When `true`, the fragment shader flips the surface normal as needed to ensure that the normal faces the viewer to avoid dark spots. This is useful when both sides of a geometry should be shaded like `WallGeometry`.
`translucent` | boolean | `true` | optional When `true`, the geometry is expected to appear translucent so `PerInstanceColorAppearance#renderState` has alpha blending enabled.
`closed` | boolean | `false` | optional When `true`, the geometry is expected to be closed so `PerInstanceColorAppearance#renderState` has backface culling enabled.
`vertexShaderSource` | string |  | optional Optional GLSL vertex shader source to override the default vertex shader.
`fragmentShaderSource` | string |  | optional Optional GLSL fragment shader source to override the default fragment shader.
`renderState` | object |  | optional Optional render state to override the default render state.

##### Example:

    // A solid white line segment
    const primitive = new Cesium.Primitive({
      geometryInstances : new Cesium.GeometryInstance({
        geometry : new Cesium.SimplePolylineGeometry({
          positions : Cesium.Cartesian3.fromDegreesArray([
            0.0, 0.0,
            5.0, 0.0
          ])
        }),
        attributes : {
          color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 1.0, 1.0, 1.0))
        }
      }),
      appearance : new Cesium.PerInstanceColorAppearance({
        flat : true,
        translucent : false
      })
    });

    // Two rectangles in a primitive, each with a different color
    const instance = new Cesium.GeometryInstance({
      geometry : new Cesium.RectangleGeometry({
        rectangle : Cesium.Rectangle.fromDegrees(0.0, 20.0, 10.0, 30.0)
      }),
      attributes : {
        color : new Cesium.ColorGeometryInstanceAttribute(1.0, 0.0, 0.0, 0.5)
      }
    });

    const anotherInstance = new Cesium.GeometryInstance({
      geometry : new Cesium.RectangleGeometry({
        rectangle : Cesium.Rectangle.fromDegrees(0.0, 40.0, 10.0, 50.0)
      }),
      attributes : {
        color : new Cesium.ColorGeometryInstanceAttribute(0.0, 0.0, 1.0, 0.5)
      }
    });

    const rectanglePrimitive = new Cesium.Primitive({
      geometryInstances : [instance, anotherInstance],
      appearance : new Cesium.PerInstanceColorAppearance()
    });

### Members

#### static constant Cesium.PerInstanceColorAppearance.FLAT_VERTEX_FORMAT : VertexFormat
engine/Source/Scene/PerInstanceColorAppearance.js 261

The `VertexFormat` that all `PerInstanceColorAppearance` instances are compatible with when `PerInstanceColorAppearance#flat` is `true`. This requires only a `position` attribute.

#### static constant Cesium.PerInstanceColorAppearance.VERTEX_FORMAT : VertexFormat
engine/Source/Scene/PerInstanceColorAppearance.js 250

The `VertexFormat` that all `PerInstanceColorAppearance` instances are compatible with. This requires only `position` and `normal` attributes.

#### readonly closed : boolean
engine/Source/Scene/PerInstanceColorAppearance.js 182

When `true`, the geometry is expected to be closed so `PerInstanceColorAppearance#renderState` has backface culling enabled. If the viewer enters the geometry, it will not be visible.

Default Value: `false`

#### readonly faceForward : boolean
engine/Source/Scene/PerInstanceColorAppearance.js 234

When `true`, the fragment shader flips the surface normal as needed to ensure that the normal faces the viewer to avoid dark spots. This is useful when both sides of a geometry should be shaded like `WallGeometry`.

Default Value: `true`

#### readonly flat : boolean
engine/Source/Scene/PerInstanceColorAppearance.js 215

When `true`, flat shading is used in the fragment shader, which means lighting is not taking into account.

Default Value: `false`

#### readonly fragmentShaderSource : string
engine/Source/Scene/PerInstanceColorAppearance.js 145

The GLSL source code for the fragment shader.

#### material : Material
engine/Source/Scene/PerInstanceColorAppearance.js 94

This property is part of the `Appearance` interface, but is not used by `PerInstanceColorAppearance` since a fully custom fragment shader is used.

Default Value: `undefined`

#### readonly renderState : object
engine/Source/Scene/PerInstanceColorAppearance.js 164

The WebGL fixed-function state to use when rendering the geometry.

The render state can be explicitly defined when constructing a `PerInstanceColorAppearance` instance, or it is set implicitly via `PerInstanceColorAppearance#translucent` and `PerInstanceColorAppearance#closed`.

#### translucent : boolean
engine/Source/Scene/PerInstanceColorAppearance.js 104

When `true`, the geometry is expected to appear translucent so `PerInstanceColorAppearance#renderState` has alpha blending enabled.

Default Value: `true`

#### readonly vertexFormat : VertexFormat
engine/Source/Scene/PerInstanceColorAppearance.js 198

The `VertexFormat` that this appearance instance is compatible with. A geometry can have more vertex attributes and still be compatible - at a potential performance cost - but it can't have less.

#### readonly vertexShaderSource : string
engine/Source/Scene/PerInstanceColorAppearance.js 131

The GLSL source code for the vertex shader.

### Methods

#### getFragmentShaderSource() → string
engine/Source/Scene/PerInstanceColorAppearance.js 272

Procedurally creates the full GLSL fragment shader source. For `PerInstanceColorAppearance`, this is derived from `PerInstanceColorAppearance#fragmentShaderSource`, `PerInstanceColorAppearance#flat`, and `PerInstanceColorAppearance#faceForward`.

##### Returns:

The full GLSL fragment shader source.

#### getRenderState() → object
engine/Source/Scene/PerInstanceColorAppearance.js 294

Creates a render state. This is not the final render state instance; instead, it can contain a subset of render state properties identical to the render state created in the context.

##### Returns:

The render state.

#### isTranslucent() → boolean
engine/Source/Scene/PerInstanceColorAppearance.js 282

Determines if the geometry is translucent based on `PerInstanceColorAppearance#translucent`.

##### Returns:

`true` if the appearance is translucent.

Need help? The fastest way to get answers is from the community and team on the Cesium Forum.