Classic 3-Column CSS Layout with WebGL Zone

WebGL is a fascinating thing! If you google keywords like “best webgl examples“, you will find a multitude of 3D demos that literally blow your mind with stunning 3D effects running in your (modern) browser.

While the pure WebGL is quite unhandy, libraries like glMatrix ( that handles matrix and vector operations (translate, scale, rotate) makes a JavaScript developers life much easier. Nevertheless, you will quickly get lost in 3D object definitions and coordinates matrix chaos. Cubes are easy, cylinders less, but the famous tea cup…

That’s where full blown 3D JavaScript libraries enter into the arena. You can define scenes, add cameras, load complex objects built with 3D applications like Blender and Wings 3D, define viewports and light sources, and all is rendered into your browser window just by snapping your fingers.

In my personal case, I needed a WebGL “window” within my classic 3 columns HTML layout. My choice felt on the amazing Three.js library ( and with the help of Jerome’s “Three.js Boilerplate Builder“, my base project was quickly created. After modifying the CSS and HTML template, as well as adding support for window re-size, the template looks like this:


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.