webgl Getting started with webgl Installation or Setup

Example

WebGL is a browser technology so there isn't much to set up other than to have a browser. You can get started with WebGL on JSFiddle or Codepen or JSBIn or any number of other sites that let you edit HTML, CSS, and JavaScript online though there will be a few limitations (see below). You can also host open source files on github pages or similar services.

On the other hand at some point you're probably going to work locally. To do that it's recommended you run a simple web server. There are plenty to choose from that are simple to use and require very little setup.

Using node.js as a server

1. install node.js
2. Open a terminal or node command prompt and type npm install -g http-server (on OSX put sudo in front of that.
3. type http-server to start serving the files in the current folder OR http-server path-to-folder to server a different folder
4. Point your browser to http://localhost:8080/name-of-file to view your WebGL webpage

Using devd as a server

1. Download devd
2. Open a terminal and run devd with either devd . to server files from the current folder or devd path-to-folder to serve a different folder
3. Point your browser to http://localhost:8000/name-of-file to view your WebGL webpage

Using Servez as a server

1. Download Servez
2. Install It, Run it
3. Choose the folder to serve
4. Pick "Start"
5. Go to http://localhost:8080 or pick "Launch Browser"

Using "Web Server for Chrome" Chrome Extension

1. Install the Web Server From Chrome

2. Launch it from the Apps icon on a new tab page.

   

3. Set the folder where your files are then click the http://127.0.0.1:8787 link

   

Limitation of WebGL on Online Services

In WebGL it is very common to load images. In WebGL there are restrictions on how images can be used. Specifically WebGL can not use images from other domains without permission from the server hosting the images. Services that currently give permission to use images include imgur and flickr. See Loading Cross Domain Images. Otherwise you'll need to have the images on the same server as your webgl page or use other creative solutions like generating images with a canvas tag