CanvasMap
Getting Started Tutorials 3D Reference

Lights

3D scenes use a technology called ray tracing. The idea is that the light that is displayed in each pixel on the screen can be traced back to a source of light in the scene. The other way to think about it is that all the lights in the scene have rays that shoot out of them based on their location, intensity, type, and color. When these lights strike an object in a scene, the lights interact with the scene to create a new ray that heads for your screen and becomes the value for a pixel in your screen.

There are a variety of lights that can be added to a scene and positioned to make dramatic effects.

Point Lights

Point lights are like a light bulb except they shine in all directions. In CanvasMap, you can change the color of a light just like any other object. Then, you can set its position and place it into a light layer as below. Lights are tyupically invisible in a 3D scene but CanvasMap adds another 3D object at the position of the light so we you can see where it is an move it around. As you change projections, the light object may become too small or too large so you can change its radius as well.

//************************************************************************
//  add a light layer to add positional lights
//************************************************************************

var LightLayer=new CM3LayerLights(); // create a layer for the lights

TheMainContainer.AddLayer(LightLayer); // add the layer to the scene


var TheLight=new CM3LightPoint(); // create a new light

TheLight.SetSetting("Position","Translations",[0,0,130]); // set the position over the origin at z=130
TheLight.SetSetting("Style","fillStyle","rgb(250,250,255)"); // set the color of the light

LightLayer.AddChild(TheLight); // add the light to the layer

Since this is the first time you've positioned something in a 3D scene, take some time to move the light around both in your map and in your code. Try changing the x, y, and z coordinates until you are comfortable with moving lights in 3D space. This practice will serve you well in creating more complex maps. Then, change the color of the ambient light and the two layers.

To learn how lights work in 3D scene, you can also turn on editing for the light position. This will place a ball into the scene that represents the light and can be moved around.

TheLight.SetSetting("ControlObject","Radius",8);
TheLight.SetSetting("Item","Status",CMSTATUS_EDITABLE);

Directional Lights

Directional lights shine light in the same direction throughout the scene. This is like sunlight that comes from so far away it does nto appear to have a point source. You can add direction lights just like point lights except the positoin will not have any effect and there is no control object for them. The rotation of the light sets the direciton of the light.

To add a directional list, just specify the type when creating the light

var TheLight=new CM3Light(CM3Light.TYPE_DIRECTION);
TheLight.SetSetting("Position","Translations",[60,60,120]); // x,y,z in scene coordinates
TheLight.SetSetting("Style","fillStyle","rgb(50,50,50)");
LightLayer.AddChild(TheLight);

Spot Lights

Spot lights are like lights that have a direction and a position. You can also change the radius of view for the spot light.

Note: Support for Spot lights is not complete

Feedback

We are not sure how much support GIS folks are looking for in 3D lights so only a subset of the possible settings for lights are supported. Let us know what you would like to see supported. You can also create your own lights and then add them to the OGL object that is in the scene.