Week 8 - Scrolling Texture

The Next Dimension’s story revolves around travelling between different dimensions. In the story, the level select is explained as an inter-dimensional zone. To give the feeling that this is a surreal setting we decided to use a scrolling texture. The texture below is what was used to create the inter-dimensional space aesthetic: 

The texture is perfectly aligned on both the right and left axes. The reason for this is so that the texture is mapped to a sphere, so the edges must be seamless otherwise it may break immersion. The texture is also mapped to the walls in each level, another reason the texture must be seamless. Because the texture is mapped to a sphere, it feels as though the world around the player is emitting cosmic rays and bursting, making it truly feel as though you are in a surreal fantasy world. 

We also use another unique scrolling texture for the space level: 

This texture used with the same shader gives a different feel do to its construction. In this case while playing the game, players tend to tilt their heads to the side and the effect pulls the player in. It truly gives the feeling that one is travelling through space.

Above is a video preview of the shader in action.

As seen above the scrolling texture truly adds to the effect of being in a surreal world.

Below is the shader code used to scroll the texture. It is a simple algorithm; we simply pass the total time elapsed since the beginning of the application and mutiply the UV coordinates to scroll the texture. The shader also samples from the texture twice, and scrolls both vertically and horizontally.

uniform sampler2D tex;

uniform float time;

uniform float speed;

void main()

{

gl_FragColor = texture2D(tex,vec2(gl_TexCoord[0].s + (time/-speed),gl_TexCoord[0].t)) + texture2D(tex,vec2(gl_TexCoord[0].t + (time/-speed),gl_TexCoord[0].s));

}

We also use another scrolling texture in our amazon inspired level. The level includes clouds that obscure the player's view of enemy spawners. The effect is meant to be one of wispy clouds flowing through the air as you travel through it, and I believe the affect was achieved perfectly.

Wispy clouds flowing through the air!

The shader algorithm used here is slightly different, as the texture is sampled twice, however it is only sampled with scrolling once.

uniform sampler2D tex;

uniform float time;

uniform float speed;

void main()

{

gl_FragColor = (texture2D(tex,vec2(gl_TexCoord[0].s + (time/-speed),gl_TexCoord[0].t)) + texture2D(tex,vec2(gl_TexCoord[0].s,gl_TexCoord[0].t)))/2;

}