Space Bounce

WebGL Scene

By Vadim Romanov

Web GL Report

Scene Name: Space Bounce

K1323598

Extension of shader.html

Added random colours per vertex to go with the vertex animations. The vertex animation is now based on sin wave instead of random values with min and max values.

The middle sphere is illuminated using directional lighting. The direction of the light is based on mouse X and Y coords.

uniforms.lightDir.value = new THREE.Vector3(mouseX, -mouseY, 0.5);

There is another sphere that is animated. This smaller sphere starts at a point away from the centre sphere which is its vector direction reference initially. When the small sphere reaches an edge, it will reflect/bounce of it and head in another direction.

Function for bouncing called every frame in animate.

function replaceOutBounds(_sphere)

{

var boundXUpper = 140;

var boundXLower = -140;

var boundYUpper = 80 ;

var boundYLower = -80;

if (_sphere.position.x < boundXLower)

{

if(Math.sign(initialPosX) == 1)

initialPosX = -initialPosX;

if(Math.sign(initialPosX) == -1)

initialPosX = initialPosX;

}

if (_sphere.position.x > boundXUpper)

{

if (Math.sign(initialPosX) == 1)

initialPosX = initialPosX;

if (Math.sign(initialPosX) == -1)

initialPosX = -initialPosX;

}

if ( _sphere.position.y < boundYLower)

{

if (Math.sign(initialPosY) == 1)

initialPosY = -initialPosY;

if (Math.sign(initialPosY) == -1)

initialPosY = initialPosY;

}

if (_sphere.position.y > boundYUpper)

{

if (Math.sign(initialPosY) == 1)

initialPosY = initialPosY;

if (Math.sign(initialPosY) == -1)

initialPosY = -initialPosY;

}

return Math.sqrt(Math.pow(initialPosX, 2) + Math.pow(initialPosY, 2));

}

The centre sphere's texture changes based on the distance of the 2 spheres.

Code from fragment shader responsible for the texture blending

vec4 texColor = texture2D(tex, texCoords);

vec4 texColorAlt = texture2D(texAlt, texCoords);

vec4 c = texColor;

float dst = distance*0.008;

if(texColorAlt.r < dst && texColorAlt.g < dst && texColorAlt.b < dst)

c = texColorAlt;

The stars in the background are randomly positioned spheres in a scene. They flicker synchronously. The flickering is done using another simple shader and sin wave to change the intensity of the whitness of the star.

Code for the flicker:

vec3 col = vec3(1, 1, 1);

col *= (flickerAmount);

gl_FragColor = vec4(col + vec3(0.1, 0.1, 0.1), 1.0);