3D Visualization

Waves in the Ocean

Swipe Left, Right, Up & Down

Visual Effect

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

See more 3D models.

3D Interactive Products & Presentations

3D Models Online: Architecture, VFX, Logos
3D Games: World Nations, Technology, Concentration - Cubes, Mazes, Rooms, Weapons
3D Architecture: Blueprints, Measurements, Photos, Ideas to Buildings & Homes
Real-Time 3D: Virtual Products, Blueprints, Measurements, Concepts to Visuals
3D Scenes: Landscapes, Forests, Space, Exteriors
3D Visual Effects: Blur, Fire, Morph, Glow, Blend, Light
3D Logos & Symbols: Interactive Branding - Burnished Metal, Muted Grays, Tropical Colors
WebGL Tutorials: Coordinates, Code, GLSL Shaders, Texture Units & More
Advanced 3D Rendering: Architecture, Real-Time 3D

Implementation: Waves with GLSL mix()

The shader mix() function blends two texture maps as you swipe.

Preparation

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

Special effects implemented with WebGL. The following GLSL shader blends two images based on the uniform, uf_time. As you swipe, uf_time increases and decreases, in floating point values, from zero to one.

Normally it's more efficient to process as much as possible in the vertex shader. Yet the fragment shader accesses texture samples to display fragments of color on the canvas. This particular example mixes those fragments.

Additionally the vertex shader for this example only processes eight vertices. Therefore blend granularity would be very rough with processing in the vertex shader.

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;
}

3D Web Design

Educate, inspire and inform with interactive 3D media online. Express new, or difficult, topics with three dimensions. Educational course work, new product features, marketing and architecture, come to life in three dimensions.

Seven Thunder Software's simple 3D viewer enables clients to interact with 3D objects. Swipe to rotate a model. Tap to select elements on the model. Select and learn about individual features.

3D Web Marketing

Reach the widest audience with 3D Web design. 3D Web media runs on all major phones, tablets and computers. 3D rendering's implemented with common Web technologies including HTML5, CSS3, JavaScript, WebGL and GLSL.

3D Models Online

If a picture's worth a thousand words, then a 3D model's worth ten thousand words! Consider 3D interactive content for education, media and marketing.