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

Geometry offset attribute #6607

Merged
merged 16 commits into from
Jun 8, 2018
Merged

Geometry offset attribute #6607

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
54dbdc6
Geometry offset attribute
May 21, 2018
b8bb189
Merge branch 'master' into offset-attribute
May 22, 2018
4854c0e
eslint
May 22, 2018
da22f8e
fix split longitude
May 25, 2018
693e63e
Merge branch 'master' into offset-attribute
May 29, 2018
ec1a8f0
Merge branch 'master' into offset-attribute
Jun 4, 2018
d28aedc
bounding sphere progress [ci skip]
Jun 5, 2018
fa510bf
cleanup [ci skip]
Jun 6, 2018
4cc715a
columbus view bounding sphere? [ci skip]
Jun 6, 2018
2fe6d4a
Merge branch 'master' into offset-attribute [ci skip]
Jun 6, 2018
f09cbf2
cleanup step 1 [ci skip]
Jun 7, 2018
995dee0
cleanup2 [ci skip]
Jun 7, 2018
932d870
specs
Jun 7, 2018
ae14534
more cleanup
Jun 7, 2018
07120b5
regex capture
Jun 7, 2018
96f15b7
cleanup
Jun 8, 2018
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
135 changes: 135 additions & 0 deletions Apps/Sandcastle/gallery/development/Geometry Offset Attribute Combined.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
<!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="Draw a rectangle on the globe surface">
<meta name="cesium-sandcastle-labels" content="Development,New in 1.45,New in 1.46.1">
<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">
if(typeof require === "function") {
require.config({
baseUrl : '../../../Source',
waitSeconds : 120
});
}
</script>
</head>
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
'use strict';
//Sandcastle_Begin
var viewer = new Cesium.Viewer('cesiumContainer');
viewer.extend(Cesium.viewerCesiumInspectorMixin);
var scene = viewer.scene;
var ellipsoid = scene.globe.ellipsoid;

var id1 = '1';
var id2 = '2';
var id3 = '3';

var rectangle = Cesium.Rectangle.fromDegrees(-100.0, 30.0, -99.0, 31.0);
var center1 = Cesium.Rectangle.center(rectangle);
center1 = ellipsoid.cartographicToCartesian(center1);
var offset = Cesium.Cartesian3.multiplyByScalar(ellipsoid.geodeticSurfaceNormal(center1), 100000, new Cesium.Cartesian3());

var i1 = new Cesium.GeometryInstance({
id: id1,
geometry : new Cesium.RectangleGeometry({
rectangle : rectangle,
extrudedHeight : 30000.0,
height : 10000.0,
vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
offsetAttribute: Cesium.GeometryOffsetAttribute.TOP
}),
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 0.0, 0.0, 0.5)),
offset: Cesium.OffsetGeometryInstanceAttribute.fromCartesian3(offset)
}
});


rectangle = Cesium.Rectangle.fromDegrees(-99.0, 30.0, -98.0, 31.0);
var center2 = Cesium.Rectangle.center(rectangle);
center2 = ellipsoid.cartographicToCartesian(center2);

var i2 = new Cesium.GeometryInstance({
id: id2,
geometry : new Cesium.RectangleGeometry({
rectangle : rectangle,
extrudedHeight : 30000.0,
height : 10000.0,
vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
offsetAttribute: Cesium.GeometryOffsetAttribute.TOP
}),
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(0.0, 1.0, 0.0, 0.5)),
offset: Cesium.OffsetGeometryInstanceAttribute.fromCartesian3(Cesium.Cartesian3.ZERO)
}
});

rectangle = Cesium.Rectangle.fromDegrees(-98.0, 30.0, -97.0, 31.0);
var center3 = Cesium.Rectangle.center(rectangle);
center3 = ellipsoid.cartographicToCartesian(center3);
offset = Cesium.Cartesian3.multiplyByScalar(ellipsoid.geodeticSurfaceNormal(center3), 100000, new Cesium.Cartesian3());
var i3 = new Cesium.GeometryInstance({
id: id3,
geometry : new Cesium.RectangleGeometry({
rectangle : rectangle,
extrudedHeight : 30000.0,
height : 10000.0,
vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
offsetAttribute: Cesium.GeometryOffsetAttribute.ALL

}),
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(0.0, 0.0, 1.0, 0.5)),
offset: Cesium.OffsetGeometryInstanceAttribute.fromCartesian3(offset)
}
});

var p = scene.primitives.add(new Cesium.Primitive({
geometryInstances : [i1, i2, i3],
appearance : new Cesium.PerInstanceColorAppearance({
closed : true
}),
asynchronous : false
}));

Sandcastle.addToolbarButton('1', function() {
var attributes = p.getGeometryInstanceAttributes(id1);
offset = Cesium.Cartesian3.multiplyByScalar(ellipsoid.geodeticSurfaceNormal(center1), 150000, new Cesium.Cartesian3());
attributes.offset = Cesium.OffsetGeometryInstanceAttribute.toValue(offset, attributes.offset);
});
Sandcastle.addToolbarButton('2', function() {
var attributes = p.getGeometryInstanceAttributes(id2);
offset = Cesium.Cartesian3.multiplyByScalar(ellipsoid.geodeticSurfaceNormal(center2), 100000, new Cesium.Cartesian3());
attributes.offset = Cesium.OffsetGeometryInstanceAttribute.toValue(offset, attributes.offset);
});
Sandcastle.addToolbarButton('3', function() {
var attributes = p.getGeometryInstanceAttributes(id3);
offset = Cesium.Cartesian3.multiplyByScalar(ellipsoid.geodeticSurfaceNormal(center3), 150000, new Cesium.Cartesian3());
attributes.offset = Cesium.OffsetGeometryInstanceAttribute.toValue(offset, attributes.offset);
});

//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
startup(Cesium);
} else if (typeof require === "function") {
require(["Cesium"], startup);
}
</script>
</body>
</html>
135 changes: 135 additions & 0 deletions Apps/Sandcastle/gallery/development/Geometry Offset Attribute Move.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
<!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="Draw a rectangle on the globe surface">
<meta name="cesium-sandcastle-labels" content="Development,New in 1.45,New in 1.46.1">
<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">
if(typeof require === "function") {
require.config({
baseUrl : '../../../Source',
waitSeconds : 120
});
}
</script>
</head>
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
'use strict';
//Sandcastle_Begin
var viewer = new Cesium.Viewer('cesiumContainer');
viewer.extend(Cesium.viewerCesiumInspectorMixin);
var scene = viewer.scene;
var ellipsoid = scene.globe.ellipsoid;

var rectangle = Cesium.Rectangle.fromDegrees(-100.0, 30.0, -99.0, 31.0);
var center1 = Cesium.Rectangle.center(rectangle);
center1 = ellipsoid.cartographicToCartesian(center1);
var offset = Cesium.Cartesian3.multiplyByScalar(ellipsoid.geodeticSurfaceNormal(center1), 100000, new Cesium.Cartesian3());

var id1 = '1';
var id2 = '2';
var id3 = '3';

var p1 = scene.primitives.add(new Cesium.Primitive({
geometryInstances : new Cesium.GeometryInstance({
id: id1,
geometry : new Cesium.RectangleGeometry({
rectangle : rectangle,
extrudedHeight : 30000.0,
height : 10000.0,
vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
offsetAttribute: Cesium.GeometryOffsetAttribute.TOP
}),
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 0.0, 0.0, 0.5)),
offset: Cesium.OffsetGeometryInstanceAttribute.fromCartesian3(offset)
}
}),
appearance : new Cesium.PerInstanceColorAppearance({
closed : true
}),
asynchronous : false
}));

rectangle = Cesium.Rectangle.fromDegrees(-99.0, 30.0, -98.0, 31.0);
var center2 = Cesium.Rectangle.center(rectangle);
center2 = ellipsoid.cartographicToCartesian(center2);
var p2 = scene.primitives.add(new Cesium.Primitive({
geometryInstances : new Cesium.GeometryInstance({
id: id2,
geometry : new Cesium.RectangleGeometry({
rectangle : rectangle,
extrudedHeight : 30000.0,
height : 10000.0,
vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
}),
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(0.0, 1.0, 0.0, 0.5))
}
}),
appearance : new Cesium.PerInstanceColorAppearance({
closed : true
}),
asynchronous : false
}));

rectangle = Cesium.Rectangle.fromDegrees(-98.0, 30.0, -97.0, 31.0);
var center3 = Cesium.Rectangle.center(rectangle);
center3 = ellipsoid.cartographicToCartesian(center3);
offset = Cesium.Cartesian3.multiplyByScalar(ellipsoid.geodeticSurfaceNormal(center3), 100000, new Cesium.Cartesian3());
var p3 = scene.primitives.add(new Cesium.Primitive({
geometryInstances : new Cesium.GeometryInstance({
id: id3,
geometry : new Cesium.RectangleGeometry({
rectangle : rectangle,
extrudedHeight : 30000.0,
height : 10000.0,
vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
offsetAttribute: Cesium.GeometryOffsetAttribute.ALL

}),
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(0.0, 0.0, 1.0, 0.5)),
offset: Cesium.OffsetGeometryInstanceAttribute.fromCartesian3(offset)
}
}),
appearance : new Cesium.PerInstanceColorAppearance({
closed : true
}),
asynchronous : false
}));

Sandcastle.addToolbarButton('1', function() {
var attributes = p1.getGeometryInstanceAttributes(id1);
offset = Cesium.Cartesian3.multiplyByScalar(ellipsoid.geodeticSurfaceNormal(center1), 150000, new Cesium.Cartesian3());
attributes.offset = Cesium.OffsetGeometryInstanceAttribute.toValue(offset, attributes.offset);
});

Sandcastle.addToolbarButton('3', function() {
var attributes = p3.getGeometryInstanceAttributes(id3);
offset = Cesium.Cartesian3.multiplyByScalar(ellipsoid.geodeticSurfaceNormal(center3), 150000, new Cesium.Cartesian3());
attributes.offset = Cesium.OffsetGeometryInstanceAttribute.toValue(offset, attributes.offset);
});//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
startup(Cesium);
} else if (typeof require === "function") {
require(["Cesium"], startup);
}
</script>
</body>
</html>
116 changes: 116 additions & 0 deletions Apps/Sandcastle/gallery/development/Geometry Offset Attribute.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
<!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="Draw a rectangle on the globe surface">
<meta name="cesium-sandcastle-labels" content="Development,New in 1.45">
<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">
if(typeof require === "function") {
require.config({
baseUrl : '../../../Source',
waitSeconds : 120
});
}
</script>
</head>
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
'use strict';
//Sandcastle_Begin
var viewer = new Cesium.Viewer('cesiumContainer');
viewer.extend(Cesium.viewerCesiumInspectorMixin);
var scene = viewer.scene;
var ellipsoid = scene.globe.ellipsoid;

var rectangle = Cesium.Rectangle.fromDegrees(-100.0, 30.0, -99.0, 31.0);
var center = Cesium.Rectangle.center(rectangle);
center = ellipsoid.cartographicToCartesian(center);
var offset = Cesium.Cartesian3.multiplyByScalar(ellipsoid.geodeticSurfaceNormal(center), 100000, new Cesium.Cartesian3());

scene.primitives.add(new Cesium.Primitive({
geometryInstances : new Cesium.GeometryInstance({
geometry : new Cesium.RectangleGeometry({
rectangle : rectangle,
extrudedHeight : 30000.0,
height : 10000.0,
vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
offsetAttribute: Cesium.GeometryOffsetAttribute.TOP
}),
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 0.0, 0.0, 0.5)),
offset: Cesium.OffsetGeometryInstanceAttribute.fromCartesian3(offset)
}
}),
appearance : new Cesium.PerInstanceColorAppearance({
closed : true
}),
asynchronous : false
}));

rectangle = Cesium.Rectangle.fromDegrees(-99.0, 30.0, -98.0, 31.0);
scene.primitives.add(new Cesium.Primitive({
geometryInstances : new Cesium.GeometryInstance({
geometry : new Cesium.RectangleGeometry({
rectangle : rectangle,
extrudedHeight : 30000.0,
height : 10000.0,
vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
}),
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(0.0, 1.0, 0.0, 0.5))
}
}),
appearance : new Cesium.PerInstanceColorAppearance({
closed : true
}),
asynchronous : false
}));

rectangle = Cesium.Rectangle.fromDegrees(-98.0, 30.0, -97.0, 31.0);
center = Cesium.Rectangle.center(rectangle);
center = ellipsoid.cartographicToCartesian(center);
offset = Cesium.Cartesian3.multiplyByScalar(ellipsoid.geodeticSurfaceNormal(center), 100000, new Cesium.Cartesian3());
scene.primitives.add(new Cesium.Primitive({
geometryInstances : new Cesium.GeometryInstance({
geometry : new Cesium.RectangleGeometry({
rectangle : rectangle,
extrudedHeight : 30000.0,
height : 10000.0,
vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
offsetAttribute: Cesium.GeometryOffsetAttribute.ALL

}),
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(0.0, 0.0, 1.0, 0.5)),
offset: Cesium.OffsetGeometryInstanceAttribute.fromCartesian3(offset)
}
}),
appearance : new Cesium.PerInstanceColorAppearance({
closed : true
}),
asynchronous : false
}));

//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/development/Geometry Offset Attribute.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.
Loading