Space Displacement

Animated GIF

Animated GIF

Colors swirl and streak as the center of a graphic warps inward.

This unique animated space scene originally displaced, or moved, vertices, over time with WebGL. The WebGL vertex shader applied a texture map and animated GIF frame time to translate vertices. The fragment shader prepared color for rendering.

Graphics include a space scene and displacement map. The vertex shader moved vertices. The maps display below.

Galaxy Scene

The galaxy scene texture maps to a square. It stretches as vertices are moved. The original galaxy photograph, from NASA, was modified quite a bit with additional color and saturation.

Displacement Map

The displacement map's a circular gray scale gradation. Vertices move based on the amount of value; light to dark.

Motion Graphics

Get inspired with over one hundred animated GIFs. GIF animation operates on almost every mobile device and computer including iPhone, Android, Windows and Macintosh PCs.

GIFs are prepared with a set of applications and technologies including 3ds Max, Photoshop, After Effects, GIF Animator, JavaScript, HTML5, sprite sheets, WebGL, GLSL shaders (C Language) and post processing.

Tags
video, video animation, inspiration, After Effects animation, motion graphic designer

If you use a video provide attribution (credit) with:
Video prepared by Amy W Butler. Contact Amy W Butler for animation.


Ads >
Create 3D Games: Learn WebGL Book 2 Simple Shaders: Learn WebGL Book 4
3D Programming for Beginners: Learn WebGL Book 1

for freelance graphics.

Copyright © 2021 Amy Butler. All Rights Reserved.