Why WebGL

.
A vast majority of my knowledge and experience in software engineering has revolved around web applications development. While most of my professional duties involve back-end development (mostly Ruby), I have more then a fair share of front end web development skills(i.e. JavaScript, CSS(3) and HTML). Prior to my maturity as a developer before much practice with any specific language I had an interest in video game technology. More specifically the real time rendering and components of DirectX and OpenGL.
.
After some great advice on the "For Beginners" forums (https://www.gamedev.net/topic/673606-direction-for-a-seasoned-web-dev/) I decided to begin my journey with WebGL. Since I've been using OS X and Ubuntu for the past 5 years to develop on, I opened up the MacBook and shut down the Windows machine for another day.
.

My Environment

.
With OS X I have several editors and IDEs I like to use depending on the situation but in this case I want to keep things simple. My simple editor of choice here is VIM using a handful of plugins including:

• CtrlP
  
• CTags w/CtrlP search
  
• NerdTree
  
• Syntastic
  
• Vim-fugitive
  
• Vim-l9
  

.
With WebGL I have the option to open my html files directly from a browser but this has limitations on linking and resource access. For this reason a simple Nginx server is fitting here. Using a package manager for OS X called Homebrew I install nginx with a barebones configuration. A quick configuration of the server giving it a name ending in 'local' such as webgl.local and an addition to my hosts file allows me to serve and access content just as if hosting on a remote server.
.
My OS X terminal is configured to use bash (sorry zsh people) and I use tmux when developing with vim.
.

Easy to Instantiate

.
WebGL contexts are served from the canvas element and can be considered standard or experimental. It is my understanding that standard is what you will get in modern browsers and experimental is a fallback. I've been using the following site for a baseline of support here - http://caniuse.com/#feat=webgl
.canvas = document.getElementById("glcanvas");gl = canvas.getContext("webgl") || canvast.getContext("experimental-webgl");
.
It's then simple to clear the color of the canvas rendering viewport.
.gl.clearColor(0.0, 0.0, 0.0, 1.0);gl.enable(gl.DEPTH_TEST);gl.depthFunc(gl.LEQUAL);gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
.

Shaders in my DOM

.
Using an HTML script element, I am able to define shaders directly in an HTML file, and reference these elements from my script by their ID. Once the element is stored in a JS object I can read all children and siblings representing the text of the shader. I then follow the standard OpenGL process of compiling the text, attach it to a program along with any other compiled scripts and link the program.
. varying lowp vec4 vColor; void main(void) { gl_FragColor = vColor; }
.

Math and a quick shortcut

.
One thing I knew was at some point I would run into some math that I would need to set aside time to learn. At this point with Javascript there seems to be a library for almost everything on GitHub and Matrix/Vector arithmetic was no exception. Once I had this component I was able to create a standard interface for creating perspective matrices.
.perspectiveMatrix = makePerspective(45, vertAspect, 0.1, 100.0);
.

Plugging and chugging

The remainder of the process so far has been very "standard" use of the methods defined by OpenGL ES. Tasks such as creating, binding and populating buffers or drawing a triangle list. After establishing the rendering process in a draw scene method I was able to use some simple JavaScript to establish a rendering loop. This is the definition of simple and I'm sure has more then a few problems, but it's fine for my own learning purposes.
.setInterval(drawScene, 15);
.

In Conclusion

.
More progress has been made such as textures and lighting, but I will leave remaining details for another time. It would also be nice to put a simple article together to describe how to get a scene going and where to reference some nice JS tools (e.g. testing). Otherwise It has become very clear to me that I will need to get a very solid grasp of this shader language in all steps of the pipeline if I want to be solid in controlling real time rendering. Off to discover more, please leave questions or comments if you have any!
.
Until next time, Cheers!