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.

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
195 changes: 195 additions & 0 deletions Apps/Sandcastle/gallery/development/Geometry Offset Attribute.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,195 @@
<!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,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)
}
});
var o1 = new Cesium.GeometryInstance({
id: id1,
geometry : new Cesium.RectangleOutlineGeometry({
rectangle : rectangle,
extrudedHeight : 30000.0,
height : 10000.0,
offsetAttribute: Cesium.GeometryOffsetAttribute.TOP
}),
attributes : {
color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.WHITE),
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)
}
});
var o2 = new Cesium.GeometryInstance({
id: id2,
geometry : new Cesium.RectangleOutlineGeometry({
rectangle : rectangle,
extrudedHeight : 30000.0,
height : 10000.0,
offsetAttribute: Cesium.GeometryOffsetAttribute.TOP
}),
attributes : {
color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.WHITE),
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 o3 = new Cesium.GeometryInstance({
id: id3,
geometry : new Cesium.RectangleOutlineGeometry({
rectangle : rectangle,
extrudedHeight : 30000.0,
height : 10000.0,
offsetAttribute: Cesium.GeometryOffsetAttribute.ALL
}),
attributes : {
color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.WHITE),
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
}));
var o = scene.primitives.add(new Cesium.Primitive({
geometryInstances : [o1, o2, o3],
appearance : new Cesium.PerInstanceColorAppearance({
flat : true,
renderState : {
lineWidth : Math.min(2.0, scene.maximumAliasedLineWidth)
}
}),
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);

attributes = o.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);

attributes = o.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);

attributes = o.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>
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
49 changes: 45 additions & 4 deletions Source/Core/CorridorGeometry.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
define([
'./arrayFill',
'./arrayRemoveDuplicates',
'./BoundingSphere',
'./Cartesian3',
'./Cartographic',
'./Check',
'./ComponentDatatype',
'./CornerType',
'./CorridorGeometryLibrary',
Expand All @@ -14,17 +16,20 @@ define([
'./Geometry',
'./GeometryAttribute',
'./GeometryAttributes',
'./GeometryOffsetAttribute',
'./IndexDatatype',
'./Math',
'./PolygonPipeline',
'./PrimitiveType',
'./Rectangle',
'./VertexFormat'
], function(
arrayFill,
arrayRemoveDuplicates,
BoundingSphere,
Cartesian3,
Cartographic,
Check,
ComponentDatatype,
CornerType,
CorridorGeometryLibrary,
Expand All @@ -36,6 +41,7 @@ define([
Geometry,
GeometryAttribute,
GeometryAttributes,
GeometryOffsetAttribute,
IndexDatatype,
CesiumMath,
PolygonPipeline,
Expand Down Expand Up @@ -619,6 +625,21 @@ define([
attributes.normal = undefined;
}
}
if (defined(params.offsetAttribute)) {
var applyOffset = new Uint8Array(size * 6);
if (params.offsetAttribute === GeometryOffsetAttribute.TOP) {
applyOffset = arrayFill(applyOffset, 1, 0, size); // top face
applyOffset = arrayFill(applyOffset, 1, size*2, size * 4); // top wall
} else {
var applyOffsetValue = params.offsetAttribute === GeometryOffsetAttribute.NONE ? 0 : 1;
applyOffset = arrayFill(applyOffset, applyOffsetValue);
}
attributes.applyOffset = new GeometryAttribute({
componentDatatype : ComponentDatatype.UNSIGNED_BYTE,
componentsPerAttribute : 1,
values: applyOffset
});
}

var iLength = indices.length;
var twoSize = size + size;
Expand Down Expand Up @@ -826,13 +847,14 @@ define([
this._granularity = defaultValue(options.granularity, CesiumMath.RADIANS_PER_DEGREE);
this._shadowVolume = defaultValue(options.shadowVolume, false);
this._workerName = 'createCorridorGeometry';
this._offsetAttribute = options.offsetAttribute;
this._rectangle = undefined;

/**
* The number of elements used to pack the object into an array.
* @type {Number}
*/
this.packedLength = 1 + positions.length * Cartesian3.packedLength + Ellipsoid.packedLength + VertexFormat.packedLength + 6;
this.packedLength = 1 + positions.length * Cartesian3.packedLength + Ellipsoid.packedLength + VertexFormat.packedLength + 7;
}

/**
Expand Down Expand Up @@ -875,7 +897,8 @@ define([
array[startingIndex++] = value._extrudedHeight;
array[startingIndex++] = value._cornerType;
array[startingIndex++] = value._granularity;
array[startingIndex] = value._shadowVolume ? 1.0 : 0.0;
array[startingIndex++] = value._shadowVolume ? 1.0 : 0.0;
array[startingIndex] = defaultValue(value._offsetAttribute, -1);

return array;
};
Expand All @@ -891,7 +914,8 @@ define([
extrudedHeight : undefined,
cornerType : undefined,
granularity : undefined,
shadowVolume: undefined
shadowVolume: undefined,
offsetAttribute: undefined
};

/**
Expand Down Expand Up @@ -929,7 +953,8 @@ define([
var extrudedHeight = array[startingIndex++];
var cornerType = array[startingIndex++];
var granularity = array[startingIndex++];
var shadowVolume = array[startingIndex] === 1.0;
var shadowVolume = array[startingIndex++] === 1.0;
var offsetAttribute = array[startingIndex];

if (!defined(result)) {
scratchOptions.positions = positions;
Expand All @@ -939,6 +964,8 @@ define([
scratchOptions.cornerType = cornerType;
scratchOptions.granularity = granularity;
scratchOptions.shadowVolume = shadowVolume;
scratchOptions.offsetAttribute = offsetAttribute === -1 ? undefined : offsetAttribute;

return new CorridorGeometry(scratchOptions);
}

Expand All @@ -951,6 +978,7 @@ define([
result._cornerType = cornerType;
result._granularity = granularity;
result._shadowVolume = shadowVolume;
result._offsetAttribute = offsetAttribute === -1 ? undefined : offsetAttribute;

return result;
};
Expand Down Expand Up @@ -991,11 +1019,24 @@ define([
params.height = height;
params.extrudedHeight = extrudedHeight;
params.shadowVolume = corridorGeometry._shadowVolume;
params.offsetAttribute = corridorGeometry._offsetAttribute;
attr = computePositionsExtruded(params, vertexFormat);
} else {
var computedPositions = CorridorGeometryLibrary.computePositions(params);
attr = combine(computedPositions, vertexFormat, ellipsoid);
attr.attributes.position.values = PolygonPipeline.scaleToGeodeticHeight(attr.attributes.position.values, height, ellipsoid);

if (defined(corridorGeometry._offsetAttribute)) {
var applyOffsetValue = corridorGeometry._offsetAttribute === GeometryOffsetAttribute.NONE ? 0 : 1;
var length = attr.attributes.position.values.length;
var applyOffset = new Uint8Array(length / 3);
arrayFill(applyOffset, applyOffsetValue);
attr.attributes.applyOffset = new GeometryAttribute({
componentDatatype : ComponentDatatype.UNSIGNED_BYTE,
componentsPerAttribute : 1,
values: applyOffset
});
}
}
var attributes = attr.attributes;
var boundingSphere = BoundingSphere.fromVertices(attributes.position.values, undefined, 3);
Expand Down
Loading