explored different navigation controls and played with on the ground examples

Author: anselm

README.md

@@ -38,19 +38,30 @@ Here is an example of the Grand Canyon.
 | latitude        | latitude     |   37.7983222  |
 | longitude       | longitude    | -122.3972797  |
 | elevation       | for lod      | 600           |
+| lod             | optional     |               |
 | radius          | planet size  | 6372798       |
 | world_radius    | planet size  | 6372798       |
 | observer        | who to watch | #camera       |
 | stretch         | height scale | 1             |
 | groundTexture   | texture fx   |               |
 | buildingTexture | texture fx   |               |
 
-A-Terrain is the main AFrame component that you interact with. It is a wrapper to manage a bunch of individual A-Tile, A-Building and A-Location objects. You give it a longitude, latitude and elevation and it will make sure that that piece of the planet is rendered.
+A-Terrain is the main AFrame component that you interact with in this package. You give it a longitude, latitude and elevation and it will make sure that that piece of the planet is rendered.
+
+You may optionally specify a lod (level of detail or zoom level) which forces a specific resolution of tiles (to understand LOD see https://wiki.openstreetmap.org/wiki/Zoom_levels ). It will produce erratic behavior so it's best to think through what's going on here when you use it. It's worth noting as well that I've slightly modified the orbit controller that you may be used to so that it "slows down" as you get closer to the surface of the planet because otherwise you'd zoom from space to face too fast.
+
+Depending on if you set an observer or not you will get different outcomes:
 
-There are two slight variations in the way it will render the planet.
 1) If you specify an observer (which is a DOM node id such as "#camera") then A-Terrain will paint tiles to cover the visible portion of the globe at the given elevation. For example if you used an elevation like 600 (meters above sea level) and you were over the default latitude and longitude (San Francisco) then it would paint a few tiles around downtown San Francisco at almost street level.
+
 2) If you do not specify an observer then it will move and orient the entire globe so that you're standing on the ground at that point on the globe. By this I mean it moves and rotates the surface of the globe to intersect (0,0,0). This is intended to reduce the hassle of having to deal with spherical coordinates.
 
+The 'stretch' argument stretches the planet so that you can see height related details better (such as mountains).
+
+The radius is your model radius. The world_radius is the radius of your planet.
+
+The groundTexture and buildingTexture are art-effects that you can use to thematically make buildings and ground match your application.
+
 ### A-Tile API
 
 | Property        | Description  | Default Value |

dist/aframe-aterrain-component.js

@@ -12,17 +12,19 @@
 
 <a-scene cursor="rayOrigin: mouse">
 
-<a-box id="target" width="10" height="10" depth="100"></a-box>
+<a-entity id="target" ></a-box>
+
+<!-- just print a single tile, and knowing the elevation (which in this part of SF is about 29 meters below world ellipsoid - place it at the origin facing up by hand -->
+<a-entity a-tile="buildingTexture:../env/glacier4.png" position="-250 29 240" rotation="-90 0 0"></a-entity>
 
-<!-- in this example a default tile is simply rendered - at the origin - at real world scale -->
-<a-entity a-tile></a-entity>
 
 <a-entity id="cameraRig">
 <a-entity
     id="camera"
-    camera="far:1000"
-    position="0 0 700"
-    orbit-controls="
+    position="0 10 0"
+    wasd-controls="fly:true" 
+    look-controls
+    unused_orbit-controls="
         autoRotate: false;
         target: #target;
         enableDamping: true;
@@ -41,6 +43,8 @@
 
 <a-entity light="type: directional; color: #EED; intensity: 3" position="1 1 1"></a-entity>
 
+  <a-entity environment="preset: forest; ground:none; playArea:10;"></a-entity>
+
 </a-scene>
 
 

dist/aframe-aterrain-component.min.js

@@ -13,20 +13,18 @@
 
 <a-entity id="target"></a-entity>
 
-<!-- render the world, focused over this area, with the origin forced to be at 0,0,0 - at 1:1 meter scale... -->
-<!-- renders "from" a height of 400 meters which matches a level of detail of 15 - which is where buildings pop in -->
-
 <a-entity a-terrain="fovpad:1;
                      latitude:37.7983222;
                      longitude:-122.3972797;
-                     elevation:400;
+                     elevation:1;
+                     lod:15;
                   ">
 </a-entity>
 
 <!-- actually the coast near here is 20+ meters or so under ellipsoid sea level according to the data sources -->
 
 <a-entity id="cameraRig" position="0 0 0" >
-  <a-entity id="camera" camera="near:1;far:100000" wasd-controls look-controls orbit-controls></a-entity>
+  <a-entity id="camera" camera="near:1;far:100000" wasd-controls="fly:true" look-controls></a-entity>
   <a-entity id="lefthand" camera-transform-controls-hand="hand:left" vive-controls="hand: left" oculus-touch-controls="hand: left" windows-motion-controls="hand: left"></a-entity>
   <a-entity id="righthand" camera-transform-controls-hand="hand:right" vive-controls="hand: right" oculus-touch-controls="hand: right" windows-motion-controls="hand: right"></a-entity>
 </a-entity>

examples/helloworld/tile.html

@@ -347,7 +347,7 @@ class TileServer  {
     let material = 0;
 
     if(data.groundTexture && data.groundTexture.length) {
-      let texture = new THREE.TextureLoader().load('../env/'+data.groundTexture);
+      let texture = new THREE.TextureLoader().load(data.groundTexture);
       material = new THREE.MeshBasicMaterial({map:texture,color:0xffffff});
     }
 

examples/sanfrancisco/index.html

@@ -41,8 +41,9 @@ AFRAME.registerComponent('a-terrain', {
     // How much to stretch planet heights by so that mountains are more visible
     // TODO not fully implemented
     stretch:          {type: 'number', default: 1           },
-    // LOD = Level of detail. This is for internal use only and is manufactured from the elevation. 15 = the first level where 3d building geometry is allowed to be seen.
-    lod:              {type: 'number', default: 15          },
+    // LOD = Level of detail. If not specified then it will be computed from elevation.
+    lod:              {type: 'number', default: -1          },
+    input:            {type: 'number', default: 0           },
     // fovpad is a hack to circumvent limits with observer field of view; basically a camera could be near the planet but see the whole planet at once
     // TODO the tilings strategy should be improved to deal with some of the possible cases of observer field of view - remove this fudge factor later
     fovpad:           {type: 'number', default: 0           },
@@ -65,6 +66,30 @@ AFRAME.registerComponent('a-terrain', {
   // Latch for startup - TODO probably a more elegant way to latch tick() after init callback is done
   refreshState: 0,
 
+/*
+  inputControls: function() {
+    if(!this.data.input)
+      return;
+
+    // this is an optional control to move the planet under the observer - constantly generating new tiles
+
+    document.addEventListener('keydown', (event) => {
+      switch(event.keyCode) {
+        case 81: this.data.elevation = this.data.elevation * 1.5; break;
+        case 69: this.data.elevation = this.data.elevation / 1.5; break;
+        case 38: case 87: this.data.latitude += this.data.elevation / 10000; break;
+        case 40: case 83: this.data.latitude -= this.data.elevation / 10000; break;
+        case 39: case 68: this.data.longitude += this.data.elevation / 10000; break;
+        case 37: case 65: this.data.longitude -= this.data.elevation / 10000; break;
+      }
+    });
+  },
+
+  init: function() {
+    this.inputControls();
+  },
+*/
+
   ///
   /// tick at 60fps
   ///
@@ -80,8 +105,6 @@ AFRAME.registerComponent('a-terrain', {
   ///
   updateView: function() {
 
-try {
-
     let data = this.data;
 
     let observer = (data.observer && data.observer.length) > 0 ? this.el.sceneEl.querySelector("#"+data.observer) : 0;
@@ -122,12 +145,15 @@ try {
 
       // What is a pleasant level of detail for a given distance from the planets center in planetary coordinates?
       // TODO it is arguable that this could be specified separately from elevation rather than being inferred
-      data.lod = TileServer.instance().elevation2lod(data.world_radius,data.elevation);
+      if(!data.lod < 0 || data.lodLatch == 1) {
+        data.lodLatch = 1;
+        data.lod = TileServer.instance().elevation2lod(data.world_radius,data.elevation);
+      }
     }
 
     else {
 
-      // test- specify lat lon
+      // this is a slight hack to allow a caller to specify lat lon - it's not formally documented as a feature
 
       var hash = window.location.hash.substring(1);
       var params = {}
@@ -136,6 +162,9 @@ try {
       if(params.elev) {
         data.elevation = parseFloat(params.elev);
       }
+      if(params.lod) {
+        data.lod = parseInt(params.lod);
+      }
 
       // Focus on user supplied latitude longitude and elevation
 
@@ -166,13 +195,16 @@ try {
 
       // What is a pleasant level of detail for a given distance from the planets center in planetary coordinates?
       // TODO it is arguable that this could be specified separately from elevation rather than being inferred
-      data.lod = TileServer.instance().elevation2lod(data.world_radius,data.elevation);
+      if(!data.lod < 0 || data.lodLatch == 1) {
+        data.lodLatch = 1;
+        data.lod = TileServer.instance().elevation2lod(data.world_radius,data.elevation);
+      }
 
       TileServer.instance().getGround(data.latitude,data.longitude,data.lod,data.url, groundValue => {
         // deal with undefined
-        if(!groundValue) groundValue = data.elevation;
+        if(!groundValue) groundValue = 0;
         // make sure is above ground
-        let e = data.elevation > groundValue ? data.elevation : groundValue;
+        let e = groundValue + data.elevation;
         // convert elevation above sea level to to model scale
         let height = data.radius * e * data.stretch / data.world_radius + data.radius;
         console.log("Dynamically moving planet to adjust for ground=" + groundValue + " height="+height + " stretch="+data.stretch + " elev="+e);
@@ -221,9 +253,7 @@ try {
         this.updateOrCreateTile(scratch);
       }
     }
-} catch(e) {
-  console.error(e);
-}
+
   },
 
   ///