My friends, I have swallowed the red pill and now I’m tumbling down the rabbit hole.
I used to think that I knew what I needed to create and display amazing graphics on the web. Only now learning about the power of WebGL, am I just starting to see how wrong I was.
I was inspired by this demo: http://codepen.io/befamous/pen/iJsHl
Modern web browsers now have the power to display more than just rectangles moving about in a 2D world.
In my amazement I have started researching how these things are done. This is not just juggling some strings to get the right composition of HTML, CSS, and JavaScript to make your page look nice. No… these are vectors, matrices, and rendering engines. It’s amazing technology, but not for the faint of heart. ( http://www.mathsisfun.com/ is always there to help you.)
If you’re thinking of dropping off, let me inspire you a little bit more:
Properly inspired, it’s time to roll up your sleeves and start the hard work.
WebGL is a direct descendant of OpenGL 2.0. So resources that teach you how to build shaders — the primary tool for creating these 3D visualizations — for that platform will work in WebGL.
One of my favorite OpenGL tutorials I’ve seen is here: http://www.opengl-tutorial.org/beginners-tutorials/ (don’t bother with the tutorials that explain how to get OpenGL running.)
Learning WebGL has tutorials directed specifically for web-based use cases, but they don’t hold your hand through the math at all: http://learningwebgl.com/blog/
Speaking of Math, there’s a lot to learn about how 3D graphics work in general. So far I’ve been loving http://www.scratchapixel.com/ for learning that. (I’ve always wondered exactly what principles were being used for ray tracers.)
If this all sounds like a bit too much, fortunately you can hide a lot of this complexity by using a JavaScript framework that kind of asks at the jQuery of WebGL called Three.js. http://threejs.org/
Time to work on overclocking these brains.