Major redesign of the gallery.

To every example, a description string is now provided. Also, an image or video is provided.
mattbis · Jul 31, 2016 · a6656c8 · a6656c8
1 parent 59fb505
commit a6656c8
Show file tree

Hide file tree

Showing 73 changed files with 321 additions and 49 deletions.
diff --git a/bin/build-gallery.js b/bin/build-gallery.js
@@ -14,26 +14,168 @@ function jsName (file) {
   return file.replace('example', 'www/gallery') + '.js'
 }
 
+function imgName (file) {
+  return file.replace('example', 'gallery/img').replace('.js', '.png')
+}
+
+var stylesheet = `
+
+body {
+    margin: 0 auto;
+    max-width: 860px;
+}
+
+li a {
+  text-decoration: none;
+  color: #000;
+}
+
+li a:hover {
+  color: #666;
+}
+
+p a {
+  text-decoration: none;
+  color: #00C;
+}
+
+p a:visited {
+  color: #009;
+}
+
+p a:hover {
+  color: #00F;
+}
+
+
+* {margin: 0; padding: 0;}
+
+div {
+  margin: 20px;
+}
+
+ul {
+  list-style-type: none;
+}
+
+h3 {
+  font: 700 1.27em verdana;
+  margin-top: 50px;
+  margin-bottom: 20px;
+}
+
+h1 {
+  font: 700 3.27em verdana;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+li img {
+  float: right;
+  margin: 40px 15px 0 0;
+}
+
+li iframe {
+  float: right;
+  margin: 40px 15px 0 0;
+}
+
+li p {
+  font: 95%/1.3 verdana;
+  max-width: 390px;
+  padding-bottom: 16px;
+}
+
+li {
+  padding: 50px;
+  overflow: auto;
+  list-style-type: none;
+}
+`
+
 function generateGallery (files) {
-  fs.writeFile('www/gallery.html',
-  `<!DOCTYPE html>
+  var html = `<!DOCTYPE html>
     <html>
       <head>
         <title>regl gallery</title>
         <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
         <meta charset=utf-8>
+        <style>` +
+        stylesheet +
+`       </style>
       </head>
-      <body>
-        <ul>
-        ${files.map(function (file) {
-          return `
-            <li><a href="${file.replace('example', 'gallery')}.html"'>
-              ${file}
-            </a></li>`
-        }).join('\n')}
-        </ul>
+    <body>`
+
+  html += '<h1>Example Gallery</h1>'
+
+  html += '<ul>'
+
+  html += files.map(function (file) {
+    var li = '<li>' // begin list item
+
+    var link = file.replace('example', 'gallery') + '.html'
+
+    function getEmbedTag (id) {
+      return '<iframe width="332" height="187" src="https://www.youtube.com/embed/' +
+        id +
+      '?rel=0" frameborder="0" allowfullscreen" frameborder="0" allowfullscreen></iframe>'
+    }
+
+    li += '<a href="' + link + '">'
+    var img = imgName(file)
+
+    var s = file.replace('example/', '').replace('.js', '')
+
+    if (fs.existsSync('example/img/' + s + '.txt')) {
+      li += getEmbedTag(
+        fs.readFileSync('example/img/' + s + '.txt') + '')
+    } else if (fs.existsSync('example/img/' + s + '.png')) {
+      li += '<img src="' + img + '" width="332" height="208" alt="' + file + '" >'
+    } else {
+      throw new Error(
+        'You need to provide either a youtube link or an image for the example ' +
+      file)
+    }
+    li += '</a>'
+
+    li += '<a href="' + link + '"><h3>' + file.replace('example/', '') + '</h3></a>'
+
+    var fileSrc = fs.readFileSync(file) + ''
+    var beg = fileSrc.search('/\\*')
+    var end = fileSrc.search('\\*/')
+
+    if (beg !== 0 || end === 0) {
+      throw new Error(
+        'The example ' + file +
+          ' must begin with a description commment')
+    }
+    var desc = fileSrc.substring(beg + 2, end - 1)
+    li += desc
+
+    li += '<p>' +
+      '<a href="' +
+      link +
+      '">Run Example</a>' +
+      '</p>'
+
+    li += '<p>' +
+      '<a href="' +
+      'https://github.com/mikolalysenko/regl/blob/gh-pages/' + file +
+      '">Source Code</a>' +
+      '</p>'
+
+    li += '</li>'
+
+    return li
+  }).join('\n')
+
+  html += '</ul>'
+
+  html += `
       </body>
-    </html>`)
+    </html>`
+
+  fs.writeFile('www/gallery.html', html)
 }
 
 mkdirp('www/gallery', function (err) {
@@ -43,6 +185,9 @@ mkdirp('www/gallery', function (err) {
   ncp('example/assets', 'www/gallery/assets', function (err) {
     console.log(err)
   })
+  ncp('example/img', 'www/gallery/img', function (err) {
+    console.log(err)
+  })
   glob('example/*.js', {}, function (err, files) {
     if (err) {
       throw err

diff --git a/example/audio.js b/example/audio.js
@@ -1,3 +1,7 @@
+/*
+  <p>No description</p>
+
+*/
 /* global AudioContext */
 const regl = require('../regl')({pixelRatio: 1})
 const perspective = require('gl-mat4/perspective')

diff --git a/example/basic.js b/example/basic.js
@@ -1,4 +1,7 @@
-// This example is a simple demonstration of how to use regl.
+/*
+  <p> This example is a simple demonstration of how to use regl to draw a triangle. </p>
+ */
+
 // The default method exposed by the module wraps a canvas element
 const regl = require('../regl')()
 

diff --git a/example/batch.js b/example/batch.js
@@ -1,7 +1,8 @@
-// This example demonstrates how to use batch mode commands
-//
-// To use a command in batch mode, we pass in an array of objects.  Then
-// the command is executed once for each object in the array.
+/*  <p>This example demonstrates how to use batch mode commands</p>
+
+<p> To use a command in batch mode, we pass in an array of objects.  Then
+ the command is executed once for each object in the array. </p>
+*/
 
 // As usual, we start by creating a full screen regl object
 const regl = require('../regl')()

diff --git a/example/blur.js b/example/blur.js
@@ -1,8 +1,9 @@
 /*
+  <p>This examples demonstrates how we can render a height map, how to place out several models(using the batching feature), and how to
+  implement a simple fullscreen post-process effect(using the framebuffer feature) in regl. </p>
 
-  This examples demonstrates how we can render a height map, how to place out several models(using the batching feature), and how to
-  implement a simple fullscreen post-process effect(using the framebuffer feature) in REGL. The post-process effect is a simple box filter blur.
- */
+  <p> The post-process effect is a simple box filter blur. </p>
+*/
 
 const canvas = document.body.appendChild(document.createElement('canvas'))
 const fit = require('canvas-fit')

diff --git a/example/bunny.js b/example/bunny.js
@@ -1,5 +1,6 @@
-// This example shows how to draw a mesh with regl
-
+/*
+  <p> This example shows how to draw a mesh with regl </p>
+*/
 const regl = require('../regl')()
 const mat4 = require('gl-mat4')
 const bunny = require('bunny')

diff --git a/example/camera.js b/example/camera.js
@@ -1,3 +1,7 @@
+/*
+  <p>This example shows how to implement a movable camera with regl.</p>
+ */
+
 const mat4 = require('gl-mat4')
 const bunny = require('bunny')
 const fit = require('canvas-fit')

diff --git a/example/cloth.js b/example/cloth.js
@@ -1,10 +1,11 @@
 /*
-In this example, we use the mass-spring model described by Thomas Jakobsen to implement
-a simple cloth simulation.
+<p>In this example, we use the mass-spring model described by Thomas Jakobsen to implement
+a simple cloth simulation. It is also demonstrated how we can manage a dynamic mesh in regl. <p>
 
-More info here:
-http://graphics.cs.cmu.edu/nsp/course/15-869/2006/papers/jakobsen.htm
-http://gamedevelopment.tutsplus.com/tutorials/simulate-fabric-and-ragdolls-with-simple-verlet-integration--gamedev-519
+<p> You can read more about cloth simulation <a href="http://graphics.cs.cmu.edu/nsp/course/15-869/2006/papers/jakobsen.htm">here</a> and
+<a href="http://gamedevelopment.tutsplus.com/tutorials/simulate-fabric-and-ragdolls-with-simple-verlet-integration--gamedev-519">here</a>
+
+</p>
  */
 
 const canvas = document.body.appendChild(document.createElement('canvas'))

diff --git a/example/cube-fbo.js b/example/cube-fbo.js
@@ -1,3 +1,8 @@
+/*
+  <p>This example shows how you can render reflections using cubic framebuffers.</p>
+
+ */
+
 const regl = require('../regl')()
 const mat4 = require('gl-mat4')
 const bunny = require('bunny')

diff --git a/example/cube.js b/example/cube.js
@@ -1,3 +1,8 @@
+/*
+  <p>This examples renders a spinning textured cube.</p>
+
+ */
+
 const regl = require('../regl')()
 const mat4 = require('gl-mat4')
 

diff --git a/example/dds.js b/example/dds.js
@@ -1,3 +1,7 @@
+/*
+  <p>This example shows how you can parse dds files with resl.</p>
+ */
+
 const regl = require('../regl')({
   extensions: 'WEBGL_compressed_texture_s3tc'
 })

diff --git a/example/deferred_shading.js b/example/deferred_shading.js
@@ -1,12 +1,12 @@
 /*
-  This example is a simple implementation of deferred shading.
+  <p> This example is a simple implementation of deferred shading. </p>
 
-  The focus of this implementation was readability, so it is not an
+  <p> The focus of this implementation was readability, so it is not an
   optimized implementation, and can certainly be made more efficient.
   (by for instance getting rid of the "position" render target.
-  It can be computed from the depth buffer. )
+  It can be computed from the depth buffer. ) </p>
 
-  This example demonstrates the usage of Multiple-render targets in regl.
+  <p> This example demonstrates the usage of Multiple-render targets in regl. </p>
  */
 const webglCanvas = document.body.appendChild(document.createElement('canvas'))
 const fit = require('canvas-fit')

diff --git a/example/dynamic.js b/example/dynamic.js
@@ -1,4 +1,6 @@
-// This example shows how to pass props to draw commands
+/*
+  <p> This example shows how to pass props to draw commands </p>
+*/
 
 const regl = require('../regl')()
 

diff --git a/example/elements.js b/example/elements.js
@@ -1,3 +1,7 @@
+/*
+<p> This example demonstrates how you can use `elements` to draw lines. </p>
+ */
+
 const regl = require('../regl')()
 
 regl.clear({

diff --git a/example/envmap.js b/example/envmap.js
@@ -1,3 +1,8 @@
+/*
+  <p>This example shows how you can render reflections with an environment map.</p>
+
+ */
+
 const regl = require('../regl')()
 const mat4 = require('gl-mat4')
 const bunny = require('bunny')

diff --git a/example/feedback.js b/example/feedback.js
@@ -1,4 +1,6 @@
-// This example shows how to use copyTexImage2D to implement feedback effects
+/*
+ <p> This example shows how to use copyTexImage2D to implement feedback effects </p>
+ */
 
 const regl = require('../regl')()
 const mouse = require('mouse-change')()

diff --git a/example/geomorph.js b/example/geomorph.js
@@ -1,3 +1,6 @@
+/*
+  <p>No description</p>
+ */
 const regl = require('../regl')()
 const mat4 = require('gl-mat4')
 const bunny = require('bunny')

diff --git a/example/graph.js b/example/graph.js
@@ -1,3 +1,8 @@
+/*
+  <p>No description.</p>
+
+ */
+
 const regl = require('../regl')({
   extensions: ['webgl_draw_buffers', 'oes_texture_float']
 })

diff --git a/example/img/audio.png b/example/img/audio.png
diff --git a/example/img/basic.png b/example/img/basic.png
diff --git a/example/img/batch.png b/example/img/batch.png
diff --git a/example/img/blur.txt b/example/img/blur.txt
@@ -0,0 +1 @@
+OJkT24MxydA
diff --git a/example/img/bunny.png b/example/img/bunny.png
diff --git a/example/img/camera.png b/example/img/camera.png
diff --git a/example/img/cloth.txt b/example/img/cloth.txt
@@ -0,0 +1 @@
+scg33DHDnHc
diff --git a/example/img/cube-fbo.png b/example/img/cube-fbo.png
diff --git a/example/img/cube.png b/example/img/cube.png
diff --git a/example/img/dds.png b/example/img/dds.png
diff --git a/example/img/deferred_shading.png b/example/img/deferred_shading.png
diff --git a/example/img/dynamic.png b/example/img/dynamic.png
diff --git a/example/img/elements.png b/example/img/elements.png
diff --git a/example/img/envmap.png b/example/img/envmap.png
diff --git a/example/img/feedback.png b/example/img/feedback.png
diff --git a/example/img/geomorph.png b/example/img/geomorph.png
diff --git a/example/img/graph.png b/example/img/graph.png
diff --git a/example/img/instance-mesh.png b/example/img/instance-mesh.png
diff --git a/example/img/instance-triangle.png b/example/img/instance-triangle.png
diff --git a/example/img/life.png b/example/img/life.png
diff --git a/example/img/lighting.png b/example/img/lighting.png
diff --git a/example/img/microphone.png b/example/img/microphone.png
diff --git a/example/img/minecraft.png b/example/img/minecraft.png
diff --git a/example/img/mipmap.png b/example/img/mipmap.png
diff --git a/example/img/particles.png b/example/img/particles.png
diff --git a/example/img/point-light-shadow.png b/example/img/point-light-shadow.png
diff --git a/example/img/pong.png b/example/img/pong.png
diff --git a/example/img/scope.png b/example/img/scope.png
diff --git a/example/img/shadow_map.png b/example/img/shadow_map.png
diff --git a/example/img/sprites.png b/example/img/sprites.png
diff --git a/example/img/stats.png b/example/img/stats.png
diff --git a/example/img/text.png b/example/img/text.png
diff --git a/example/img/texture.png b/example/img/texture.png
diff --git a/example/img/theta360.png b/example/img/theta360.png
diff --git a/example/img/tile.png b/example/img/tile.png
diff --git a/example/img/video.png b/example/img/video.png
diff --git a/example/instance-mesh.js b/example/instance-mesh.js
@@ -1,6 +1,6 @@
 /*
-  In this example, it is shown how you can draw a bunch of bunny meshes using the
-  instancing feature of regl.
+  <p> In this example, it is shown how you can draw a bunch of bunny meshes using the
+  instancing feature of regl. </p>
 */
 
 const mat4 = require('gl-mat4')

diff --git a/example/instance-triangle.js b/example/instance-triangle.js
@@ -1,6 +1,6 @@
 /*
-  In this example, it is shown how you can draw a bunch of triangles using the
-  instancing feature of regl.
+  <p> In this example, it is shown how you can draw a bunch of triangles using the
+  instancing feature of regl. </p>
  */
 const regl = require('../regl')({extensions: ['angle_instanced_arrays']})
 

diff --git a/example/life.js b/example/life.js
@@ -1,3 +1,8 @@
+/*
+  <p>This example implements the game of life in regl.</p>
+
+ */
+
 const regl = require('../regl')()
 
 const RADIUS = 512

diff --git a/example/lighting.js b/example/lighting.js
@@ -1,3 +1,7 @@
+/*
+  <p>This example shows how you can apply multiple light sources to a model</p>
+
+ */
 const regl = require('../regl')()
 const normals = require('angle-normals')
 const mat4 = require('gl-mat4')