Material Design in vvvv

hi vvvvolks,

i would like to know if some of you already created a material-design-like approach with v4?
this topic is not about pro&contra of this design.
its more about technical stuff.
for example: do you have some hints on creating those nice shadows on cards/surfaces?
MaterialDesign-shadows
i tried to use the deferred shadow example, and yes it works (physically correct) but lacks the visual quality (maybe because of my level of dx11 knowledge).
the texture fx “drop shadow” is visually good but not usable in a “flat” 3d-space.

any hints?
thanks.

On deferred shadow there is a depth blur you can use to blur the shadow their might be a quality settings, maybe if u post a screenshot or patch with your scene i would be able to tell or help you more…

they’re using good old dropshadows. if I were you I wouldn’t use deferred shadows because that have pretty severe artifacts for gui. I’d make 2 versions for all of the elements, one for the interactive part and one for the shadow (black with alpha texture). for quads you can solve the shadow with a pillow tfx and for segments you can solve it with simple gradient tfx. connect those to setalpha and boom done

hi,

thank you for response

@antokhio: i tried the blur, but like @microdee said, the artifacts are pretty heavy with this method. i will attach an example patch later this evening… maybe you have some ideas.

@microdee: i dont think its that simple , i really would like to use a simple solution but basic drop shadows will not work in my opinion.

if you look at my pic, you ll see the diferent shadows of my “top card” , depending on the z-pos of the element behind it.

and dont tell my i just need to prepare different drop shadows for every object. think of cards as floating elements, not only floating in x/y also on z. the shadow should float with them.

maybe there is somehow a solution to use the dropshadow but with a shadow depending on the z-pos of the underlying element??

ah if you want to have that sort of fidelity you have to use RWTexture2DArray in your pixel shader, I dunno how google does it in android though. You can use the 1st layer to draw stuff and you can use the second for your own depth logic. You need that so you can access state of the depth in-between the quads inside the frame. This sort of technique would also require z-sorting (from closest to background surface to farthest)
with that you can specify shadow size based on what was rendered underneath current layer already but before layers above current are drawn.

ok cool thank you,
i googled RWTexture2DArray and got lost because i dont know enough to implement it into a pixel shader or so…

but anyway, maybe you know of an existing v4-example which uses a similar technique?

@antokhio:

here is the patch with your DeferredShadow
as i said, pretty realistic results so far,any ideas on how to achieve a bigger softer (blurred) shadow?
if i use your blurring, not only the shadows get blurred also the meshes - or did i miss sth?

DeferredShadow_flatVersion.v4p (25.6 KB)

you could create a control texture from the shapes that controls which pixels are blurred…

I think tonfilm is right, if you have only flat surfaces this will be the most efficient way…
checking the patch…

ok i end up just replacing perspective with ortho for the light, i think it made quality a little bit better…

FlatShadow.zip (40.5 KB)

there are some settings on BlurZ, like iteration count, wider shadow more iterations u will need

@tonfilm,
nice idea.
i did a quick test (dx9, without z-sorting, correct textures etc) and it looks promising
materialDesignCTRLtex01.zip (8.9 KB)

can someone give some hints how to do it within dx11?

hi, quality looks ok, there is node in dx11 called LinearDepth u can use to get balck and white mask
i don’t know if i have time tomorrow i’ll take a look on porting that, i did a try with blur size by depth it did’t worked out of the box…

Hi hrovac.
Still a bit work in progress, and obviously i wouldn’t call that an elegant solution ;]
However it has a self occlusion (which actually also needs some work)

update
FlatShadow4.zip (6.0 KB)

1 Like

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.