3D Gallery with Great Artwork Imagine Logo with Three Colors Beach Cabin 3D Android Tablet with Different Screens Studio Apartment Red Figured Greek Vase on Blue Background Silver and Gold Flashlight Lake on Fire

3D Visualization: Lake of Fire Visual Effect

Swipe Left, Right, Up & Down

Visual Effect

Burning water flames activate as you swipe over the scene with hills and fire reaching toward the sky. Look down into a vortex.

Preparation

Hills, lake and flames 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.

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. Interactive media in the form of 3D shapes or 3D models, provide unique opportunities to express concepts, such as educational course work or new product features. Seven Thunder Software's simple 3D viewer enables users to see three dimensional objects interactively. Swipe to rotate a model. Tap to select elements on the model. Options allow users to select and learn about individual features.

3D Web Development

Your message can reach the widest audience with 3D Web design. Most 3D programming's implemented with common Web technologies including WebGL, JavaScript, CSS, GLSL and HTML5. 3D Web design with WebGL works on iPhone iOS 8 and up, current Androids, Macintosh computers with OSX Yosemite on up and Windows 10 PCs.

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. Seven Thunder Software develops 3D models for the Web, with optimized (fast loading) 3D rendering software, from photographs, blue prints, ideas and real objects.

Tags
graphic design, Website design, Web design,Interactive media, online 3D modeling, create 3D website, Web GL, 3D Development, 3D Web, 3D Web Design, WebGL example, WebGL online, WebGL example online,

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

for Web graphics!

Copyright © 2022 Amy Butler. All Rights Reserved.