Reference

• ECMAScript Standard
• eloquent javascript

Hints

Debugging output

• in the browser or node.js you can user console.log
• in rhino you can use the print function

Including Files

• you can include other files in rhino using load("foo.js")

Embedding GLSL shaders in JavaScript

<script type="x-shader/x-vertex" id="vertShader">
attribute vec4 a_Position;
attribute vec4 a_Color;
uniform mat4 u_ViewMatrix;
varying vec4 v_Color; 
void main() {
  gl_Position =
    u_ViewMatrix * a_Position;
  v_Color = a_Color;
}
</script>

// Later in JavaScript
var vertShader = document.getElementById('vertShader').textContent;

JavaScript Objects

function Thing(msg) {
    this.message=msg;
}

Thing.prototype = {
    message: undefined,
    test : function() { print(this.message); }
}

var foo = new Thing();

var bar=new Thing("hi mom");

foo.test();
bar.test();

JS/WebGL Debugging

• In Firefox / Iceweasel, use Ctrl-shift-K to show the developer tools
• In Chromium / Chrome, use Ctrl-shift-J to show the developer tools

WebGL Debugging

• In Firefox, as a one-time configuration action, click the gear on the right, enable "Shader Editor", and "Canvas". I've currently had mixed success with the shader editor.

• In chromium you can install WebGl Inspector.

  • Note that you will have to enable the webgl inspector access local files, in chrome://extensions
  • there is also a live shader extension for chromium, but it didn't seem to work as advertised for me.