Jump to content

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


Recommended Posts


              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)";





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




Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...