3D Scene

River Flows

As you swipe over the hills, trees and river, water flows through the valley.

3D Scenes & Info

Tutorial Tips Interactive 3D On the Web Tutorial Tips Interactive 3D On the Web

Implementation

Water appears to move in the river with the WebGL fragment shader function, GLSL mix(). Two river texture maps blend in response to motion over the canvas. See the fragment shader, below.

The landscape and river images were prepared with 3ds Max and Photoshop then mapped to the inside of a sphere with WebGL.

This 3D environment displays with optimized texture maps. Each map loads as a small eight bit PNG file.

Fragment Shader

The following fragment shader blends two texture maps then displays the mix. JavaScript modifies and uploads values to uniform uf_time, in response to swipe motion on the canvas.

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

void main(void) {

 // Sample two textures:
 vec4 v4_color0 = texture2D(
  u_sampler0, 
  v_tex_coord0
 );
 vec4 v4_color1 = texture2D(
  u_sampler1, 
  v_tex_coord0
 );
 
 // Blend two textures
 // based on uniform, uf_time.
 vec4 v4_mix = mix(
  v4_color0,
  v4_color1,
  uf_time
 );
 
 // Display the mix:
 gl_FragColor = v4_mix;
 
}

Visual Effects

Seven Thunder Software's special effects include interactive 3D Web design, 3D animation, morphing art and some 2D VFX effects.

Graphics tools include Photoshop, Adobe Sound Booth, Adobe After Effects and 3ds Max. Software tools include JavaScript, CSS3, HTML5, WebGL and GLSL shaders; written with the C language. Many online projects link to free tutorials.

Tags