-
Notifications
You must be signed in to change notification settings - Fork 3.4k
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
Underwater Rendering (Do not merge) #6047
Closed
Closed
Changes from all commits
Commits
Show all changes
13 commits
Select commit
Hold shift + click to select a range
d7a5f97
Experimenting with multiple globes
jasonbeverage 682856e
Work on making the slider work with entire globes
jasonbeverage 77d2421
New subsurface demo
jasonbeverage 5ee2a47
Merge multiple globes
jasonbeverage 594b6ba
Added submarine model
jasonbeverage 359461d
Made it so you can control culling of the terrain tiles
jasonbeverage e9e4a6e
Added sand.jpg
jasonbeverage 943ea4b
Made it so you can change the skirt ratio of the cesium terrain provider
jasonbeverage cc71d47
Allowing 0 length Cartesian3 to be normalized without throwing an err…
jasonbeverage dc65925
Added some hacky code to disable ellipsoid culling in the Ellipsoidal…
jasonbeverage 3735a82
Hacking
jasonbeverage 444b5c0
Merge branch 'master' into subsurface
jasonbeverage c20e693
Playing with idea of selecting which globe to intersect against at ru…
jasonbeverage File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,117 @@ | ||
| <!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="Multiple globes."> | ||
| <meta name="cesium-sandcastle-labels" content="Beginner, Tutorials, Showcases"> | ||
| <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"> | ||
| require.config({ | ||
| baseUrl : '../../../Source', | ||
| waitSeconds : 60 | ||
| }); | ||
| </script> | ||
| </head> | ||
| <body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html"> | ||
|
|
||
| <style> | ||
| @import url(../templates/bucket.css); | ||
|
|
||
| #slider { | ||
| position: absolute; | ||
| left: 50%; | ||
| top: 0px; | ||
| background-color: #D3D3D3; | ||
| width: 2px; | ||
| height: 100%; | ||
| z-index: 9999; | ||
| } | ||
|
|
||
| #slider:hover { | ||
| cursor: ew-resize; | ||
| } | ||
|
|
||
| </style> | ||
|
|
||
| <div id="cesiumContainer" class="fullSize"> | ||
| <div id="slider"></div> | ||
| </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', { | ||
| imageryProvider : new Cesium.ArcGisMapServerImageryProvider({ | ||
| url : 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer' | ||
| }), | ||
| baseLayerPicker : false | ||
| }); | ||
| var cesiumTerrainProviderMeshes = new Cesium.CesiumTerrainProvider({ | ||
| url : 'https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles', | ||
| }); | ||
| viewer.terrainProvider = cesiumTerrainProviderMeshes; | ||
| viewer.scene.globe.splitDirection = Cesium.ImagerySplitDirection.RIGHT; | ||
|
|
||
|
|
||
| // Add another globe to the list | ||
| var secondaryGlobe = new Cesium.Globe(); | ||
| secondaryGlobe.imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({ | ||
| url : 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer' | ||
| })); | ||
| secondaryGlobe.splitDirection = Cesium.ImagerySplitDirection.LEFT; | ||
| var vrTheWorldProvider = new Cesium.VRTheWorldTerrainProvider({ | ||
| url : 'http://www.vr-theworld.com/vr-theworld/tiles1.0.0/73/', | ||
| credit : 'Terrain data courtesy VT MÄK' | ||
| }); | ||
| secondaryGlobe.terrainProvider = vrTheWorldProvider; | ||
| viewer.scene._globes.push(secondaryGlobe); | ||
|
|
||
|
|
||
| // Sync the position of the slider with the split position | ||
| var slider = document.getElementById('slider'); | ||
| viewer.scene.imagerySplitPosition = (slider.offsetLeft) / slider.parentElement.offsetWidth; | ||
|
|
||
| var dragStartX = 0; | ||
|
|
||
| document.getElementById('slider').addEventListener('mousedown', mouseDown, false); | ||
| window.addEventListener('mouseup', mouseUp, false); | ||
|
|
||
| function mouseUp() { | ||
| window.removeEventListener('mousemove', sliderMove, true); | ||
| } | ||
|
|
||
| function mouseDown(e) { | ||
| var slider = document.getElementById('slider'); | ||
| dragStartX = e.clientX - slider.offsetLeft; | ||
| window.addEventListener('mousemove', sliderMove, true); | ||
| } | ||
|
|
||
| function sliderMove(e) { | ||
| var slider = document.getElementById('slider'); | ||
| var splitPosition = (e.clientX - dragStartX) / slider.parentElement.offsetWidth; | ||
| slider.style.left = 100.0 * splitPosition + "%"; | ||
| viewer.scene.imagerySplitPosition = splitPosition; | ||
| } | ||
|
|
||
|
|
||
| //Sandcastle_End | ||
| Sandcastle.finishedLoading(); | ||
| } | ||
| if (typeof Cesium !== "undefined") { | ||
| startup(Cesium); | ||
| } else if (typeof require === "function") { | ||
| require(["Cesium"], startup); | ||
| } | ||
| </script> | ||
|
|
||
| </body> | ||
| </html> |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,194 @@ | ||
| <!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="Test subsurface rendering"> | ||
| <meta name="cesium-sandcastle-labels" content="Tutorials, Showcases"> | ||
| <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"> | ||
| 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 id="zoomButtons"></div> | ||
| </div> | ||
| <script id="cesium_sandcastle_script"> | ||
| function startup(Cesium) { | ||
| 'use strict'; | ||
| //Sandcastle_Begin | ||
| var viewer = new Cesium.Viewer('cesiumContainer'); | ||
|
|
||
| //viewer.scene.screenSpaceCameraController.enableCollisionDetection = false; | ||
|
|
||
| // set lighting to true | ||
| viewer.scene.globe.enableLighting = true; | ||
|
|
||
|
|
||
| // Connect to the SRTM15 Plus dataset on ReadyMap | ||
| var bathyProvider = new Cesium.CesiumTerrainProvider({ | ||
| url: 'http://readymap.org/readymap/tiles/1.0.0/130' | ||
| }); | ||
|
|
||
| var fullBathyProvider = new Cesium.CesiumTerrainProvider({ | ||
| url : 'http://readymap.org/readymap/tiles/1.0.0/128' | ||
| }); | ||
|
|
||
|
|
||
| var terrainProvider = new Cesium.CesiumTerrainProvider({ | ||
| url : 'https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles', | ||
| requestWaterMask : true, | ||
| skirtRatio: 1.0 | ||
| }); | ||
|
|
||
| viewer.scene.globe.terrainProvider = terrainProvider; | ||
| viewer.scene.globe._surface._tileProvider._cullingEnabled = false; | ||
|
|
||
| // Create a secondary globe to render the ocean only. | ||
| var secondaryGlobe = new Cesium.Globe(); | ||
| secondaryGlobe.terrainProvider = bathyProvider; | ||
| secondaryGlobe._surface._tileProvider._cullingEnabled = false; | ||
| var sandLayer = secondaryGlobe.imageryLayers.addImageryProvider(new Cesium.SingleTileImageryProvider({ | ||
| url: '../../SampleData/sand.jpg', | ||
| rectangle: Cesium.Rectangle.fromDegrees(-180, -90, 180, 90), | ||
| hasAlphaChannel: false | ||
| })); | ||
|
|
||
| //secondaryGlobe.depthTestAgainstTerrain = false; | ||
| viewer.scene._globes.push(secondaryGlobe); | ||
|
|
||
| viewer.scene.intersectionGlobe = viewer.scene.globe; | ||
|
|
||
| var horizonCullingEnabled = false; | ||
| var model = undefined; | ||
|
|
||
| function addSub() { | ||
| var position = Cesium.Cartesian3.fromRadians(-2.714134211286325, 0.33236701052929585, -848.6742055252448); | ||
|
|
||
| var heading = Cesium.Math.toRadians(135); | ||
| var pitch = 0; | ||
| var roll = 0; | ||
| var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll); | ||
| var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr); | ||
|
|
||
| model = viewer.entities.add({ | ||
| name : 'Model', | ||
| position : position, | ||
| orientation : orientation, | ||
| model : { | ||
| uri : '../../SampleData/models/Submarine/submarine.gltf', | ||
| minimumPixelSize : 128, | ||
| maximumScale : 20000, | ||
|
|
||
| // Color the model slightly blue when the eyepoint is underwater. | ||
| color : new Cesium.Color(0.0, 0.0, 1.0, 1.0), | ||
| colorBlendMode : Cesium.ColorBlendMode.MIX, | ||
| colorBlendAmount : new Cesium.CallbackProperty(function(time, result) { | ||
| var underwater = viewer.camera.positionCartographic.height < 0; | ||
| return !underwater ? 1.0 : 0.0; | ||
| }, false) | ||
| } | ||
| }); | ||
| //viewer.trackedEntity = model; | ||
| } | ||
|
|
||
| function addPlane() { | ||
| var position = Cesium.Cartesian3.fromRadians(-2.714134211286325, 0.33236701052929585, 848.6742055252448); | ||
|
|
||
| var heading = Cesium.Math.toRadians(135); | ||
| var pitch = 0; | ||
| var roll = 0; | ||
| var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll); | ||
| var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr); | ||
|
|
||
| viewer.entities.add({ | ||
| name : 'Model', | ||
| position : position, | ||
| orientation : orientation, | ||
| model : { | ||
| uri : '../../SampleData/models/CesiumAir/Cesium_Air.glb', | ||
| minimumPixelSize : 128, | ||
| maximumScale : 20000 | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| viewer.scene._postRender.addEventListener(function(scene, time) { | ||
| var underwater = viewer.camera.positionCartographic.height < 0; | ||
| //viewer.scene.globe.show = !underwater; | ||
| secondaryGlobe.show = underwater; | ||
| //model.show = underwater; | ||
| //sandLayer.alpha = underwater ? 1.0 : 0.0; | ||
| viewer.scene.fog.enabled = underwater; | ||
| viewer.scene.intersectionGlobe = viewer.camera.positionCartographic.height < 50 ? secondaryGlobe : viewer.scene.globe; | ||
| }); | ||
|
|
||
|
|
||
| addSub(); | ||
| addPlane(); | ||
|
|
||
| Sandcastle.addDefaultToolbarMenu([{ | ||
| text : 'Mount Everest', | ||
| onselect : function() { | ||
| var target = new Cesium.Cartesian3(300770.50872389384, 5634912.131394585, 2978152.2865545116); | ||
| var offset = new Cesium.Cartesian3(6344.974098678562, -793.3419798081741, 2499.9508860763162); | ||
| viewer.camera.lookAt(target, offset); | ||
| viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY); | ||
| } | ||
| }, { | ||
| text : 'Half Dome', | ||
| onselect : function() { | ||
| var target = new Cesium.Cartesian3(-2489625.0836225147, -4393941.44443024, 3882535.9454173897); | ||
| var offset = new Cesium.Cartesian3(-6857.40902037546, 412.3284835694358, 2147.5545426812023); | ||
| viewer.camera.lookAt(target, offset); | ||
| viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY); | ||
| } | ||
| }, { | ||
| text : 'San Francisco Bay', | ||
| onselect : function() { | ||
| var target = new Cesium.Cartesian3(-2708814.85583248, -4254159.450845907, 3891403.9457429945); | ||
| var offset = new Cesium.Cartesian3(70642.66030209465, -31661.517948317807, 35505.179997143336); | ||
| viewer.camera.lookAt(target, offset); | ||
| viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY); | ||
| } | ||
| }, | ||
| { | ||
| text : 'Under the sea', | ||
| onselect : function() { | ||
| viewer.camera.flyTo({ | ||
| destination : Cesium.Cartesian3.fromRadians(-2.714134211286325, 0.33236701052929585, -848.6742055252448), | ||
| orientation: { | ||
| pitch: -0.23273894173188325, | ||
| heading: 0.3754522005172083, | ||
| roll: 0.0 | ||
| } | ||
| }); | ||
| } | ||
| }], 'zoomButtons'); | ||
|
|
||
|
|
||
|
|
||
|
|
||
| //Sandcastle_End | ||
| Sandcastle.finishedLoading(); | ||
| } | ||
| if (typeof Cesium !== "undefined") { | ||
| startup(Cesium); | ||
| } else if (typeof require === "function") { | ||
| require(["Cesium"], startup); | ||
| } | ||
| </script> | ||
| </body> | ||
| </html> |
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.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lol, we will not want this change.