Skip to content

Commit

Permalink
Use ColorBlendMode instead of always Mix
Browse files Browse the repository at this point in the history
  • Loading branch information
@lilleyse
lilleyse committed Dec 6, 2016
1 parent 77ace36 commit c61cb1e
Show file tree
Hide file tree
Showing 9 changed files with 279 additions and 146 deletions.
66 changes: 44 additions & 22 deletions Apps/Sandcastle/gallery/3D Models.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,24 +35,25 @@
<div id="toolbar">
<table><tbody>
<tr>
<td>Blend Amount</td>
<td>
<input type="range" min="0.0" max="1.0" step="0.01" data-bind="value: blendAmount, valueUpdate: 'input'">
<input type="text" size="5" data-bind="value: blendAmount">
</td>
<td>Mode</td>
<td><select data-bind="options: colorBlendModes, value: colorBlendMode"></select></td>
</tr>
<tr>
<td>Color</td>
<td><select data-bind="options: colors, value: color"></select></td>
</tr>
<tr>
<td>Blend Color</td>
<td>Alpha</td>
<td>
<input type="range" min="0.0" max="1.0" step="0.01" data-bind="value: blendColor, valueUpdate: 'input'">
<input type="text" size="5" data-bind="value: blendColor">
<input type="range" min="0.0" max="1.0" step="0.01" data-bind="value: alpha, valueUpdate: 'input'">
<input type="text" size="5" data-bind="value: alpha">
</td>
</tr>
<tr>
<td>Blend Alpha</td>
<td data-bind="style: { color: colorBlendAmountEnabled ? '' : 'gray'}">Mix</td>
<td>
<input type="range" min="0.0" max="1.0" step="0.01" data-bind="value: blendAlpha, valueUpdate: 'input'">
<input type="text" size="5" data-bind="value: blendAlpha">
<input type="range" min="0.0" max="1.0" step="0.01" data-bind="value: colorBlendAmount, valueUpdate: 'input', enable: colorBlendAmountEnabled">
<input type="text" size="5" data-bind="value: colorBlendAmount, enable: colorBlendAmountEnabled">
</td>
</tr>
</tbody></table>
Expand All @@ -69,11 +70,23 @@

var entity;

function getColorBlendMode(colorBlendMode) {
return Cesium.ColorBlendMode[colorBlendMode.toUpperCase()];
}

function getColor(color) {
return Cesium.Color[color.toUpperCase()];
}

// The viewModel tracks the state of our mini application.
var viewModel = {
blendAmount : 0.0,
blendColor : 0.0,
blendAlpha : 1.0
color : 'White',
colors : ['White', 'Red', 'Green', 'Blue', 'Yellow', 'Gray'],
alpha : 1.0,
colorBlendMode : 'Highlight',
colorBlendModes : ['Highlight', 'Replace', 'Mix'],
colorBlendAmount : 0.5,
colorBlendAmountEnabled : false
};

// Convert the viewModel members into knockout observables.
Expand All @@ -83,21 +96,29 @@
var toolbar = document.getElementById('toolbar');
Cesium.knockout.applyBindings(viewModel, toolbar);

Cesium.knockout.getObservable(viewModel, 'blendAmount').subscribe(
Cesium.knockout.getObservable(viewModel, 'color').subscribe(
function(newValue) {
entity.model.color = Cesium.Color.fromAlpha(getColor(newValue), viewModel.alpha);
}
);

Cesium.knockout.getObservable(viewModel, 'alpha').subscribe(
function(newValue) {
entity.model.blendAmount = newValue;
entity.model.color = Cesium.Color.fromAlpha(getColor(viewModel.color), newValue);
}
);

Cesium.knockout.getObservable(viewModel, 'blendColor').subscribe(
Cesium.knockout.getObservable(viewModel, 'colorBlendMode').subscribe(
function(newValue) {
entity.model.blendColor = Cesium.Color.fromHsl(newValue, 1.0, 0.5, viewModel.blendAlpha);
var colorBlendMode = getColorBlendMode(newValue);
entity.model.colorBlendMode = colorBlendMode;
viewModel.colorBlendAmountEnabled = (colorBlendMode === Cesium.ColorBlendMode.MIX);
}
);

Cesium.knockout.getObservable(viewModel, 'blendAlpha').subscribe(
Cesium.knockout.getObservable(viewModel, 'colorBlendAmount').subscribe(
function(newValue) {
entity.model.blendColor = Cesium.Color.fromHsl(viewModel.blendColor, 1.0, 0.5, newValue);
entity.model.colorBlendAmount = newValue;
}
);

Expand All @@ -119,8 +140,9 @@
uri : url,
minimumPixelSize : 128,
maximumScale : 20000,
blendAmount : viewModel.blendAmount,
blendColor : Cesium.Color.fromHsl(viewModel.blendColor, 1.0, 0.5, viewModel.blendAlpha)
color : Cesium.Color.fromAlpha(getColor(viewModel.color), viewModel.alpha),
colorBlendMode : getColorBlendMode(viewModel.colorBlendMode),
colorBlendAmount : viewModel.colorBlendAmount
}
});
viewer.trackedEntity = entity;
Expand Down
66 changes: 44 additions & 22 deletions Apps/Sandcastle/gallery/development/3D Models.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,24 +35,25 @@
<div id="toolbar">
<table><tbody>
<tr>
<td>Blend Amount</td>
<td>
<input type="range" min="0.0" max="1.0" step="0.01" data-bind="value: blendAmount, valueUpdate: 'input'">
<input type="text" size="5" data-bind="value: blendAmount">
</td>
<td>Mode</td>
<td><select data-bind="options: colorBlendModes, value: colorBlendMode"></select></td>
</tr>
<tr>
<td>Color</td>
<td><select data-bind="options: colors, value: color"></select></td>
</tr>
<tr>
<td>Blend Color</td>
<td>Alpha</td>
<td>
<input type="range" min="0.0" max="1.0" step="0.01" data-bind="value: blendColor, valueUpdate: 'input'">
<input type="text" size="5" data-bind="value: blendColor">
<input type="range" min="0.0" max="1.0" step="0.01" data-bind="value: alpha, valueUpdate: 'input'">
<input type="text" size="5" data-bind="value: alpha">
</td>
</tr>
<tr>
<td>Blend Alpha</td>
<td data-bind="style: { color: colorBlendAmountEnabled ? '' : 'gray'}">Mix</td>
<td>
<input type="range" min="0.0" max="1.0" step="0.01" data-bind="value: blendAlpha, valueUpdate: 'input'">
<input type="text" size="5" data-bind="value: blendAlpha">
<input type="range" min="0.0" max="1.0" step="0.01" data-bind="value: colorBlendAmount, valueUpdate: 'input', enable: colorBlendAmountEnabled">
<input type="text" size="5" data-bind="value: colorBlendAmount, enable: colorBlendAmountEnabled">
</td>
</tr>
</tbody></table>
Expand All @@ -68,11 +69,23 @@
var scene = viewer.scene;
var model;

function getColorBlendMode(colorBlendMode) {
return Cesium.ColorBlendMode[colorBlendMode.toUpperCase()];
}

function getColor(color) {
return Cesium.Color[color.toUpperCase()];
}

// The viewModel tracks the state of our mini application.
var viewModel = {
blendAmount : 0.0,
blendColor : 0.0,
blendAlpha : 1.0
color : 'White',
colors : ['White', 'Red', 'Green', 'Blue', 'Yellow', 'Gray'],
alpha : 1.0,
colorBlendMode : 'Highlight',
colorBlendModes : ['Highlight', 'Replace', 'Mix'],
colorBlendAmount : 0.5,
colorBlendAmountEnabled : false
};

// Convert the viewModel members into knockout observables.
Expand All @@ -82,21 +95,29 @@
var toolbar = document.getElementById('toolbar');
Cesium.knockout.applyBindings(viewModel, toolbar);

Cesium.knockout.getObservable(viewModel, 'blendAmount').subscribe(
Cesium.knockout.getObservable(viewModel, 'color').subscribe(
function(newValue) {
model.color = Cesium.Color.fromAlpha(getColor(newValue), viewModel.alpha);
}
);

Cesium.knockout.getObservable(viewModel, 'alpha').subscribe(
function(newValue) {
model.blendAmount = newValue;
model.color = Cesium.Color.fromAlpha(getColor(viewModel.color), newValue);
}
);

Cesium.knockout.getObservable(viewModel, 'blendColor').subscribe(
Cesium.knockout.getObservable(viewModel, 'colorBlendMode').subscribe(
function(newValue) {
model.blendColor = Cesium.Color.fromHsl(newValue, 1.0, 0.5, viewModel.blendAlpha);
var colorBlendMode = getColorBlendMode(newValue);
model.colorBlendMode = colorBlendMode;
viewModel.colorBlendAmountEnabled = (colorBlendMode === Cesium.ColorBlendMode.MIX);
}
);

Cesium.knockout.getObservable(viewModel, 'blendAlpha').subscribe(
Cesium.knockout.getObservable(viewModel, 'colorBlendAmount').subscribe(
function(newValue) {
model.blendColor = Cesium.Color.fromHsl(viewModel.blendColor, 1.0, 0.5, newValue);
model.colorBlendAmount = newValue;
}
);

Expand All @@ -118,8 +139,9 @@
}));

model.readyPromise.then(function(model) {
model.blendAmount = viewModel.blendAmount;
model.blendColor = Cesium.Color.fromHsl(viewModel.blendColor, 1.0, 0.5, viewModel.blendAlpha);
model.color = Cesium.Color.fromAlpha(getColor(viewModel.color), viewModel.alpha);
model.colorBlendMode = getColorBlendMode(viewModel.colorBlendMode);
model.colorBlendAmount = viewModel.colorBlendAmount;
// Play and loop all animations at half-speed
model.activeAnimations.addAll({
speedup : 0.5,
Expand Down
9 changes: 7 additions & 2 deletions Source/DataSources/CzmlDataSource.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ define([
'../Core/Spherical',
'../Core/TimeInterval',
'../Core/TimeIntervalCollection',
'../Scene/ColorBlendMode',
'../Scene/HeightReference',
'../Scene/HorizontalOrigin',
'../Scene/LabelStyle',
Expand Down Expand Up @@ -118,6 +119,7 @@ define([
Spherical,
TimeInterval,
TimeIntervalCollection,
ColorBlendMode,
HeightReference,
HorizontalOrigin,
LabelStyle,
Expand Down Expand Up @@ -430,6 +432,8 @@ define([
return unwrapCartesianInterval(czmlInterval);
case Color:
return unwrapColorInterval(czmlInterval);
case ColorBlendMode:
return ColorBlendMode[defaultValue(czmlInterval.colorBlendMode, czmlInterval)];
case CornerType:
return CornerType[defaultValue(czmlInterval.cornerType, czmlInterval)];
case HeightReference:
Expand Down Expand Up @@ -1413,8 +1417,9 @@ define([
processPacketData(Boolean, model, 'runAnimations', modelData.runAnimations, interval, sourceUri, entityCollection);
processPacketData(ShadowMode, model, 'shadows', modelData.shadows, interval, sourceUri, entityCollection);
processPacketData(HeightReference, model, 'heightReference', modelData.heightReference, interval, sourceUri, entityCollection);
processPacketData(Color, model, 'blendColor', modelData.blendColor, interval, sourceUri, entityCollection);
processPacketData(Number, model, 'blendAmount', modelData.blendAmount, interval, sourceUri, entityCollection);
processPacketData(Color, model, 'color', modelData.color, interval, sourceUri, entityCollection);
processPacketData(ColorBlendMode, model, 'colorBlendMode', modelData.colorBlendMode, interval, sourceUri, entityCollection);
processPacketData(Number, model, 'colorBlendAmount', modelData.colorBlendAmount, interval, sourceUri, entityCollection);

var nodeTransformationsData = modelData.nodeTransformations;
if (defined(nodeTransformationsData)) {
Expand Down
47 changes: 31 additions & 16 deletions Source/DataSources/ModelGraphics.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,10 @@ define([
* @param {Property} [options.shadows=ShadowMode.ENABLED] An enum Property specifying whether the model casts or receives shadows from each light source.
* @param {Property} [options.heightReference=HeightReference.NONE] A Property specifying what the height is relative to.
* @param {Property} [options.distanceDisplayCondition] A Property specifying at what distance from the camera that this model will be displayed.
* @param {Property} [options.blendColor=Color.RED] A Property specifying the {@link Color} that blends with the model's rendered color.
* @param {Property} [options.blendAmount=0.0] A numeric Property specifying a value used to mix between the render color and blend color. A value of 0.0 results in no blending while a value of 1.0 results in a solid blend color.
* @param {Property} [options.color=Color.RED] A Property specifying the {@link Color} that blends with the model's rendered color.
* @param {Property} [options.colorBlendMode=ColorBlendMode.HIGHLIGHT] An enum Property specifying how the color blends with the model.
* @param {Property} [options.colorBlendAmount=0.5] A numeric Property specifying the color strength when the <code>colorBlendMode</code> is <code>MIX</code>. A value of 0.0 results in the model's rendered color while a value of 1.0 results in a solid color, with any value in-between resulting in a mix of the two.
*
* @see {@link http://cesiumjs.org/2014/03/03/Cesium-3D-Models-Tutorial/|3D Models Tutorial}
* @demo {@link http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=3D%20Models.html|Cesium Sandcastle 3D Models Demo}
*/
Expand All @@ -78,10 +80,12 @@ define([
this._heightReferenceSubscription = undefined;
this._distanceDisplayCondition = undefined;
this._distanceDisplayConditionSubscription = undefined;
this._blendColor = undefined;
this._blendColorSubscription = undefined;
this._blendAmount = undefined;
this._blendAmountSubscription = undefined;
this._color = undefined;
this._colorSubscription = undefined;
this._colorBlendMode = undefined;
this._colorBlendModeSubscription = undefined;
this._colorBlendAmount = undefined;
this._colorBlendAmountSubscription = undefined;
this._definitionChanged = new Event();

this.merge(defaultValue(options, defaultValue.EMPTY_OBJECT));
Expand Down Expand Up @@ -194,21 +198,30 @@ define([
distanceDisplayCondition : createPropertyDescriptor('distanceDisplayCondition'),

/**
* Gets or sets the Property specifying the {@link Color} color that blends with the model's rendered color.
* Gets or sets the Property specifying the {@link Color} that blends with the model's rendered color.
* @memberof ModelGraphics.prototype
* @type {Property}
* @default Color.RED
*/
blendColor : createPropertyDescriptor('blendColor'),
color : createPropertyDescriptor('color'),

/**
* Gets or sets the numeric Property specifying specifying a value used to mix between the render color
* and blend color. A value of 0.0 results in no blending while a value of 1.0 results in a solid blend color.
* Gets or sets the enum Property specifying how the color blends with the model.
* @memberof ModelGraphics.prototype
* @type {Property}
* @default 0.0
* @default ColorBlendMode.HIGHLIGHT
*/
colorBlendMode : createPropertyDescriptor('colorBlendMode'),

/**
* A numeric Property specifying the color strength when the <code>colorBlendMode</code> is MIX.
* A value of 0.0 results in the model's rendered color while a value of 1.0 results in a solid color, with
* any value in-between resulting in a mix of the two.
* @memberof ModelGraphics.prototype
* @type {Property}
* @default 0.5
*/
blendAmount : createPropertyDescriptor('blendAmount')
colorBlendAmount : createPropertyDescriptor('colorBlendAmount')
});

/**
Expand All @@ -232,8 +245,9 @@ define([
result.nodeTransformations = this.nodeTransformations;
result.heightReference = this._heightReference;
result.distanceDisplayCondition = this.distanceDisplayCondition;
result.blendColor = this.blendColor;
result.blendAmount = this.blendAmount;
result.color = this.color;
result.colorBlendMode = this.colorBlendMode;
result.colorBlendAmount = this.colorBlendAmount;

return result;
};
Expand Down Expand Up @@ -261,8 +275,9 @@ define([
this.runAnimations = defaultValue(this.runAnimations, source.runAnimations);
this.heightReference = defaultValue(this.heightReference, source.heightReference);
this.distanceDisplayCondition = defaultValue(this.distanceDisplayCondition, source.distanceDisplayCondition);
this.blendColor = defaultValue(this.blendColor, source.blendColor);
this.blendAmount = defaultValue(this.blendAmount, source.blendAmount);
this.color = defaultValue(this.color, source.color);
this.colorBlendMode = defaultValue(this.colorBlendMode, source.colorBlendMode);
this.colorBlendAmount = defaultValue(this.colorBlendAmount, source.colorBlendAmount);

var sourceNodeTransformations = source.nodeTransformations;
if (defined(sourceNodeTransformations)) {
Expand Down
12 changes: 8 additions & 4 deletions Source/DataSources/ModelVisualizer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ define([
'../Core/destroyObject',
'../Core/DeveloperError',
'../Core/Matrix4',
'../Scene/ColorBlendMode',
'../Scene/HeightReference',
'../Scene/Model',
'../Scene/ModelAnimationLoop',
Expand All @@ -21,6 +22,7 @@ define([
destroyObject,
DeveloperError,
Matrix4,
ColorBlendMode,
HeightReference,
Model,
ModelAnimationLoop,
Expand All @@ -34,8 +36,9 @@ define([
var defaultIncrementallyLoadTextures = true;
var defaultShadows = ShadowMode.ENABLED;
var defaultHeightReference = HeightReference.NONE;
var defaultBlendColor = Color.RED;
var defaultBlendAmount = 0.0;
var defaultColor = Color.WHITE;
var defaultColorBlendMode = ColorBlendMode.HIGHLIGHT;
var defaultColorBlendAmount = 0.5;

var color = new Color();
var modelMatrixScratch = new Matrix4();
Expand Down Expand Up @@ -144,8 +147,9 @@ define([
model.shadows = Property.getValueOrDefault(modelGraphics._shadows, time, defaultShadows);
model.heightReference = Property.getValueOrDefault(modelGraphics._heightReference, time, defaultHeightReference);
model.distanceDisplayCondition = Property.getValueOrUndefined(modelGraphics._distanceDisplayCondition, time);
model.blendColor = Property.getValueOrDefault(modelGraphics._blendColor, time, defaultBlendColor, color);
model.blendAmount = Property.getValueOrDefault(modelGraphics._blendAmount, time, defaultBlendAmount);
model.color = Property.getValueOrDefault(modelGraphics._color, time, defaultColor, color);
model.colorBlendMode = Property.getValueOrDefault(modelGraphics._colorBlendMode, time, defaultColorBlendMode);
model.colorBlendAmount = Property.getValueOrDefault(modelGraphics._colorBlendAmount, time, defaultColorBlendAmount);

if (model.ready) {
var runAnimations = Property.getValueOrDefault(modelGraphics._runAnimations, time, true);
Expand Down
Loading

0 comments on commit c61cb1e

Please sign in to comment.