3D Visualization

Swipe Around. Tap Button - Audio: On & Off

Visual Effect

Swipe as waves roll in the ocean against emerald green islands.

Preparation

Islands and waves prepared with 3ds Max, modified with Photoshop and texture mapped to the inside of a cube.

Wave maps were prepared with animated textures. Only two frames were required to render this interactive scene. As you swipe, the waves rise and fall.

Optimized Code: Efficiency

This app uses a number of techniques to load quickly and run efficiently. Cubic views, one model for all views, render to texture (RTT) and rapid texture changes with pre-loaded registers, increase speed and decrease download time.

Cube View

Each view is actually a cube that is texture mapped with a rendering of the current scene. You're viewing scenes, or rooms, from inside a cube. Shapes were modeled and mapped with 3ds Max then exported as cubic view maps.

One Model

One cube displays for every frame, meaning the app initializes one cube and the scene always displays with the same cube. The cube for this example uses just eight vertices. The vertices for a fully modeled room or background would require hundreds of thousands of vertices.

Additionally each scene would require a different set of vertices. The app would need to download multiple 3D models. Cubic views require millions fewer vertices than architectural or environmental models, which allows a much faster download and initialization time.

RTT

Each view, scene, environment or room was modeled and mapped with 3ds Max. Similar models often require scores of texture maps. However with 3ds Max, all texture maps were combined into one image with the render to texture (RTT) feature.

With render to texture only one texture image is downloaded for each frame, allowing for faster viewing.

Swipe - Change Views

Every frame in this app's pre-loaded into a register. When you interact with this app, changes to the view process with fast and simple blending of image data from multiple registers.

Interactivity's coordinated between JavaScript and WebGL shaders. First this application loads image data, for each view, into a set of GPU registers. Samplers access image data from those registers, during the run time of this app's shaders.

The fragment shader processes that image data and sends it out to render, or display, on this canvas. This allows you to see views fade into each other.

Transitions

See smooth transitions as one view fades into the next.

Swipe over the canvas as JavaScript with WebGL, changes the amount of data on display from each register.

Fragment Shader

precision mediump float;
uniform sampler2D u_sampler0;
uniform sampler2D u_sampler1;
varying vec2 v_tex_coord0;
uniform float uf_time;

void main(void) {
 // Sample the first texture:
 vec4 v4_color0 = texture2D(
 u_sampler0, 
 v_tex_coord0
 );
 
 // Sample the second texture:
 vec4 v4_color1 = texture2D(
 u_sampler1, 
 v_tex_coord0
 );
 
 // Blend the textures
 // based on the value
 // in floating point uf_time.
 vec4 v4_mix = mix(
 v4_color0,
 v4_color1,
 uf_time
 );
 
 gl_FragColor = v4_mix;
}

More Scenes!

Visual Effects See More

3D Scenes Walls of Corn Stalks. Maze Game: Level 3