Lighting System

Altus provides a variety of ways to light map layers that range from simple to photo-realistic. You can control:

  • Background Color
  • Lighting Type - Classic or Realistic
  • Sun Location
  • Sun Location Type - Relative or Absolute
  • Sun Texture - Toggle On or Off, or Replace
  • Atmosphere Alpha
  • Stars - Toggle On or Off

Background Color

This is the color used to fill the render target before any other drawing occurs. The default is black.

Lighting Type

Classic

  • Renders the planet without an atmosphere.
  • Useful for looking at street maps or map content not based on photographic imagery
  • Uses less CPU / GPU resources

Realistic

  • Renders the planet with a realistic atmosphere
  • Useful for cinematic views of aerial or satellite imagery or 3D terain views
  • Uses more CPU / GPU resources

Lighting Type Tutorial

This tutorial will walk you through creating a page that has radio buttons for toggling between the two lighting types. You can tilt the camera and zoom in and out to see the change in the atmospheric affects.

Helper Functions

The following code from altusutil.js is used:


/**Realistic lighting*/
function enableRealisticLighting() {
    AltusUnified.scene.atmospherics().setLightingType(AltusUnified.LightingType.REALISTIC);
};

/**Classic lighting*/
function enableClassicLighting() {
    AltusUnified.scene.atmospherics().setLightingType(AltusUnified.LightingType.CLASSIC);
};

/**Sun location set at a fix location.*/
function sunLocationAbsolute() {
    AltusUnified.scene.atmospherics().setSunLocationType(AltusUnified.LocationType.DIRECTION_ABSOLUTE);
};

/**Sun location offset from current camera location.*/
function sunLocationOffset() {
    AltusUnified.scene.atmospherics().setSunLocationType(AltusUnified.LocationType.DIRECTION_VIEW_OFFSET);
};

/**Sun location accurate to current time.*/
function sunLocationAccurate() {
    AltusUnified.scene.atmospherics().setSunLocationType(AltusUnified.LocationType.DIRECTION_ACCURATE);
};

/**Set sun location to be over a specific geographic point.*/
function setSunLocation(lat, lon) {
    var location = new AltusUnified.GeographicPosition2D(lat, lon);
    AltusUnified.scene.atmospherics().setSunLocation(location);
    location.delete();
};

/**Parses an int from a color hex string like #AABBCC.*/
function parseColor(colorString) {
    if(colorString.charAt(0)=="#"){
        var hexString = colorString.substring(1, colorString.length);
        if(hexString.length<8){
            hexString=hexString+"FF";
        }
        return parseInt(hexString, 16);
    }
    else{
        return parseInt(colorString,10);
    }
}

/**Change background color.*/
function setBackgroundColor(newColor) {
    var color = new AltusUnified.Color(parseColor(newColor));
    AltusUnified.scene.atmospherics().setBackgroundColor(color);
    color.delete();
}

/**Enable stars.*/
function setStarsEnabled(starsEnabled) {
    AltusUnified.scene.atmospherics().setStarsEnabled(starsEnabled);
}

Add Radio Buttons to Control Lighting Type

NOTE: This example uses jQuery slider controls.

    <table><tr>
        <!--Controls for lighting type-->
        <td class="controlgroup">
        <fieldset id="lightingTypeGroup" disabled="true">
            <legend>Lighting Type</legend>
            <input type="radio" name="lightingType" value="classic" onclick="enableClassicLighting()" checked/>
            <label for="classic">Classic</label>
            <br/>
            <input type="radio" name="lightingType" value="realistic" onclick="enableRealisticLighting()" />
            <label for="realistic">Realistic</label>
        </fieldset>
        </td>

        <!--Controls for sun location type-->
        <td class="controlgroup">
        <fieldset id="sunLocationTypeGroup" disabled="true">
            <legend>Sun Location Type</legend>
            <input type="radio" name="sunLocation" value="absolute" onclick="sunLocationAbsolute()" checked/>
            <label for="absolute">Absolute</label>
            <br/>
            <input type="radio" name="sunLocation" value="offset" onclick="sunLocationOffset()"/>
            <label for="offset">Offset</label>
            <br/>
            <input type="radio" name="sunLocation" value="accurate" onclick="sunLocationAccurate()"/>
            <label for="accurate">Accurate</label>
        </fieldset>
        </td>

        <!--Controls for sun location-->
        <td class="controlgroup">
        <fieldset id="sunLocationGroup" disabled="true">
            <legend>Sun Location</legend>
             <div>
                <label for="latamount">Lat:</label>
                <input type="text" id="latamount" readonly style="width:50px; border:0; font-weight:bold;"/>
                <label for="lonamount">Lon:</label>
                <input width="3" type="text" id="lonamount" readonly style="width:50px; border:0; font-weight:bold;"/>
            </div>
            <div id="sliderLongitude"></div><br/>
            <div id="sliderLatitude"></div>
        </fieldset>
        </td>

        <!--Controls for Stars-->
        <td class="controlgroup">
        <fieldset id="miscGroup" disabled="true">
            <legend>Misc</legend>
            <input type="checkbox" name="stars" id="stars" onchange="setStarsEnabled(document.getElementById('stars').checked)"/>
            <label for="stars">Stars</label>
            <br/>
            <input id="backgroundColor" type="color" onchange="setBackgroundColor(document.getElementById('backgroundColor').value)">
            <label for="color">Background Color</label>
        </fieldset>
        </td>
    </tr></table>

    <!--Script to handle sliders.-->
    <script>

        function updateSunLocation(){
            var lon = parseFloat($("#sliderLongitude").slider("value"));
            var lat = parseFloat($("#sliderLatitude").slider("value"));
            setSunLocation(lat, lon);
            $("#latamount").val(lat);
            $("#lonamount").val(lon);
        }

        $(function() {
        
            $("#sliderLatitude").slider({
                orientation: "vertical", min: -90.0, max: 90.0, value: 0.0,
                slide: function(event, ui) {
                    updateSunLocation();
                }
            });
          
            $("#sliderLongitude").slider({
                orientation: "horizontal", min: -180.0, max: 180.0, value: 0.0,
                slide: function( event, ui ) {
                   updateSunLocation();
                }
            });
            
            updateSunLocation();
        });
    </script>

See Demo


AltusMappingEngine Web v2.0.ut.2084.g47ffcd3 master

COPYRIGHT (C) 2017, BA3, LLC ALL RIGHTS RESERVED