[effect] Mario Cube FX

Hi nice people ;

matriax asked me if it's possible to map 6 faces cube according faces disposed with 3D Cube map textured style ;

Don't forget C2 is not using vertex shader so it's not possible in teory;

https://en.wikipedia.org/wiki/File:Skybox_example.png

So after 5 day of intensive work and combining some gls code i have made demo and it's working at 60 fps;

http://gigatron3k.free.fr/html5/C2/FX/mcube

** Please don't rip this shader with this demo... simply let me release it..

Really Interesting, works like a 3D cube on we can texture each side or with zoom-big object work as a Skybox.

Some questions:

1.- The cube only appears inside the X/Y size of the sprite, if you make it bigger looks cutted. I saw some shaders that on applied to a for example a 64x64 sprite in the runtime the effect looks out that size. This is because a shader can work out the sprite limitations in some way or because on runtime the sprite limits goes big to fits the shader requeriments? Is to understand better how shaders works.

2.- The textures have some smoothing/mipmap/bilinear, is possible add an option to switch that? to select Nearest or Bilinear, in case we want to preserve real pixels?. In the same way, the cube, talking about the polygon no have antialias, any chances to apply?

3.- Any way to Transform the model? I mean make the X,Y,Z more bigger/short. For example scale the Y to use it as a column or as a building.

PD. Why the "Mario Cube" name?

The demo let me think of the program "prepakura" in reverse. keep up the good work!

Really Interesting, works like a 3D cube on we can texture each side or with zoom-big object work as a Skybox.

Some questions:

1.- The cube only appears inside the X/Y size of the sprite, if you make it bigger looks cutted. I saw some shaders that on applied to a for example a 64x64 sprite in the runtime the effect looks out that size. This is because a shader can work out the sprite limitations in some way or because on runtime the sprite limits goes big to fits the shader requeriments? Is to understand better how shaders works.

2.- The textures have some smoothing/mipmap/bilinear, is possible add an option to switch that? to select Nearest or Bilinear, in case we want to preserve real pixels?. In the same way, the cube, talking about the polygon no have antialias, any chances to apply?

3.- Any way to Transform the model? I mean make the X,Y,Z more bigger/short. For example scale the Y to use it as a column or as a building.

PD. Why the "Mario Cube" name?

1 - The sprite area is the Quad like shadertoy uv screen or c2 vTex ;

2 - maybe in c3;

3 - scale the sprite in editor ?

Mario cube ... really don't know

1- Understood

2- So actualy in C2 there is no way to apply antialias to 3D render or use Nearest instead Bilinear?

3- I mean scale the Cube rendered by the shader, to make more tall, short or depth.

Then seems actually is not possible do what i want in this way. Really hope C3 comes with vertex shaders and the rest of options you need to unlock all the potential. Will be great have in C3 the chances to do 2D games with the option to add 3D things with some properties to adapt it as our needs.

1- Understood

2- So actualy in C2 there is no way to apply antialias to 3D render or use Nearest instead Bilinear? <img src="{SMILIES_PATH}/icon_e_sad.gif" alt=":(" title="Sad">

3- I mean scale the Cube rendered by the shader, to make more tall, short or depth.

Then seems actually is not possible do what i want in this way. Really hope C3 comes with vertex shaders and the rest of options you need to unlock all the potential. Will be great have in C3 the chances to do 2D games with the option to add 3D things with some properties to adapt it as our needs.

matriax

glmatrix 2.0 will resolve the problem...

I made another example based on box mapped with specular not based on triangles vertices;

http://gigatron3k.free.fr/html5/C2/FX/mcube2

And here is the fx;

http://gigatron3k.free.fr/html5/C2/FX/mcube2.rar

You can scale only the box on x y z and see mapped texure wich scaled with static value;

this mean all faces are scaled separately the box; however if you want make building Set the x, y or z face scale to the minimum instead of maximum, and zoom it : in this demo the size of sprite is 450x450;

texture disposition format must exactly like this; i used this texure in demo;

https://en.wikipedia.org/wiki/File:Skybox_example.png

good luck ;

Hi Gigatron , first of all thanks for the plugin!.

Looks promising, but i realized some problem with the camera, here is a twitter post with a video i made:

https://twitter.com/DavitMasia/status/8 ... 3825052676

Without the ScrollTo is more evident that the cube is "floating".

Is there anyway to change how the camera works? I mean, is there anyway to change the X,Z,Y position of the camera? Also rotate the X,Y,Z of the camera. This will bring a lot more options.

I know you said you will wait to C3 for develop more shaders, maybe in C3 there will need some edits or do since 0 again so only asking if can be done in a easy way, otherwise not worry only a few weeks to the C3 beta so no problem.

I think with some tweaks a shader like this can be used to do topDown shooters, Platforms or real 3D games like Doom or Wolf3D in a easy way that can be awesome.

P.D. Also discovered that turn Sampling to "Point" instead "Linear" show real pixels with no antialias or texture smoothing that is great for some retro games.

----

Edit 1: I made a stress test with this results:

In a GeForce 670 GTX With 150 sprites at 256x256 pixels using 1024x texture and one light for each cube starts to break <img src="{SMILIES_PATH}/icon_razz.gif" alt=":P" title="Razz">

https://twitter.com/DavitMasia/status/8 ... 0237495296

The game drops at 50 but still runs well, but the recording goes crazy and gots freezed XD . No matter if the cubes are rotating or not, or if the textures have smooth sampling or not the perfomance is the same. The problems is the number of sprites and their size, then the perfomance drops considerably <img src="{SMILIES_PATH}/icon_e_sad.gif" alt=":(" title="Sad"> . BTW, i guess still there is no optimization and maybe also the use of one light for each cube instead one for all can affect to that and can be improved a lot.

Edit 2: Editing the shader

I removed the light (Spec and spow parameters) and not gain all the perfomance as i thought. Without light the number of cubes before frame downs increases to 15 more but is not the big thing. So i guess is the mathematical stuff that i not understand. Btw, i'm going to try editing things and doing tests for curiosity <img src="{SMILIES_PATH}/icon_razz.gif" alt=":P" title="Razz">

Perfomance tests:

Shader Perfomance tests before frame drops in cubes on screen:

64x = 1600

256x = 160

512x = 60

I found something weird. Cubes without movementin the screen static, simply placing the shader and the same perfomance. If the shader no changes their position and the cube is not rotating decreases the frame drops. So i guess the actual shader render always that he cans even if there is no information-change.

Doing another post because the other one was already too big.

I continue doing more test and i found some weird thing that improves the perfomance a lot lossing some alpha in the cube borders ¿? .

[quote:2pmop7cr]

// The perfomance problem?

float trace(vec3 o, vec3 r)

{

float t = 0.0; //

// Some kind of weird alpha around the cube ¿?

for (int i = 0; i < 64; ++i) { // 64 = 150cubes | 32 = 300 cubes | 16 = 450 cubes on screen (256x Sprites)

vec3 p = o + r * t;

float d = map(p).x;

t += d;

}

return t;

}

With 64 the cube looks right without any alpha loss around there. With less, the perfomance is improved a lot but with that weird thing.

Why this thing? Is like each 3D cube is formed overlapping 64 alpha renders :O . Why not create the cube using simply quad/triangles polygons? Or i'm missing something ¿? .

matriax

This shader using iterations for the precision (raymarching shader); You must need minimum 64 iterations

this is normal value, imagine some shaders have 200 iterations...

If you want gain a bit speed , you can break the loop if precision become lower than 0.001; the ray considering

nothing to hit;

// The perfomance problem?

float trace(vec3 o, vec3 r)

{

float t = 0.0; //

// Some kind of weird alpha around the cube ¿?

for (int i = 0; i < 64; ++i) { // 64 = 150cubes | 32 = 300 cubes | 16 = 450 cubes on screen (256x Sprites)

vec3 p = o + r * t;

float d = map(p).x;

if (d<0.001) break; //This will stop the loop ... and consider that the ray has nothing more to detect

t += d;

}

return t;

}

The first shader demo use triangles : http://gigatron3k.free.fr/html5/C2/FX/mcube

instead of raymarching like here ;

Gigatron Not a real gain. Between the same or 10 more cubes on screen with different tests.

Also i found another perfomance thing. If the sprite is 512x512 but the cube with their zoom is only for example 64x64 size their perfomance in screen is the same with the cube at 512x512 or 32x32 or whatever :S . The perfomance only improves with the size of the sprite not the shader render content. Maybe was obviously but i didn't know that.

So, what is the real difference between Raymarching and using triangles in terms of quality or features? Because after know how raymarching works seems is a GPU consuming :S .

Can you post the first Cube shader that uses triangles please? I want to test their perfomance to see how much difference is.

---

Interesting shaders i found that may improve the perfomance:

-----------------------------------------------------

Triangle Rasterize shader with a cube textured:

https://www.shadertoy.com/view/XdlGzn

----------------------------------------------------

Cheap Cubemap:

https://www.shadertoy.com/view/ltl3D8

matriax

Yes , the first demo is based on IQ rasterized traingles. It use 1 itération to draw the result;

https://www.shadertoy.com/view/XdlGzn

You can now roll x,y for make building like your demo on twitter;

http://gigatron3k.free.fr/html5/C2/FX/mcube

If camera is upper of the object you must use roll x,y ;

If camera is face of the object then you can use rotation x,y etc...

fx file :

http://gigatron3k.free.fr/html5/C2/FX/mcube.rar

Gigatron Perfomance tests comparing Rasterize-RayMarching

Number of sprites at 256x before frame downs

Raymarching = 150

Rasterize = 320

Number of sprites at 512x before frame downs

Raymarching = 60

Rasterize = 120

Number of sprites at 1024x before frame downs

Raymarching = 25-30

Rasterize = 60

Mmm... this is correct? I thought with rasterize the perfomance will be boosted, yes there is obviously an improvement but i was expecting more than 1000 cubes for 256x :S . But at the end the perfomance was "only" 2x.

I'm going to see the .FX code and do other test to see if i can find in this case what is the thing more GPU is taken.

matriax

Don't forget this : every sprite you created mean X sprite on the execution with C2. Each Sprite are used to draw glsl shader inside;

Are you tryed performance with empty square sprites on C2 without fx ?

Hope you understand .

Gigatron Nope, tried now, i did it and this are the results:

Number of sprites before frame downs

512x512 = +1900 sprites(no FX) | 120 With Rasterize FX Cube

1024x1024 = 800-900 Sprites(no FX) | 60 With Rasterize FX Cube

What you think?

Also i saw the .FX code and damn, how complicated is do a simple cube with a texture :S .

matriax

glsl texture3D ... or textureCube is missing in glmatrix 1.30 used by C2 ; maybe C3