layer 3d transform
krumza August 31st, 2017

Hi again.

I try to get something like 

with 2 layers - one for character and 2 for gui

left and right panels

before recreate i think that it be so easy in wade with wade.setLayer3DTransform()

i use 

wade.setLayer3DTransform(1, 'rotateY(45deg) ', 'center center');//left panel
wade.setLayer3DTransform(2, 'rotateY(-45deg) ', 'center center');//right panel

but i dont see what i want

i add:

wade.setLayer3DTransform(1, 'perspective( 1920px ) rotateY(45deg)', 'center center');

But it dont solve problem - so strange behaviour of layer that i dont understand

Why layers transform started at left side of screen not by wade div?

Why transform descrease if i change window size?

There is possible in wade to do same effect as in a picture above?

upd

I think that reason - is the - follow code in css file:

canvas, #wade_main_div {
...
-moz-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d; 
}

This stick css property to every canvas and not unset by any manipulate with it

I try all transform functions to reset this but it not help 

i correct css file - separate canvas and main div:

canvas {
    position: absolute;
    padding: 0;   
}

all propertyes for canvas wade generate automaticly

and i get what i want

 

I think that is a serious problem - maybe not inside wade -  inside css, so i think that is must be fixed.

also - you set 800px perspective to all elements - why?

screen size is  changed, different games ara different screen size - but 800 px perspective everywhere? may be update it on resize/init in depend of game size?

then i think it construction so hard

why dont use div with 0 height and padding-bottom?

there is

main_div {
margin:0 auto;//or flex?
height:0; 
width:$game_width;
padding-bottom: $game-height/$game_width %;
...etc
}

and to body may add:

body{
...
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

i see that you like serif fonts, but sans-serif is better for ui ^)

All 3 Comments
Gio September 1st, 2017

Hi krumza

A few things to note:

1. I think you're right, it would be a good idea to change the perspective value when the canvas is resized.

2. Yes it's probably a good idea to separate canvas and #wade_main_div into two separate rules. Thanks for that, I will try it out and make sure that it works in all the different "window modes" (full, container, etc). If there are no problems we will use that going forward.

3. In most cases (like 99.99% of cases) people using wade want to make a full-screen type of game, with no external ui, no perspective, etc. The style.css that comes with wade is designed to achieve that while being very simple. It does include things such as perspective, backface-visibility, null transforms and transform-styles because you need these to force older browsers (think iOS Safari 7, or IE9) to use hardware acceleration. Saying that, you can freely edit the css (like you've done) to achieve more complex things.

4. If you are using multiple canvases, you can apply rules to each canvas separately, as each canvas is given its own name, for example you could set a rule for #wade_layer_8 only

5. Be aware of layer merging. From version 3.7, wade will merge webgl layers that are next to each other into a single canvas. This means you can't apply separate css rules to them, because they use the same css element. You can use wade.mergeGlLayers(false) to change this behavior. However merged layers are much faster

6. You don't really need css to do this. You could use a post-process shader on your layer to fake perspective as you see fit. This is likely faster than disabling layer merging, although slightly more complicated. I can probably post an example shader if you need help with that

krumza September 1st, 2017

hi Gio.

I use 2d layers for gui and it works almost as it should

I dont think about webgl context - and if you show how I would be very grateful.

But of course, if I could ask a lot of manuals for webgl in WADE 

 

And what about system font reset ror WADE by default - it so pretty and trand-y ^)

Gio September 1st, 2017

Yes the font is not a bad idea, and it's not likely to break anything because I don't think it's actually used anywhere. I'll try to change it for the next version.

A simple post-process shader that would give you that type of (fake) perspective would look a bit like this:

const float distPower = 1.;
vec2 uv = uvAlphaTime.xy;
uv.y -= 0.5;
float dist = uv.x > 0.5? 1.0 - uv.x : uv.x;
dist = exp(pow(dist, distPower));
uv *= dist;
uv.y += 0.5;
vec4 color = texture2D(uDiffuseSampler, uv);
gl_FragColor = color;

Change distPower to change the appearance, or remove the exp(...) if you want it logarithmic rather than linear, or generally use this as a starting point but play with it until it looks like what you want :)

Post a reply
Add Attachment
Submit Reply
Login to Reply