Updated
This commit is contained in:
Éric Lemoine
442
master/examples/Custom Rendering.html
Normal file
442
master/examples/Custom Rendering.html
Normal file
@@ -0,0 +1,442 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <!-- Use Chrome Frame in IE -->
|
||||
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
||||
<meta name="description" content="Create new primitives using custom rendering.">
|
||||
<title>Cesium Demo</title>
|
||||
<script type="text/javascript" src="../Sandcastle-header.js"></script>
|
||||
<script data-dojo-config="async: 1, tlmSiblingOfDojo: 0" src="../../../ThirdParty/dojo-release-1.7.2-src/dojo/dojo.js"></script>
|
||||
<script type="text/javascript">
|
||||
require({
|
||||
baseUrl : '../../..',
|
||||
packages: [
|
||||
{ name: 'dojo', location: 'ThirdParty/dojo-release-1.7.2-src/dojo' },
|
||||
{ name: 'dijit', location: 'ThirdParty/dojo-release-1.7.2-src/dijit' },
|
||||
{ name: 'dojox', location: 'ThirdParty/dojo-release-1.7.2-src/dojox' },
|
||||
{ name: 'Assets', location: 'Source/Assets' },
|
||||
{ name: 'Core', location: 'Source/Core' },
|
||||
{ name: 'DynamicScene', location: 'Source/DynamicScene' },
|
||||
{ name: 'Renderer', location: 'Source/Renderer' },
|
||||
{ name: 'Scene', location: 'Source/Scene' },
|
||||
{ name: 'Shaders', location: 'Source/Shaders' },
|
||||
{ name: 'ThirdParty', location: 'Source/ThirdParty' },
|
||||
{ name: 'Widgets', location: 'Source/Widgets' },
|
||||
{ name: 'Workers', location: 'Source/Workers' }
|
||||
]
|
||||
});
|
||||
</script>
|
||||
<link rel="Stylesheet" href="../../../ThirdParty/dojo-release-1.7.2-src/dijit/themes/claro/claro.css" type="text/css">
|
||||
<link rel="Stylesheet" href="../../../Source/Widgets/Dojo/CesiumViewerWidget.css" type="text/css">
|
||||
</head>
|
||||
<body class="claro" data-sandcastle-bucket="bucket-dojo.html" data-sandcastle-title="Cesium + Dojo">
|
||||
<style>
|
||||
body {
|
||||
background: #000;
|
||||
color: #eee;
|
||||
font-family: sans-serif;
|
||||
font-size: 9pt;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.fullSize {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#toolbar {
|
||||
margin: 5px;
|
||||
padding: 2px 5px;
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="cesiumContainer" class="fullSize"></div>
|
||||
<div id="toolbar">Loading...</div>
|
||||
<script id="cesium_sandcastle_script">
|
||||
require([
|
||||
'Source/Cesium', 'Widgets/Dojo/CesiumWidget', 'dijit/form/Button', 'dijit/form/DropDownButton',
|
||||
'dijit/DropDownMenu', 'dijit/MenuItem', 'dojo/on', 'dojo/dom'
|
||||
], function(
|
||||
Cesium, CesiumWidget, Button, DropDownButton,
|
||||
DropDownMenu, MenuItem, on, dom)
|
||||
{
|
||||
"use strict";
|
||||
|
||||
function renderBox(scene) {
|
||||
Sandcastle.declare(renderBox); // For highlighting in Sandcastle.
|
||||
var primitives = scene.getPrimitives();
|
||||
primitives.add(new Box(Cesium.Ellipsoid.WGS84.cartographicToCartesian(
|
||||
Cesium.Cartographic.fromDegrees(-75.59777, 40.03883, 500000.0))));
|
||||
}
|
||||
|
||||
var Box = function(position) {
|
||||
var ellipsoid = Cesium.Ellipsoid.WGS84;
|
||||
this._pickId = undefined;
|
||||
|
||||
this._colorCommand = new Cesium.DrawCommand();
|
||||
this._pickCommand = new Cesium.DrawCommand();
|
||||
this._colorCommand.primitiveType = this._pickCommand.primitiveType = Cesium.PrimitiveType.LINES;
|
||||
this._colorCommand.boundingVolume = this._pickCommand.boundingVolume = new Cesium.BoundingSphere();
|
||||
this._colorCommand.modelMatrix = this._pickCommand.modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position);
|
||||
|
||||
this._commandLists = new Cesium.CommandLists();
|
||||
|
||||
var that = this;
|
||||
this._colorCommand.uniformMap = {
|
||||
u_color: function() {
|
||||
return {
|
||||
red: 1.0,
|
||||
green: 1.0,
|
||||
blue: 0.0,
|
||||
alpha: 1.0
|
||||
};
|
||||
}
|
||||
};
|
||||
this._pickCommand.uniformMap = {
|
||||
u_color: function() {
|
||||
return that._pickId.normalizedRgba;
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
Box.prototype.update = function(context, frameState, commandList) {
|
||||
// Only supports 3D, not 2D or Columbus view.
|
||||
if (frameState.mode !== Cesium.SceneMode.SCENE3D) {
|
||||
return;
|
||||
}
|
||||
|
||||
var colorCommand = this._colorCommand;
|
||||
var pickCommand = this._pickCommand;
|
||||
|
||||
if (typeof colorCommand.vertexArray === 'undefined') {
|
||||
var vs = '';
|
||||
vs += 'attribute vec4 position;';
|
||||
vs += 'void main()';
|
||||
vs += '{';
|
||||
vs += ' gl_Position = czm_modelViewProjection * position;';
|
||||
vs += '}';
|
||||
var fs = '';
|
||||
fs += 'uniform vec4 u_color;';
|
||||
fs += 'void main()';
|
||||
fs += '{';
|
||||
fs += ' gl_FragColor = u_color;';
|
||||
fs += '}';
|
||||
|
||||
var dimensions = new Cesium.Cartesian3(500000.0, 500000.0, 500000.0);
|
||||
var maximumCorner = dimensions.multiplyByScalar(0.5);
|
||||
var minimumCorner = maximumCorner.negate();
|
||||
Cesium.BoundingSphere.fromPoints([minimumCorner, maximumCorner], colorCommand.boundingVolume);
|
||||
|
||||
var mesh = Cesium.MeshFilters.toWireframeInPlace(
|
||||
Cesium.BoxTessellator.compute({
|
||||
minimumCorner: minimumCorner,
|
||||
maximumCorner: maximumCorner
|
||||
}));
|
||||
var attributeIndices = Cesium.MeshFilters.createAttributeIndices(mesh);
|
||||
|
||||
colorCommand.vertexArray = pickCommand.vertexArray = context.createVertexArrayFromMesh({
|
||||
mesh: mesh,
|
||||
attributeIndices: attributeIndices,
|
||||
bufferUsage: Cesium.BufferUsage.STATIC_DRAW
|
||||
});
|
||||
|
||||
colorCommand.shaderProgram = pickCommand.shaderProgram = context.getShaderCache().getShaderProgram(vs, fs, attributeIndices);
|
||||
colorCommand.renderState = pickCommand.renderState = context.createRenderState({
|
||||
depthTest : {
|
||||
enabled : true
|
||||
}
|
||||
});
|
||||
|
||||
this._pickId = context.createPickId(this);
|
||||
}
|
||||
|
||||
var pass = frameState.passes;
|
||||
this._commandLists.removeAll();
|
||||
if (pass.color) {
|
||||
this._commandLists.colorList.push(colorCommand);
|
||||
}
|
||||
if (pass.pick) {
|
||||
this._commandLists.pickList.push(pickCommand);
|
||||
}
|
||||
|
||||
commandList.push(this._commandLists);
|
||||
};
|
||||
|
||||
Box.prototype.isDestroyed = function() {
|
||||
return false;
|
||||
};
|
||||
|
||||
Box.prototype.destroy = function() {
|
||||
var colorCommand = this._colorCommand;
|
||||
colorCommand.vertexArray = colorCommand.vertexArray && colorCommand.vertexArray.destroy();
|
||||
colorCommand.shaderProgram = colorCommand.shaderProgram && colorCommand.shaderProgram.release();
|
||||
this._pickId = this._pickId && this._pickId.destroy();
|
||||
return Cesium.destroyObject(this);
|
||||
};
|
||||
|
||||
function renderBoxAcrossModes(scene) {
|
||||
Sandcastle.declare(renderBoxAcrossModes); // For highlighting in Sandcastle.
|
||||
var primitives = scene.getPrimitives();
|
||||
primitives.add(new Box2(Cesium.Ellipsoid.WGS84.cartographicToCartesian(
|
||||
Cesium.Cartographic.fromDegrees(-75.59777, 40.03883, 500000.0))));
|
||||
}
|
||||
|
||||
var Box2 = function(position) {
|
||||
var ellipsoid = Cesium.Ellipsoid.WGS84;
|
||||
|
||||
this._ellipsoid = ellipsoid;
|
||||
this._pickId = undefined;
|
||||
|
||||
this._colorCommand = new Cesium.DrawCommand();
|
||||
this._pickCommand = new Cesium.DrawCommand();
|
||||
this._colorCommand.primitiveType = this._pickCommand.primitiveType = Cesium.PrimitiveType.LINES;
|
||||
this._colorCommand.boundingVolume = this._pickCommand.boundingVolume = new Cesium.BoundingSphere();
|
||||
|
||||
this._commandLists = new Cesium.CommandLists();
|
||||
|
||||
this._mode = undefined;
|
||||
this._projection = undefined;
|
||||
|
||||
this._attributeIndices = {
|
||||
position2D : 0,
|
||||
position3D : 1
|
||||
};
|
||||
|
||||
this._position = position;
|
||||
this._modelMatrix = undefined;
|
||||
this.morphTime = 1.0;
|
||||
|
||||
var that = this;
|
||||
this._colorCommand.uniformMap = {
|
||||
u_color : function() {
|
||||
return { red : 0.0, green : 1.0, blue : 0.0, alpha : 1.0 };
|
||||
},
|
||||
u_morphTime : function() {
|
||||
return that.morphTime;
|
||||
}
|
||||
};
|
||||
this._pickCommand.uniformMap = {
|
||||
u_color : function() {
|
||||
return that._pickId.normalizedRgba;
|
||||
},
|
||||
u_morphTime : function() {
|
||||
return that.morphTime;
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
Box2.prototype.update = function(context, frameState, commandList) {
|
||||
var mode = frameState.mode;
|
||||
var projection = frameState.scene2D.projection;
|
||||
var colorCommand = this._colorCommand;
|
||||
var pickCommand = this._pickCommand;
|
||||
|
||||
if (mode !== this._mode || projection !== this._projection) {
|
||||
this._mode = mode;
|
||||
this._projection = projection;
|
||||
|
||||
if (typeof mode.morphTime !== 'undefined') {
|
||||
this.morphTime = mode.morphTime;
|
||||
}
|
||||
|
||||
var zLength = this._ellipsoid.getRadii().getMaximumComponent() * 0.1;
|
||||
var x = zLength * 0.1;
|
||||
var y = zLength * 0.5;
|
||||
var z = zLength;
|
||||
|
||||
this._modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(this._position);
|
||||
|
||||
var dimensions = new Cesium.Cartesian3(500000.0, 500000.0, 500000.0);
|
||||
var maximumCorner = dimensions.multiplyByScalar(0.5);
|
||||
var minimumCorner = maximumCorner.negate();
|
||||
|
||||
var mesh = Cesium.MeshFilters.toWireframeInPlace(
|
||||
Cesium.BoxTessellator.compute({
|
||||
minimumCorner: minimumCorner,
|
||||
maximumCorner: maximumCorner
|
||||
}));
|
||||
mesh.attributes.position3D = mesh.attributes.position;
|
||||
delete mesh.attributes.position;
|
||||
|
||||
if (mode === Cesium.SceneMode.SCENE3D) {
|
||||
mesh.attributes.position2D = { // Not actually used in shader
|
||||
value : [0.0, 0.0]
|
||||
};
|
||||
|
||||
Cesium.BoundingSphere.fromPoints([
|
||||
new Cesium.Cartesian3(-x, -y, -z),
|
||||
new Cesium.Cartesian3(x, y, z)
|
||||
], colorCommand.boundingVolume);
|
||||
} else {
|
||||
var positions = mesh.attributes.position3D.values;
|
||||
var projectedPositions = [];
|
||||
var projectedPositionsFlat = [];
|
||||
for (var i = 0; i < positions.length; i += 3) {
|
||||
var modelPosition = new Cesium.Cartesian3(positions[i], positions[i + 1], positions[i + 2]);
|
||||
var worldPosition = this._modelMatrix.multiplyByPoint(modelPosition);
|
||||
|
||||
positions[i] = worldPosition.x;
|
||||
positions[i + 1] = worldPosition.y;
|
||||
positions[i + 2] = worldPosition.z;
|
||||
|
||||
var projectedPosition = projection.project(this._ellipsoid.cartesianToCartographic(worldPosition));
|
||||
|
||||
projectedPositions.push(projectedPosition);
|
||||
projectedPositionsFlat.push(projectedPosition.z, projectedPosition.x, projectedPosition.y);
|
||||
}
|
||||
|
||||
if (mode === Cesium.SceneMode.SCENE2D || mode === Cesium.SceneMode.COLUMBUS_VIEW) {
|
||||
Cesium.BoundingSphere.fromPoints(projectedPositions, colorCommand.boundingVolume);
|
||||
colorCommand.boundingVolume.center = new Cesium.Cartesian3(colorCommand.boundingVolume.center.z, colorCommand.boundingVolume.center.x, colorCommand.boundingVolume.center.y);
|
||||
} else {
|
||||
var bv3D = Cesium.BoundingSphere.fromPoints([
|
||||
minimumCorner,
|
||||
maximumCorner
|
||||
]);
|
||||
var bv2D = Cesium.BoundingSphere.fromPoints(projectedPositions);
|
||||
bv2D.center = new Cesium.Cartesian3(bv2D.center.z, bv2D.center.x, bv2D.center.y);
|
||||
|
||||
bv3D.union(bv2D, colorCommand.boundingVolume);
|
||||
}
|
||||
|
||||
mesh.attributes.position2D = {
|
||||
componentDatatype : Cesium.ComponentDatatype.FLOAT,
|
||||
componentsPerAttribute : 3,
|
||||
values : projectedPositionsFlat
|
||||
};
|
||||
}
|
||||
|
||||
colorCommand.vertexArray = colorCommand.vertexArray && colorCommand.vertexArray.destroy();
|
||||
colorCommand.vertexArray = pickCommand.vertexArray = context.createVertexArrayFromMesh({
|
||||
mesh : mesh,
|
||||
attributeIndices : this._attributeIndices,
|
||||
bufferUsage : Cesium.BufferUsage.STATIC_DRAW
|
||||
});
|
||||
}
|
||||
|
||||
if (typeof colorCommand.shaderProgram === 'undefined') {
|
||||
var vs = '';
|
||||
vs += 'attribute vec3 position2D;';
|
||||
vs += 'attribute vec3 position3D;';
|
||||
vs += 'uniform float u_morphTime;';
|
||||
vs += 'void main()';
|
||||
vs += '{';
|
||||
vs += ' vec4 p = czm_columbusViewMorph(position2D, position3D, u_morphTime);';
|
||||
vs += ' gl_Position = czm_modelViewProjection * p;';
|
||||
vs += '}';
|
||||
var fs = '';
|
||||
fs += 'uniform vec4 u_color;';
|
||||
fs += 'void main()';
|
||||
fs += '{';
|
||||
fs += ' gl_FragColor = u_color;';
|
||||
fs += '}';
|
||||
|
||||
colorCommand.shaderProgram = pickCommand.shaderProgram = context.getShaderCache().getShaderProgram(vs, fs, this._attributeIndices);
|
||||
colorCommand.renderState = pickCommand.renderState = context.createRenderState({
|
||||
depthTest : {
|
||||
enabled : true
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var pass = frameState.passes;
|
||||
if (pass.pick && typeof this._pickId === 'undefined') {
|
||||
this._pickId = context.createPickId(this);
|
||||
}
|
||||
|
||||
var modelMatrix = Cesium.Matrix4.IDENTITY;
|
||||
if (mode === Cesium.SceneMode.SCENE3D) {
|
||||
modelMatrix = this._modelMatrix;
|
||||
}
|
||||
|
||||
this._commandLists.removeAll();
|
||||
if (pass.color) {
|
||||
colorCommand.modelMatrix = modelMatrix;
|
||||
this._commandLists.colorList.push(colorCommand);
|
||||
}
|
||||
if (pass.pick) {
|
||||
pickCommand.modelMatrix = modelMatrix;
|
||||
this._commandLists.pickList.push(pickCommand);
|
||||
}
|
||||
|
||||
commandList.push(this._commandLists);
|
||||
};
|
||||
|
||||
// These functions are the same as before.
|
||||
Box2.prototype.isDestroyed = Box.prototype.isDestroyed;
|
||||
Box2.prototype.destroy = Box.prototype.destroy;
|
||||
|
||||
function createButtons(widget) {
|
||||
var scene = widget.scene;
|
||||
var centralBody = widget.centralBody;
|
||||
var ellipsoid = widget.ellipsoid;
|
||||
var primitives = scene.getPrimitives();
|
||||
var transitioner = new Cesium.SceneTransitioner(scene, ellipsoid);
|
||||
|
||||
var sceneMenu = new DropDownMenu({ style: "display: none;"});
|
||||
|
||||
sceneMenu.addChild(new MenuItem({
|
||||
label: '2D',
|
||||
onClick: function() {
|
||||
transitioner.morphTo2D();
|
||||
}
|
||||
}));
|
||||
|
||||
sceneMenu.addChild(new MenuItem({
|
||||
label: 'Columbus View',
|
||||
onClick: function() {
|
||||
transitioner.morphToColumbusView();
|
||||
}
|
||||
}));
|
||||
|
||||
sceneMenu.addChild(new MenuItem({
|
||||
label: '3D',
|
||||
onClick: function() {
|
||||
transitioner.morphTo3D();
|
||||
}
|
||||
}));
|
||||
|
||||
new Button({
|
||||
label: 'Render a box',
|
||||
onClick: function() {
|
||||
primitives.removeAll();
|
||||
renderBox(scene);
|
||||
Sandcastle.highlight(renderBox);
|
||||
}
|
||||
}).placeAt('toolbar');
|
||||
|
||||
new Button({
|
||||
label: 'Render a box across scene modes',
|
||||
onClick: function() {
|
||||
primitives.removeAll();
|
||||
renderBoxAcrossModes(scene);
|
||||
Sandcastle.highlight(renderBoxAcrossModes);
|
||||
}
|
||||
}).placeAt('toolbar');
|
||||
|
||||
new DropDownButton({
|
||||
label : 'Scene Mode',
|
||||
dropDown: sceneMenu
|
||||
}).placeAt('toolbar');
|
||||
}
|
||||
|
||||
var widget = new CesiumWidget();
|
||||
widget.placeAt(dom.byId('cesiumContainer'));
|
||||
widget.startup();
|
||||
dom.byId('toolbar').innerHTML = '';
|
||||
|
||||
createButtons(widget);
|
||||
renderBox(widget.scene);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user