add new examples testing webgl texturing

.gitignore

@@ -1,10 +1,15 @@
-build/*
-.lock-wscript
-npm-debug.log
+*.log
 .idea
+.jscsrc
+.lock-wscript
+angle/build/*
+build/*
 Debug
-*.log
+example/**/*.gif
+example/**/*.jpg
+example/**/*.png
+example/**/*.ppm
+!example/data
 node_modules
+npm-debug.log
 prebuilds/*
-angle/build/*
-example/**/*.ppm

binding.gyp

@@ -25,28 +25,23 @@
       'library_dirs': [
         '<(module_root_dir)/deps/<(platform)'
       ],
+      'dependencies':
+      [
+        'angle/src/angle.gyp:libEGL',
+        'angle/src/angle.gyp:libGLESv2'
+      ],
       'conditions': [
         ['OS=="mac"', {
-            'dependencies':
-            [
-              'angle/src/angle.gyp:libEGL',
-              'angle/src/angle.gyp:libGLESv2'
-            ],
             'libraries': [
                 '-framework QuartzCore',
                 '-framework Quartz'
-            ],
+            ]
         }],
         ['OS=="linux"', {
-            'dependencies':
-            [
-              'angle/src/angle.gyp:libEGL',
-              'angle/src/angle.gyp:libGLESv2'
-            ]
         }],
         ['OS=="win"', {
             'library_dirs': [
-              '<(module_root_dir)/deps/windows/lib/<(target_arch)',
+              '<(module_root_dir)/build/$(Configuration)_$(Platform)/lib',
             ],
             'libraries': [
               'libEGL.lib',
@@ -92,8 +87,8 @@
               {
                 'destination': '$(SolutionDir)$(ConfigurationName)',
                 'files': [
-                  '<(module_root_dir)/deps/windows/dll/<(target_arch)/libEGL.dll',
-                  '<(module_root_dir)/deps/windows/dll/<(target_arch)/libGLESv2.dll'
+                  '<(module_root_dir)/build/$(Configuration)_$(Platform)/libEGL.dll',
+                  '<(module_root_dir)/build/$(Configuration)_$(Platform)/libGLESv2.dll'
                 ]
               }
            ]

example/common/utils.js

@@ -1,24 +1,42 @@
 var fs = require('fs')
+var savePixels = require('save-pixels')
+var ndarray = require('ndarray')
+var path = require('path')
 
-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)
-  process.stdout.write(['P3\n# gl.ppm\n', width, ' ', height, '\n255\n'].join(''))
-  for (var i = 0; i < pixels.length; i += 4) {
-    process.stdout.write(pixels[i] + ' ' + pixels[i + 1] + ' ' + pixels[i + 2] + ' ')
-  }
+function writePixels (array, filepath, format, options, cb) {
+  var out = fs.createWriteStream(filepath)
+  var pxstream = savePixels(array, format, options)
+  pxstream.pipe(out)
+    .on('error', cb)
+    .on('close', cb)
 }
 
-function bufferToFile (gl, width, height, filename) {
-  var file = fs.createWriteStream(filename)
-
-  // Write output
+function bufferToFile (gl, width, height, filename, options) {
+  var extension = path.extname(filename)
   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] + ' ')
+
+  if (extension === '.ppm') {
+    // Special case, ppm file (TODO: Maybe adding ppm support into save-pixels)
+    var file = fs.createWriteStream(filename)
+
+    file.write(['P3\n# gl.ppm\n', width, ' ', height, '\n255\n'].join(''))
+    for (var y = 0; y < height; y++) {
+      var baseOffset = ((height - y) * width) << 2
+      for (var x = 0; x < width; x++) {
+        var offset = baseOffset + (x << 2)
+        file.write(pixels[offset] + ' ' + pixels[offset + 1] + ' ' + pixels[offset + 2] + ' ')
+      }
+    }
+    // for (var i = 0; i < pixels.length; i += 4) {
+    //   file.write(pixels[i] + ' ' + pixels[i + 1] + ' ' + pixels[i + 2] + ' ')
+    // }
+  } else {
+    var ext = extension.substring(1, extension.length)
+    var buffer = ndarray(pixels, [width, height, 4], [4, 4 * width, 1], 0)
+
+    writePixels(buffer.step(1, -1), filename, ext, options || {'quality': 100}, function () {})
   }
 }
 
@@ -52,19 +70,11 @@ function loadShader (gl, shaderSource, shaderType) {
   return shader
 }
 
-function createProgram (gl, shaders, opt_attribs, opt_locations) {
+function createProgram (gl, shaders) {
   var program = gl.createProgram()
   shaders.forEach(function (shader) {
     gl.attachShader(program, shader)
   })
-  if (opt_attribs) {
-    opt_attribs.forEach(function (attrib, ndx) {
-      gl.bindAttribLocation(
-        program,
-        opt_locations ? opt_locations[ndx] : ndx,
-        attrib)
-    })
-  }
   gl.linkProgram(program)
 
   // Check the link status
@@ -93,9 +103,36 @@ function createProgramFromSources (gl, shaderSources, opt_attribs, opt_locations
   return createProgram(gl, shaders, opt_attribs, opt_locations)
 }
 
-module.exports.bufferToStdout = bufferToStdout
+// Returns a random integer from 0 to range - 1.
+function randomInt (range) {
+  return Math.floor(Math.random() * range)
+}
+
+// Fills the buffer with the values that define a rectangle.
+function setRectangle (gl, x, y, width, height) {
+  var x1 = x
+  var x2 = x + width
+  var y1 = y
+  var y2 = y + height
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+    x1, y1,
+    x2, y1,
+    x1, y2,
+    x1, y2,
+    x2, y1,
+    x2, y2
+  ]), gl.STATIC_DRAW)
+}
+
+function replaceExt (filename, ext) {
+  return filename.substr(0, filename.lastIndexOf('.')) + ext
+}
+
 module.exports.bufferToFile = bufferToFile
 module.exports.drawTriangle = drawTriangle
 module.exports.loadShader = loadShader
 module.exports.createProgram = createProgram
 module.exports.createProgramFromSources = createProgramFromSources
+module.exports.randomInt = randomInt
+module.exports.setRectangle = setRectangle
+module.exports.replaceExt = replaceExt

example/fractals/mandelbrot.js

@@ -12,49 +12,49 @@ function main () {
   var gl = createContext(width, height)
 
   var vertex_src = `
-        attribute vec2 a_position
+        attribute vec2 a_position;
         void main() {
-            gl_Position = vec4(a_position,0,1)
+            gl_Position = vec4(a_position,0,1);
         }
     `
 
   var fragment_src = `
-        precision mediump float
-        const int max_iterations = 255
+        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 )
+            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
+            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
+            vec2 c = vec2( 0.285, 0.01 );
+            vec2 v = uv;
+            float scale = 0.01;
         #endif
 
-            int count = max_iterations
+            int count = max_iterations;
 
             for ( int i = 0 ; i < max_iterations; i++ ) {
-                v = c + complex_square( v )
+                v = c + complex_square( v );
                 if ( dot( v, v ) > 4.0 ) {
-                    count = i
-                    break
+                    count = i;
+                    break;
                 }
             }
 
-            gl_FragColor = vec4( float( count ) * scale )
+            gl_FragColor = vec4( float( count ) * scale );
         }
     `
 
@@ -89,10 +89,23 @@ function main () {
   // draw
   gl.drawArrays(gl.TRIANGLES, 0, 6)
 
-  var filename = __filename + '.ppm' // eslint-disable-line
-  log.info(__line, 'rendering ' + filename)
-  utils.bufferToFile(gl, width, height, filename)
-  log.info(__line, 'finished rendering ' + filename)
+  var frames = [
+    { 'format': '.jpg', 'quality': 1 },
+    { 'format': '.jpg', 'quality': 25 },
+    { 'format': '.jpg', 'quality': 50 },
+    { 'format': '.jpg', 'quality': 75 },
+    { 'format': '.jpg', 'quality': 100 },
+    { 'format': '.ppm', 'quality': 100 }
+  ]
+
+  for (var i = 0; i < frames.length; i++) {
+    var filename = utils.replaceExt(__filename, '_' + frames[i]['quality'] + '_' + frames[i]['format'])
+    log.info(__line, 'rendering ' + filename)
+    utils.bufferToFile(gl, width, height, filename, {
+      quality: frames[i]['quality']
+    })
+    log.info(__line, 'finished rendering ' + filename)
+  }
 
   gl.destroy()
 }