Osu: Replace triangle intro sequence video with a shader (or otherwise) implementation

[oSumAtrIX]

I have a WQHD Monitor with is 2560 × 1440 pixels and the video with a resolution of 1080 × 1080 pixels looks pretty pixelated since it starts at being scaled up to 120% and scales down to 80%.
I suggest a resolution of 1,296 × 1,296 pixels for SD and double resolution for HD and up.

https://github.com/ppy/osu-resources/blob/master/osu.Game.Resources/Textures/Menu/logo-triangles.mp4

https://github.com/ppy/osu/blob/76d34967a4ba0acd3a510c17921c2c43da194816/osu.Game/Screens/Menu/IntroTriangles.cs#L221

[peppy]

1080 -> 1296 is not going to really help. if anything we could add an @2x version, but i'm not sure the decoding loop would keep up, which is the reason it is going to remain locked to 1080px.

the actual fix would be implementing the whole thing via a shader.

[peppy]

If anyone is interested in attempting this, we can provide the after effects file showing each layer / curve. Note that this is not to be considered a simple task (would be worth $300+ for a near-frame-perfect implementation).

[yuuiko]

@peppy

https://airbnb.design/lottie/

[peppy]

Cool library, but won't help us.

[yuuiko]

https://github.com/airbnb/lottie-web

Don’t know if this is any more help but apparently it works for HTML / javascript too. I’m not that familiar with how osu works though. I heard about this library from someone else who makes mac apps. I also got an animation of my own to work on the web.

[peppy]

It is not relevant. osu! is not a web-based project.

[jorolf]

I would like to give this a try however I don't have After Effects to open the file. Maybe the plugin mentioned on that website can help? It exports the animations in a json format.

[peppy]

the AE format is already pretty well supported. @arflyte can you drop the file in here when you have a chance?

[EmilySunpy]

Been thinking of a few ways to handle this issue, but have come to the conclusion that the easiest and lightweight method is probably the best. My proposal is to render out a png with shifting color value to make a path. I generated this sample png with after effects: (258 KB & ~1529 possible frames with this spesific instance)

I reinstalled my OS a little while ago so I have not gotten around to run dotnet yet so I made a demo on shadertoy: (Note that on shadertoy it ignores alpha channel on png input so there are some small artifacts that wont be there if used in osu framework)

[peppy]

Awesome thinking! Would you still find the AE file helpful?

[arflyte]

Lazer Intro folder.zip

Here's the AE file.

[repsanims]

My proposal is to render out a png with shifting color value to make a path.

Would it be more reliable using a vector path to animate the logo?

Since the png still a raster meaning if it's exported at 1080p it still create the low-res artifact, and even 2160p will still be a low-res if you're using an 8K projector.

Anyway, I just recreate a cleaner osu transition in AE (thanks @arflyte for the AE file)

I made it using a single stroke in a single object with a controller so it's easier to have fun with it! (If the shader would use a vector path)

logo-triangles.zip

[Wieku]

I think 2K, 4K or even 8K (depending on osu!'s resolution/platform) mipmapped texture shouldn't be that bad. I think custom geometry just for 1 second animation is like shooting to a fly with a cannon.

I modified @EmilySunpy logo a bit in GIMP:

I've made a demo using my own client (click for YT video):

And my fragment shader looks like this (highlight and animation are controlled by Glider objects):

#version 330

uniform sampler2DArray tex;
uniform float highlight;
uniform float animation;

in vec2 tex_coord;

out vec4 color;

vec3 rgb2hsv(vec3 c)
{
    vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
    vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
    vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));

    float d = q.x - min(q.w, q.y);
    float e = 1.0e-10;
    return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
}

void main() {
    vec4 in_color = texture(tex, vec3(tex_coord, 0));

    vec3 hsv = rgb2hsv(in_color.rgb);

    color = vec4(vec3(hsv.r < highlight ? (hsv.r < animation ? 0.4f : 1f ) : 0f), (hsv.r < highlight ? 0.8f : 0f) * in_color.a);

}

If someone want to try it (sorry for the size, Hibernate lib weights a lot, was too lazy to make another gradle module just for the test, Java 8 is needed, should work on Windows, Linux and MacOS): https://drive.google.com/file/d/1YG2YQm4lcp7HW-Xexfwpz_bVP3WYmPwN/view?usp=sharing

[Wieku]

Not everyone trusts random binaries so I've made a new branch with that animation: https://github.com/Wieku/danser/tree/lazer-logo-test

[Wieku]

Ok, I tried in lazer this time with the logo above: https://youtu.be/3VQ9RuhWhQs

[frenzibyte]

The logo lines seem to be thick, otherwise great job!

[Wieku]

It looks like this right now (I know, there are still a lot of artifacts) : https://youtu.be/rqIPQtHx_yI

If someone wants to play with this I created a branch on my fork: https://github.com/Wieku/osu/tree/logo-shader

Of course you need different osu-resources:
https://github.com/Wieku/osu-resources/tree/logo-shader

[peppy]

That's looking pretty good! Just needs some tweaking to bring it closer to the existing animation.

[Wieku]

Also with that we will need higher resolution gamemodes textures. The last one before animated logo looks pretty pixelated on 27" WQHD screen.

As for animation, I still have to find an efficient way to generate caps at the end of paths.