Added HSB color adjustment to the atmosphere and a sandcastle demo #3971
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,129 @@ | ||
| <!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="Adjust hue, saturation, and brightness of the sky/atmosphere."> | ||
| <meta name="cesium-sandcastle-labels" content="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); | ||
| #toolbar { | ||
| background: rgba(42, 42, 42, 0.8); | ||
| padding: 4px; | ||
| border-radius: 4px; | ||
| } | ||
| #toolbar input { | ||
| vertical-align: middle; | ||
| padding-top: 2px; | ||
| padding-bottom: 2px; | ||
| } | ||
| </style> | ||
| <div id="cesiumContainer" class="fullSize"></div> | ||
| <div id="loadingOverlay"><h1>Loading...</h1></div> | ||
| <div id="toolbar"> | ||
| <table> | ||
| <tbody><tr> | ||
| <td>hueShift</td> | ||
| <td> | ||
| <input type="range" min="-1" max="1" step="0.01" data-bind="value: hueShift, valueUpdate: 'input'"> | ||
| <input type="text" size="5" data-bind="value: hueShift"> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>saturationShift</td> | ||
| <td> | ||
| <input type="range" min="-1" max="1" step="0.01" data-bind="value: saturationShift, valueUpdate: 'input'"> | ||
| <input type="text" size="5" data-bind="value: saturationShift"> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>brightnessShift</td> | ||
| <td> | ||
| <input type="range" min="-1" max="1" step="0.01" data-bind="value: brightnessShift, valueUpdate: 'input'"> | ||
| <input type="text" size="5" data-bind="value: brightnessShift"> | ||
| </td> | ||
| </tr> | ||
| </tbody></table> | ||
| <div id="toggleColorCorrection"></div> | ||
| <div id="toggleLighting"></div> | ||
| <div id="toggleFog"></div> | ||
| </div> | ||
| <script id="cesium_sandcastle_script"> | ||
| function startup(Cesium) { | ||
| 'use strict'; | ||
| //Sandcastle_Begin | ||
| var viewer = new Cesium.Viewer('cesiumContainer'); | ||
| var scene = viewer.scene; | ||
| var skyAtmosphere = scene.skyAtmosphere; | ||
|
|
||
| // The viewModel tracks the state of our mini application. | ||
| var viewModel = { | ||
| hueShift: 0.0, | ||
| saturationShift: 0.0, | ||
| brightnessShift: 0.0 | ||
| }; | ||
| // Convert the viewModel members into knockout observables. | ||
| Cesium.knockout.track(viewModel); | ||
|
|
||
| // Bind the viewModel to the DOM elements of the UI that call for it. | ||
| var toolbar = document.getElementById('toolbar'); | ||
| Cesium.knockout.applyBindings(viewModel, toolbar); | ||
|
|
||
| // Make the skyAtmosphere's HSB parameters subscribers of the viewModel. | ||
| function subscribeParameter(name) { | ||
| Cesium.knockout.getObservable(viewModel, name).subscribe( | ||
| function(newValue) { | ||
| skyAtmosphere[name] = newValue; | ||
| } | ||
| ); | ||
| } | ||
|
|
||
| subscribeParameter('hueShift'); | ||
| subscribeParameter('saturationShift'); | ||
| subscribeParameter('brightnessShift'); | ||
|
|
||
| Sandcastle.addToolbarButton('Toggle Color Correction', function() { | ||
| skyAtmosphere.colorCorrect = !skyAtmosphere.colorCorrect; | ||
| }, 'toggleFog'); | ||
|
|
||
| Sandcastle.addToolbarButton('Toggle Lighting', function() { | ||
| scene.globe.enableLighting = !scene.globe.enableLighting; | ||
| }, 'toggleLighting'); | ||
|
|
||
| Sandcastle.addToolbarButton('Toggle Fog', function() { | ||
| scene.fog.enabled = !scene.fog.enabled; | ||
| }, 'toggleFog'); | ||
|
|
||
| var camera = viewer.camera; | ||
| camera.setView({ | ||
| destination : Cesium.Cartesian3.fromDegrees(-75.5847, 40.0397, 1000.0), | ||
| orientation: { | ||
| heading : -Cesium.Math.PI_OVER_TWO, | ||
| pitch : 0.2, | ||
| roll : 0.0 | ||
| } | ||
| }); | ||
|
|
||
| //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
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 |
|---|---|---|
|
|
@@ -32,15 +32,40 @@ | |
|
|
||
| // Code: http://sponeil.net/ | ||
| // GPU Gems 2 Article: http://http.developer.nvidia.com/GPUGems2/gpugems2_chapter16.html | ||
| // HSV/HSB <-> RGB conversion with minimal branching: http://lolengine.net/blog/2013/07/27/rgb-to-hsv-in-glsl | ||
|
|
||
| #ifdef COLOR_CORRECT | ||
| uniform vec3 u_hsbShift; // hue, saturation, value | ||
| #endif | ||
|
|
||
| const float g = -0.95; | ||
| const float g2 = g * g; | ||
| const vec4 K_RGB2HSB = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0); | ||
| const vec4 K_HSB2RGB = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0); | ||
|
|
||
|
|
||
| varying vec3 v_rayleighColor; | ||
| varying vec3 v_mieColor; | ||
| varying vec3 v_toCamera; | ||
| varying vec3 v_positionEC; | ||
|
|
||
| #ifdef COLOR_CORRECT | ||
| vec3 rgb2hsb(vec3 rgbColor) | ||
|
There was a problem hiding this comment. You could also experiment with the There was a problem hiding this comment. I think the addition of the brightness adjustment makes computing to/from HSB worthwhile. I'm not 100% sure how that works over in just RGB land. I think there's also less trig to do hue this way, czm_hue seems to involve an atan. There was a problem hiding this comment. Yeah true the brightness is nice to have. I'm fine with keeping it your way, and rgb2hsb and hsb2rgb could even be built-in functions themselves if we ever need them for other areas in the future. There was a problem hiding this comment. Should this be a new |
||
| { | ||
| vec4 p = mix(vec4(rgbColor.bg, K_RGB2HSB.wz), vec4(rgbColor.gb, K_RGB2HSB.xy), step(rgbColor.b, rgbColor.g)); | ||
| vec4 q = mix(vec4(p.xyw, rgbColor.r), vec4(rgbColor.r, p.yzx), step(p.x, rgbColor.r)); | ||
|
|
||
| float d = q.x - min(q.w, q.y); | ||
| return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + czm_epsilon7)), d / (q.x + czm_epsilon7), q.x); | ||
| } | ||
|
|
||
| vec3 hsb2rgb(vec3 hsbColor) | ||
|
|
||
| { | ||
| vec3 p = abs(fract(hsbColor.xxx + K_HSB2RGB.xyz) * 6.0 - K_HSB2RGB.www); | ||
| return hsbColor.z * mix(K_HSB2RGB.xxx, clamp(p - K_HSB2RGB.xxx, 0.0, 1.0), hsbColor.y); | ||
| } | ||
| #endif | ||
|
|
||
| void main (void) | ||
| { | ||
| // Extra normalize added for Android | ||
|
|
@@ -52,6 +77,22 @@ void main (void) | |
|
|
||
| vec3 rgb = rayleighPhase * v_rayleighColor + miePhase * v_mieColor; | ||
| rgb = vec3(1.0) - exp(-exposure * rgb); | ||
| // compute luminance before color correction to avoid strangely gray night skies | ||
|
There was a problem hiding this comment. Usually we capitalize the first word in comments. You may need to change one line in |
||
| float l = czm_luminance(rgb); | ||
|
|
||
| #ifdef COLOR_CORRECT | ||
| // convert rgb color to hsb | ||
| vec3 hsb = rgb2hsb(rgb); | ||
| // perform hsb shift | ||
| hsb.x += u_hsbShift.x; // hue | ||
| hsb.y = clamp(hsb.y + u_hsbShift.y, 0.0, 1.0); // saturation | ||
| hsb.z = hsb.z > czm_epsilon7 ? hsb.z + u_hsbShift.z : 0.0; // brightness | ||
| // convert shifted hsb back to rgb | ||
| rgb = hsb2rgb(hsb); | ||
|
|
||
| // check if correction decreased the luminance to 0 | ||
| l = min(l, czm_luminance(rgb)); | ||
| #endif | ||
|
|
||
| gl_FragColor = vec4(rgb, min(smoothstep(0.0, 0.1, l), 1.0) * smoothstep(0.0, 1.0, czm_morphTime)); | ||
| } | ||
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
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.
Also include a link to where the new Sandcastle example will be hosted, e.g., for 3D models, the link is http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=3D%20Models.html&label=Showcases