On all of them you can reference external scripts by adding a
tag pair if you want to use external scripts.
Still, there are limits. WebGL has stronger restrictions than Canvas2D for loading images which means you can't easily access images from around the web for your WebGL work. On top of that it's just faster to work with everything local.
Let's assume you want to run and edit the samples on this site. The first thing you should do is download the site. You can download it here.
Unzip the files into some folder.
Next up you should install a small web server. I know "web server" sounds scary but the truth is web servers are actually extremely simple.
If you're on Chrome here's a simple solution. Here's a small chrome extension that's a web server
Just point it at the folder where you unzipped the files and click one of the web server URLs.
If you're not on chrome or if you don't want to use the extension another way is to use node.js. Download it, install it, then open a command prompt / console / terminal window. If you're on Windows the installer will add a special "Node Command Prompt" so use that.
Then install the
http-server by typing
npm -g install http-server
If you're on OSX use
sudo npm -g install http-server
Once you've done that type
It should print something like
Then in your browser go to
If you don't specify a path then http-server will server the current folder.
Most browser have extensive developer tools built in.
There are various WebGL Inspectors / Helpers. Here's one for Chrome.
Note: As of this writing the tools above do not work with WebGL2.
They may or may not be helpful. Most of them are designed for animated samples and will capture a frame
and let you see all the WebGL calls that made that frame. That's great if you already have something
working or if you had something working and it broke. But it's not so great if your issue is during
initialization which they don't catch or if you're not using animation, as in drawing something every frame.
Still they can be very useful. I'll often click on a draw call, and check the uniforms. If I see a
NaN (NaN = Not a Number) then I can usually track down the code that set that uniform and
find the bug.
Also always remember you can inspect the code. You can usually just pick view source
Even if you can't right click a page or if the source is in a separate file you can always view the source in the devtools
Hopefully that helps you get started. Now back to the lessons.