Skip to content

Commit da1fb4f

Browse files
jjspacejjspace
committed
Merge branch 'sandcastle-v2' into gallery-search
2 parents b8781c4 + 376e762 commit da1fb4f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+817
-516
lines changed

‎Apps/Sandcastle/gallery/3D Tiles Gaussian Splatting Comparison.html

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
6+
<!-- Use Chrome Frame in IE -->
7+
<meta
8+
name="viewport"
9+
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
10+
/>
11+
<meta
12+
name="description"
13+
content="View the same 3D Tiles power station dataset with Gaussian splatting (or Gaussian splats) rendering versus triangle-based mesh rendering."
14+
/>
15+
<meta name="cesium-sandcastle-labels" content="Showcases, 3D Tiles" />
16+
<title>Cesium Demo</title>
17+
<script type="text/javascript" src="../Sandcastle-header.js"></script>
18+
<script
19+
type="text/javascript"
20+
src="../../../Build/CesiumUnminified/Cesium.js"
21+
nomodule
22+
></script>
23+
<script type="module" src="../load-cesium-es6.js"></script>
24+
</head>
25+
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
26+
<style>
27+
@import url(../templates/bucket.css);
28+
29+
#slider {
30+
position: absolute;
31+
left: 50%;
32+
top: 0px;
33+
background-color: #d3d3d3;
34+
width: 5px;
35+
height: 100%;
36+
z-index: 9999;
37+
}
38+
39+
#slider:hover {
40+
cursor: ew-resize;
41+
}
42+
.split-label {
43+
position: absolute;
44+
top: 50%;
45+
transform: translateY(-50%);
46+
background: rgba(42, 42, 42, 0.8);
47+
padding: 8px;
48+
border-radius: 4px;
49+
z-index: 9999;
50+
font-size: large;
51+
font-weight: bold;
52+
text-align: center;
53+
}
54+
.split-label.left {
55+
left: 0;
56+
}
57+
.split-label.right {
58+
right: 0;
59+
}
60+
</style>
61+
<div id="cesiumContainer" class="fullSize">
62+
<div id="slider"></div>
63+
<div class="split-label left">3D Tiles<br />Gaussian splats</div>
64+
<div class="split-label right">3D Tiles<br />Mesh</div>
65+
</div>
66+
<div id="loadingOverlay"><h1>Loading...</h1></div>
67+
<div id="toolbar"></div>
68+
<script id="cesium_sandcastle_script">
69+
window.startup = async function (Cesium) {
70+
"use strict";
71+
//Sandcastle_Begin
72+
const viewer = new Cesium.Viewer("cesiumContainer", {
73+
terrain: Cesium.Terrain.fromWorldTerrain(),
74+
});
75+
76+
try {
77+
const left = await Cesium.Cesium3DTileset.fromIonAssetId(3591160);
78+
viewer.scene.primitives.add(left);
79+
left.splitDirection = Cesium.SplitDirection.LEFT;
80+
81+
viewer.zoomTo(
82+
left,
83+
new Cesium.HeadingPitchRange(
84+
Cesium.Math.toRadians(-50),
85+
Cesium.Math.toRadians(-20),
86+
100.0,
87+
),
88+
);
89+
90+
const right = await Cesium.Cesium3DTileset.fromIonAssetId(3443919);
91+
viewer.scene.primitives.add(right);
92+
right.splitDirection = Cesium.SplitDirection.RIGHT;
93+
} catch (error) {
94+
console.log(`Error loading tileset: ${error}`);
95+
}
96+
97+
// Sync the position of the slider with the split position
98+
const slider = document.getElementById("slider");
99+
viewer.scene.splitPosition = slider.offsetLeft / slider.parentElement.offsetWidth;
100+
101+
const handler = new Cesium.ScreenSpaceEventHandler(slider);
102+
103+
let moveActive = false;
104+
105+
function move(movement) {
106+
if (!moveActive) {
107+
return;
108+
}
109+
110+
const relativeOffset = movement.endPosition.x;
111+
const splitPosition =
112+
(slider.offsetLeft + relativeOffset) / slider.parentElement.offsetWidth;
113+
slider.style.left = `${100.0 * splitPosition}%`;
114+
viewer.scene.splitPosition = splitPosition;
115+
}
116+
117+
handler.setInputAction(function () {
118+
moveActive = true;
119+
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
120+
handler.setInputAction(function () {
121+
moveActive = true;
122+
}, Cesium.ScreenSpaceEventType.PINCH_START);
123+
124+
handler.setInputAction(move, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
125+
handler.setInputAction(move, Cesium.ScreenSpaceEventType.PINCH_MOVE);
126+
127+
handler.setInputAction(function () {
128+
moveActive = false;
129+
}, Cesium.ScreenSpaceEventType.LEFT_UP);
130+
handler.setInputAction(function () {
131+
moveActive = false;
132+
}, Cesium.ScreenSpaceEventType.PINCH_END);
133+
//Sandcastle_End
134+
};
135+
if (typeof Cesium !== "undefined") {
136+
window.startupCalled = true;
137+
window.startup(Cesium).catch((error) => {
138+
"use strict";
139+
console.error(error);
140+
});
141+
Sandcastle.finishedLoading();
142+
}
143+
</script>
144+
</body>
145+
</html>

‎Apps/Sandcastle/gallery/3D Tiles Gaussian Splatting Comparison.jpg

53.3 KB
Loading

‎Apps/Sandcastle/gallery/3D Tiles Gaussian Splatting.html

Lines changed: 9 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
/>
1111
<meta
1212
name="description"
13-
content="View the same 3D Tiles power station dataset as a 3D Gaussian splatting tileset and a mesh tileset."
13+
content="A 3D Gaussian splatting (or Gaussian splats) dataset rendered with 3D Tiles."
1414
/>
1515
<meta name="cesium-sandcastle-labels" content="Showcases, 3D Tiles" />
1616
<title>Cesium Demo</title>
@@ -25,111 +25,30 @@
2525
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
2626
<style>
2727
@import url(../templates/bucket.css);
28-
29-
#slider {
30-
position: absolute;
31-
left: 50%;
32-
top: 0px;
33-
background-color: #d3d3d3;
34-
width: 5px;
35-
height: 100%;
36-
z-index: 9999;
37-
}
38-
39-
#slider:hover {
40-
cursor: ew-resize;
41-
}
42-
.split-label {
43-
position: absolute;
44-
top: 50%;
45-
transform: translateY(-50%);
46-
background: rgba(42, 42, 42, 0.8);
47-
padding: 8px;
48-
border-radius: 4px;
49-
z-index: 9999;
50-
font-size: large;
51-
font-weight: bold;
52-
text-align: center;
53-
}
54-
.split-label.left {
55-
left: 0;
56-
}
57-
.split-label.right {
58-
right: 0;
59-
}
6028
</style>
61-
<div id="cesiumContainer" class="fullSize">
62-
<div id="slider"></div>
63-
<div class="split-label left">3D Tiles<br />Gaussian splats</div>
64-
<div class="split-label right">3D Tiles<br />Mesh</div>
65-
</div>
29+
<div id="cesiumContainer" class="fullSize"></div>
6630
<div id="loadingOverlay"><h1>Loading...</h1></div>
6731
<div id="toolbar"></div>
6832
<script id="cesium_sandcastle_script">
6933
window.startup = async function (Cesium) {
7034
"use strict";
7135
//Sandcastle_Begin
72-
const viewer = new Cesium.Viewer("cesiumContainer", {
73-
terrain: Cesium.Terrain.fromWorldTerrain(),
74-
});
36+
const viewer = new Cesium.Viewer("cesiumContainer");
7537

7638
try {
77-
const left = await Cesium.Cesium3DTileset.fromIonAssetId(3443920);
78-
viewer.scene.primitives.add(left);
79-
left.splitDirection = Cesium.SplitDirection.LEFT;
80-
39+
const tileset = await Cesium.Cesium3DTileset.fromIonAssetId(3591124);
40+
viewer.scene.primitives.add(tileset);
8141
viewer.zoomTo(
82-
left,
42+
tileset,
8343
new Cesium.HeadingPitchRange(
84-
Cesium.Math.toRadians(-50),
85-
Cesium.Math.toRadians(-20),
86-
100.0,
44+
Cesium.Math.toRadians(0.0),
45+
Cesium.Math.toRadians(-15.0),
46+
200.0,
8747
),
8848
);
89-
90-
const right = await Cesium.Cesium3DTileset.fromIonAssetId(3443919);
91-
viewer.scene.primitives.add(right);
92-
right.splitDirection = Cesium.SplitDirection.RIGHT;
9349
} catch (error) {
9450
console.log(`Error loading tileset: ${error}`);
9551
}
96-
97-
// Sync the position of the slider with the split position
98-
const slider = document.getElementById("slider");
99-
viewer.scene.splitPosition = slider.offsetLeft / slider.parentElement.offsetWidth;
100-
101-
const handler = new Cesium.ScreenSpaceEventHandler(slider);
102-
103-
let moveActive = false;
104-
105-
function move(movement) {
106-
if (!moveActive) {
107-
return;
108-
}
109-
110-
const relativeOffset = movement.endPosition.x;
111-
const splitPosition =
112-
(slider.offsetLeft + relativeOffset) / slider.parentElement.offsetWidth;
113-
slider.style.left = `${100.0 * splitPosition}%`;
114-
viewer.scene.splitPosition = splitPosition;
115-
}
116-
117-
handler.setInputAction(function () {
118-
moveActive = true;
119-
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
120-
handler.setInputAction(function () {
121-
moveActive = true;
122-
}, Cesium.ScreenSpaceEventType.PINCH_START);
123-
124-
handler.setInputAction(move, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
125-
handler.setInputAction(move, Cesium.ScreenSpaceEventType.PINCH_MOVE);
126-
127-
handler.setInputAction(function () {
128-
moveActive = false;
129-
}, Cesium.ScreenSpaceEventType.LEFT_UP);
130-
handler.setInputAction(function () {
131-
moveActive = false;
132-
}, Cesium.ScreenSpaceEventType.PINCH_END);
13352
//Sandcastle_End
13453
};
13554
if (typeof Cesium !== "undefined") {

‎Apps/Sandcastle/gallery/3D Tiles Gaussian Splatting.jpg

-35.4 KB
Loading

‎Apps/Sandcastle/gallery/Drape Imagery on 3D Tiles.html

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -40,12 +40,10 @@
4040
});
4141
viewer.scene.skyAtmosphere.show = true;
4242

43-
const iTwinId = "535a24a3-9b29-4e23-bb5d-9cedb524c743";
44-
const realityMeshId = "85897090-3bcc-470b-bec7-20bb639cc1b9";
45-
const tileset = await Cesium.ITwinData.createTilesetForRealityDataId(
46-
iTwinId,
47-
realityMeshId,
48-
);
43+
const tileset = await Cesium.ITwinData.createTilesetForRealityDataId({
44+
iTwinId: "535a24a3-9b29-4e23-bb5d-9cedb524c743",
45+
realityDataId: "85897090-3bcc-470b-bec7-20bb639cc1b9",
46+
});
4947
viewer.scene.primitives.add(tileset);
5048
tileset.maximumScreenSpaceError = 2;
5149

‎Apps/Sandcastle/gallery/development/VolumeCloud.html renamed to ‎Apps/Sandcastle/gallery/VolumeCloud.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
name="description"
1212
content="Rendering Volume Cloud with Texture3D and Custom GLSL. Transplanted from Three.js"
1313
/>
14-
<meta name="cesium-sandcastle-labels" content="Development" />
14+
<meta name="cesium-sandcastle-labels" content="Tutorials,Showcases" />
1515
<title>Cesium Demo</title>
1616
<script type="text/javascript" src="../Sandcastle-header.js"></script>
1717
<script

‎Apps/Sandcastle/gallery/development/VolumeCloud.jpg renamed to ‎Apps/Sandcastle/gallery/VolumeCloud.jpg

File renamed without changes.

‎Apps/Sandcastle/gallery/iModel Mesh Export Service.html

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -110,12 +110,12 @@
110110
}
111111

112112
// Create tilesets using the iModel ids
113-
const surroundingArea = await Cesium.ITwinData.createTilesetFromIModelId(
114-
"f856f57d-3d28-4265-9c4f-5e60c0662c15",
115-
);
116-
const station = await Cesium.ITwinData.createTilesetFromIModelId(
117-
"669dde67-eb69-4e0b-bcf2-f722eee94746",
118-
);
113+
const surroundingArea = await Cesium.ITwinData.createTilesetFromIModelId({
114+
iModelId: "f856f57d-3d28-4265-9c4f-5e60c0662c15",
115+
});
116+
const station = await Cesium.ITwinData.createTilesetFromIModelId({
117+
iModelId: "669dde67-eb69-4e0b-bcf2-f722eee94746",
118+
});
119119
// Change how highlighting with the feature selection changes the color
120120
surroundingArea.colorBlendMode = Cesium.Cesium3DTileColorBlendMode.REPLACE;
121121
station.colorBlendMode = Cesium.Cesium3DTileColorBlendMode.REPLACE;
@@ -124,12 +124,10 @@
124124
scene.primitives.add(station);
125125

126126
// Create tileset of the reality data mesh
127-
const iTwinId = "535a24a3-9b29-4e23-bb5d-9cedb524c743";
128-
const realityMeshId = "85897090-3bcc-470b-bec7-20bb639cc1b9";
129-
const realityMesh = await Cesium.ITwinData.createTilesetForRealityDataId(
130-
iTwinId,
131-
realityMeshId,
132-
);
127+
const realityMesh = await Cesium.ITwinData.createTilesetForRealityDataId({
128+
iTwinId: "535a24a3-9b29-4e23-bb5d-9cedb524c743",
129+
realityDataId: "85897090-3bcc-470b-bec7-20bb639cc1b9",
130+
});
133131
scene.primitives.add(realityMesh);
134132

135133
Sandcastle.addToolbarButton(

‎Apps/Sandcastle/gallery/iTwin Feature Service.html

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -66,18 +66,18 @@
6666
viewer.scene.camera.flyTo(birdsEyeView);
6767

6868
// Load feature service geojson files
69-
const points = await Cesium.ITwinData.loadGeospatialFeatures(
70-
iTwinId,
71-
"2380dc1b-1dac-4709-aa5c-f6cb38c4e9f5",
72-
);
73-
const lines = await Cesium.ITwinData.loadGeospatialFeatures(
74-
iTwinId,
75-
"613d2310-4d01-43b7-bc92-873a2ca4a4a0",
76-
);
77-
const areas = await Cesium.ITwinData.loadGeospatialFeatures(
78-
iTwinId,
79-
"93e7ef51-5210-49f2-92a3-c7f6685e102f",
80-
);
69+
const points = await Cesium.ITwinData.loadGeospatialFeatures({
70+
iTwinId: iTwinId,
71+
collectionId: "2380dc1b-1dac-4709-aa5c-f6cb38c4e9f5",
72+
});
73+
const lines = await Cesium.ITwinData.loadGeospatialFeatures({
74+
iTwinId: iTwinId,
75+
collectionId: "613d2310-4d01-43b7-bc92-873a2ca4a4a0",
76+
});
77+
const areas = await Cesium.ITwinData.loadGeospatialFeatures({
78+
iTwinId: iTwinId,
79+
collectionId: "93e7ef51-5210-49f2-92a3-c7f6685e102f",
80+
});
8181

8282
// Add some styling to the lines and points to differentiate types
8383
const pinBuilder = new Cesium.PinBuilder();
@@ -118,17 +118,15 @@
118118
viewer.dataSources.add(areas);
119119

120120
// Create tileset of the reality data mesh and pointcloud
121-
const realityMeshId = "62e4432d-621d-489a-87ff-1fc56a2b5369";
122-
const realityMesh = await Cesium.ITwinData.createTilesetForRealityDataId(
123-
iTwinId,
124-
realityMeshId,
125-
);
121+
const realityMesh = await Cesium.ITwinData.createTilesetForRealityDataId({
122+
iTwinId: iTwinId,
123+
realityDataId: "62e4432d-621d-489a-87ff-1fc56a2b5369",
124+
});
126125
viewer.scene.primitives.add(realityMesh);
127-
const pointcloudId = "ebf2ee74-f0de-4cd6-a311-19a169c55fdc";
128-
const pointcloud = await Cesium.ITwinData.createTilesetForRealityDataId(
129-
iTwinId,
130-
pointcloudId,
131-
);
126+
const pointcloud = await Cesium.ITwinData.createTilesetForRealityDataId({
127+
iTwinId: iTwinId,
128+
realityDataId: "ebf2ee74-f0de-4cd6-a311-19a169c55fdc",
129+
});
132130
// increase the size of the pointcloud points and turn on attenuation to
133131
// make them more visible in the viewer
134132
pointcloud.maximumScreenSpaceError = 1;

0 commit comments

Comments
 (0)