D3 Examples - Animating Terrain

Animating Terrain

Note: Currently not working in Safari (at least not on my iPad).

Previously, updating vertical exaggeration was slow because it meant rebuilding the entire terrain mesh. Instead of baking zPosition into the position buffer attribute, I've turned it into a shader uniform. Updating zPosition with setAttribute() is now fast enough to animate (...on desktop anyway).

xxxxxxxxxx
 
<html>
  <head>
    <title>A-Frame Terrain Model Component - Noctis Animation</title>
    <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-terrain-model-component@0.2.3/dist/aframe-terrain-model-component.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/tizzle/aframe-orbit-controls-component/v0.1.6/dist/aframe-orbit-controls-component.min.js"></script>
  </head>
  <body>
    <a-scene antialias="true">
​
      <!-- Orbit cam -->
      <a-entity
          id="camera"
          camera
          position="0 80 -350"
          orbit-controls="
              autoRotate: false;
              target: #terrain;
              enableDamping: true;
              dampingFactor: 0.125;
              rotateSpeed:0.25;
              minDistance:100;
              maxDistance:1000;
              ">
      </a-entity>
​
      <!-- Terrain-->
      <a-entity id="terrain" rotation="0 45 0" color-terrain-model="colorScheme: inferno; wireframe: true">
         <a-animation attribute="color-terrain-model.zPosition"
                      dur="5000"
                      fill="forwards"
                      from="0"
                      to="200"
                      direction="alternate"
                      repeat="indefinite"></a-animation>
      </a-entity>
​
      <!-- Sky -->
      <a-sky color="lightgrey"></a-sky>
​
    </a-scene>
  </body>
</html>
​
    