Simsure
LightNews LightNews
banner
simsure.bsky.social
Simsure
@simsure.bsky.social
3 followers 5 following 21 posts
🇮🇹 👾Indie game dev
☕http://ko-fi.com/simsure
⚡http://gamejolt.com/@Simsure
🎮http://simsure.itch.io
Posts Replies Media Videos
simsure.bsky.social
And the final touch is making this render three times, tweaking the uniforms to have smaller, faster and more transparent foam under the main one
August 7, 2025 at 5:59 PM
simsure.bsky.social
The actual color comes not from the shader but from the background texture, you can see how it gives a much better look.

The shader could be modified to make it darker the center, this is just how we did it in our game.
August 7, 2025 at 5:59 PM
simsure.bsky.social
The result
August 7, 2025 at 5:59 PM
simsure.bsky.social
The final steps consist in removing transparent pixels to have a opaque foam, (thanks to the previous step we have a perfect circle and not a square)

With some final inversion and multiplication we get a single float value of our swirling foam, fading as it goes to the center
// Multiply the inverted swirl with the fading circle vec4 fadedSwirl = vec4(animSwirlStepInv.rgb, 1.0) * fadeCircleInv; // Discard any non opaque pixel if(fadedSwirl.r < 0.1) discard; // Get a fading value where the center is more transparent float fadedSwirlInvValue = 1.0 - ((fadedSwirl.r + fadedSwirl.g + fadedSwirl.b) / 3.0); // Add an external opacity value float finalValue = fadedSwirlInvValue * u_opacity; // Keep the final value above 0 transparency finalValue = max(finalValue, 0.05); gl_FragColor = vec4(1.0, 1.0, 1.0, finalValue);
August 7, 2025 at 5:59 PM
simsure.bsky.social
The result
August 7, 2025 at 5:59 PM
simsure.bsky.social
Now using the polarColor.r from before we generate a fading circle image, that will be used to make the edge of the whirlpool blend with the surroundings.
Get the final image by multiplying the inverted circle with the inverted image from the last step
// Use the modified polar coordinates to sample a noise texture vec4 animSwirl = texture2D(u_noise, animUv); // Use the step function to get only the white shape of the whirling "foam" float animStep = step(u_scale, animSwirl.r); vec4 animSwirlStep = vec4(animStep); // Create a fade circle image, darker on the inside and lighter on the outside. float fadeValue = pow((polarColor.r/1.0), 2.0); vec4 fadeCircle = vec4(fadeValue, fadeValue, fadeValue, 1.0); // Invert both the swirl step and the fade circle vec4 animSwirlStepInv = vec4(1.0 - animSwirlStep.rgb, 1.0); vec4 fadeCircleInv = vec4(1.0 - fadeCircle.rgb, 1.0); // Multiply the inverted swirl with the fading circle vec4 fadedSwirl = vec4(animSwirlStepInv.rgb, 1.0) * fadeCircleInv; gl_FragColor = fadedSwirl;
August 7, 2025 at 5:59 PM
simsure.bsky.social
The result
August 7, 2025 at 5:59 PM
simsure.bsky.social
With a step function let's get only the white "foam" form the rotating noise image
// Use the modified polar coordinates to sample a noise texture vec4 animSwirl = texture2D(u_noise, animUv); // Use the step function to get only the white shape of the whirling "foam" float animStep = step(u_scale, animSwirl.r); vec4 animSwirlStep = vec4(animStep); gl_FragColor = animSwirlStep;
August 7, 2025 at 5:59 PM
simsure.bsky.social
The result, we can already see the whirlpoolness
August 7, 2025 at 5:59 PM
simsure.bsky.social
Now we use a noise texture to sample the image that will be the canvas for our whirlpool,
i used a generic noise image (cloud like) found online.

The UV to use for sampling are based on the polar coordinates after some passes.
float animR = (polarColor.r * 1.5) + time; float animG = (polarColor.r * 1.5) + polarColor.g; vec2 animUv = vec2(animR, animG); animUv = vec2(fract(animR), fract(animG)); // Use the modified polar coordinates to sample a noise texture vec4 animSwirl = texture2D(u_noise, animUv); gl_FragColor = animSwirl;
August 7, 2025 at 5:59 PM
simsure.bsky.social
The result
August 7, 2025 at 5:59 PM
simsure.bsky.social
The starting point is a polar coordinate texture, we use this custom function found online that i changed a bit to make it work correctly in GMS
#define PI 3.1415926538 varying vec2 v_vTexcoord; varying vec4 v_vColour; uniform sampler2D u_noise; uniform float u_time; uniform float u_scale; uniform float u_opacity; // Function to calculate the polar coordinate in a specific point vec2 polar(vec2 UV, vec2 center, float radialScale, float lengthScale) { vec2 delta = UV - center; float radius = length(delta) * 2.0 * radialScale; float angleRad = atan(delta.y, delta.x); float angle = (angleRad + PI) / (2.0 * PI) * lengthScale; return vec2(radius, angle); } void main() { // Slow down the time float time = u_time / 40000.0; // Center of the UV vec2 center = vec2(0.5,0.5); // Mirror the UV (this change the whirlpool spin direction) vec2 coord = v_vTexcoord; coord.y = 1.0 - coord.y; // Get poolar coordinate of this point vec2 polarColor = polar(coord, center, 1., 1.); gl_FragColor = vec4(polarColor.r, polarColor.g, 0.0, 1.0); }
August 7, 2025 at 5:59 PM
simsure.bsky.social
Here's a little #tutorial for the whirlpool #shader we used in Whirloop.🌀

𝐏𝐫𝐞𝐦𝐢𝐬𝐞: it was made pretty fast for a game jam, it can probably be way more optimized and clean, i just fixed it a bit for this tutorial

👇🧵
August 7, 2025 at 5:59 PM
simsure.bsky.social
The magic of sprite stacking.

#GMTK2025 #gmtkjam #spritestack
August 6, 2025 at 3:23 PM
simsure.bsky.social
A simple trick in Whirloop to give the illusion of water around objects.

itch.io/jam/gmtk-202...
pixeltentacles.itch.io/whirloop

#GMTKJam #GMTK2025 #spritestack #loop
August 5, 2025 at 4:28 PM
simsure.bsky.social
Me an Wah made this little game for the #GMTKJam
You can try and rate it on the jam page.
Has been fun i'm really happy with the final result of just two days of work.

itch.io/jam/gmtk-202...
pixeltentacles.itch.io/whirloop

#GMTK2025 #spritestack #loop
August 4, 2025 at 4:26 PM