Mixing
How to animate abstract 2d top down water texture?
Clash Royale CLAN TAG#URR8PPP
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;
up vote
2
down vote
favorite
I currently implement a game with a top down view of the ocean. I use the following, a little abstract texture: 
The actual texture is transparent, I added the green-like color for clarity.
The problem I now have is, that I don't know how to animate this texture so the water looks nice. I tried to move the texture with a sin wave: texture.y += sin(angle). Of course now the whole texture is moving which looks kind of unrealistic. The next thing I tried is to add another layer and implement a parallax effect. So that reflections under the water surface would also move, but much slower. It looks a little better but still not... nice enough.
I think the best looking animation would be, if the individual cells would expand and contract, kind of like a web or piece of cloth. Imagine if someone would slightly pull at one vertex of these cells and the neighbored cell would expand and the cell I pull towards to (or push to) would contract. Kind of like a web of springs(?). But I have no clue how to implement something like this:
- Whats the math-model for this? Something with springs, where forces push/ pull?
- And if so, how do I map this model to the given texture? Keeping all the curves and what not...
(I'm also open to different ideas/answers on how to animate the given texture.
Realism is not the point here, just some nice looking water like movements...)
2d libgdx animation water
asked 2 hours ago
morpheus05
1113
add a comment |Â
up vote
2
down vote
favorite
I currently implement a game with a top down view of the ocean. I use the following, a little abstract texture:
The actual texture is transparent, I added the green-like color for clarity.
The problem I now have is, that I don't know how to animate this texture so the water looks nice. I tried to move the texture with a sin wave: texture.y += sin(angle). Of course now the whole texture is moving which looks kind of unrealistic. The next thing I tried is to add another layer and implement a parallax effect. So that reflections under the water surface would also move, but much slower. It looks a little better but still not... nice enough.
I think the best looking animation would be, if the individual cells would expand and contract, kind of like a web or piece of cloth. Imagine if someone would slightly pull at one vertex of these cells and the neighbored cell would expand and the cell I pull towards to (or push to) would contract. Kind of like a web of springs(?). But I have no clue how to implement something like this:
- Whats the math-model for this? Something with springs, where forces push/ pull?
- And if so, how do I map this model to the given texture? Keeping all the curves and what not...
(I'm also open to different ideas/answers on how to animate the given texture.
Realism is not the point here, just some nice looking water like movements...)
2d libgdx animation water
asked 2 hours ago
morpheus05
1113
add a comment |Â
up vote
2
down vote
favorite
up vote
2
down vote
favorite
I currently implement a game with a top down view of the ocean. I use the following, a little abstract texture:
The actual texture is transparent, I added the green-like color for clarity.
The problem I now have is, that I don't know how to animate this texture so the water looks nice. I tried to move the texture with a sin wave: texture.y += sin(angle). Of course now the whole texture is moving which looks kind of unrealistic. The next thing I tried is to add another layer and implement a parallax effect. So that reflections under the water surface would also move, but much slower. It looks a little better but still not... nice enough.
I think the best looking animation would be, if the individual cells would expand and contract, kind of like a web or piece of cloth. Imagine if someone would slightly pull at one vertex of these cells and the neighbored cell would expand and the cell I pull towards to (or push to) would contract. Kind of like a web of springs(?). But I have no clue how to implement something like this:
- Whats the math-model for this? Something with springs, where forces push/ pull?
- And if so, how do I map this model to the given texture? Keeping all the curves and what not...
(I'm also open to different ideas/answers on how to animate the given texture.
Realism is not the point here, just some nice looking water like movements...)
2d libgdx animation water
asked 2 hours ago
morpheus05
1113
I currently implement a game with a top down view of the ocean. I use the following, a little abstract texture:
The actual texture is transparent, I added the green-like color for clarity.
The problem I now have is, that I don't know how to animate this texture so the water looks nice. I tried to move the texture with a sin wave: texture.y += sin(angle). Of course now the whole texture is moving which looks kind of unrealistic. The next thing I tried is to add another layer and implement a parallax effect. So that reflections under the water surface would also move, but much slower. It looks a little better but still not... nice enough.
I think the best looking animation would be, if the individual cells would expand and contract, kind of like a web or piece of cloth. Imagine if someone would slightly pull at one vertex of these cells and the neighbored cell would expand and the cell I pull towards to (or push to) would contract. Kind of like a web of springs(?). But I have no clue how to implement something like this:
- Whats the math-model for this? Something with springs, where forces push/ pull?
- And if so, how do I map this model to the given texture? Keeping all the curves and what not...
(I'm also open to different ideas/answers on how to animate the given texture.
Realism is not the point here, just some nice looking water like movements...)
2d libgdx animation water
2d libgdx animation water
asked 2 hours ago
morpheus05
1113
asked 2 hours ago
morpheus05
1113
asked 2 hours ago
morpheus05
1113
asked 2 hours ago
morpheus05
1113
asked 2 hours ago
morpheus05
1113
1113
add a comment |Â
add a comment |Â
2 Answers
2
active
oldest
votes
up vote
2
down vote
This is called a caustic effect, and generating these effects at runtime is fairly time consuming, so this is traditionally done with pre-rendered frame-by-frame animation. There are tools that will generate caustic animation frames for you, such as Caustics Generator, which has a free version for non-commercial use. There are also some pre-made ones that you can buy for significantly cheaper than the pro version of the tool I mentioned.
Note that caustic effects are also usually an effect applied as a light cookie on an underwater terrain, or on the underwater surface. That is, putting it on the surface of the water while looking down into it is not normally what water looks like.
answered 25 mins ago
Ed Marty
2,6301411
add a comment |Â
up vote
2
down vote
A common way this is done is using an indirect texture lookup in the shader to distort the display texture:
Here I'm using a texture with some low-frequency colour noise (tiling smooth blobs of random colours), and scrolling it across the display geometry over time.
Instead of drawing the colours from this texture, I instead take the red & green channels and subtract 0.5f to turn them into a pseudorandom 2D vector that changes smoothly over time & space.
I can then add a small multiple of this vector to my UV coordinates, before sampling from the main water texture. This shifts the part of the texture we're reading & displaying, warping it around.
By averaging two samples from this noise, scrolling in opposite directions, we can hide the direction of movement so it just looks like aimless sloshing.
In Unity the shader would look like this - it should be simple enough to translate to the shader language of your choice:
fixed4 frag (v2f i) : SV_Target
float2 waveUV = i.uv * _NoiseScale;
float2 travel = _NoiseScrollVelocity * _Time.x;
float2 uv = i.uv;
uv += _Distortion * (tex2D(_Noise, waveUV + travel).rg - 0.5f);
waveUV += 0.2f; // Force an offset between the two samples.
uv += _Distortion * (tex2D(_Noise, waveUV - travel).rg - 0.5f);
// Sample the main texture from the distorted UV coordinates.
fixed4 col = tex2D(_MainTex, uv);
return col;
answered 18 mins ago
DMGregory♦
52k1195146
This looks really nice. I'm not sure I understand all the attributes: _NoseScale = scalar for scaling the "noise map". _NoiseScrollVelocity = Vector2 at which speed we move across the noise map. _Noise = ?. _Distortion = Scalar I choose as a distortion factor? v2f = Vertex we determine the color. i = ?
– morpheus05
9 secs ago
add a comment |Â
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
2
down vote
This is called a caustic effect, and generating these effects at runtime is fairly time consuming, so this is traditionally done with pre-rendered frame-by-frame animation. There are tools that will generate caustic animation frames for you, such as Caustics Generator, which has a free version for non-commercial use. There are also some pre-made ones that you can buy for significantly cheaper than the pro version of the tool I mentioned.
Note that caustic effects are also usually an effect applied as a light cookie on an underwater terrain, or on the underwater surface. That is, putting it on the surface of the water while looking down into it is not normally what water looks like.
answered 25 mins ago
Ed Marty
2,6301411
add a comment |Â
up vote
2
down vote
This is called a caustic effect, and generating these effects at runtime is fairly time consuming, so this is traditionally done with pre-rendered frame-by-frame animation. There are tools that will generate caustic animation frames for you, such as Caustics Generator, which has a free version for non-commercial use. There are also some pre-made ones that you can buy for significantly cheaper than the pro version of the tool I mentioned.
Note that caustic effects are also usually an effect applied as a light cookie on an underwater terrain, or on the underwater surface. That is, putting it on the surface of the water while looking down into it is not normally what water looks like.
answered 25 mins ago
Ed Marty
2,6301411
add a comment |Â
up vote
2
down vote
up vote
2
down vote
This is called a caustic effect, and generating these effects at runtime is fairly time consuming, so this is traditionally done with pre-rendered frame-by-frame animation. There are tools that will generate caustic animation frames for you, such as Caustics Generator, which has a free version for non-commercial use. There are also some pre-made ones that you can buy for significantly cheaper than the pro version of the tool I mentioned.
Note that caustic effects are also usually an effect applied as a light cookie on an underwater terrain, or on the underwater surface. That is, putting it on the surface of the water while looking down into it is not normally what water looks like.
answered 25 mins ago
Ed Marty
2,6301411
This is called a caustic effect, and generating these effects at runtime is fairly time consuming, so this is traditionally done with pre-rendered frame-by-frame animation. There are tools that will generate caustic animation frames for you, such as Caustics Generator, which has a free version for non-commercial use. There are also some pre-made ones that you can buy for significantly cheaper than the pro version of the tool I mentioned.
Note that caustic effects are also usually an effect applied as a light cookie on an underwater terrain, or on the underwater surface. That is, putting it on the surface of the water while looking down into it is not normally what water looks like.
answered 25 mins ago
Ed Marty
2,6301411
edited 18 mins ago
answered 25 mins ago
Ed Marty
2,6301411
answered 25 mins ago
Ed Marty
2,6301411
answered 25 mins ago
Ed Marty
2,6301411
2,6301411
add a comment |Â
add a comment |Â
up vote
2
down vote
A common way this is done is using an indirect texture lookup in the shader to distort the display texture:
Here I'm using a texture with some low-frequency colour noise (tiling smooth blobs of random colours), and scrolling it across the display geometry over time.
Instead of drawing the colours from this texture, I instead take the red & green channels and subtract 0.5f to turn them into a pseudorandom 2D vector that changes smoothly over time & space.
I can then add a small multiple of this vector to my UV coordinates, before sampling from the main water texture. This shifts the part of the texture we're reading & displaying, warping it around.
By averaging two samples from this noise, scrolling in opposite directions, we can hide the direction of movement so it just looks like aimless sloshing.
In Unity the shader would look like this - it should be simple enough to translate to the shader language of your choice:
fixed4 frag (v2f i) : SV_Target
float2 waveUV = i.uv * _NoiseScale;
float2 travel = _NoiseScrollVelocity * _Time.x;
float2 uv = i.uv;
uv += _Distortion * (tex2D(_Noise, waveUV + travel).rg - 0.5f);
waveUV += 0.2f; // Force an offset between the two samples.
uv += _Distortion * (tex2D(_Noise, waveUV - travel).rg - 0.5f);
// Sample the main texture from the distorted UV coordinates.
fixed4 col = tex2D(_MainTex, uv);
return col;
answered 18 mins ago
DMGregory♦
52k1195146
This looks really nice. I'm not sure I understand all the attributes: _NoseScale = scalar for scaling the "noise map". _NoiseScrollVelocity = Vector2 at which speed we move across the noise map. _Noise = ?. _Distortion = Scalar I choose as a distortion factor? v2f = Vertex we determine the color. i = ?
– morpheus05
9 secs ago
add a comment |Â
up vote
2
down vote
A common way this is done is using an indirect texture lookup in the shader to distort the display texture:
Here I'm using a texture with some low-frequency colour noise (tiling smooth blobs of random colours), and scrolling it across the display geometry over time.
Instead of drawing the colours from this texture, I instead take the red & green channels and subtract 0.5f to turn them into a pseudorandom 2D vector that changes smoothly over time & space.
I can then add a small multiple of this vector to my UV coordinates, before sampling from the main water texture. This shifts the part of the texture we're reading & displaying, warping it around.
By averaging two samples from this noise, scrolling in opposite directions, we can hide the direction of movement so it just looks like aimless sloshing.
In Unity the shader would look like this - it should be simple enough to translate to the shader language of your choice:
fixed4 frag (v2f i) : SV_Target
float2 waveUV = i.uv * _NoiseScale;
float2 travel = _NoiseScrollVelocity * _Time.x;
float2 uv = i.uv;
uv += _Distortion * (tex2D(_Noise, waveUV + travel).rg - 0.5f);
waveUV += 0.2f; // Force an offset between the two samples.
uv += _Distortion * (tex2D(_Noise, waveUV - travel).rg - 0.5f);
// Sample the main texture from the distorted UV coordinates.
fixed4 col = tex2D(_MainTex, uv);
return col;
answered 18 mins ago
DMGregory♦
52k1195146
This looks really nice. I'm not sure I understand all the attributes: _NoseScale = scalar for scaling the "noise map". _NoiseScrollVelocity = Vector2 at which speed we move across the noise map. _Noise = ?. _Distortion = Scalar I choose as a distortion factor? v2f = Vertex we determine the color. i = ?
– morpheus05
9 secs ago
add a comment |Â
up vote
2
down vote
up vote
2
down vote
A common way this is done is using an indirect texture lookup in the shader to distort the display texture:
Here I'm using a texture with some low-frequency colour noise (tiling smooth blobs of random colours), and scrolling it across the display geometry over time.
Instead of drawing the colours from this texture, I instead take the red & green channels and subtract 0.5f to turn them into a pseudorandom 2D vector that changes smoothly over time & space.
I can then add a small multiple of this vector to my UV coordinates, before sampling from the main water texture. This shifts the part of the texture we're reading & displaying, warping it around.
By averaging two samples from this noise, scrolling in opposite directions, we can hide the direction of movement so it just looks like aimless sloshing.
In Unity the shader would look like this - it should be simple enough to translate to the shader language of your choice:
fixed4 frag (v2f i) : SV_Target
float2 waveUV = i.uv * _NoiseScale;
float2 travel = _NoiseScrollVelocity * _Time.x;
float2 uv = i.uv;
uv += _Distortion * (tex2D(_Noise, waveUV + travel).rg - 0.5f);
waveUV += 0.2f; // Force an offset between the two samples.
uv += _Distortion * (tex2D(_Noise, waveUV - travel).rg - 0.5f);
// Sample the main texture from the distorted UV coordinates.
fixed4 col = tex2D(_MainTex, uv);
return col;
answered 18 mins ago
DMGregory♦
52k1195146
A common way this is done is using an indirect texture lookup in the shader to distort the display texture:
Here I'm using a texture with some low-frequency colour noise (tiling smooth blobs of random colours), and scrolling it across the display geometry over time.
Instead of drawing the colours from this texture, I instead take the red & green channels and subtract 0.5f to turn them into a pseudorandom 2D vector that changes smoothly over time & space.
I can then add a small multiple of this vector to my UV coordinates, before sampling from the main water texture. This shifts the part of the texture we're reading & displaying, warping it around.
By averaging two samples from this noise, scrolling in opposite directions, we can hide the direction of movement so it just looks like aimless sloshing.
In Unity the shader would look like this - it should be simple enough to translate to the shader language of your choice:
fixed4 frag (v2f i) : SV_Target
float2 waveUV = i.uv * _NoiseScale;
float2 travel = _NoiseScrollVelocity * _Time.x;
float2 uv = i.uv;
uv += _Distortion * (tex2D(_Noise, waveUV + travel).rg - 0.5f);
waveUV += 0.2f; // Force an offset between the two samples.
uv += _Distortion * (tex2D(_Noise, waveUV - travel).rg - 0.5f);
// Sample the main texture from the distorted UV coordinates.
fixed4 col = tex2D(_MainTex, uv);
return col;
answered 18 mins ago
DMGregory♦
52k1195146
answered 18 mins ago
DMGregory♦
52k1195146
answered 18 mins ago
DMGregory♦
52k1195146
answered 18 mins ago
DMGregory♦
52k1195146
52k1195146
This looks really nice. I'm not sure I understand all the attributes: _NoseScale = scalar for scaling the "noise map". _NoiseScrollVelocity = Vector2 at which speed we move across the noise map. _Noise = ?. _Distortion = Scalar I choose as a distortion factor? v2f = Vertex we determine the color. i = ?
– morpheus05
9 secs ago
add a comment |Â
This looks really nice. I'm not sure I understand all the attributes: _NoseScale = scalar for scaling the "noise map". _NoiseScrollVelocity = Vector2 at which speed we move across the noise map. _Noise = ?. _Distortion = Scalar I choose as a distortion factor? v2f = Vertex we determine the color. i = ?
– morpheus05
9 secs ago
This looks really nice. I'm not sure I understand all the attributes: _NoseScale = scalar for scaling the "noise map". _NoiseScrollVelocity = Vector2 at which speed we move across the noise map. _Noise = ?. _Distortion = Scalar I choose as a distortion factor? v2f = Vertex we determine the color. i = ?
– morpheus05
9 secs ago
This looks really nice. I'm not sure I understand all the attributes: _NoseScale = scalar for scaling the "noise map". _NoiseScrollVelocity = Vector2 at which speed we move across the noise map. _Noise = ?. _Distortion = Scalar I choose as a distortion factor? v2f = Vertex we determine the color. i = ?
– morpheus05
9 secs ago
add a comment |Â
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgamedev.stackexchange.com%2fquestions%2f163689%2fhow-to-animate-abstract-2d-top-down-water-texture%23new-answer', 'question_page');
);
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password