Merge pull request #4793 from ZappoMan/moreZoneProperties

Wire up the atmosphere and skybox properties into edit.js

examples/html/entityProperties.html

@@ -33,6 +33,21 @@
                 );
             };
         }
+        function createEmitGroupNumberPropertyUpdateFunction(group, propertyName) {
+            return function() {
+                var properties = {};
+                properties[group] = {};
+                properties[group][propertyName] = this.value;
+                EventBridge.emitWebEvent(
+                    JSON.stringify({
+                        type: "update",
+                        properties: properties,
+                    })
+                );
+            };
+        }
+
+
         function createEmitTextPropertyUpdateFunction(propertyName) {
             return function() {
                 var properties = {};
@@ -46,6 +61,20 @@
             };
         }
 
+        function createEmitGroupTextPropertyUpdateFunction(group,propertyName) {
+            return function() {
+                var properties = {};
+                properties[group] = {};
+                properties[group][propertyName] = this.value;
+                EventBridge.emitWebEvent(
+                    JSON.stringify({
+                        type: "update",
+                        properties: properties,
+                    })
+                );
+            };
+        }
+
         function createEmitVec3PropertyUpdateFunction(property, elX, elY, elZ) {
             return function() {
                 var data = {
@@ -62,6 +91,23 @@
             }
         };
 
+        function createEmitGroupVec3PropertyUpdateFunction(group, property, elX, elY, elZ) {
+            return function() {
+                var data = {
+                     type: "update",
+                     properties: {
+                     }
+                };
+                data.properties[group] = { };
+                data.properties[group][property] = {
+                     x: elX.value,
+                     y: elY.value,
+                     z: elZ.value,
+                };
+                EventBridge.emitWebEvent(JSON.stringify(data));
+            }
+        };
+
         function createEmitVec3PropertyUpdateFunctionWithMultiplier(property, elX, elY, elZ, multiplier) {
             return function() {
                 var data = {
@@ -94,6 +140,24 @@
             }
         };
 
+        function createEmitGroupColorPropertyUpdateFunction(group, property, elRed, elGreen, elBlue) {
+            return function() {
+                var data = {
+                     type: "update",
+                     properties: {
+                     }
+                };
+                data.properties[group] = { };
+
+                data.properties[group][property] = {
+                     red: elRed.value,
+                     green: elGreen.value,
+                     blue: elBlue.value,
+                };
+                EventBridge.emitWebEvent(JSON.stringify(data));
+            }
+        };
+
         function loaded() {
             var allSections = [];
             var elID = document.getElementById("property-id");
@@ -205,6 +269,24 @@
             var elZoneStageDay = document.getElementById("property-zone-stage-day");
             var elZoneStageHour = document.getElementById("property-zone-stage-hour");
 
+            var elZoneBackgroundMode = document.getElementById("property-zone-background-mode");
+
+            var elZoneSkyboxColorRed = document.getElementById("property-zone-skybox-color-red");
+            var elZoneSkyboxColorGreen = document.getElementById("property-zone-skybox-color-green");
+            var elZoneSkyboxColorBlue = document.getElementById("property-zone-skybox-color-blue");
+            var elZoneSkyboxURL = document.getElementById("property-zone-skybox-url");
+
+            var elZoneAtmosphereCenterX = document.getElementById("property-zone-atmosphere-center-x");
+            var elZoneAtmosphereCenterY = document.getElementById("property-zone-atmosphere-center-y");
+            var elZoneAtmosphereCenterZ = document.getElementById("property-zone-atmosphere-center-z");
+            var elZoneAtmosphereInnerRadius = document.getElementById("property-zone-atmosphere-inner-radius");
+            var elZoneAtmosphereOuterRadius = document.getElementById("property-zone-atmosphere-outer-radius");
+            var elZoneAtmosphereMieScattering = document.getElementById("property-zone-atmosphere-mie-scattering");
+            var elZoneAtmosphereRayleighScattering = document.getElementById("property-zone-atmosphere-rayleigh-scattering");
+            var elZoneAtmosphereScatteringWavelengthsX = document.getElementById("property-zone-atmosphere-scattering-wavelengths-x");
+            var elZoneAtmosphereScatteringWavelengthsY = document.getElementById("property-zone-atmosphere-scattering-wavelengths-y");
+            var elZoneAtmosphereScatteringWavelengthsZ = document.getElementById("property-zone-atmosphere-scattering-wavelengths-z");
+
             if (window.EventBridge !== undefined) {
                 EventBridge.scriptEventReceived.connect(function(data) {
                     data = JSON.parse(data);
@@ -386,6 +468,26 @@
                                 elZoneStageHour.value = properties.stageHour;
                                 elShapeType.value = properties.shapeType;
                                 elCompoundShapeURL.value = properties.compoundShapeURL;
+
+                                elZoneBackgroundMode.value = properties.backgroundMode;
+
+                                elZoneSkyboxColorRed.value = properties.skybox.color.red;
+                                elZoneSkyboxColorGreen.value = properties.skybox.color.green;
+                                elZoneSkyboxColorBlue.value = properties.skybox.color.blue;
+                                elZoneSkyboxURL.value = properties.skybox.url;
+
+                                elZoneAtmosphereCenterX.value = properties.atmosphere.center.x;
+                                elZoneAtmosphereCenterY.value = properties.atmosphere.center.y;
+                                elZoneAtmosphereCenterZ.value = properties.atmosphere.center.z;
+                                elZoneAtmosphereInnerRadius.value = properties.atmosphere.innerRadius;
+                                elZoneAtmosphereOuterRadius.value = properties.atmosphere.outerRadius;
+                                elZoneAtmosphereMieScattering.value = properties.atmosphere.mieScattering;
+                                elZoneAtmosphereRayleighScattering.value = properties.atmosphere.rayleighScattering;
+                                elZoneAtmosphereScatteringWavelengthsX.value = properties.atmosphere.scatteringWavelengths.x;
+                                elZoneAtmosphereScatteringWavelengthsY.value = properties.atmosphere.scatteringWavelengths.y;
+                                elZoneAtmosphereScatteringWavelengthsZ.value = properties.atmosphere.scatteringWavelengths.z;
+                                
+                                
                             }
 
                             if (selected) {
@@ -521,6 +623,34 @@
             elZoneStageDay.addEventListener('change', createEmitNumberPropertyUpdateFunction('stageDay'));
             elZoneStageHour.addEventListener('change', createEmitNumberPropertyUpdateFunction('stageHour'));
 
+
+            elZoneBackgroundMode.addEventListener('change', createEmitTextPropertyUpdateFunction('backgroundMode'));
+            var zoneSkyboxColorChangeFunction = createEmitGroupColorPropertyUpdateFunction('skybox','color',
+                elZoneSkyboxColorRed, elZoneSkyboxColorGreen, elZoneSkyboxColorBlue);
+            elZoneSkyboxColorRed.addEventListener('change', zoneSkyboxColorChangeFunction);
+            elZoneSkyboxColorGreen.addEventListener('change', zoneSkyboxColorChangeFunction);
+            elZoneSkyboxColorBlue.addEventListener('change', zoneSkyboxColorChangeFunction);
+                
+            elZoneSkyboxURL.addEventListener('change', createEmitGroupTextPropertyUpdateFunction('skybox','url'));
+
+            var zoneAtmosphereCenterChangeFunction = createEmitGroupVec3PropertyUpdateFunction(
+                'atmosphere','center', elZoneAtmosphereCenterX, elZoneAtmosphereCenterY, elZoneAtmosphereCenterZ);
+            elZoneAtmosphereCenterX.addEventListener('change', zoneAtmosphereCenterChangeFunction);
+            elZoneAtmosphereCenterY.addEventListener('change', zoneAtmosphereCenterChangeFunction);
+            elZoneAtmosphereCenterZ.addEventListener('change', zoneAtmosphereCenterChangeFunction);
+                
+                
+            elZoneAtmosphereInnerRadius.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('atmosphere','innerRadius'));
+            elZoneAtmosphereOuterRadius.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('atmosphere','outerRadius'));
+            elZoneAtmosphereMieScattering.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('atmosphere','mieScattering'));
+            elZoneAtmosphereRayleighScattering.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('atmosphere','rayleighScattering'));
+            var zoneAtmosphereScatterWavelengthsChangeFunction = createEmitGroupVec3PropertyUpdateFunction(
+                'atmosphere','scatteringWavelengths', elZoneAtmosphereScatteringWavelengthsX, 
+                elZoneAtmosphereScatteringWavelengthsY, elZoneAtmosphereScatteringWavelengthsZ);
+            elZoneAtmosphereScatteringWavelengthsX.addEventListener('change', zoneAtmosphereScatterWavelengthsChangeFunction);
+            elZoneAtmosphereScatteringWavelengthsY.addEventListener('change', zoneAtmosphereScatterWavelengthsChangeFunction);
+            elZoneAtmosphereScatteringWavelengthsZ.addEventListener('change', zoneAtmosphereScatterWavelengthsChangeFunction);
+
             elMoveSelectionToGrid.addEventListener("click", function() {
                 EventBridge.emitWebEvent(JSON.stringify({
                     type: "action",
@@ -958,6 +1088,72 @@
                 <input class="coord" type='number' id="property-zone-stage-hour" min="0" max="24" step="0.5"></input>
             </div>
         </div>
+
+        <div class="zone-section property">
+            <div class="label">Background Mode</div>
+            <div class="value">
+                <select name="SelectBackgroundMode" id="property-zone-background-mode" name="SelectBackgroundMode">
+                    <option value='inherit'>Nothing</option>
+                    <option value='skybox'>Skybox</option>
+                    <option value='atmosphere'>Atmosphere</option>
+                </select> 
+            </div>
+        </div>
+        <div class="zone-section property">
+            <div class="label">Skybox Color</div>
+            <div class="value">
+                <div class="input-area">R <input class="coord" type='number' id="property-zone-skybox-color-red"></input></div>
+                <div class="input-area">G <input class="coord" type='number' id="property-zone-skybox-color-green"></input></div>
+                <div class="input-area">B <input class="coord" type='number' id="property-zone-skybox-color-blue"></input></div>
+            </div>
+        </div>
+        <div class="zone-section property">
+            <div class="label">Skybox URL</div>
+            <div class="value">
+                <input type="text" id="property-zone-skybox-url" class="url"></input>
+            </div>
+        </div>
+        <div class="zone-section property">
+            <div class="label">Atmosphere Center</div>
+            <div class="value">
+                <div class="input-area">X <br><input class="coord" type='number' id="property-zone-atmosphere-center-x"></input></div>
+                <div class="input-area">Y <br><input class="coord" type='number' id="property-zone-atmosphere-center-y"></input></div>
+                <div class="input-area">Z <br><input class="coord" type='number' id="property-zone-atmosphere-center-z"></input></div>
+            </div>
+        </div>
+        <div class="zone-section property">
+            <div class="label">Atmosphere Inner Radius</div>
+            <div class="value">
+                <input class="coord" type='number' id="property-zone-atmosphere-inner-radius" step="1"></input>
+            </div>
+        </div>
+        <div class="zone-section property">
+            <div class="label">Atmosphere Outer Radius</div>
+            <div class="value">
+                <input class="coord" type='number' id="property-zone-atmosphere-outer-radius" step="1"></input>
+            </div>
+        </div>
+        <div class="zone-section property">
+            <div class="label">Atmosphere Mie Scattering</div>
+            <div class="value">
+                <input class="coord" type='number' id="property-zone-atmosphere-mie-scattering" min="0" max="0.5" step="0.001"></input>
+            </div>
+        </div>
+        <div class="zone-section property">
+            <div class="label">Atmosphere Rayleigh Scattering</div>
+            <div class="value">
+                <input class="coord" type='number' id="property-zone-atmosphere-rayleigh-scattering" min="0" max="0.5" step="0.001"></input>
+            </div>
+        </div>
+        <div class="zone-section property">
+            <div class="label">Atmosphere Scattering Wavelenghts</div>
+            <div class="value">
+                <div class="input-area">X <br><input class="coord" type='number' id="property-zone-atmosphere-scattering-wavelengths-x" min="0" max="1" step="0.001"></input></div>
+                <div class="input-area">Y <br><input class="coord" type='number' id="property-zone-atmosphere-scattering-wavelengths-y" min="0" max="1" step="0.001"></input></div>
+                <div class="input-area">Z <br><input class="coord" type='number' id="property-zone-atmosphere-scattering-wavelengths-z" min="0" max="1" step="0.001"></input></div>
+            </div>
+        </div>
+
     </div>
 
 </body>

libraries/entities/src/AtmospherePropertyGroup.cpp

@@ -89,6 +89,14 @@ bool AtmospherePropertyGroup::decodeFromEditPacket(EntityPropertyFlags& property
     READ_ENTITY_PROPERTY(PROP_ATMOSPHERE_RAYLEIGH_SCATTERING, float, _rayleighScattering);
     READ_ENTITY_PROPERTY(PROP_ATMOSPHERE_SCATTERING_WAVELENGTHS, glm::vec3, _scatteringWavelengths);
     READ_ENTITY_PROPERTY(PROP_ATMOSPHERE_HAS_STARS, bool, _hasStars);
+
+    DECODE_GROUP_PROPERTY_HAS_CHANGED(PROP_ATMOSPHERE_CENTER, Center);
+    DECODE_GROUP_PROPERTY_HAS_CHANGED(PROP_ATMOSPHERE_INNER_RADIUS, InnerRadius);
+    DECODE_GROUP_PROPERTY_HAS_CHANGED(PROP_ATMOSPHERE_OUTER_RADIUS, OuterRadius);
+    DECODE_GROUP_PROPERTY_HAS_CHANGED(PROP_ATMOSPHERE_MIE_SCATTERING, MieScattering);
+    DECODE_GROUP_PROPERTY_HAS_CHANGED(PROP_ATMOSPHERE_RAYLEIGH_SCATTERING, RayleighScattering);
+    DECODE_GROUP_PROPERTY_HAS_CHANGED(PROP_ATMOSPHERE_SCATTERING_WAVELENGTHS, ScatteringWavelengths);
+    DECODE_GROUP_PROPERTY_HAS_CHANGED(PROP_ATMOSPHERE_HAS_STARS, HasStars);
     
     processedBytes += bytesRead;
 

libraries/entities/src/EntityItemProperties.cpp

@@ -181,6 +181,10 @@ void EntityItemProperties::debugDump() const {
     qCDebug(entities) << "   _dimensions=" << getDimensions();
     qCDebug(entities) << "   _modelURL=" << _modelURL;
     qCDebug(entities) << "   _compoundShapeURL=" << _compoundShapeURL;
+
+    getAtmosphere().debugDump();
+    getSkybox().debugDump();
+
     qCDebug(entities) << "   changed properties...";
     EntityPropertyFlags props = getChangedProperties();
     props.debugDumpBits();

libraries/entities/src/EntityItemProperties.h

@@ -279,6 +279,9 @@ inline QDebug operator<<(QDebug debug, const EntityItemProperties& properties) {
     DEBUG_PROPERTY_IF_CHANGED(debug, properties, ParticleRadius, particleRadius, "");
     DEBUG_PROPERTY_IF_CHANGED(debug, properties, MarketplaceID, marketplaceID, "");
     DEBUG_PROPERTY_IF_CHANGED(debug, properties, BackgroundMode, backgroundMode, "");
+    
+    properties.getAtmosphere().debugDump();
+    properties.getSkybox().debugDump();
 
     debug << "  last edited:" << properties.getLastEdited() << "\n";
     debug << "  edited ago:" << properties.getEditedAgo() << "\n";

libraries/entities/src/EntityItemPropertiesMacros.h

@@ -107,6 +107,11 @@
             }                                               \
         }
 
+#define DECODE_GROUP_PROPERTY_HAS_CHANGED(P,N) \
+        if (propertyFlags.getHasProperty(P)) {  \
+            set##N##Changed(true); \
+        }
+
 #define READ_ENTITY_PROPERTY_COLOR(P,M)         \
         if (propertyFlags.getHasProperty(P)) {  \
             if (overwriteLocalData) {           \

libraries/entities/src/SkyboxPropertyGroup.cpp

@@ -59,7 +59,10 @@ bool SkyboxPropertyGroup::decodeFromEditPacket(EntityPropertyFlags& propertyFlag
 
     READ_ENTITY_PROPERTY_XCOLOR(PROP_SKYBOX_COLOR, _color);
     READ_ENTITY_PROPERTY_STRING(PROP_SKYBOX_URL, setURL);
-    
+
+    DECODE_GROUP_PROPERTY_HAS_CHANGED(PROP_SKYBOX_COLOR, Color);
+    DECODE_GROUP_PROPERTY_HAS_CHANGED(PROP_SKYBOX_URL, URL);
+
     processedBytes += bytesRead;
 
     return true;