3D Programming
Page 2
Swipe Textures Blend: Fragment Shader
Swipe as one 3D room fades into the other room then back again. Visual effects are generated within the GLSL fragment shader. Rooms were modeled from blueprints.
Swipe to View. Double Tap Zoom.
Shader Blending
In this example, JavaScript uploads values between 0.0 and 1.0
to the uniform named uf_time, in the fragment shader.
The fragment shader blends two textures based on the value in uf_time.
One set of base JavaScript code offers endless opportunities to generate visual effects. Simply implement effects with the shaders.
It's efficient to process as much as possible in the vertex shader. The vertex shader usually runs more times than the fragment shader. However some techniques require the granularity of the fragment shader. This example blends textures in the following fragment 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){
vec4 v4_color0 = texture2D(
u_sampler0,
v_tex_coord0
)
vec4 v4_color1 = texture2D(
u_sampler1,
v_tex_coord0
)
vec4 v4_mix = mix(
v4_color0,
v4_color1,
uf_time
)
gl_FragColor = v4_mix;
}
Blueprint
Modifications
The final model included a few modifications from the blueprint.
In the living room sliding glass doors replace French doors. A deck displays outside the sliding glass doors. The kitchen area's a simple counter top with some cupboards. A flat screen TV replaces the front two windows.
The bedroom replaces French doors with a large window.
3D Software Development
Display your merchandise online with unique and helpful three dimensional products.
For interactive architecture, products and logos online, contact me.