Merge pull request #1522 from AnalyticalGraphicsInc/materialUniforms

Material.fromType uniforms

Apps/Sandcastle/gallery/Animations.html

@@ -67,15 +67,15 @@
                 Cesium.Matrix4.fromTranslation(new Cesium.Cartesian3(200000.0, 0.0, -3000000.0)),
                 modelMatrix);
 
-        var material = Cesium.Material.fromType('Stripe'); // Use default colors
-        material.uniforms.repeat = 10;
         var sensors = new Cesium.SensorVolumeCollection();
         rectangularSensor = sensors.addRectangularPyramid({
             modelMatrix : modelMatrix,
             radius : 10000000.0,
             xHalfAngle : Cesium.Math.toRadians(30.0),
             yHalfAngle : Cesium.Math.toRadians(20.0),
-            material : material
+            material : Cesium.Material.fromType('Stripe', {
+                repeat : 10
+            })
         });
         primitives.add(sensors);
     }

Apps/Sandcastle/gallery/Geometry and Appearances.html

@@ -817,13 +817,13 @@
             positions : positions
         })
     });
-    var wallMaterial = Cesium.Material.fromType('Checkerboard');
-    wallMaterial.uniforms.repeat = new Cesium.Cartesian2(20.0, 6.0);
 
     scene.primitives.add(new Cesium.Primitive({
         geometryInstances : wallInstance,
         appearance : new Cesium.MaterialAppearance({
-            material : wallMaterial
+            material : Cesium.Material.fromType('Checkerboard', {
+                repeat : new Cesium.Cartesian2(20.0, 6.0)
+            })
         })
     }));
 

Apps/Sandcastle/gallery/Materials.html

@@ -372,15 +372,17 @@
 
     function applyPolylineGlowMaterial(primitive, scene) {
         Sandcastle.declare(applyPolylineGlowMaterial);  // For highlighting in Sandcastle.
-        var material = Cesium.Material.fromType('PolylineGlow');
-        material.uniforms.innerWidth = primitive.getWidth() / 2.0;
+        var material = Cesium.Material.fromType('PolylineGlow', {
+            innerWidth : primitive.getWidth() / 2.0
+        });
         primitive.setMaterial(material);
     }
 
     function applyPolylineOutlineMaterial(primitive, scene) {
         Sandcastle.declare(applyPolylineOutlineMaterial);  // For highlighting in Sandcastle.
-        var material = Cesium.Material.fromType('PolylineOutline');
-        material.uniforms.outlineWidth = primitive.getWidth() / 2.0;
+        var material = Cesium.Material.fromType('PolylineOutline', {
+            outlineWidth : primitive.getWidth() / 2.0
+        });
         primitive.setMaterial(material);
     }
 

Apps/Sandcastle/gallery/Polygons.html

@@ -48,9 +48,10 @@
                 Cesium.Math.toRadians(-90.0),
                 Cesium.Math.toRadians(20.0)),
             rotation : Cesium.Math.toRadians(45),
-            material : Cesium.Material.fromType(Cesium.Material.ColorType)
+            material : Cesium.Material.fromType(Cesium.Material.ColorType, {
+                color : new Cesium.Color(1.0, 0.0, 1.0, 0.75)
+            })
         }));
-        polygon.material.uniforms.color = new Cesium.Color(1.0, 0.0, 1.0, 0.75);
         Sandcastle.declare(polygon);
 
         // Create a nested polygon with holes
@@ -88,9 +89,10 @@
         };
         var polygonHierarchy = primitives.add(new Cesium.Polygon({
             polygonHierarchy : hierarchy,
-            material : Cesium.Material.fromType('Color')
+            material : Cesium.Material.fromType('Color', {
+                color : new Cesium.Color(0.0, 1.0, 1.0, 0.75)
+            })
         }));
-        polygonHierarchy.material.uniforms.color = new Cesium.Color(0.0, 1.0, 1.0, 0.75);
         Sandcastle.declare(polygonHierarchy);   // For highlighting on mouseover in Sandcastle.
 
         // Create a polygon from an extent

Apps/Sandcastle/gallery/Polylines.html

@@ -32,54 +32,58 @@
         var polylines = new Cesium.PolylineCollection();
 
         // A simple polyline with two points.
-        var polyline = polylines.add();
+        var polyline = polylines.add({
+            positions : ellipsoid.cartographicArrayToCartesianArray([
+                Cesium.Cartographic.fromDegrees(-120.0, 40.0),
+                Cesium.Cartographic.fromDegrees(-110.0, 30.0)
+            ]),
+            material : Cesium.Material.fromType('Color', {
+                color : new Cesium.Color(1.0, 1.0, 1.0, 1.0)
+            })
+        });
         Sandcastle.declare(polyline);   // For highlighting on mouseover in Sandcastle.
-        polyline.setPositions(ellipsoid.cartographicArrayToCartesianArray([
-            Cesium.Cartographic.fromDegrees(-120.0, 40.0),
-            Cesium.Cartographic.fromDegrees(-110.0, 30.0)
-        ]));
-        var colorMaterial = Cesium.Material.fromType('Color');
-        colorMaterial.uniforms.color = new Cesium.Color(1.0, 1.0, 1.0, 1.0);
-        polyline.setMaterial(colorMaterial);
 
         // Apply a polyline outline material
-        var widePolyline = polylines.add();
+        var widePolyline = polylines.add({
+            positions : ellipsoid.cartographicArrayToCartesianArray([
+                Cesium.Cartographic.fromDegrees(-105.0, 40.0),
+                Cesium.Cartographic.fromDegrees(-100.0, 38.0),
+                Cesium.Cartographic.fromDegrees(-105.0, 35.0),
+                Cesium.Cartographic.fromDegrees(-100.0, 32.0)
+            ]),
+            material : Cesium.Material.fromType(Cesium.Material.PolylineOutlineType, {
+                outlineWidth : 5.0
+            }),
+            width : 10.0
+        });
         Sandcastle.declare(widePolyline);   // For highlighting on mouseover in Sandcastle.
-        widePolyline.setPositions(ellipsoid.cartographicArrayToCartesianArray([
-            Cesium.Cartographic.fromDegrees(-105.0, 40.0),
-            Cesium.Cartographic.fromDegrees(-100.0, 38.0),
-            Cesium.Cartographic.fromDegrees(-105.0, 35.0),
-            Cesium.Cartographic.fromDegrees(-100.0, 32.0)
-        ]));
-        var outlineMaterial = Cesium.Material.fromType(Cesium.Material.PolylineOutlineType);
-        outlineMaterial.uniforms.outlineWidth = 5.0;
-        widePolyline.setMaterial(outlineMaterial);
-        widePolyline.setWidth(10.0);
 
         // Apply a polyline glow material
-        var coloredPolyline = polylines.add();
+        var coloredPolyline = polylines.add({
+            positions : ellipsoid.cartographicArrayToCartesianArray([
+                Cesium.Cartographic.fromDegrees(-95.0, 30.0),
+                Cesium.Cartographic.fromDegrees(-85.0, 40.0)
+            ]),
+            material : Cesium.Material.fromType(Cesium.Material.PolylineGlowType, {
+                innerWidth : 3.0,
+                color : new Cesium.Color(1.0, 0.5, 0.0, 1.0)
+            }),
+            width : 10.0
+        });
         Sandcastle.declare(coloredPolyline);    // For highlighting on mouseover in Sandcastle.
-        coloredPolyline.setPositions(ellipsoid.cartographicArrayToCartesianArray([
-            Cesium.Cartographic.fromDegrees(-95.0, 30.0),
-            Cesium.Cartographic.fromDegrees(-85.0, 40.0)
-        ]));
-        var glowMaterial = Cesium.Material.fromType(Cesium.Material.PolylineGlowType);
-        glowMaterial.uniforms.innerWidth = 3.0;
-        glowMaterial.uniforms.color = new Cesium.Color(1.0, 0.5, 0.0, 1.0);
-        coloredPolyline.setMaterial(glowMaterial);
-        coloredPolyline.setWidth(10.0);
 
         // A polyline loop
-        var loopPolyline = polylines.add();
+        var loopPolyline = polylines.add({
+            positions : ellipsoid.cartographicArrayToCartesianArray([
+                Cesium.Cartographic.fromDegrees(-105.0, 30.0),
+                Cesium.Cartographic.fromDegrees(-105.0, 25.0),
+                Cesium.Cartographic.fromDegrees(-100.0, 22.0),
+                Cesium.Cartographic.fromDegrees(-100.0, 28.0)
+            ]),
+            width : 3.0,
+            loop : true
+        });
         Sandcastle.declare(loopPolyline);   // For highlighting on mouseover in Sandcastle.
-        loopPolyline.setPositions(ellipsoid.cartographicArrayToCartesianArray([
-            Cesium.Cartographic.fromDegrees(-105.0, 30.0),
-            Cesium.Cartographic.fromDegrees(-105.0, 25.0),
-            Cesium.Cartographic.fromDegrees(-100.0, 22.0),
-            Cesium.Cartographic.fromDegrees(-100.0, 28.0)
-        ]));
-        loopPolyline.setWidth(3.0);
-        loopPolyline.setLoop(true);
 
         primitives.add(polylines);
 
@@ -88,15 +92,16 @@
         var localPolylines = new Cesium.PolylineCollection();
         var center = ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(-80.0, 35.0));
         localPolylines.modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(center);
-        var localPolyline = localPolylines.add();
+
+        var localPolyline = localPolylines.add({
+            positions : [
+                new Cesium.Cartesian3(0.0, 0.0, 0.0),
+                new Cesium.Cartesian3(1000000.0, 0.0, 0.0)
+            ],
+            width : 10.0,
+            material : Cesium.Material.fromType(Cesium.Material.PolylineArrowType)
+        });
         Sandcastle.declare(localPolyline);  // For highlighting on mouseover in Sandcastle.
-        localPolyline.setPositions([
-            new Cesium.Cartesian3(0.0, 0.0, 0.0),
-            new Cesium.Cartesian3(1000000.0, 0.0, 0.0)
-        ]);
-        localPolyline.setWidth(10.0);
-        var arrowMaterial = Cesium.Material.fromType(Cesium.Material.PolylineArrowType);
-        localPolyline.setMaterial(arrowMaterial);
         primitives.add(localPolylines);
     }
 

CHANGES.md

@@ -118,6 +118,7 @@ Beta Releases
 * `RequestErrorEvent` now includes the headers that were returned with the error response.
 * Added `AssociativeArray`, which is a helper class for maintaining a hash of objects that also needs to be iterated often.
 * Added `TimeIntervalCollection.getChangedEvent` which returns an event that will be raised whenever intervals are updated.
+* Added a second parameter to `Material.fromType` to override default uniforms. [#1522](https://github.com/AnalyticalGraphicsInc/cesium/pull/1522)
 * Added `Intersections2D` class containing operations on 2D triangles.
 * Added `czm_inverseViewProjection` and `czm_inverseModelViewProjection` automatic GLSL uniform.
 

Source/Scene/ExtentPrimitive.js

@@ -129,8 +129,9 @@ define([
          */
         this.show = defaultValue(options.show, true);
 
-        var material = Material.fromType(Material.ColorType);
-        material.uniforms.color = new Color(1.0, 1.0, 0.0, 0.5);
+        var material = Material.fromType(Material.ColorType, {
+            color : new Color(1.0, 1.0, 0.0, 0.5)
+        });
 
         /**
          * The surface appearance of the primitive.  This can be one of several built-in {@link Material} objects or a custom material, scripted with

Source/Scene/Material.js

@@ -351,27 +351,39 @@ define([
      * Shorthand for: new Material({fabric : {type : type}});
      *
      * @param {String} type The base material type.
+     * @param {Object} [uniforms] Overrides for the default uniforms.
      *
      * @returns {Material} New material object.
      *
      * @exception {DeveloperError} material with that type does not exist.
      *
      * @example
-     * var material = Cesium.Material.fromType('Color');
-     * material.uniforms.color = vec4(1.0, 0.0, 0.0, 1.0);
+     * var material = Cesium.Material.fromType('Color', {
+     *     color : new Cesium.Color(1.0, 0.0, 0.0, 1.0)
+     * });
      */
-    Material.fromType = function(type) {
+    Material.fromType = function(type, uniforms) {
         //>>includeStart('debug', pragmas.debug);
         if (!defined(Material._materialCache.getMaterial(type))) {
             throw new DeveloperError('material with type \'' + type + '\' does not exist.');
         }
         //>>includeEnd('debug');
 
-        return new Material({
+        var material = new Material({
             fabric : {
                 type : type
             }
         });
+
+        if (defined(uniforms)) {
+            for (var name in uniforms) {
+                if (uniforms.hasOwnProperty(name)) {
+                    material.uniforms[name] = uniforms[name];
+                }
+            }
+        }
+
+        return material;
     };
 
     Material.prototype.isTranslucent = function() {

Source/Scene/Polygon.js

@@ -128,8 +128,9 @@ define([
          */
         this.show = defaultValue(options.show, true);
 
-        var material = Material.fromType(Material.ColorType);
-        material.uniforms.color = new Color(1.0, 1.0, 0.0, 0.5);
+        var material = Material.fromType(Material.ColorType, {
+            color : new Color(1.0, 1.0, 0.0, 0.5)
+        });
 
         /**
          * The surface appearance of the primitive.  This can be one of several built-in {@link Material} objects or a custom material, scripted with

Source/Scene/Polyline.js

@@ -47,8 +47,9 @@ define([
 
         this._material = options.material;
         if (!defined(this._material)) {
-            this._material = Material.fromType(Material.ColorType);
-            this._material.uniforms.color = new Color(1.0, 1.0, 1.0, 1.0);
+            this._material = Material.fromType(Material.ColorType, {
+                color : new Color(1.0, 1.0, 1.0, 1.0)
+            });
         }
 
         var positions = options.positions;

Source/Scene/ViewportQuad.js

@@ -81,8 +81,9 @@ define([
         this.rectangle = BoundingRectangle.clone(rectangle);
 
         if (!defined(material)) {
-            material = Material.fromType(Material.ColorType);
-            material.uniforms.color = new Color(1.0, 1.0, 1.0, 1.0);
+            material = Material.fromType(Material.ColorType, {
+                color : new Color(1.0, 1.0, 1.0, 1.0)
+            });
         }
 
         /**

Specs/Scene/MaterialSpec.js

@@ -451,12 +451,23 @@ defineSuite([
         expect(pixel).not.toEqual([0, 0, 0, 0]);
     });
 
+    it('create material using fromType and overide default uniforms', function() {
+        var material1 = Material.fromType('Color', {
+            color : new Color(0.0, 1.0, 0.0, 1.0)
+        });
+
+        var pixel = renderMaterial(material1);
+        expect(pixel).toEqual([0, 255, 0, 255]);
+    });
+
     it('create multiple materials from the same type', function() {
-        var material1 = Material.fromType('Color');
-        material1.uniforms.color = new Color(0.0, 1.0, 0.0, 1.0);
+        var material1 = Material.fromType('Color', {
+            color : new Color(0.0, 1.0, 0.0, 1.0)
+        });
 
-        var material2 = Material.fromType('Color');
-        material2.uniforms.color = new Color(0.0, 0.0, 1.0, 1.0);
+        var material2 = Material.fromType('Color', {
+            color : new Color(0.0, 0.0, 1.0, 1.0)
+        });
 
         expect(material1.shaderSource).toEqual(material2.shaderSource);