WebGL Experiment in three.js
The downside is that it’s not an obvious choice for VJs as it does not integrate with VJ apps. But I’m sure tools will appear over time to overcome this.
Just have a look at some of the mind-blowing visual possibilities WebGL brings for visualists:
Lights
Ro.me
Blast
Often when delving into a new programming environment the hard part comes right at the beginning when you try to get a grasp of the architecture of things and the tools needed. I have been playing around with webGL for about a week now and I am slowly getting over that first stony hillside I needed to climb before being able to code anything useful.
So I thought I’d share what I found useful along the way in order to get up and running.
1. Programming environment
In theory all you need is a text editor and a browser. But I know from experience that a real code editor is useful to help keep everything readable. So far I am quite pleased with Sublime Text. As for the browser I chose Chrome for development, but it could probably just as well be Firefox. From what I’ve heard Opera and Safari do not quite live up to the others yet and as for Internet Explorer – who knows?. Make sure to have the latest version of the browser.
2. Web server
Yes a web server is needed, loading up pages by simply opening them locally is only going to work for the simplest of coding examples. Fortunately I am on a Mac and got a long way using the built in Python http-server. Here’s a quick how-to:
Open the Terminal app, write ‘cd ‘ and drag the folder with your code files into the Terminal window. Now it says ‘cd /Users/You/Path/To/Your/Folder/’. Make sure there’s a space after cd. Enter. Then write ‘python -mSimpleHTTPServer’. Enter. Now the Terminal should respond ‘Serving HTTP on 0.0.0.0 port 8000′. Go into Chrome and write ‘http://localhost:8000′ as the address. You should now see the contents of your folder as clickable links.
3. WebGL API
webGL is supported by the above mentioned browsers out of the box. However I use an API for accessing webGL as I find the objects and functions of the API hide some of the complexities and provide me with helpful shortcuts to get things done. One of the most popular at the moment seems to be Three.js and so far I am enjoying using it a lot. There are a lot of good resources and examples on Three.js on the net right now.
4. Getting started with three.js
First I followed this tutorial. Then I tried to code something myself. I found out that the documentation is of some use but it’s very incomplete at the moment. So I did what was recommended and dug into the three.js examples (they are in the examples folder of the three.js download). I start out by looking at an example that does something close to what I want to achieve and then I copy the file and start messing with the code. Unfortunately I have often found the examples to be overly complex – especially when I started out – things are starting to make more sense now. I keep peeling away the stuff that I don’t need in the code, while continually checking in the browser what effect my change is having until I have a minimal working example. Then and only then do I start adding my own code. I may also try to combine code from different examples to achieve what I want.
5. Debugging javascript
WebGL is all about javascript and fortunately Chromes developer tools are really good for telling what’s going on and what is going wrong. cmd+option+I brings up the panel. Console shows the error messages but I have also had good use of the Watch Expressions and the Break Points. Here’s a good article to get started with the debugger tools.
6. Figuring out the error messages
For many things I understand what’s wrong by simply clicking the link in the console and see where in the code the error is. But for the more cryptic error messages Google is my friend. It may seem obvious but simply googling ‘webGL three.js’ + the error message will often bring up something useful. Especially the questions and answers on stackoverflow.com – no wonder as the developer of three.js moved all support to this site. For some browser specific errors searching for ‘chrome’ + error text will bring up an answer.
7. What WebGL isn’t
First of all WebGL builds upon OpenGL but it’s not the same. So reading up OpenGL won’t be directly applicable – especially so if you’re using an API like three.js. OpenGL code examples from other contexts may be portable but not without some translation. If you’re new to the whole realm of realtime 3D graphics including openGL it would probably be useful to read a primer on the general concepts – although one big advantage of three.js lies in the way it uses words and concepts that will be familiar to you if you have played with 3D applications such as 3D Studio, Maya or Cinema4D.
So that’s it from me for now. I don’t offer a complete webGL tutorial just these few tips for now. If you are already up and running with WebGL feel free to add in the comments any other similar tips that helped you when you started out.
.png "Screen shot 2010-11-25 at 21.20.07")
Live online remix of the maps at here.com
A remix could be many things but in this case the word refers to some modifications I made to the maps at here.com in realtime using the Node-Webkit framework. Like this:
What you see on the right is a screen-shot of the live and navigable application at here.com but interface elements have been removed and the whole maps has received a colored tint.
In other words it’s possible to modify and change the look and functionality of a live website without copying it to another server or hack the server on which the website resides (don’t do that, kids!).
I made the modifications using simple html and javascript which modifies the website when viewed in my own browser – or in this case a specialized application made using the Node-Webkit framework.
In this video I demonstrate how the modification works:
Background
As a part of my work with Obscura we do visuals for various events. For this one event it would be really appropriate to display some nice slow flyover video on the big screen of 3d maps like the ones you have on Apple maps or Google maps on iOS. I found the maps at here.com and pondered how to get them on the big screen without those navigation buttons while still being able to control camera movements.
Real time browser remix
Via javascript it’s pretty easy to modify the DOM of a web page – thus controlling how the page is displayed in your browser. and hiding an element or a section only requires one line of code. For instance you can navigate to here.com in the Chrome or Firefox browser, choose the 3D map display and bring up the Developer Tools console. There you enter this line:
window.document.getElementById("map-controls").style.display = "none";And voila the navigation button are gone and same goes for the other UI overlays.
Changing the look of the map was easy with CSS filters that have become available in HTML5.
So using the developer tools I also figured out a bit of the code that lies below the surface on here.com and I found some methods that I could trigger and use to navigate the map even with no visible controls. Keyboard shortcuts are already implemented (arrows, shift, + and -) but I didn’t like the movements – I thought it was going to fast on a big screen.
Security Issues
Problem is I would have to put all this stuff in to the console every time I open the here.com website. And with an accidental reload of the page I would have to do it again.
So I thought about writing a document that opens here.com in a pop up window and then modifies it in the same way as we did above? Well this is called cross site scripting and there are many reasons why browser creators don’t like that.
Node-Webkit
However from other experiments I have become familiar with an application framework called Node-Webkit which provides a handy and quite easy way to create standalone applications using HTML and Javascript. And since node-webkit has a fully functional Chromium (open sourced Chrome) browser embedded I could continue my experiments in Node-webkit. And most importantly – without any security restrictions. Node-webkit allows you to dig into the DOM and javascript of any webpage you load!
Results
Here is the final Node-webkit application I made. To run it simply go to Node-webkit site and grab a binary for your platform then download my file and open it with node-webkit: Maps
My small app has plenty of bugs (I had one day before the event to figure it out) but feel free to have a look. Simply rename maps.nw to .zip and unpack it.
Final Notes
Before I end this let me show you how it looked at the event this modification was created for:
I am quite thrilled with the idea of remixing websites and as a visual performer I also find node-webkit brings a lot of potential for writing other tools that can be used for performance. With WebGL in mind this should open up a number of possibilities. And while VJing with a browser has some limitations because of the standard GUI of the browser I could easily see node-webkit applications being made for VJs or other visual artists.
So I will continue exploring this environment and would love to hear if others are doing something similar.