# MaterialAppearance

#### new Cesium.MaterialAppearance(options)
engine/Source/Scene/MaterialAppearance.js 49

An appearance for arbitrary geometry (as opposed to `EllipsoidSurfaceAppearance`, for example) that supports shading with materials.

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 `MaterialAppearance#renderState` has alpha blending enabled.
`closed` | boolean | `false` | optional When `true`, the geometry is expected to be closed so `MaterialAppearance#renderState` has backface culling enabled.
`materialSupport` | MaterialAppearance.MaterialSupportType | `MaterialAppearance.MaterialSupport.TEXTURED` | optional The type of materials that will be supported.
`material` | Material | `Material.ColorType` | optional The material used to determine the fragment color.
`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:

    const primitive = new Cesium.Primitive({
      geometryInstances : new Cesium.GeometryInstance({
        geometry : new Cesium.WallGeometry({
                materialSupport :  Cesium.MaterialAppearance.MaterialSupport.BASIC.vertexFormat,
          // ...
        })
      }),
      appearance : new Cesium.MaterialAppearance({
        material : Cesium.Material.fromType('Color'),
        faceForward : true
      })

    });

##### Demo:

- Cesium Sandcastle Material Appearance Demo

##### See:

- Fabric

### Namespaces

MaterialSupport

### Members

#### readonly closed : boolean
engine/Source/Scene/MaterialAppearance.js 168

When `true`, the geometry is expected to be closed so `MaterialAppearance#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/MaterialAppearance.js 239

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/MaterialAppearance.js 220

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/MaterialAppearance.js 131

The GLSL source code for the fragment shader. The full fragment shader source is built procedurally taking into account `MaterialAppearance#material`, `MaterialAppearance#flat`, and `MaterialAppearance#faceForward`. Use `MaterialAppearance#getFragmentShaderSource` to get the full source.

#### material : Material
engine/Source/Scene/MaterialAppearance.js 69

The material used to determine the fragment color. Unlike other `MaterialAppearance` properties, this is not read-only, so an appearance's material can change on the fly.

Default Value: ``Material.ColorType``

##### See:

- Fabric

#### readonly materialSupport : MaterialAppearance.MaterialSupportType
engine/Source/Scene/MaterialAppearance.js 185

The type of materials supported by this instance. This impacts the required `VertexFormat` and the complexity of the vertex and fragment shaders.

Default Value: ``MaterialAppearance.MaterialSupport.TEXTURED``

#### readonly renderState : object
engine/Source/Scene/MaterialAppearance.js 150

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

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

#### translucent : boolean
engine/Source/Scene/MaterialAppearance.js 80

When `true`, the geometry is expected to appear translucent.

Default Value: `true`

#### readonly vertexFormat : VertexFormat
engine/Source/Scene/MaterialAppearance.js 203

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.

Default Value: ``MaterialAppearance.MaterialSupport.TEXTURED.vertexFormat``

#### readonly vertexShaderSource : string
engine/Source/Scene/MaterialAppearance.js 114

The GLSL source code for the vertex shader.

### Methods

#### getFragmentShaderSource() → string
engine/Source/Scene/MaterialAppearance.js 255

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

##### Returns:

The full GLSL fragment shader source.

#### getRenderState() → object
engine/Source/Scene/MaterialAppearance.js 276

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/MaterialAppearance.js 265

Determines if the geometry is translucent based on `MaterialAppearance#translucent` and `Material#isTranslucent`.

##### Returns:

`true` if the appearance is translucent.

### Type Definitions

#### Cesium.MaterialAppearance.MaterialSupportType
engine/Source/Scene/MaterialAppearance.js 279

##### Properties:

Name | Type | Description
--- | --- | ---
`vertexFormat` | VertexFormat |
`vertexShaderSource` | string |
`fragmentShaderSource` | string |

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