How We Made a WebGL and Three.js Splash Page for a Music Release

by Oh. on July 16, 2017 in tech WebGL

You need an iframes capable browser to view this content.

The iframe above is a WebGL experiment with three.js. You can take a peek here

This is a guest post by our dev Tima V.:

First Things First

Click here to view our experiment in your browser (WebGL enabled please) and Chrome or Firefox for now!

Techy Stuff

Well, if you are here on this post, there’s a good chance you already know about rendering 3D in a browser and most likely about WebGL and three.js. For those who were just curious how this is done, here’s a quick account of our journey into WebGL.

WebGL is a JavaScript API used to render 2D and 3D graphics to the screen in a browser. Three.js is a library that makes it much easier to do because it “takes care” of a lot of stuff necessary to render 3D scenes in your browser.

Our Journey into WebGL

If you are “run of the mill” web developer like me, you know your HTML, PHP, CSS. Also, now-a-days you definitely gotta know your JavaScript or at least enough to understand how to copy battle-tested code from other sites or github and make the necessary tweaks to get it working on your dev. It’s an uphill battle to keep up with all these new awesome scripts. But, if you have have a basic knowledge of JavaScript, you can see the beauty in a author’s code and develop on it.

The Libraries

There are a many libraries for doing WebGL, we looked at:

PlayCanvas: PlayCanvas looked fantastic for 3D HTML5 and WebGL games and we may use in the future if you are trying to import 3D models and make scenes for games, it looks totally awesome.

PixiJS: A fast HTML5 2D rendering engine that uses webGL with canvas fallback but as it’s for 2D.

Babylon.js: This is a complete JavaScript framework for building 3D games with HTML 5 and WebGL, which we spent a lot of time trying to figure out whether to use this or three.js.

Finally there is Three.js which is honestly a truly epic masterpiece of code written by Mr. Doob (Ricardo Cabello). Three.js is updated and refined constantly on github by many incredible developers with wikis and examples and docs. I spent many hours reading all the history and version updates – the last of which is version r86 on June 21, 2017.

Three.js

We settled on using three.js because it is an awesome script and real education of WebGL fundamentals. As with any new library, there’s a learning curve, kind of like reading poetry and needs some time to “get the gist” of the prose. Three.js in it’s earlier releases is somewhat easier to approach especially because of two sites mentioned below that make entry so clear.

Those two sites are Mr. Lee Stemkoski’s github page with examples and Jerome Etienne’s blog, “Learning Three.js or WebGL for Dummies“. The last 2000 clicks on both of your websites and github pages are probably from a computer in Greece. If you are visually oriented, the code examples on the Stemkoski page are well commented and simple visually. I read that Mr. Stemkoski is a professor, and you can tell he knows how to breakdown info into small incremental bites of knowledge and teach it. Etienne is an excellent writer, so if you learn by following tuts, he is the way to go.

Technicals 101

Our humble experiment above was created merging five examples on the Stemkoski website. The Refraction Sphere example was used for the crystal ball, Particles for the orbs, Video Texture for the video player, Texture/3D text for the text and Skybox for the environment.

I’m grateful for these two men’s work. Now, the problem here was that most of Stemkoski’s and Etienne’s examples are using out-dated versions of three.js, most of the examples on both sites, work well up to r58 or r74. And then you end up like the little comic we cooked up below.

Coder’s Remorse

I spent a lot of time on the migration guide on Mr. Doob’s github thinking I could just swap out the old for the new, but the skybox (cubemap), particles and well mostly all of it (LOL) – didn’t cut it because from r58-76 to r86 most of those external scripts, controls, renderers etc have been removed, renamed or moved (sigh). If you are a “dummy” like me with a full workload, hopefully I can possibly save you some grief by telling you it’s going take more than a few weeks to bridge the gap from r58-74 to the current build. You essentially have to scrap everything and start over on the official examples page build on three.js.org.

Mr. Doob and the other visionary developers on github are painstakingly venturing into the Wild West of WebGL and are going lightening fast considering the unknown terrain. Much respect for choosing to innovate rather than be backwards compatible right now. It finally dawned on me why my two mentors stopped updating their blogs and github after 2013-2015.

The Future

In the future, we’ll be using the current build for more experiments. But, because of the time constraints for Oh’s single release, “I’m in Love” – we saw that even though the script is old in internet years, it still works pretty well for the simple effect we needed. Even r58 was pretty awesome and definitely works!

New Build Experience

We made another little experiment for a blog post for Oh.’s new releases on the new build below using, the Ocean shader example, Light points, Cubemap examples. You can take a peek

You need an iframe capable browser to view this content.

The iframe above is a WebGL experiment with three.js. You can take a peek here

Diving into the new build wasn’t so intimidating this time after spending two weeks under the tutelage of Mr. Stemkoski and Etienne – (truly wish you had continued to create tutorials, you are awesome teachers!). Many thanks to Mr. Doob and all the developers contributing to three.js.

Three.js can be downloaded from github, where you will also find links to documentation and examples.

As for our humble experiment above, the code is in the page source (there is an error or two and not sure Mr. Doob would approve…;)

Follow on Twitter:

The music artist Oh. @olitunes
Ricardo Cabello (Mr. Doob) @mrdoob
Lee Stemkoski @ProfStemkoski
Jerome Etienne @jerome_etienne
Tima V. @timavlasto