Adding the post process library

postProcessLibrary/config.json

@@ -0,0 +1,21 @@
+{
+  "postProcesses": [    
+    {
+      "file": "postProcesses/asciiArt/babylon.asciiArtPostProcess.ts",
+      "shaderFiles": [
+        "postProcesses/asciiArt/asciiart.fragment.fx"
+      ],
+      "output": "babylon.asciiArtPostProcess.js"
+    },
+    {
+      "file": "postProcesses/digitalRain/babylon.digitalRainPostProcess.ts",
+      "shaderFiles": [
+        "postProcesses/digitalRain/digitalrain.fragment.fx"
+      ],
+      "output": "babylon.digitalRainPostProcess.js"
+    }
+  ],
+  "build": {
+    "distOutputDirectory": "dist/"
+  }
+}

postProcessLibrary/gulp-srcToVariable.js

@@ -0,0 +1,68 @@
+var through = require('through2');
+var gutil = require('gulp-util');
+var PluginError = gutil.PluginError;
+var path = require('path');
+var File = gutil.File;
+
+// Consts
+const PLUGIN_NAME = 'gulp-srcToVariable';
+
+var srcToVariable = function srcToVariable(varName, asMap, namingCallback) {
+
+    var content;
+    var firstFile;
+
+    namingCallback = namingCallback || function (filename) { return filename; };
+
+    function bufferContents(file, enc, cb) {
+        // ignore empty files
+        if (file.isNull()) {
+            cb();
+            return;
+        }
+
+        // no stream support, only files.
+        if (file.isStream()) {
+            this.emit('error', new PluginError('gulp-concat', 'Streaming not supported'));
+            cb();
+            return;
+        }
+
+        // set first file if not already set
+        if (!firstFile) {
+            firstFile = file;
+        }
+
+        // construct concat instance
+        if (!content) {
+            content = "";
+        }
+        var name = namingCallback(file.relative);
+        content += varName + "['" + name + "'] = " + JSON.stringify(file.contents.toString()) + ";\r\n";
+        cb();
+    }
+
+    function endStream(cb) {
+        if (!firstFile || !content) {
+            cb();
+            return;
+        }
+
+        var joinedPath = path.join(firstFile.base, varName);
+
+        var joinedFile = new File({
+            cwd: firstFile.cwd,
+            base: firstFile.base,
+            path: joinedPath,
+            contents: new Buffer(content)
+        });
+
+        this.push(joinedFile);
+
+        cb();
+    }
+
+    return through.obj(bufferContents, endStream);
+}
+
+module.exports = srcToVariable;

postProcessLibrary/gulpfile.js

@@ -0,0 +1,53 @@
+var gulp = require("gulp");
+var typescript = require("gulp-typescript");
+var srcToVariable = require("./gulp-srcToVariable");
+var merge2 = require("merge2");
+var concat = require("gulp-concat");
+var rename = require("gulp-rename");
+var cleants = require('gulp-clean-ts-extends');
+var replace = require("gulp-replace");
+var webserver = require('gulp-webserver');
+var uglify = require("gulp-uglify");
+
+var config = require("./config.json");
+var extendsSearchRegex = /var\s__extends[\s\S]+?\};/g;
+
+//function to convert the shaders' filenames to variable names.
+function shadersName(filename) {
+    return filename.replace('.fragment', 'Pixel')
+      .replace('.vertex', 'Vertex')
+      .replace('.fx', 'Shader');
+}
+
+gulp.task('copyReference', function () {
+    return gulp.src("../dist/preview release/babylon.max.js").pipe(gulp.dest("test/refs"));
+});
+
+/*
+Compiles all typescript files and creating a declaration file.
+*/
+gulp.task('default', ["copyReference"], function () {
+    var tasks = config.proceduralTextures.map(function (proceduralTexture) {
+        var js = gulp.src(proceduralTexture.file)
+            .pipe(typescript({
+                noExternalResolve: false,
+                target: 'ES5',
+                declarationFiles: true,
+                typescript: require('typescript'),
+                experimentalDecorators: true
+            })).js;
+
+        var shader = gulp.src(proceduralTexture.shaderFiles).pipe(srcToVariable("BABYLON.Effect.ShadersStore", true, shadersName));
+
+        return merge2(js, shader)
+            .pipe(cleants())
+            .pipe(replace(extendsSearchRegex, ""))
+            .pipe(concat(proceduralTexture.output))
+            .pipe(gulp.dest(config.build.distOutputDirectory))
+            .pipe(rename({extname: ".min.js"}))
+            .pipe(uglify())
+            .pipe(gulp.dest(config.build.distOutputDirectory));
+    });
+
+    return tasks;
+});

postProcessLibrary/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "BabylonJS_PostProcessLibrary",
+  "version": "2.3.0",
+  "description": "PostProcess library for Babylon.js",
+  "main": "",
+  "repository": { "url": "https://github.com/BabylonJS/Babylon.js/" },
+  "readme": "https://github.com/BabylonJS/Babylon.js/edit/master/readme.md",
+  "license": "(Apache-2.0)",
+  "devDependencies": {
+    "gulp": "^3.8.11",
+    "gulp-uglify": "~1.4.2",
+    "typescript": "~1.6.2",
+    "gulp-typescript": "~2.13.0",
+    "through2": "~0.6.5",
+    "gulp-util": "~3.0.4",
+    "gulp-concat": "~2.6.0",
+    "merge2": "~0.3.5",
+    "gulp-rename": "~1.2.2",
+    "gulp-clean-ts-extends": "~0.1.1",
+    "gulp-replace": "~0.5.3",
+    "gulp-webserver": "^0.9.1"
+  }
+}

postProcessLibrary/readme.md

@@ -0,0 +1,41 @@
+## Using a post process from the library
+
+You can find multiple post processes that just works with Babylon.js in *dist* folder. To use then, you only need to reference the associated .js file and use the new provided post process:
+
+```
+var fire = new BABYLON.FireProceduralTexture2("firePT", 256, scene);
+sphere.material.diffuseTexture = fire;
+```
+
+## Adding a new post process to the library
+
+To add a new post process, you have to create your own folder in *postProcesses* folder. Then you need to add a .ts file and one .fragment.fx files:
+* The .ts is the TypeScript code of your post process
+* .fx file: GLSL code for fragment shaders
+
+## Integrating the post process in the build process
+
+To build all post processes and generate the *dist* folder, just run:
+
+```
+gulp
+```
+
+To integrate your new post process to the build process, you have to edit the config.sjon file and add an entry in the "postProcesses" section of the file:
+
+```
+{
+  "postProcesses": [
+    {
+      "file": "postProcesses/asciiArt/babylon.asciiArtPostProcess.ts",
+      "shaderFiles": [
+        "postProcesses/asciiArt/asciiart.fragment.fx"
+      ],
+      "output": "babylon.asciiArtPostProcess.js"
+    }
+  ],
+  "build": {
+    "distOutputDirectory": "dist/"
+  }
+}
+```

postProcessLibrary/tsconfig.json

@@ -0,0 +1,7 @@
+{
+    "compilerOptions": {
+        "experimentalDecorators": true,
+        "module": "commonjs", 
+        "target": "es5"
+    }
+}

proceduralTexturesLibrary/config.json

@@ -55,20 +55,6 @@
         "proceduralTextures/starfield/starfieldProceduralTexture.fragment.fx"
       ],
       "output": "babylon.starfieldProceduralTexture.js"
-    },
-    {
-      "file": "proceduralTextures/asciiArt/babylon.asciiArtPostProcess.ts",
-      "shaderFiles": [
-        "proceduralTextures/asciiArt/asciiart.fragment.fx"
-      ],
-      "output": "babylon.asciiArtPostProcess.js"
-    },
-    {
-      "file": "proceduralTextures/digitalRain/babylon.digitalRainPostProcess.ts",
-      "shaderFiles": [
-        "proceduralTextures/digitalRain/digitalrain.fragment.fx"
-      ],
-      "output": "babylon.digitalRainPostProcess.js"
     }
   ],
   "build": {

proceduralTexturesLibrary/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "BabylonJS_ShadersLibrary",
+  "name": "BabylonJS_PostProcessLibrary",
   "version": "2.3.0",
-  "description": "Shaders library for Babylon.js",
+  "description": "PostProcess library for Babylon.js",
   "main": "",
   "repository": { "url": "https://github.com/BabylonJS/Babylon.js/" },
   "readme": "https://github.com/BabylonJS/Babylon.js/edit/master/readme.md",

proceduralTexturesLibrary/readme.md

@@ -13,7 +13,7 @@ To add a new procedural texture, you have to create your own folder in *procedur
 * The .ts is the TypeScript code of your procedural texture
 * .fx file: GLSL code for fragment shaders
 
-## Integrating the material in the build process
+## Integrating the procedural texture in the build process
 
 To build all procedural textures and generate the *dist* folder, just run: