Jump to content
  • entries
  • comments
  • views

Bootstrapping with WebGL

Sign in to follow this  


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.

    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!

Sign in to follow this  


Recommended Comments

No matter how hard I tried, the formatting, just kept getting wrecked... oh well, another time to figure that out.

Share this comment

Link to comment

Thanks a million CulDeChu, the entry looks much better now and I don't even notice the periods.  :)

Share this comment

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Advertisement

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!