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:
AsphaltasphaltColor: 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.BloblightColor: rgba color object for the light color.darkColor: rgba color object for the dark color.frequency: Number that controls the frequency of the pattern.BrickbrickColor: 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.CementcementColor: 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.Erosioncolor: diffuse color and alpha.time: Time of erosion. 1.0 is no erosion; 0.0 is fully eroded.FacetlightColor: rgba color object for the light color.darkColor: rgba color object for the dark color.frequency: Number that controls the frequency of the pattern.GrassgrassColor: 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.TieDyelightColor: rgba color object for the light color.darkColor: rgba color object for the dark color.frequency: Number that controls the frequency of the pattern.WoodlightWoodColor: 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/MaterialPackdirectory.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.
