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 all 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.

194 changes: 194 additions & 0 deletions Apps/Sandcastle/gallery/3D Models Coloring.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,194 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="description" content="Change color of 3D models.">
<meta name="cesium-sandcastle-labels" content="Showcases">
<title>Cesium Demo</title>
<script type="text/javascript" src="../Sandcastle-header.js"></script>
<script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>
<script type="text/javascript">
require.config({
baseUrl : '../../../Source',
waitSeconds : 60
});
</script>
</head>
<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">
<table><tbody>
<tr>
<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>Alpha</td>
<td>
<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 data-bind="style: { color: colorBlendAmountEnabled ? '' : 'gray'}">Mix</td>
<td>
<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>
</div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
'use strict';
//Sandcastle_Begin
var viewer = new Cesium.Viewer('cesiumContainer', {
infoBox : false,
selectionIndicator : false,
shadows : true
});

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 = {
color : 'Red',
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.
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, 'color').subscribe(
function(newValue) {
entity.model.color = Cesium.Color.fromAlpha(getColor(newValue), viewModel.alpha);
}
);

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

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

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

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

var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, height);
var heading = Cesium.Math.toRadians(135);
var pitch = 0;
var roll = 0;
var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);

entity = viewer.entities.add({
name : url,
position : position,
orientation : orientation,
model : {
uri : url,
minimumPixelSize : 128,
maximumScale : 20000,
color : Cesium.Color.fromAlpha(getColor(viewModel.color), viewModel.alpha),
colorBlendMode : getColorBlendMode(viewModel.colorBlendMode),
colorBlendAmount : viewModel.colorBlendAmount
}
});
viewer.trackedEntity = entity;
}

var options = [{
text : 'Aircraft',
onselect : function() {
createModel('../../SampleData/models/CesiumAir/Cesium_Air.glb', 5000.0);
}
}, {
text : 'Ground vehicle',
onselect : function() {
createModel('../../SampleData/models/CesiumGround/Cesium_Ground.glb', 0);
}
}, {
text : 'Hot Air Balloon',
onselect : function() {
createModel('../../SampleData/models/CesiumBalloon/CesiumBalloon.glb', 1000.0);
}
}, {
text : 'Milk truck',
onselect : function() {
createModel('../../SampleData/models/CesiumMilkTruck/CesiumMilkTruck-kmc.glb', 0);
}
}, {
text : 'Skinned character',
onselect : function() {
createModel('../../SampleData/models/CesiumMan/Cesium_Man.glb', 0);
}
}];

Sandcastle.addToolbarMenu(options);

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

//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
startup(Cesium);
} else if (typeof require === "function") {
require(["Cesium"], startup);
}
</script>
</body>
</html>
Binary file added Apps/Sandcastle/gallery/3D Models Coloring.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion Apps/Sandcastle/gallery/3D Models.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,4 +94,4 @@
}
</script>
</body>
</html>
</html>
Loading