How We Made a WebGL and Three.js Splash Page for a Music Release
by on July 16, 2017 in tech WebGL

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.


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

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

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

Olivia Hadjiioannou, Ολίβια Χατζηιωάννου, Oh., Press photos, Official Photos, Music, News, Greece, metal, RockMulti-instrumentalist and director Olivia Hadjiioannou as the artist Oh. has been honored for her ingenuity, innovation and creativity in music and video with multiple international awards. She made her debut as Oh. on the international music scene with the award-winning music video, "Trials" in 2013 – cited as one of the 50 top events to mark Greece during the economic crisis. With the advances of immersive video, she released her single "Love of Avalanches", mentioned in Huffington Post as one of first 360-degree immersive VR videos released by a Greek artist on YouTube in 2016.

The music video "Red Lion" is presently a winner and official selection in 12 film festivals worldwide. Winner of Best Music Video award in the inaugural French Riviera Film Festival (FRFF) in Cannes, France. Winner Best Music Video at the Cosmocinema Film Festival in London. Winner of the Best Music Video Short in The Psychedelic and Transpersonal Film and Music Festival that took place on May 25, 2019 at The Producer’s Club in New York City. Winner Best Experimental Mixed Media Short Film at the Paleochora Lost World Short Film Festival in Southwestern Crete in Greece. Read more in her Bio and EPK

The EP “Metallia” has received over 32 reviews from 13 countries worldwide, is in top 10 progressive rock and metal charts and listed as one of the best albums of the year for 2018 on Metal Nation Radio.

CD Metallia - Oh. aka Olivia Hadjiioannou

“Metallia” by Oh. is an epical prog-metal composition in six parts. A multi-layered sonic piece of ravishing solo electric guitars, time-bending tempo shifts, grooving bass lines and deranged drums.

This instrumental progressive metal album will reveal its intricacies and hidden depths over time. It will extract from your mind pure visions, to mend your mental pictures, preen presumptions and to elicit an element of the unexpected…. because that is what will transmute your subliminal mind map into a remarkable blueprint which will lead you from wherever you are now, to wherever you want to be.

Available on Bandcamp

Weird and Wonderful World of Oh.

Do you want to follow the journey? Subscribe below to
The Weird & Wonderful World of Oh.

* indicates required


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

  1. Oh. | "I'm in Love" WebGL Project Nominated for Award at | Oh.

Leave a Reply

© 2019 All rights reserved Privacy Policy • Terms of Service