delphic.me.uk Navigate

WebGL Development Setup

A very important part of development and the first part you have to deal with is your "environment". Writing JavaScript is a bit outside the norm in this respect because there isn't an established Integrated Development Environment in the same way as there is for a lot of other languages. I've played around with using a few different IDEs and editors, including but not limited to; Notepad, Notepad++, Sublime Text, Visual Studio, Aptana and WebStorm; and would like to share with you the setup I've settled on which I think is nicely balanced between the flexibility of using a text editor and features of an IDE. I use this setup both when developing on Windows and on Linux, and it would work on OSX too.

Short Version

  1. Install Node JS if you haven't already
    1. Use http-server for local development
    2. Use browserify for modules / dependency management
  2. Use Atom as your editor
    1. Install packages linter and linter-eslint.
    2. Install language package language-glsl

Verbose Version

Dev Tools

For local development and testing you're going to need something a bit better than just opening the .html file from the file system regardless of which text editor / IDE you're using. When you open pages from the file system, security features of the browser prevent certain JavaScript functionality (XMLHttpRequest / the fetch api for one) which you'll need to say retrieve JSON files or load image files through JS.

For this we're going to use node.js, you'll naturally need to start by downloading and installing node.js, then via the node.js command prompt (or the native command prompt / terminal) you use the node package manager to get the http-server package.

That's "npm install -g http-server" in your command prompt.

Now all you need to do to get a local server running is go to the directory of your project in the command prompt (e.g. "cd C:\WebGL" or perhaps "cd ~/WebGL/") and type http-server, and boom http://localhost:8080/ will be serving your web pages.

A good reason to use node is it also has plenty other useful utilities for JavaScript development, such as UglifyJS, and the extremely useful Browserify, which is my prefered method for dependency management / modular code. Also node is pretty much the backbone of a huge host of web technology based programs and apps.

Browserify allows you to write node.js style modules*, browserify means you can write JavaScript for the client side as you would for server side, and the build process is suitable for both development work and deployment to production environments (that's websites for real end-users that aren't you).

If you use Watchify too, then you still get the "Just press F5" benefit of normal web development. Remember to use the -g tag when installing these packages via npm to get the commands as well as the library.

Text Editor

Atom is a really nice text editor, it has lots of useful functionality and some sensible autocomplete functionality built in. It's intended to be extensible / hackable like emacs, but with modern idioms for the hotkeys and user interface. It's free and open source and it's got a large set of packages to extend the editor to make it more useful for what you do.

Installing packages in Atom is just a case of going to Settings (Ctrl + Comma) then to the "Install" tab, typing the name of the package in the search box and pressing install on the matching result!

For our purposes one of those packages we want is a linter. When doing any JavaScript development you really should be running a linter to catch mistakes, if you're like me if it's not in your editor you're probably not going to do it, so install the linter-eslint package and it's dependencies (linter) and it'll run ESLint as you type.

Atom doesn't come with GLSL syntax highlighting, you're probably going to want it for WebGL development, so you should install the language-glsl package. There are also packages for glsl autocomplete which I've not tried out but could be worth your time, there's no need to stop at the packages I've mentioned, these are just the ones I feel are essential.

Good luck in your WebGL development and have fun, you can reach me @_delph.

* If you're not familiar with node modules the simple version is; you write code such as "exports.foo = function() { /* Do Stuff */ }" in bar.js and then if in another file you write "var bar = require('bar.js');" then you can use that function with "bar.foo()" in the second file. You can also set the entire object (rather than properties on it) which will be returned by the require function for that filepath by setting the "module.exports" variable. You can also use other peoples modules by installing them via npm and writing "var anotherModule = require('modulename');".