-
Notifications
You must be signed in to change notification settings - Fork 3.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3059 from lilleyse/instancing-models-3d-tiles
Instancing models 3d tiles
- Loading branch information
Showing
20 changed files
with
2,337 additions
and
875 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
265 changes: 265 additions & 0 deletions
265
Apps/Sandcastle/gallery/development/3D Models Instancing.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,265 @@ | ||
| <!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, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> | ||
| <meta name="description" content="Create 3D models using glTF."> | ||
| <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="../../../ThirdParty/requirejs-2.1.9/require.js"></script> | ||
| <script type="text/javascript"> | ||
| require.config({ | ||
| baseUrl : '../../../Source', | ||
| waitSeconds : 60 | ||
| }); | ||
| </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 debugShowBoundingVolume = false; | ||
| var debugWireframe = false; | ||
| var globeVisible = true; | ||
|
|
||
| var viewer = new Cesium.Viewer('cesiumContainer', { | ||
| globe : globeVisible ? undefined : false, | ||
| skyAtmosphere : globeVisible ? undefined : false | ||
| }); | ||
|
|
||
| var scene = viewer.scene; | ||
| var context = scene.context; | ||
| var camera = viewer.camera; | ||
| scene.debugShowFramesPerSecond = true; | ||
|
|
||
| var instancedArraysExtension = context._instancedArrays; | ||
| var count = 1024; | ||
| var spacing = 0.0002; | ||
| var url = '../../SampleData/models/CesiumAir/Cesium_Air.bgltf'; | ||
| var dynamic = false; | ||
| var useCollection = true; | ||
|
|
||
| var centerLongitude = -123.0744619; | ||
| var centerLatitude = 44.0503706; | ||
| var height = 5000.0; | ||
|
|
||
| function orientCamera(center, radius) { | ||
| var controller = scene.screenSpaceCameraController; | ||
| var r = Math.max(radius, camera.frustum.near); | ||
| controller.minimumZoomDistance = r * 0.5; | ||
|
|
||
| var heading = Cesium.Math.toRadians(230.0); | ||
| var pitch = Cesium.Math.toRadians(-20.0); | ||
| camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, r * 2.0)); | ||
| } | ||
|
|
||
| function createCollection(instances) { | ||
| var collection = scene.primitives.add(new Cesium.ModelInstanceCollection({ | ||
| url : url, | ||
| instances : instances, | ||
| dynamic : dynamic, | ||
| debugShowBoundingVolume : debugShowBoundingVolume, | ||
| debugWireframe : debugWireframe | ||
| })); | ||
|
|
||
| collection.readyPromise.then(function(collection) { | ||
| // Play and loop all animations at half-speed | ||
| collection.activeAnimations.addAll({ | ||
| speedup : 0.5, | ||
| loop : Cesium.ModelAnimationLoop.REPEAT | ||
| }); | ||
| orientCamera(collection._boundingVolume.center, collection._boundingVolume.radius); | ||
| }).otherwise(function(error){ | ||
| window.alert(error); | ||
| }); | ||
| } | ||
|
|
||
| function createModels(instances) { | ||
| var points = []; | ||
| var model; | ||
|
|
||
| var length = instances.length; | ||
| for (var i = 0; i < length; ++i) { | ||
| var instance = instances[i]; | ||
| var modelMatrix = instance.modelMatrix; | ||
| var translation = new Cesium.Cartesian3(); | ||
| Cesium.Matrix4.getTranslation(modelMatrix, translation); | ||
| points.push(translation); | ||
|
|
||
| model = scene.primitives.add(Cesium.Model.fromGltf({ | ||
| url : url, | ||
| modelMatrix : modelMatrix, | ||
| debugShowBoundingVolume : debugShowBoundingVolume, | ||
| debugWireframe : debugWireframe | ||
| })); | ||
|
|
||
| model.readyPromise.then(function(model) { | ||
| // Play and loop all animations at half-speed | ||
| model.activeAnimations.addAll({ | ||
| speedup : 0.5, | ||
| loop : Cesium.ModelAnimationLoop.REPEAT | ||
| }); | ||
| }).otherwise(function(error){ | ||
| window.alert(error); | ||
| }); | ||
| } | ||
|
|
||
| model.readyPromise.then(function(model) { | ||
| var boundingSphere = new Cesium.BoundingSphere(); | ||
| Cesium.BoundingSphere.fromPoints(points, boundingSphere); | ||
| orientCamera(boundingSphere.center, boundingSphere.radius + model.boundingSphere.radius); | ||
| }); | ||
| } | ||
|
|
||
| function reset() { | ||
| scene.primitives.removeAll(); | ||
| var instances = []; | ||
| var gridSize = Math.sqrt(count); | ||
|
|
||
| for (var y = 0; y < gridSize; ++y) { | ||
| for (var x = 0; x < gridSize; ++x) { | ||
| var longitude = centerLongitude + spacing * (x - gridSize/2); | ||
| var latitude = centerLatitude + spacing * (y - gridSize/2); | ||
| var position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height); | ||
|
|
||
| var heading = Math.random(); | ||
| var pitch = Math.random(); | ||
| var roll = Math.random(); | ||
| var scale = (Math.random() + 1.0)/2.0; | ||
| var color = Cesium.Color.fromRandom(); | ||
| var show = (Math.random() > 0.5); | ||
|
|
||
| var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(position, heading, pitch, roll); | ||
| Cesium.Matrix4.multiplyByUniformScale(modelMatrix, scale, modelMatrix); | ||
|
|
||
| instances.push({ | ||
| modelMatrix : modelMatrix, | ||
| color : color, | ||
| show : show | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| useCollection ? createCollection(instances) : createModels(instances); | ||
| } | ||
|
|
||
| Sandcastle.addToolbarMenu([ { | ||
| text : '1024 instances', | ||
| onselect : function() { | ||
| count = 1024; | ||
| reset(); | ||
| } | ||
| }, { | ||
| text : '100 instances', | ||
| onselect : function() { | ||
| count = 100; | ||
| reset(); | ||
| } | ||
| }, { | ||
| text : '25 instances', | ||
| onselect : function() { | ||
| count = 25; | ||
| reset(); | ||
| } | ||
| }, { | ||
| text : '4 instances', | ||
| onselect : function() { | ||
| count = 4; | ||
| reset(); | ||
| } | ||
| }, { | ||
| text : '10000 instances', | ||
| onselect : function() { | ||
| count = 10000; | ||
| reset(); | ||
| } | ||
| }]); | ||
|
|
||
| Sandcastle.addToolbarMenu([ { | ||
| text : 'Aircraft', | ||
| onselect : function() { | ||
| url = '../../SampleData/models/CesiumAir/Cesium_Air.bgltf'; | ||
| spacing = 0.0002; | ||
| reset(); | ||
| } | ||
| }, { | ||
| text : 'Ground vehicle', | ||
| onselect : function() { | ||
| url = '../../SampleData/models/CesiumGround/Cesium_Ground.bgltf'; | ||
| spacing = 0.00008; | ||
| reset(); | ||
| } | ||
| }, { | ||
| text : 'Milk truck', | ||
| onselect : function() { | ||
| url = '../../SampleData/models/CesiumMilkTruck/CesiumMilkTruck.bgltf'; | ||
| spacing = 0.00008; | ||
| reset(); | ||
| } | ||
| }, { | ||
| text : 'Skinned character', | ||
| onselect : function() { | ||
| url = '../../SampleData/models/CesiumMan/Cesium_Man.bgltf'; | ||
| spacing = 0.00001; | ||
| reset(); | ||
| } | ||
| }]); | ||
|
|
||
|
|
||
| Sandcastle.addToolbarMenu([ { | ||
| text : 'Instancing Enabled', | ||
| onselect : function() { | ||
| context._instancedArrays = instancedArraysExtension; | ||
| useCollection = true; | ||
| reset(); | ||
| } | ||
| }, { | ||
| text : 'Instancing Disabled', | ||
| onselect : function() { | ||
| context._instancedArrays = undefined; | ||
| useCollection = true; | ||
| reset(); | ||
| } | ||
| }, { | ||
| text : 'Individual models', | ||
| onselect : function() { | ||
| useCollection = false; | ||
| reset(); | ||
| } | ||
| }]); | ||
|
|
||
| Sandcastle.addToolbarMenu([ { | ||
| text : 'Static', | ||
| onselect : function() { | ||
| dynamic = false; | ||
| reset(); | ||
| } | ||
| }, { | ||
| text : 'Dynamic', | ||
| onselect : function() { | ||
| dynamic = true; | ||
| reset(); | ||
| } | ||
| }]); | ||
|
|
||
| //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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.