My new blog with a cool animated WebGL banner using babylon.js

[davrous]

Hi!

              During my vacation, between 2 games playing Ori and the Blind Forest, I’ve been enjoying to setup my new blog: https://www.davrous.com

              Based on WordPress, hosted on Siteground, I’ve customized the Oblique theme to use Flexbox rather the strange dynamic layout computation and fix a lot of layout issues to support all browsers. The worst browser to support was definitely Chrome. MS Edge and Firefox was very cool. It was because of the complex oblique layout using SVG elements. I had a couple of issues with srcset on Firefox but seems to be fixed now.

 

              Last but not least, I hope you’ll enjoy the cool animated WebGL banner (using our lovely Babylon.js of course! J). This one was fun to build also. Getting the resource from the HoloLens Galaxy Explorer open source project, converting them to Babylon.js using our Unity exporter, placing the WebGL planets on top of the background image using a transparent canvas and simulating a background-size: cover behavior by code. You can check my code via this sample: http://david.blob.core.windows.net/babylonjs/banner/coversim.html

 

              The interesting part is there:

 

              function resizeToCover() {

            var currentWidth = myHeader.offsetWidth;

            var currentHeight = myHeader.offsetHeight;

 

            var scale_h = currentWidth / canvas_w_orig;

            var scale_v = currentHeight / canvas_h_orig;

 

            var scale = scale_h > scale_v ? scale_h : scale_v;

 

            canvas.style.width = scale * canvas_w_orig + "px";

            canvas.style.height = scale * canvas_h_orig + "px";

 

            canvas.style.transform = "translateX(-" + (scale * canvas_w_orig - currentWidth) / 2 + "px)";

 

            engine.resize();

        };

 

              Could be useful if you’d like to do something similar.

Cheers,

David

 

[jerome]

nice that your old blog redirects alos to the new one 

I'm a great fan of your blog, I came to HML5 game dev (as a hobby), first in 2D, then to BJS thanks to your blog and then thanks to DK's one.

[Dal]

Wow! Looks great. Your example and the link to the open resources will be really helpful for a space game idea I have in mind

[Wingnut]

Nice work, Dav... you're just ridiculously talented... artist, musician, coder, creativity, innovation... superhero!

But, now, the more important thing...  resizeToCover() hmm.  Maybe Mister Davrous is showing us some code that could be used in our "adjust the vjcanvas" issue for virtual joysticks.  hmm.  Interesting!  Very very interesting.   

Ozrocker?  Dbawel?  Meteoritool?  See that func?  Things that make ya go "hmm", huh?  *nod*  Thanks for sharing that, Admiral Davrous!

[FlashyGoblin]

Nice work! Simple implementation yet powerful results! 

[davrous]

Thanks for your kind feedback!

@Wingnut, I need to find time working on the virtual joysticks. I need to understand what's really wrong with the current implementation before refactoring it. One or 2 short sentences would be perfect

[Wingnut]

Hi Davrous.  Thanks for concern.  Nothing is really "wrong" but it needs more power/features.  vrrrooooom!    Let's go  here, if you please.

[ozRocker]

Beautiful design!  Is the banner a video from pre-rendered Babylon.js or is it running Babylon.js code in realtime?

[GameMonetize]

it is realtime

[ozRocker]

39 minutes ago, Deltakosh said:

it is realtime

if you made it interactive that'd be heaps cool, cos then people would know its webGL instead of a video background

[Vousk-prod.]

Very nice banner davrous (and cool blog refactoring too).

Letting the ability to play with the 3d scene could be a little plus to showcase BJS power, but in fact I also like the principle of using 3d to create new kind of dynamic-but-not-systematicaly-interactive banners.