forum

A new approach for rendering sliders [Added]

posted
Total Posts
25
This is a feature request. Feature requests can be voted up by supporters.
Current Priority: +0
Topic Starter
mm201
New! I've written a new method using textured mesh sliders instead of greyscale max blending. There is no longer a dependency on Shader Model 2.0 or shaders in general. Porting the code over to OpenGL should be a simple process. The results with this new method are effectively identical to the previous, save for the much lower system requirements.

Details of my original method:
[quote="MetalMario201]I've shown a few screenshots and provided the source to my method, but things seem to have stagnated a bit, so let's discuss.

My method works as follows:
The curve is provided as a series of short line segments, just as osu!'s existing sliders are.
To an offscreen buffer, render each of these small segments as a rectangle with circular caps at each end. The width of the rectangle and its caps is the same as the circle size: 80, 72, 64, 56, or 48 osupixels depending.
These rectangles/circles use a special texture (actually not a texture; just vertex shading) which is white at the very center and falls off linearly to black at the outside edge.
MAX blending is used to draw these! This gives us a continuous track which is white on the inside and fades to black.
When rendering this texture to the screen, a special shader is used which substitutes values of grey with values on a linear gradient with stops, as seen in this image:


Weaknesses:
My current implementation has a Shader 2.0 dependency for the gradient substitution. It also doesn't yet support OpenGL. I'm confident both of these issues can be overcome.
For slider overlaps, the track merges instead of layering itself under the existing track.[/quote]

Advantages over current method:
The slider track can be translucent.
The slider track has a gradient from inside to outside which isn't affected strangely by curvature.
The slider track can have *variable* opacity, much like GL sliders, if desired.
The slider track can have a shadow.
The slider track is silky smooth.

Here are some examples of slider tracks drawn using this method:





The source to my demo (C#, Windows Forms, XNA 3.0) may be found at: http://up.ppy.sh/files/sliderrenderingsample2.rar

Also please note that I never intended for this code to just be dropped into osu! without issue. It's to demonstrate the theory behind it and will most certainly need to be rewritten to work with the osu! framework. I deliberately left out certain optimizations, such as the size of the offscreen texture used and the optimization of the number of segments taken, because I'm confident that they already exist within osu! and rewriting them would have been pointless.

I volunteer to implement this inside osu!
Derekku
0 replies wat

I like that they don't overlap and are sooo smooooooth <3
Kitsunemimi

MetalMario201 wrote:

My current implementation has a Shader 2.0 dependency for the gradient substitution.
Doesn't that mean it will lag my laptop (shaders are shit)?

MetalMario201 wrote:

The slider track is silky smooth.
Doesn't look much smoother to me <.< (of course, I use DX9, so it's harder to see if it's smooth or not)
Torran
Yes! No ugly lines but...

Derekku Chan wrote:

I like that they don't overlap
wait...if they don't overlap then how am I supposed to tell which direction the ball is going if the slider overlaps all over the place?
Then again, that would discourage overlapping sliders ;) .
Lesjuh

soradg123 wrote:

Yes! No ugly lines but...

Derekku Chan wrote:

I like that they don't overlap
wait...if they don't overlap then how am I supposed to tell which direction the ball is going if the slider overlaps all over the place?
Then again, that would discourage overlapping sliders ;) .
This. And when I overlap 2 different sliders do you have the same effect? That'd cause alotta trouble.
Topic Starter
mm201

Harris73 wrote:

MetalMario201 wrote:

My current implementation has a Shader 2.0 dependency for the gradient substitution.
Doesn't that mean it will lag my laptop (shaders are shit)?
With shaders, it will either work or it won't. On cards supporting shaders, there is no fixed-function pipeline, so everything is actually a shader.

I'm looking into ways to knock the shader requirements down to 1.1, which should be supported by anything that osu! supports in D3D mode, but someone more experienced than I will need to look at this. (I've already tried using one texture to look up coordinates in another texture, but this too required Shader 2.0.)

Harris73 wrote:

Doesn't look much smoother to me <.< (of course, I use DX9, so it's harder to see if it's smooth or not)
Look again. The D3D sliders have very a very obvious "segmenty" appearance, and are completely opaque. The GL sliders have colour bar artifacts, non-constant opacity (though I could make mine have non-constant opacity if I wanted), and aliasing.

lesjuh wrote:

This. And when I overlap 2 different sliders do you have the same effect? That'd cause alotta trouble.
Only the very most unrankable sliders would cause problems. I'd be hard pressed to find a map which would be unreadable.

Separate sliders are separate, and should look GORGEOUS. You can see the track of the lower slider through the one above because of the partial transparency. Of course, I'd need to actually put this into osu! to get a pic.
MMzz
The last picture somewhat looks like a lolgay.
Ekaru
I support this. It looks good.
Zekira

MittenMasterzz wrote:

The last picture somewhat looks like a lolgay.
Hahahahaha
Kitsunemimi

MetalMario201 wrote:

Harris73 wrote:

Doesn't look much smoother to me <.< (of course, I use DX9, so it's harder to see if it's smooth or not)
Look again. The D3D sliders have very a very obvious "segmenty" appearance, and are completely opaque. The GL sliders have colour bar artifacts, non-constant opacity (though I could make mine have non-constant opacity if I wanted), and aliasing.
True say, especially for the aliasing. Well then I guess this is a pretty nice modification.
Dragvon
Fabulous! Overlapping would be a bit confusing, but it's certainly not a big issue.
My dream is still to be able to skin some sliders, do you think it would be possible to add an special texture to it or something else?
i.e stripes for a race-themed song, so it would look that the slider is a race circuit '-'
Topic Starter
mm201
A textured slider track requires mesh rendering, which is something I'm looking into. The math is very complicated when the turns are sharp.
RandomJibberish
These sliders are <3
Sakura
Oh hi, this looks nice, but i got a question are you taking into account the BPM x Slider vel thingy? since i dont see where you would input those values in the program
anonymous_old

Sakura301 wrote:

Oh hi, this looks nice, but i got a question are you taking into account the BPM x Slider vel thingy? since i dont see where you would input those values in the program
I think the length of a slider in the .osu is written in osu!pixels and is independent of effective slider velocity.

Also, that doesn't affect rendering at all (except where the 'cutoff' point is).
Sakura

strager wrote:

Sakura301 wrote:

Oh hi, this looks nice, but i got a question are you taking into account the BPM x Slider vel thingy? since i dont see where you would input those values in the program
I think the length of a slider in the .osu is written in osu!pixels and is independent of effective slider velocity.

Also, that doesn't affect rendering at all (except where the 'cutoff' point is).
Oh ok, nvm then
Matma Rex
Looks pretty sweet.

MetalMario201 wrote:

Shader dependency
But seriously, if it ever gets used, please, either somehow make it work on ancient cards (without shader support) or leave the current way as an option. Not being able to play even freeware games due to that really sucks ;_;

Or maybe add these sliders to "SHader Effects"?
Topic Starter
mm201

Matma Rex wrote:

Or maybe add these sliders to "SHader Effects"?
This.

I'm looking into some tricks to remove the shader dependency. Using Z buffers in place of max blending (which are really the very same) and casting the texture as indexed RGBA should get these working on just about any card.

I'm also looking into mesh sliders and a software implementation of these sliders, both of which would have extremely low requirements.

Edit: *facepalm*
It's so simple! Basic mesh sliders with Z-testing. No shaders required. Runs on ancient hardware. Allows for primitive textured slider tracks.
/me writes
Topic Starter
mm201
Double post, but I made it to announce...

NO MORE SHADERS!!!

See above post for details. I'm driving myself nuts from how obvious this should have been. These sliders are meshes with a raised center, using Z-testing to keep stuff well behaved for overlaps/sharp edges. They're rendered to an offscreen buffer in order to blend onto the background. The results are identical to my previous sliders.

These should run on anything at all that can handle osu!

Source: http://up.ppy.sh/files/sliderrenderingsample2.rar
Xgor

MetalMario201 wrote:

These should run on anything at all that can handle osu!
YES!!!
Me want!
Azure_Kite
You should probably update the first post with this new info. i.e. lack of necessity of previous requirements.

Looking good; I'd love these in osu!. As I think I've said before...
Topic Starter
mm201
Hmm, looking more closely at the osu!code fragments peppy's shared, I can see a few more advantages to my method:

  1. Less than half the number of polygons are used: I only need to draw the first circular cap on the very first segment, not every segment. Another optimization I didn't put into my demo, for reasons of time/effort, but will appear in my osu! implementation is to only render a small wedge instead of a whole half-circle for the end cap between segments.
  2. Under my method, rendering with the Snaking Sliders effect can be distributed over many frames. This makes Snaking Sliders actually introduce a performance IMPROVEMENT, not a degredation.
  3. The slider start and end circles are drawn to the primary buffer instead of the slider texture, allowing for a PROPER fix for i92. This also allows ticks overlapping the start and end circles to be drawn.
arien666
Seems fine sliders to me :3
:3???
Kert
:3
I love how they look. Waiting for them~
Topic Starter
mm201
Added.

For those worried about being able to read stupid overlapping sliders, the old sliders can be restored by adding the line, "SliderStyle: 1" to your skin.ini, under [General].

(Under OpenGL, my new sliders will always be used, since they're fundamentally the same only nicer looking with AA and a normal looking gradient.)
Please sign in to reply.

New reply