Cesium Material Pack: A plugin with procedurally-shaded materials such as bricks, wood, and noise patterns.
Check out the demo.
Cesium version: Tested against b24. Most likely works with older and newer versions. Post a message to the Cesium forum if you have compatibility issues.
License: Apache 2.0. Free for commercial and non-commercial use. See LICENSE.md.
Usage
Prebuilt minified and unminified versions of the plugin are in the Build directory. Include the .js
file using a script
tag and call initialize
with the the global Cesium
object as the argument.
<script type="text/javascript" src="path/to/Cesium.js" />
<script type="text/javascript" src="path/to/MaterialPack.js" />
<script type="text/javascript">
// ...
MaterialPack.initialize(Cesium);
// ...
var primitives = scene.getPrimitives();
primitives.add(new Cesium.ExtentPrimitive({
extent : new Cesium.Extent(
Cesium.Math.toRadians(-120.0),
Cesium.Math.toRadians(20.0),
Cesium.Math.toRadians(-60.0),
Cesium.Math.toRadians(40.0)),
material : Cesium.Material.fromType('Brick')
}));
</script>
Uniforms are used to change material properties. For example:
extent.material = new Cesium.Material({
fabric : {
type : 'Wood',
uniforms : {
lightWoodColor : new Cesium.Color( 0.7, 0.4, 0.1, 1.0),
darkWoodColor : new Cesium.Color( 0.3, 0.1, 0.0, 1.0),
ringFrequency : 4.0,
noiseScale : new Cesium.Cartesian2(0.4, 0.8),
grainFrequency : 18.0
}
}
});
Material uniforms:
Asphalt
asphaltColor
: rgba color object for the asphalt's color.bumpSize
: Number for the size of the asphalt's bumps.roughness
: Number that controls how rough the asphalt looks.Blob
lightColor
: rgba color object for the light color.darkColor
: rgba color object for the dark color.frequency
: Number that controls the frequency of the pattern.Brick
brickColor
: rgba color object for the brick color.mortarColor
: rgba color object for the mortar color.brickSize
: Number between 0.0 and 1.0 where 0.0 is many small bricks and 1.0 is one large brick.brickPct
: Number for the ratio of brick to mortar where 0.0 is all mortar and 1.0 is all brick.brickRoughness
: Number between 0.0 and 1.0 representing how rough the brick looks.mortarRoughness
: Number between 0.0 and 1.0 representing how rough the mortar looks.Cement
cementColor
: rgba color object for the cement's color.grainScale
: Number for the size of rock grains in the cement.roughness
: Number that controls how rough the cement looks.Erosion
color
: diffuse color and alpha.time
: Time of erosion. 1.0 is no erosion; 0.0 is fully eroded.Facet
lightColor
: rgba color object for the light color.darkColor
: rgba color object for the dark color.frequency
: Number that controls the frequency of the pattern.Grass
grassColor
: rgba color object for the grass' color.dirtColor
: rgba color object for the dirt's color.patchiness
: Number that controls the size of the color patches in the grass.TieDye
lightColor
: rgba color object for the light color.darkColor
: rgba color object for the dark color.frequency
: Number that controls the frequency of the pattern.Wood
lightWoodColor
: rgba color object for the wood's base color.darkWoodColor
: rgba color object for the color of rings in the wood.ringFrequency
: Number for the frequency of rings in the wood.noiseScale
: Object with x and y values specifying the noisiness of the ring patterns in both directions.grainFrequency
: Number for the frequency of grains in the wood.
For more on how to use Cesium materials, see code for the example and the Fabric tutorial. To run the example locally, run a server from the root directory and browse to localhost:port/Example
.
Build
The following targets can be built:
build
- A fast, developer-oriented build that prepares the source tree for use as standard Asynchronous Module Definition (AMD) modules.combine
- Runsbuild
, plus uses NodeJS to run the RequireJS optimizer to combine Cesium materials and the Almond AMD loader to produce an all-in-one file in theBuild/MaterialPack
directory.minify
- Runscombine
, plus [minifies](http://en.wikipedia.org/wiki/Minification_(programming\)) MaterialPack.js using UglifyJS2 for a smaller deployable file.clean
- Removes all generated build artifacts.
Specify the target(s) at the command line:
./Tools/apache-ant-1.8.2/bin/ant [target-name] [another-target-name] ...
Contributions
Contributions welcome. We use the same CLA as Cesium. Please email yours before opening a pull request.