Merge ce5cf33 into 8f7ff98

visgl · May 31, 2019 · 172f278 · 172f278
2 parents 8f7ff98 + ce5cf33
commit 172f278
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 31 deletions.
diff --git a/examples/core/animation/app.js b/examples/core/animation/app.js
@@ -5,26 +5,12 @@ import {Timeline, KeyFrames} from '@luma.gl/addons';
 import {Matrix4, radians} from 'math.gl';
 
 const INFO_HTML = `
-Animations based on multiple hierarchical timelines.
+Key frame animation based on multiple hierarchical timelines.
+<button id="play">Play</button>
+<button id="pause">Pause</button><BR>
+Time: <input type="range" id="time" min="0" max="30000" step="1"><BR>
 `;
 
-const controls = document.createElement('div');
-controls.innerHTML = `
-  <button id="play">Play</button>
-  <button id="pause">Pause</button><BR>
-  Time: <input type="range" id="time" min="0" max="30000" step="1"><BR>
-`;
-controls.style.position = 'absolute';
-controls.style.top = '10px';
-controls.style.left = '10px';
-controls.style.background = 'white';
-controls.style.padding = '0.5em';
-document.body.appendChild(controls);
-
-const playButton = document.getElementById('play');
-const pauseButton = document.getElementById('pause');
-const timeSlider = document.getElementById('time');
-
 const vs = `\
 attribute vec3 positions;
 attribute vec3 normals;
@@ -74,17 +60,23 @@ export default class AppAnimationLoop extends AnimationLoop {
       depthFunc: gl.LEQUAL
     });
 
-    playButton.addEventListener('click', () => {
-      this.timeline.play();
-    });
+    const playButton = document.getElementById('play');
+    const pauseButton = document.getElementById('pause');
+    const timeSlider = document.getElementById('time');
 
-    pauseButton.addEventListener('click', () => {
-      this.timeline.pause();
-    });
+    if (playButton) {
+      playButton.addEventListener('click', () => {
+        this.timeline.play();
+      });
 
-    timeSlider.addEventListener('input', event => {
-      this.timeline.setTime(parseFloat(event.target.value));
-    });
+      pauseButton.addEventListener('click', () => {
+        this.timeline.pause();
+      });
+
+      timeSlider.addEventListener('input', event => {
+        this.timeline.setTime(parseFloat(event.target.value));
+      });
+    }
 
     const translations = [[2, -2, 0], [2, 2, 0], [-2, 2, 0], [-2, -2, 0]];
 
@@ -167,11 +159,16 @@ export default class AppAnimationLoop extends AnimationLoop {
         })
       };
     }
+
+    return {timeSlider};
   }
 
   onRender(animationProps) {
-    const {gl} = animationProps;
-    timeSlider.value = this.timeline.getTime();
+    const {gl, timeSlider} = animationProps;
+
+    if (timeSlider) {
+      timeSlider.value = this.timeline.getTime();
+    }
 
     const modelMatrix = new Matrix4();
 
@@ -200,7 +197,7 @@ export default class AppAnimationLoop extends AnimationLoop {
 
   onFinalize({gl}) {
     for (let i = 0; i < 4; ++i) {
-      this.cube[i].model.delete();
+      this.cubes[i].model.delete();
     }
   }
 }

diff --git a/website/contents/demos.js b/website/contents/demos.js
@@ -1,4 +1,4 @@
-import {setContextDefaults} from 'luma.gl';
+import {setContextDefaults} from '@luma.gl/core';
 setContextDefaults({webgl2: true});
 
 export {default as InstancingDemo} from '../../examples/core/instancing/app.js';
@@ -13,6 +13,7 @@ export {default as TransformDemo} from '../../examples/core/transform/app.js';
 export {default as GLTFDemo} from '../../examples/core/gltf/app';
 export {default as QuasicrystalsDemo} from '../../examples/core/quasicrystals/app';
 export {default as Texture3DDemo} from '../../examples/core/texture-3d/app';
+export {default as AnimationDemo} from '../../examples/core/animation/app';
 
 export {default as Lesson01} from '../../examples/lessons/01/app.js';
 export {default as Lesson02} from '../../examples/lessons/02/app.js';

diff --git a/website/contents/pages.js b/website/contents/pages.js
@@ -51,6 +51,13 @@ export const EXAMPLE_PAGES = [
           code: `${GITHUB_TREE}/examples/core/shadowmap`
         }
       },
+      {
+        name: 'Animation',
+        content: {
+          demo: 'AnimationDemo',
+          code: `${GITHUB_TREE}/examples/core/animation`
+        }
+      },
       {
         name: 'Transform Feedback (WebGL2)',
         content: {

diff --git a/website/src/static/images/example-animation.png b/website/src/static/images/example-animation.png
diff --git a/website/src/static/markdown/examples.md b/website/src/static/markdown/examples.md
@@ -43,6 +43,13 @@
       </a>
     </div>
   </div>
+  <div class="thumb">
+    <div class="bg-black" data-title="Animation">
+      <a href="#/examples/core-examples/animation">
+        <img src="images/example-animation.png" />
+      </a>
+    </div>
+  </div>
   <div class="thumb">
     <div class="bg-black" data-title="Transform Feedback">
       <a href="#/examples/core-examples/transform-feedback-webgl-2">