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

Jump to bottom

expose new scalar to change the visual density of fog #12248

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
+340 −161
Open

expose new scalar to change the visual density of fog #12248

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5ec99b2
expose new scalar to change the visual density of fog
jjspace Oct 10, 2024
8417242
fix types
jjspace Oct 10, 2024
305fc1a
doc updates
jjspace Oct 11, 2024
cc721ac
doc adjustments, move fog sandcastle
jjspace Oct 21, 2024
9da6433
Merge remote-tracking branch 'origin/main' into visual-fog-density
jjspace Oct 21, 2024
2e6f488
remove debug oriented code in sandcastle
jjspace Oct 21, 2024
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
2 changes: 2 additions & 0 deletions Apps/Sandcastle/gallery/Atmosphere.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@
background: rgba(42, 42, 42, 0.8);
padding: 4px;
border-radius: 4px;
max-height: 80%;
overflow-y: auto;
}
#toolbar input {
vertical-align: middle;
Expand Down
259 changes: 259 additions & 0 deletions Apps/Sandcastle/gallery/Fog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,259 @@
<!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="Control fog parameters." />
<meta name="cesium-sandcastle-labels" content="Development" />
<title>Cesium Demo</title>
<script type="text/javascript" src="../Sandcastle-header.js"></script>
<script
type="text/javascript"
src="../../../Build/CesiumUnminified/Cesium.js"
nomodule
></script>
<script type="module" src="../load-cesium-es6.js"></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;
}
#zoomButtons {
display: flex;
flex-direction: column;
align-items: flex-start;
}
input[type="range"] {
width: 6em;
}
input[type="number"] {
width: 5em;
}
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
<table>
<tbody>
<tr>
<td>enabled</td>
<td><input type="checkbox" data-bind="checked: enabled" /></td>
</tr>
<tr>
<td>density</td>
<td>
<input
type="range"
data-bind="value: density, valueUpdate: 'input'"
min="0.0001"
max="0.002"
step="0.0001"
/>
<input
type="number"
min="0.0001"
max="0.002"
step="0.0001"
data-bind="value: density"
/>
</td>
</tr>
<tr>
<td>visual density scalar</td>
<td>
<input
type="range"
min="0.01"
max="2"
step="0.01"
data-bind="value: visualDensityScalar, valueUpdate: 'input'"
/>
<input
type="number"
min="0.01"
max="2"
step="0.01"
data-bind="value: visualDensityScalar"
/>
</td>
</tr>
<tr>
<td for="input-fogminbrightness">Fog min brightness</td>
<td>
<input
type="range"
data-bind="value: minimumBrightness, valueUpdate: 'input'"
min="0"
max="1"
step="0.01"
/>
<input
type="number"
data-bind="value: minimumBrightness"
min="0"
max="1"
step="0.01"
/>
</td>
</tr>
<tr>
<td>sse increase factor</td>
<td><input type="text" size="5" data-bind="value: sse" /></td>
</tr>
</tbody>
</table>
<div id="zoomButtons"></div>
</div>
<script id="cesium_sandcastle_script">
window.startup = async function (Cesium) {
"use strict";
//Sandcastle_Begin
const viewer = new Cesium.Viewer("cesiumContainer", {
terrain: Cesium.Terrain.fromWorldTerrain(),
});

//The viewModel tracks the state of our mini application.
const viewModel = {
enabled: true,
density: 0,
visualDensityScalar: 0,
sse: 0,
minimumBrightness: 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.
const toolbar = document.getElementById("toolbar");
Cesium.knockout.applyBindings(viewModel, toolbar);

Cesium.knockout
.getObservable(viewModel, "enabled")
.subscribe(function (newValue) {
viewer.scene.fog.enabled = newValue;
});

Cesium.knockout
.getObservable(viewModel, "density")
.subscribe(function (newValue) {
viewer.scene.fog.density = newValue;
});

Cesium.knockout
.getObservable(viewModel, "visualDensityScalar")
.subscribe(function (newValue) {
viewer.scene.fog.visualDensityScalar = newValue;
});

Cesium.knockout
.getObservable(viewModel, "minimumBrightness")
.subscribe(function (newValue) {
viewer.scene.fog.minimumBrightness = newValue;
});
Cesium.knockout.getObservable(viewModel, "sse").subscribe(function (newValue) {
viewer.scene.fog.screenSpaceErrorFactor = newValue;
});

viewModel.enabled = viewer.scene.fog.enabled;
viewModel.density = viewer.scene.fog.density;
viewModel.visualDensityScalar = viewer.scene.fog.visualDensityScalar;
viewModel.sse = viewer.scene.fog.screenSpaceErrorFactor;
viewModel.minimumBrightness = viewer.scene.fog.minimumBrightness;

Sandcastle.addToolbarButton(
"Horizon high altitude",
function () {
viewer.camera.setView({
destination: new Cesium.Cartesian3(
-2467730.5740817646,
-4390507.315824514,
3906155.113316938,
),
orientation: {
heading: 4.492211521856625,
pitch: -0.2687139437696304,
},
});
},
"zoomButtons",
);
// default to the high altitude camera
viewer.camera.setView({
destination: new Cesium.Cartesian3(
-2467730.5740817646,
-4390507.315824514,
3906155.113316938,
),
orientation: {
heading: 4.492211521856625,
pitch: -0.2687139437696304,
},
});

Sandcastle.addToolbarButton(
"Horizon low altitude",
function () {
viewer.camera.setView({
destination: new Cesium.Cartesian3(
-734001.9511656855,
-4214090.596769834,
4715898.125886317,
),
orientation: {
heading: 5.634257362559497,
pitch: -0.019548505785381032,
},
});
},
"zoomButtons",
);

Sandcastle.addToolbarButton(
"Snapshot",
function () {
const container = document.getElementById("cesiumContainer");
const tmpH = container.style.height;
const tmpW = container.style.width;

// resize for screenshot
container.style.height = "600px";
container.style.width = "800px";
viewer.resize();
viewer.render();

// chrome blocks opening data urls directly, add an image to a new window instead
// https://stackoverflow.com/questions/45778720/window-open-opens-a-blank-screen-in-chrome
const win = window.open();
win.document.write(`<img src="${viewer.canvas.toDataURL("image/png")}" />`);
// stop the browser from trying to load "nothing" forever
win.stop();

// reset viewer size
container.style.height = tmpH;
container.style.width = tmpW;
viewer.resize();
viewer.render();
},
"zoomButtons",
);
//Sandcastle_End
};
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
window.startup(Cesium).catch((error) => {
"use strict";
console.error(error);
});
Sandcastle.finishedLoading();
}
</script>
</body>
</html>
0 Apps/Sandcastle/gallery/development/Fog.jpg → Apps/Sandcastle/gallery/Fog.jpg
View file
Open in desktop
File renamed without changes
Loading
Loading