Introduction to 3D
Pretty much all computers, including smart phones, contain electronic hardware to display renderings of 3D scenes. This is different from "true 3d" which requires each of your eyes to see a different image for perspective such as 3D goggles or the 3D glasses with polarized lenses. The hardware that allows 3D renderings is called a Graphical Processing Unit or GPU. GPUs allows us to render 3D scenes are very high speed allowing all the games and interactive 3D applications we now enjoy.
About the same time that HTML 5 was being completed, the "Open Graphics Language" or OpenGL, was also added to all major browsers. This allows us to create 3d renderings of scenes with JavaScript. However, communicating with the GPU, even through OpenGL, is a rather daunting task. Recently, the three.js library was released and makes it relatively easy to communicate to OpenGL from JavaScript. Three.js is a general 3d library which we've integrated into CanvasMap for the specific purposes of displaying geospatial data in 3D.
CanvasMap supports 3D in a very similar way to 2D maps. The basic structure of spatial data is similar between 2D and 3D, there are layers, data sets, and scenes. However, 3D is much more complicated with the addition of lights, textures, materials, controls, and 3D geometry. During development the 3D design had an impact on the 2D design resulting in the final architecture for CanvasMap. In the end, we were able to make creating 3D maps in CanvasMap very similar to creating 2D maps and then there are a lot of additional settings and features for 3D.
Differences from 2D
3D maps are 2D maps that have additional capabilities. Also, since we are using OpenGL instead of the HTML Canvas element, some of the settings have different names and there are a lot more of them. Part of the 3D terminiology includes refering to everything in a scene as an object. This documentaiton uses 3D Object to discriminate between objects in our JavaScript code and 3D Objects in OpenGL. The additional capabilities of Canvas 3D includes:
- Z-values in coordinates can be used to place features at specific elevations.
- Lights to illumiate a scene including: point lights, spot lights, ambient light, and directional light
- 3D items can be covered with a variety of different material types and extruded into 3D shapes
- Text can be either in 3 dimensions or as 2 dimentional sprites that float near a 3d point
- New layers for:
- 3D terrain that can have images overlaid on them and optional "bump" maps and reflectance maps
- 3D graticules
- Lights
- New items:
- Spheres, boxes, pyramids, etc.
- Floors and origins to help with creating scenes
- New effects:
- Shadows
- Fog
- New projections: spherical
- New controls: orbital
- New backgrounds: Cube and spherical
- Extrusions for text, points, polylines, polygons, curves3D Objects can now have 3 dimentions and include boxes, spheres, cylinders, and 3 dimentional text
There are also a few features that are missing in 3D such as gradient fills. In the 3D tutorials, you'll see that creating 3D maps is initially very similar to 2D maps. As you add more complexity to your maps, you'll see more differences beween 2D and 3D.
3D Architecture
Imagine you are looking at a desk with a globe and a paper map. This could be a 3D scene. In 2D we typically show each "map" in a separate window. However, in 3D we'd like to be able to have multiple maps in the same scene. In addition, 3D hardware also supports multiple lights, cameras (views), and other effects within a scene. This led to the overall design for the code in CanvasMap which includes the following hierarchy for which objects include other objects.
- MainContainer
- The entire CanvasMap element
- Scene
- A scene that could contain multiple maps
- Geos
- A geographic entity with a specific spatial reference
(i.e. a single "map")
- Layers
- The layers of data visible to the user
- Different types of layers will contain other objects such as symbology for spatial data, 3D items, and graticules
- Layers
- The layers of data visible to the user
- Lights - A scene can have ambient lights
- Views - Each scene can have multiple views (to be supported in the future)
- Geos
- A geographic entity with a specific spatial reference
(i.e. a single "map")
- Scene
- A scene that could contain multiple maps
- Data sets - Data sets are maintained in a global array so they can be shared between layers
- Controls - Allow different ways of controlling the view and include Orbit, Plane, and Helicopter
There is a new layer for 3D vector data (CM3LayerVector) that is a sub-class of the CMLayerDataset class you've been using in 2D and a layer class for draping terrain over a digital elevation model (CM3LayerTerrain). Other layers have been adapted so they display data in 3D when they are in a 3D view and 2D data when in a 2D view. There are also new layers that are specifically for 3D objects.
Note: the 3D features in CanvasMap are currently in alpha testing and may change in the future. Also, the THREE.js library changes periodically and these changes will require CanvasMap to be updated.