WebGL via Three.js

January 8, 2014 3D graphics

My experiments with Processing left me with aspirations of 3D design tools that enable users to create beautiful objects they can customize to their utilitarian needs or aesthetic tastes.  Alas, it seems that I jumped into the scene too late as Java applets, the only means of sharing Processing sketches, are on their way out.  It’s probably for the best, however, because users are frightened of unsolicited pop-ups that ask you if you trust the random program that the website is trying to get you to open, the calling card of a Java applet… so it’s time to jump on a new train.

WebGL is emerging the leader in web-delivered 3D graphics.  It is a Javascript API that is compatible with a growing majority of web browsers, both desktop and mobile.  As I am completely new to this, you can read more about it here.  Three.js is a Javascript library that takes care of a lot of the more mundane, technical aspects of 3D scene creation, which is what I will be using from here on out.

Since WebGL is web-based, and interpreted by your web-browser, you don’t need to download any special compilers or software.  You do, however, need to have the code hosted on a server to allow you to view the content correctly.  In addition to learning Javascript, you need to at least be familiar with HTML and CSS, as the content is create on a web page.  My last HTML coding experience was back in 8th grade when I had a website on Angelfire, so I needed to learn HTML and CSS quickly to get up and running.  From some online searches, I found Codecadamy, and breezed through the intro HTML, CSS, Javascript, and JQuery tutorials in a matter of days.

This gave me enough familiarity to be able to start coding WebGL content using Three.js.  So, here it is, my first experiment in WebGL:

Click on the picture to go to view the experiment!


So… it’s not much.  But I’d say its pretty good considering I had basically no working knowledge of HTML, CSS, or Javascript 5 days ago.  I found a couple of really good resources on Three.js along the way:

  • http://stemkoski.github.io/Three.js/: This site is amazing… big thanks to author Lee Stemkoski.  It pretty much has a working example of everything you need to get started.  Since it’s on the web, all you have to do is press F12 to see the source code!  I based my experiment’s architecture on his Hello World example.  He’s got so much more content, it really is awesome.
  • http://threejs.org/docs/: Reference on three.js functionality.
  • http://www.w3schools.com/: Standard reference for javascript questions.

I’m honestly very excited about this first introduction to WebGL and Three.js.  I can add some new languages to my roster, and I can tell that they’ve got a lot of potential… stay tuned to see what comes next!

Leave a Reply

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