Skip to content

Instantly share code, notes, and snippets.

@bryik
Last active June 27, 2017 17:26
Show Gist options
  • Save bryik/daed647bcc81cf86e919f194703beadd to your computer and use it in GitHub Desktop.
Save bryik/daed647bcc81cf86e919f194703beadd to your computer and use it in GitHub Desktop.
Animating Terrain
license: mit

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).

Uses aframe-terrain-model-component and Till Hinrichs' orbit-controls-component.

<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/[email protected]/dist/aframe-terrain-model-component.min.js"></script>
<script src="https://cdn.rawgit.com/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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment