A Material defines surface appearance through a combination of diffuse, specular,
normal, emission, and alpha components. These values are specified using a
JSON schema called Fabric which gets parsed and assembled into glsl shader code
behind-the-scenes. Check out the page
for more details on Fabric.
<style type="text/css">
#materialDescriptions code {
font-weight: normal;
font-family: Consolas, 'Lucida Console', Monaco, monospace;
color: #A35A00;
}
#materialDescriptions ul, #materialDescriptions ul ul {
list-style-type: none;
}
#materialDescriptions ul ul {
margin-bottom: 10px;
}
#materialDescriptions ul ul li {
font-weight: normal;
color: #000000;
text-indent: -2em;
margin-left: 2em;
}
#materialDescriptions ul li {
font-weight: bold;
color: #0053CF;
}
</style>
Base material types and their uniforms:
Color
color: rgba color object.
Image
image: path to image.
repeat: Object with x and y values specifying the number of times to repeat the image.
DiffuseMap
image: path to image.
channels: Three character string containing any combination of r, g, b, and a for selecting the desired image channels.
repeat: Object with x and y values specifying the number of times to repeat the image.
AlphaMap
image: path to image.
channel: One character string containing r, g, b, or a for selecting the desired image channel.
repeat: Object with x and y values specifying the number of times to repeat the image.
SpecularMap
image: path to image.
channel: One character string containing r, g, b, or a for selecting the desired image channel.
repeat: Object with x and y values specifying the number of times to repeat the image.
EmissionMap
image: path to image.
channels: Three character string containing any combination of r, g, b, and a for selecting the desired image channels.
repeat: Object with x and y values specifying the number of times to repeat the image.
BumpMap
image: path to image.
channel: One character string containing r, g, b, or a for selecting the desired image channel.
repeat: Object with x and y values specifying the number of times to repeat the image.
strength: Bump strength value between 0.0 and 1.0 where 0.0 is small bumps and 1.0 is large bumps.
NormalMap
image: path to image.
channels: Three character string containing any combination of r, g, b, and a for selecting the desired image channels.
repeat: Object with x and y values specifying the number of times to repeat the image.
strength: Bump strength value between 0.0 and 1.0 where 0.0 is small bumps and 1.0 is large bumps.
Grid
color: rgba color object for the whole material.
cellAlpha: Alpha value for the cells between grid lines. This will be combined with color.alpha.
lineCount: Object with x and y values specifying the number of columns and rows respectively.
lineThickness: Object with x and y values specifying the thickness of grid lines (in pixels where available).
lineOffset: Object with x and y values specifying the offset of grid lines (range is 0 to 1).
Stripe
horizontal: Boolean that determines if the stripes are horizontal or vertical.
evenColor: rgba color object for the stripe's first color.
oddColor: rgba color object for the stripe's second color.
offset: Number that controls at which point into the pattern to begin drawing; with 0.0 being the beginning of the even color, 1.0 the beginning of the odd color, 2.0 being the even color again, and any multiple or fractional values being in between.
repeat: Number that controls the total number of stripes, half light and half dark.
Checkerboard
lightColor: rgba color object for the checkerboard's light alternating color.
darkColor: rgba color object for the checkerboard's dark alternating color.
repeat: Object with x and y values specifying the number of columns and rows respectively.
Dot
lightColor: rgba color object for the dot color.
darkColor: rgba color object for the background color.
repeat: Object with x and y values specifying the number of columns and rows of dots respectively.
Water
baseWaterColor: rgba color object base color of the water.
blendColor: rgba color object used when blending from water to non-water areas.
specularMap: Single channel texture used to indicate areas of water.
normalMap: Normal map for water normal perturbation.
frequency: Number that controls the number of waves.
normalMap: Normal map for water normal perturbation.
animationSpeed: Number that controls the animations speed of the water.
amplitude: Number that controls the amplitude of water waves.
specularIntensity: Number that controls the intensity of specular reflections.
RimLighting
color: diffuse color and alpha.
rimColor: diffuse color and alpha of the rim.
width: Number that determines the rim's width.
Fade
fadeInColor: diffuse color and alpha at time
fadeOutColor: diffuse color and alpha at maximumDistance from time
maximumDistance: Number between 0.0 and 1.0 where the fadeInColor becomes the fadeOutColor. A value of 0.0 gives the entire material a color of fadeOutColor and a value of 1.0 gives the the entire material a color of fadeInColor
repeat: true if the fade should wrap around the texture coodinates.
fadeDirection: Object with x and y values specifying if the fade should be in the x and y directions.
time: Object with x and y values between 0.0 and 1.0 of the fadeInColor position
PolylineArrow
color: diffuse color and alpha.
PolylineGlow
color: color and maximum alpha for the glow on the line.
glowPower: strength of the glow, as a percentage of the total line width (less than 1.0).
PolylineOutline
color: diffuse color and alpha for the interior of the line.
outlineColor: diffuse color and alpha for the outline.
outlineWidth: width of the outline in pixels.
alias Material
- The options object takes the following properties
- {Boolean} [options.strict=false] Throws errors for issues that would normally be ignored, including unused uniforms or materials.
- {Boolean|Function} [options.translucent=true] When true or a function that returns true, the geometry
with this material is expected to appear translucent.
- {Object} options.fabric The fabric JSON used to generate the material.
exception {DeveloperError} fabric: uniform has invalid type.
exception {DeveloperError} fabric: uniforms and materials cannot share the same property.
exception {DeveloperError} fabric: cannot have source and components in the same section.
exception {DeveloperError} fabric: property name is not valid. It should be 'type', 'materials', 'uniforms', 'components', or 'source'.
exception {DeveloperError} fabric: property name is not valid. It should be 'diffuse', 'specular', 'shininess', 'normal', 'emission', or 'alpha'.
exception {DeveloperError} strict: shader source does not use string.
exception {DeveloperError} strict: shader source does not use uniform.
exception {DeveloperError} strict: shader source does not use material.
Annotations
@RawJSType()@native()@JSName("Cesium.Material")
Example:
// Create a color material with fromType:
polygon.material = Cesium.Material.fromType('Color');
polygon.material.uniforms.color = new Cesium.Color(1.0, 1.0, 0.0, 1.0);
// Create the default material:
polygon.material = new Cesium.Material();
// Create a color material with full Fabric notation:
polygon.material = new Cesium.Material({
fabric : {
type : 'Color',
uniforms : {
color : new Cesium.Color(1.0, 1.0, 0.0, 1.0)
}
}
});
A Material defines surface appearance through a combination of diffuse, specular, normal, emission, and alpha components. These values are specified using a JSON schema called Fabric which gets parsed and assembled into glsl shader code behind-the-scenes. Check out the page for more details on Fabric.
<style type="text/css"> #materialDescriptions code { font-weight: normal; font-family: Consolas, 'Lucida Console', Monaco, monospace; color: #A35A00; } #materialDescriptions ul, #materialDescriptions ul ul { list-style-type: none; } #materialDescriptions ul ul { margin-bottom: 10px; } #materialDescriptions ul ul li { font-weight: normal; color: #000000; text-indent: -2em; margin-left: 2em; } #materialDescriptions ul li { font-weight: bold; color: #0053CF; } </style>
Base material types and their uniforms:
color: rgba color object.image: path to image.repeat: Object with x and y values specifying the number of times to repeat the image.image: path to image.channels: Three character string containing any combination of r, g, b, and a for selecting the desired image channels.repeat: Object with x and y values specifying the number of times to repeat the image.image: path to image.channel: One character string containing r, g, b, or a for selecting the desired image channel.repeat: Object with x and y values specifying the number of times to repeat the image.image: path to image.channel: One character string containing r, g, b, or a for selecting the desired image channel.repeat: Object with x and y values specifying the number of times to repeat the image.image: path to image.channels: Three character string containing any combination of r, g, b, and a for selecting the desired image channels.repeat: Object with x and y values specifying the number of times to repeat the image.image: path to image.channel: One character string containing r, g, b, or a for selecting the desired image channel.repeat: Object with x and y values specifying the number of times to repeat the image.strength: Bump strength value between 0.0 and 1.0 where 0.0 is small bumps and 1.0 is large bumps.image: path to image.channels: Three character string containing any combination of r, g, b, and a for selecting the desired image channels.repeat: Object with x and y values specifying the number of times to repeat the image.strength: Bump strength value between 0.0 and 1.0 where 0.0 is small bumps and 1.0 is large bumps.color: rgba color object for the whole material.cellAlpha: Alpha value for the cells between grid lines. This will be combined with color.alpha.lineCount: Object with x and y values specifying the number of columns and rows respectively.lineThickness: Object with x and y values specifying the thickness of grid lines (in pixels where available).lineOffset: Object with x and y values specifying the offset of grid lines (range is 0 to 1).horizontal: Boolean that determines if the stripes are horizontal or vertical.evenColor: rgba color object for the stripe's first color.oddColor: rgba color object for the stripe's second color.offset: Number that controls at which point into the pattern to begin drawing; with 0.0 being the beginning of the even color, 1.0 the beginning of the odd color, 2.0 being the even color again, and any multiple or fractional values being in between.repeat: Number that controls the total number of stripes, half light and half dark.lightColor: rgba color object for the checkerboard's light alternating color.darkColor: rgba color object for the checkerboard's dark alternating color.repeat: Object with x and y values specifying the number of columns and rows respectively.lightColor: rgba color object for the dot color.darkColor: rgba color object for the background color.repeat: Object with x and y values specifying the number of columns and rows of dots respectively.baseWaterColor: rgba color object base color of the water.blendColor: rgba color object used when blending from water to non-water areas.specularMap: Single channel texture used to indicate areas of water.normalMap: Normal map for water normal perturbation.frequency: Number that controls the number of waves.normalMap: Normal map for water normal perturbation.animationSpeed: Number that controls the animations speed of the water.amplitude: Number that controls the amplitude of water waves.specularIntensity: Number that controls the intensity of specular reflections.color: diffuse color and alpha.rimColor: diffuse color and alpha of the rim.width: Number that determines the rim's width.fadeInColor: diffuse color and alpha attimefadeOutColor: diffuse color and alpha atmaximumDistancefromtimemaximumDistance: Number between 0.0 and 1.0 where thefadeInColorbecomes thefadeOutColor. A value of 0.0 gives the entire material a color offadeOutColorand a value of 1.0 gives the the entire material a color offadeInColorrepeat: true if the fade should wrap around the texture coodinates.fadeDirection: Object with x and y values specifying if the fade should be in the x and y directions.time: Object with x and y values between 0.0 and 1.0 of thefadeInColorpositioncolor: diffuse color and alpha.color: color and maximum alpha for the glow on the line.glowPower: strength of the glow, as a percentage of the total line width (less than 1.0).color: diffuse color and alpha for the interior of the line.outlineColor: diffuse color and alpha for the outline.outlineWidth: width of the outline in pixels.alias Material
- The options object takes the following properties - {Boolean} [options.strict=false] Throws errors for issues that would normally be ignored, including unused uniforms or materials. - {Boolean|Function} [options.translucent=true] When
trueor a function that returnstrue, the geometry with this material is expected to appear translucent. - {Object} options.fabric The fabric JSON used to generate the material.exception {DeveloperError} fabric: uniform has invalid type. exception {DeveloperError} fabric: uniforms and materials cannot share the same property. exception {DeveloperError} fabric: cannot have source and components in the same section. exception {DeveloperError} fabric: property name is not valid. It should be 'type', 'materials', 'uniforms', 'components', or 'source'. exception {DeveloperError} fabric: property name is not valid. It should be 'diffuse', 'specular', 'shininess', 'normal', 'emission', or 'alpha'. exception {DeveloperError} strict: shader source does not use string. exception {DeveloperError} strict: shader source does not use uniform. exception {DeveloperError} strict: shader source does not use material.
// Create a color material with fromType: polygon.material = Cesium.Material.fromType('Color'); polygon.material.uniforms.color = new Cesium.Color(1.0, 1.0, 0.0, 1.0); // Create the default material: polygon.material = new Cesium.Material(); // Create a color material with full Fabric notation: polygon.material = new Cesium.Material({ fabric : { type : 'Color', uniforms : { color : new Cesium.Color(1.0, 1.0, 0.0, 1.0) } } });
wiki page for a more detailed options of Fabric. demo Sandcastle Materials Demo