Skip to content

A Cesium plugin with procedurally-shaded materials such as bricks, wood, and noise patterns

License

Notifications You must be signed in to change notification settings

kaktus40/cesium-materials-pack

 
 

Repository files navigation

Cesium Material Pack: A plugin with procedurally-shaded materials such as bricks, wood, and noise patterns.

Check out the demo.

Name Screenshot Description
Asphalt Asphalt generated with a combination of simplex and cellular noise.
Blob Blob generated with cellular noise. Resembles water, but clumped in a cell pattern.
Brick Brick generated with a combination of a simple brick pattern and simplex noise for roughness.
Cement Cement generated with simplex noise.
Erosion Animated erosion.
Facet Facet generated with cellular noise.
Grass Grass generated with simplex noise.
TieDye Tie-dye generated with simplex noise.
Wood Wood generated with simplex noise.

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:

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.

About

A Cesium plugin with procedurally-shaded materials such as bricks, wood, and noise patterns

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published