Merge pull request mikeseven#52 from brupelo/master

working examples, utilities and very brief hints to make them run on …

.gitignore

@@ -7,4 +7,4 @@ Debug
 node_modules
 prebuilds/*
 angle/build/*
-example/*.ppm
+example/**/*.ppm

README.md

@@ -53,6 +53,8 @@ $ sudo apt-get install -y build-essential libxi-dev libglu1-mesa-dev libglew-dev
 
 * Python 2.7
 * Microsoft Visual Studio
+* d3dcompiler_47.dll should be in c:\windows\system32 (you can find it on deps folder)
+* modern nodejs supporting es6 to run some examples https://iojs.org/en/es6.html
 
 ### npm
 Once your system is set up, installing the `headless-gl` module is pretty easy to do with [npm](http://docs.npmjs.org).  Just run the following command:

example/utils.js → example/common/utils.js

@@ -1,4 +1,6 @@
-function dumpBuffer(gl, width, height) {
+var fs = require("fs");
+
+function bufferToStdout(gl, width, height) {
     // Write output
     var pixels = new Uint8Array(width * height * 4)
     gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels)
@@ -8,6 +10,18 @@ function dumpBuffer(gl, width, height) {
     }
 }
 
+function bufferToFile(gl, width, height, filename) {
+    var file = fs.createWriteStream(filename);
+
+    // Write output
+    var pixels = new Uint8Array(width * height * 4)
+    gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels)
+    file.write(['P3\n# gl.ppm\n', width, ' ', height, '\n255\n'].join(''))
+    for (var i = 0; i < pixels.length; i += 4) {
+        file.write(pixels[i] + ' ' + pixels[i + 1] + ' ' + pixels[i + 2] + ' ')
+    }
+}
+
 function drawTriangle(gl) {
     var buffer = gl.createBuffer()
     gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
@@ -80,7 +94,8 @@ function createProgramFromSources(gl, shaderSources, opt_attribs, opt_locations)
 }
 
 
-module.exports.dumpBuffer = dumpBuffer;
+module.exports.bufferToStdout = bufferToStdout;
+module.exports.bufferToFile = bufferToFile;
 module.exports.drawTriangle = drawTriangle;
 module.exports.loadShader = loadShader;
 module.exports.createProgram = createProgram;

example/common/utils_log.js

@@ -0,0 +1,63 @@
+var log4js = require('log4js');
+var path = require("path");
+
+function getLogger(category, level) {
+    var log;
+    if (level == null) {
+        level = 'INFO';
+    }
+
+    log4js.configure({
+        appenders: [
+            {
+                type: 'console'
+            }
+        ]
+    });
+
+    log = log4js.getLogger(category);
+    log.setLevel(level);
+    return log;
+};
+
+function Log(filename, level) {
+    this.log = getLogger("", level);
+    this.filename = filename;
+}
+
+Log.prototype = {
+    error : function(line, text) {
+      this.log.error("("+this.filename+":"+line+") "+text);
+    },
+    info : function(line, text) {
+      this.log.info("("+this.filename+":"+line+") "+text);
+    },
+    warn : function(line, text) {
+      this.log.warn("("+this.filename+":"+line+") "+text);
+    },
+    debug : function(line, text) {
+      this.log.debug("("+this.filename+":"+line+") "+text);
+    }
+}
+
+Object.defineProperty(global, '__stack', {
+    get: function() {
+        var orig = Error.prepareStackTrace;
+        Error.prepareStackTrace = function(_, stack) {
+            return stack;
+        };
+        var err = new Error;
+        Error.captureStackTrace(err, arguments.callee);
+        var stack = err.stack;
+        Error.prepareStackTrace = orig;
+        return stack;
+    }
+});
+
+Object.defineProperty(global, '__line', {
+    get: function() {
+        return __stack[1].getLineNumber();
+    }
+});
+
+module.exports.Log = Log;

example/fractals/mandelbrot.js

@@ -0,0 +1,99 @@
+var path = require('path');
+var createContext = require('../../index');
+var utils = require('../common/utils.js');
+var utils_log = require('../common/utils_log.js');
+var log = new utils_log.Log(path.basename(__filename),"DEBUG");
+
+function main() {
+    // Create context
+    var width = 512
+    var height = 512
+    var gl = createContext(width, height)
+
+    var vertex_src = `
+        attribute vec2 a_position;
+        void main() {
+            gl_Position = vec4(a_position,0,1);
+        }
+    `;
+
+    var fragment_src = `
+        precision mediump float;
+        const int max_iterations = 255;
+
+        vec2 complex_square( vec2 v ) {
+            return vec2(
+                v.x * v.x - v.y * v.y,
+                v.x * v.y * 2.0
+            );
+        }
+
+        void main()
+        {
+            vec2 uv = gl_FragCoord.xy - vec2(512.0,512.0) * 0.5;
+            uv *= 2.5 / min( 512.0, 512.0 );
+
+        #if 0 // Mandelbrot
+            vec2 c = uv;
+            vec2 v = vec2( 0.0 );
+            float scale = 0.06;
+        #else // Julia
+            vec2 c = vec2( 0.285, 0.01 );
+            vec2 v = uv;
+            float scale = 0.01;
+        #endif
+
+            int count = max_iterations;
+
+            for ( int i = 0 ; i < max_iterations; i++ ) {
+                v = c + complex_square( v );
+                if ( dot( v, v ) > 4.0 ) {
+                    count = i;
+                    break;
+                }
+            }
+
+            gl_FragColor = vec4( float( count ) * scale );
+        }
+    `;
+
+    // setup a GLSL program
+    var program = utils.createProgramFromSources(gl, [vertex_src, fragment_src]);
+
+    if(!program) {
+        return;
+    }
+    gl.useProgram(program);
+
+    // look up where the vertex data needs to go.
+    var positionLocation = gl.getAttribLocation(program, "a_position");
+
+    // Create a buffer and put a single clipspace rectangle in
+    // it (2 triangles)
+    var buffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    gl.bufferData(
+    gl.ARRAY_BUFFER,
+    new Float32Array([
+        -1.0, -1.0,
+         1.0, -1.0,
+        -1.0,  1.0,
+        -1.0,  1.0,
+         1.0, -1.0,
+         1.0,  1.0]),
+    gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(positionLocation);
+    gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
+
+    // draw
+    gl.drawArrays(gl.TRIANGLES, 0, 6);
+
+    var filename = __filename+".ppm";
+    log.info(__line,"rendering "+filename);
+    utils.bufferToFile(gl, width, height, filename);
+    log.info(__line,"finished rendering "+filename);
+
+    gl.destroy();
+}
+
+main();

example/misc/fbo.js

@@ -0,0 +1,26 @@
+var path = require('path');
+var createContext = require('../../index');
+var utils = require('../common/utils.js');
+var utils_log = require('../common/utils_log.js');
+var log = new utils_log.Log(path.basename(__filename),"DEBUG");
+
+function main() {
+    // Create context
+    var width = 512;
+    var height = 512;
+    var gl = createContext(width, height);
+
+    // Clear screen to red
+    gl.clearColor(1.0, 0.0, 0.0, 1.0);
+    gl.colorMask(true, true, true, true);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+
+    var filename = __filename+".ppm";
+    log.info(__line,"rendering "+filename);
+    utils.bufferToFile(gl, width, height, filename);
+    log.info(__line,"finished rendering "+filename);
+
+    gl.destroy();
+}
+
+main();

example/webgl_fundamentals/test0.js

@@ -0,0 +1,62 @@
+var path = require('path');
+var createContext = require('../../index');
+var utils = require('../common/utils.js');
+var utils_log = require('../common/utils_log.js');
+var log = new utils_log.Log(path.basename(__filename), "DEBUG");
+
+function main() {
+    // Create context
+    var width = 512
+    var height = 512
+    var gl = createContext(width, height)
+
+    var vertex_src = `
+        attribute vec2 a_position;
+
+        void main() {
+          gl_Position = vec4(a_position, 0, 1);
+        }
+    `;
+
+    var fragment_src = `
+        void main() {
+          gl_FragColor = vec4(0, 1, 0, 1);  // green
+        }
+    `;
+
+    // setup a GLSL program
+    var program = utils.createProgramFromSources(gl, [vertex_src, fragment_src]);
+    gl.useProgram(program);
+
+    // look up where the vertex data needs to go.
+    var positionLocation = gl.getAttribLocation(program, "a_position");
+
+    // Create a buffer and put a single clipspace rectangle in
+    // it (2 triangles)
+    var buffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    gl.bufferData(
+        gl.ARRAY_BUFFER,
+        new Float32Array([
+            -1.0, -1.0,
+             1.0, -1.0,
+            -1.0,  1.0,
+            -1.0,  1.0,
+             1.0, -1.0,
+             1.0,  1.0]),
+        gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(positionLocation);
+    gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
+
+    // draw
+    gl.drawArrays(gl.TRIANGLES, 0, 6);
+
+    var filename = __filename + ".ppm";
+    log.info(__line, "rendering " + filename);
+    utils.bufferToFile(gl, width, height, filename);
+    log.info(__line, "finished rendering " + filename);
+
+    gl.destroy();
+}
+
+main();