Skip to content

Instantly share code, notes, and snippets.

@bryik bryik/.block
Last active Jun 27, 2017

Embed
What would you like to do?
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/aframe-terrain-model-component@0.2.3/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
You can’t perform that action at this time.