delphic.me.uk Navigate

Getting Started with WebGL

So you fancy doing some WebGL development? Good news! There's loads of great resources and cross platform editors. Grab the following tooling, and then get cracking with either the the excellent WebGL Fundamentals site, or the MDN's WebGL tutorial.

The MDN is an excellent general web development resource, it's worth searching there directly or adding "MDN" to your web searches when you're looking for answers! If the MDN reference pages doesn't have enough information, it can be worth following the link to the full specifications which the pages on web APIs have, as whilst they're verbose they almost certainly have the information you need.

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 VSCode as your editor
    1. Install the ESLint extension.
    2. Install GLSL Lint and WebGL GLSL Editor

Verbose Version

Development 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. When you open pages from the file system, security features of the browser prevent certain JavaScript functionality - the major one being the fetch api 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 if you want to get the commands as well as the library.

Node does now support ES Modules so you might want to check that out instead but CommonJS still works well!

* If you're not familiar with CommonJS / 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 "const 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 "const anotherModule = require('modulename');".

Text Editor

VS Code has come to dominate as an editor for web development. Feels like a text editor but can be extended to become an IDE, it does it best to convert JavaScript into TypeScript internally so it can provide excellent auto-complete functionality. It's free, open source and cross platform. It also has a huge number of extensions in it's marketplace to extend the editor to customise it for what you do.

Installing extensions in VS Code is just a case of going to Extensions (Ctrl + Shift + X or the little boxes in the left bar) then typing the name of the package or language you're in the search box and pressing install on the matching result!

For our purposes one of those extenions we want is a linter. When doing any JavaScript development you really should be running a linter to catch mistakes before you run your code. If you're like me if it's not in your editor you're probably not going to do it, so install the ES Lint extension and follow it's usuage instructions, including setting up a configuration.

As VSCode doesn't come with GLSL syntax highlighting and you're probably going to want it for WebGL development, you should install the GLSL Lint extension and/or the WebGL GLSL Editor extension.

That's it, good luck in your WebGL development and have fun! You can reach me delphic.bsky.social.

Last Updated: 01/01/2023