Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Model coloring #4547

Merged
merged 16 commits into from
Dec 6, 2016
Merged

Model coloring #4547

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
d1d09f9
Added model color
lilleyse Oct 29, 2016
f8d2ac1
Merge branch 'master' into model-color
lilleyse Nov 25, 2016
5c7911d
Updated 3D Models dev Sandcastle
lilleyse Dec 5, 2016
bdc8425
Add to Entity API, CZML, and 3D Models showcase
lilleyse Dec 5, 2016
4bd0ad6
Support alpha in blend color
lilleyse Dec 5, 2016
250874e
Switch render states depending on alpha
lilleyse Dec 5, 2016
dec5b0a
Alpha test
lilleyse Dec 5, 2016
5c20c55
Remove separation of front/back commands
lilleyse Dec 5, 2016
5fcde36
Merge remote-tracking branch 'origin/master' into model-color
pjcozzi Dec 5, 2016
dcf2f2b
Move CHANGES.md update to 1.29
pjcozzi Dec 5, 2016
77ace36
Small fix
lilleyse Dec 6, 2016
84fbd37
Use ColorBlendMode instead of always Mix
lilleyse Dec 6, 2016
5e9e66d
Update CHANGES.md
pjcozzi Dec 6, 2016
cade6fa
Separate model coloring into its own demo
lilleyse Dec 6, 2016
6a60f25
Use ColorBlendMode.getColorBlend function
lilleyse Dec 6, 2016
f23d436
Don't issue command when alpha is 0
lilleyse Dec 6, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 0 additions & 13 deletions .idea/misc.xml
View file
Open in desktop

This file was deleted.

81 changes: 78 additions & 3 deletions Apps/Sandcastle/gallery/3D Models.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,44 @@
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
<style>
@import url(../templates/bucket.css);
#toolbar {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@lilleyse up to you, but do you think that we've made this Sandcastle example too complicated? Would it be better (and more discoverable) to have separate 3D Models and 3D Model Coloring examples?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Plus silhouettes can be combined in that new demo.

background: rgba(42, 42, 42, 0.8);
padding: 4px;
border-radius: 4px;
}
#toolbar input {
vertical-align: middle;
padding-top: 2px;
padding-bottom: 2px;
}
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<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>
</tr>
<tr>
<td>Blend Color</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">
</td>
</tr>
<tr>
<td>Blend Alpha</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">
</td>
</tr>
</tbody></table>
</div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
'use strict';
Expand All @@ -33,6 +67,40 @@
shadows : true
});

var entity;

// The viewModel tracks the state of our mini application.
var viewModel = {
blendAmount : 0.0,
blendColor : 0.0,
blendAlpha : 1.0
};

// Convert the viewModel members into knockout observables.
Cesium.knockout.track(viewModel);

// Bind the viewModel to the DOM elements of the UI that call for it.
var toolbar = document.getElementById('toolbar');
Cesium.knockout.applyBindings(viewModel, toolbar);

Cesium.knockout.getObservable(viewModel, 'blendAmount').subscribe(
function(newValue) {
entity.model.blendAmount = newValue;
}
);

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

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

function createModel(url, height) {
viewer.entities.removeAll();

Expand All @@ -43,14 +111,16 @@
var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);

var entity = viewer.entities.add({
entity = viewer.entities.add({
name : url,
position : position,
orientation : orientation,
model : {
uri : url,
minimumPixelSize : 128,
maximumScale : 20000
maximumScale : 20000,
blendAmount : viewModel.blendAmount,
blendColor : Cesium.Color.fromHsl(viewModel.blendColor, 1.0, 0.5, viewModel.blendAlpha)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do our users think of this as blending? Or just as applying a color to a model like Billboard.color?

What do you think of renaming this to color? I'm not sure what to rename blendAmount to...is there anywhere else in the Cesium API to mirror?

}
});
viewer.trackedEntity = entity;
Expand Down Expand Up @@ -84,6 +154,11 @@
}];

Sandcastle.addToolbarMenu(options);

Sandcastle.addToggleButton('Shadows', viewer.shadows, function(checked) {
viewer.shadows = checked;
});

//Sandcastle_End
Sandcastle.finishedLoading();
}
Expand Down
105 changes: 91 additions & 14 deletions Apps/Sandcastle/gallery/development/3D Models.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,86 @@
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
<style>
@import url(../templates/bucket.css);
#toolbar {
background: rgba(42, 42, 42, 0.8);
padding: 4px;
border-radius: 4px;
}
#toolbar input {
vertical-align: middle;
padding-top: 2px;
padding-bottom: 2px;
}
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<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>
</tr>
<tr>
<td>Blend Color</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">
</td>
</tr>
<tr>
<td>Blend Alpha</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">
</td>
</tr>
</tbody></table>
</div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
'use strict';
//Sandcastle_Begin
var viewer = new Cesium.Viewer('cesiumContainer');
var viewer = new Cesium.Viewer('cesiumContainer', {
shadows : true
});

var scene = viewer.scene;
var model;

// The viewModel tracks the state of our mini application.
var viewModel = {
blendAmount : 0.0,
blendColor : 0.0,
blendAlpha : 1.0
};

// Convert the viewModel members into knockout observables.
Cesium.knockout.track(viewModel);

// Bind the viewModel to the DOM elements of the UI that call for it.
var toolbar = document.getElementById('toolbar');
Cesium.knockout.applyBindings(viewModel, toolbar);

Cesium.knockout.getObservable(viewModel, 'blendAmount').subscribe(
function(newValue) {
model.blendAmount = newValue;
}
);

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

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

function createModel(url, height, heading, pitch, roll) {
height = Cesium.defaultValue(height, 0.0);
Expand All @@ -41,26 +111,28 @@
var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(origin, hpr);

scene.primitives.removeAll(); // Remove previous model
var model = scene.primitives.add(Cesium.Model.fromGltf({
model = scene.primitives.add(Cesium.Model.fromGltf({
url : url,
modelMatrix : modelMatrix,
minimumPixelSize : 128
}));

model.readyPromise.then(function(model) {
model.blendAmount = viewModel.blendAmount;
model.blendColor = Cesium.Color.fromHsl(viewModel.blendColor, 1.0, viewModel.blendAlpha);
// Play and loop all animations at half-speed
model.activeAnimations.addAll({
speedup : 0.5,
loop : Cesium.ModelAnimationLoop.REPEAT
});

var camera = viewer.camera;

// Zoom to model
var controller = scene.screenSpaceCameraController;
var r = 2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near);
controller.minimumZoomDistance = r * 0.5;

var center = Cesium.Matrix4.multiplyByPoint(model.modelMatrix, model.boundingSphere.center, new Cesium.Cartesian3());
var heading = Cesium.Math.toRadians(230.0);
var pitch = Cesium.Math.toRadians(-20.0);
Expand All @@ -74,32 +146,32 @@
handler.setInputAction(function(movement) {
var pick = scene.pick(movement.endPosition);
if (Cesium.defined(pick) && Cesium.defined(pick.node) && Cesium.defined(pick.mesh)) {
// Output glTF node and mesh under the mouse.
// Output glTF node and mesh under the mouse.
console.log('node: ' + pick.node.name + '. mesh: ' + pick.mesh.name);
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

///////////////////////////////////////////////////////////////////////////

var options = [{
text : 'Aircraft',
onselect : function() {
text : 'Aircraft',
onselect : function() {
var height = 5000.0;
var heading = 0.0;
var pitch = Cesium.Math.toRadians(10.0);
var roll = Cesium.Math.toRadians(-20.0);
createModel('../../SampleData/models/CesiumAir/Cesium_Air.glb', height, heading, pitch, roll);
}
}, {
text : 'Ground vehicle',
text : 'Ground vehicle',
onselect : function() {
createModel('../../SampleData/models/CesiumGround/Cesium_Ground.glb');
}
}, {
text : 'Milk truck',
onselect : function() {
createModel('../../SampleData/models/CesiumMilkTruck/CesiumMilkTruck.glb');
}
text : 'Milk truck',
onselect : function() {
createModel('../../SampleData/models/CesiumMilkTruck/CesiumMilkTruck.glb');
}
}, {
text : 'Skinned character',
onselect : function() {
Expand All @@ -108,6 +180,11 @@
}];

Sandcastle.addToolbarMenu(options);

Sandcastle.addToggleButton('Shadows', viewer.shadows, function(checked) {
viewer.shadows = checked;
});

//Sandcastle_End
Sandcastle.finishedLoading();
}
Expand Down
4 changes: 4 additions & 0 deletions CHANGES.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
Change Log
==========

### 1.29 - 2017-01-02

* Added the ability to blend a `Model` with a color/translucency. [#4547](https://github.com/AnalyticalGraphicsInc/cesium/pull/4547)

### 1.28 - 2016-12-01

* Improved terrain/imagery load ordering, especially when the terrain is already fully loaded and a new imagery layer is loaded. This results in a 25% reduction in load times in many cases. [#4616](https://github.com/AnalyticalGraphicsInc/cesium/pull/4616)
Expand Down
2 changes: 2 additions & 0 deletions Source/DataSources/CzmlDataSource.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1413,6 +1413,8 @@ 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);

var nodeTransformationsData = modelData.nodeTransformations;
if (defined(nodeTransformationsData)) {
Expand Down
30 changes: 28 additions & 2 deletions Source/DataSources/ModelGraphics.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,8 @@ 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.
* @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 @@ -77,6 +78,10 @@ define([
this._heightReferenceSubscription = undefined;
this._distanceDisplayCondition = undefined;
this._distanceDisplayConditionSubscription = undefined;
this._blendColor = undefined;
this._blendColorSubscription = undefined;
this._blendAmount = undefined;
this._blendAmountSubscription = undefined;
this._definitionChanged = new Event();

this.merge(defaultValue(options, defaultValue.EMPTY_OBJECT));
Expand Down Expand Up @@ -186,7 +191,24 @@ define([
* @memberof ModelGraphics.prototype
* @type {Property}
*/
distanceDisplayCondition : createPropertyDescriptor('distanceDisplayCondition')
distanceDisplayCondition : createPropertyDescriptor('distanceDisplayCondition'),

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

/**
* 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.
* @memberof ModelGraphics.prototype
* @type {Property}
* @default 0.0
*/
blendAmount : createPropertyDescriptor('blendAmount')
});

/**
Expand All @@ -210,6 +232,8 @@ define([
result.nodeTransformations = this.nodeTransformations;
result.heightReference = this._heightReference;
result.distanceDisplayCondition = this.distanceDisplayCondition;
result.blendColor = this.blendColor;
result.blendAmount = this.blendAmount;

return result;
};
Expand Down Expand Up @@ -237,6 +261,8 @@ 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);

var sourceNodeTransformations = source.nodeTransformations;
if (defined(sourceNodeTransformations)) {
Expand Down
Loading