Removed the need for raw-loader in webpack. Shaders now build to standard JS files. Removed fs requirement.

Author: photonstorm

CHANGELOG.md

@@ -52,9 +52,9 @@ The Loader has been given an overhaul to improve its performance and extensibili
 
 ### Updates
 
-* If you're using Webpack with Phaser you'll need to update your config to match our new one.
-* We've swapped use of the Webpack DefinePlugin so instead of setting a global flag for the compilation of the Canvas and WebGL renderers, we now use a typeof check instead. This means you should now be able to ingest the Phaser source more easily outside of Webpack without having to define any global vars first (thanks @tgrajewski)
-* Under Webpack we still use the raw-loader to import our shader source, but outside of Webpack we now use `require.extensions` to load the shader source via fs. This should allow you to bundle Phaser with packages other than Webpack more easily (thanks @tgrajewski)
+* If you're using Webpack with Phaser you'll need to update your config to match our new one. The two changes are: We've removed the need for `raw-loader` and we've changed the syntax of the DefinePlugin calls:
+* We've swapped use of the Webpack DefinePlugin so instead of setting a global flag for the compilation of the Canvas and WebGL renderers, we use a typeof check instead. This means you should now be able to ingest the Phaser source more easily outside of Webpack without having to define any global vars (thanks @tgrajewski)
+* Under Webpack we still no longer use `raw-loader` to import our shader source. Instead it's compiled to plain JS files during our in-house workflow. This should allow you to bundle Phaser with packages other than Webpack more easily.
 * The Texture Manager will now emit an `addtexture` event whenever you add a new texture to it, which includes when you load image files from the Loader (as it automatically populates the Texture Manager). Once you receive an `addtexture` event you know the image is loaded and the texture is safe to be applied to a Game Object.
 * BitmapMask and GeometryMask both have new `destroy` methods which clear their references, freeing them for gc.
 * CanvasPool has a new argument `selfParent` which allows the canvas itself to be the parent key, used for later removal.

package.json

@@ -21,6 +21,7 @@
     "lint": "eslint --config .eslintrc.json \"src/**/*.js\"",
     "lintfix": "eslint --config .eslintrc.json \"src/**/*.js\" --fix",
     "sloc": "node-sloc \"./src\" --include-extensions \"js\"",
+    "bundleshaders": "node scripts/bundle-shaders.js",
     "postinstall": "node scripts/support.js"
   },
   "keywords": [

scripts/bundle-shaders.js

@@ -0,0 +1,60 @@
+let fs = require('fs-extra');
+
+/*
+BitmapMask.frag
+BitmapMask.vert
+DeferredDiffuse.frag
+DeferredDiffuse.vert
+FlatTint.frag
+FlatTint.vert
+ForwardDiffuse.frag
+GBuffer.frag
+TextureTint.frag
+TextureTint.vert
+*/
+
+let srcdir = './src/renderer/webgl/shaders/src/';
+let destdir = './src/renderer/webgl/shaders/';
+
+let files = fs.readdirSync(srcdir);
+
+files.forEach(function (file) {
+
+    let shaderSource = fs.readFileSync(srcdir + file, 'utf8');
+    let type = file.substr(-4);
+    let shaderFilename = file.substr(0, file.lastIndexOf('.')) + '-' + type + '.js';
+
+    let outputSource = 'module.exports = [\n';
+
+    let lines = shaderSource.split('\n');
+
+    for (var i = 0; i < lines.length; i++)
+    {
+        let line = lines[i].trimRight();
+
+        if (i < lines.length - 1)
+        {
+            outputSource = outputSource.concat("    '" + line + "',\n");
+        }
+        else
+        {
+            outputSource = outputSource.concat("    '" + line + "'\n");
+        }
+    }
+
+    outputSource = outputSource.concat('].join(\'\\n\');\n');
+
+    fs.writeFile(destdir + shaderFilename, outputSource, function (error) {
+
+        if (error)
+        {
+            throw error;
+        }
+        else
+        {
+            console.log('Saved', shaderFilename);
+        }
+
+    });
+
+});

src/phaser.js

@@ -4,24 +4,6 @@
  * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
  */
 
-//  For file loading of shader source outside of Webpack
-//  See: https://github.com/photonstorm/phaser/issues/3598
-
-/* eslint-disable */
-if (typeof SHADER_REQUIRE)
-{
-    var fs = require('fs');
-
-    require.extensions['.frag'] = function (module, filename) {
-        module.exports = fs.readFileSync(filename, 'utf8');
-    };
-
-    require.extensions['.vert'] = function (module, filename) {
-        module.exports = fs.readFileSync(filename, 'utf8');
-    };
-}
-/* eslint-enable */
-
 require('./polyfills');
 
 var CONST = require('./const');

src/renderer/webgl/pipelines/BitmapMaskPipeline.js

@@ -6,8 +6,8 @@
  */
 
 var Class = require('../../../utils/Class');
-var ShaderSourceFS = require('../shaders/BitmapMask.frag');
-var ShaderSourceVS = require('../shaders/BitmapMask.vert');
+var ShaderSourceFS = require('../shaders/BitmapMask-frag.js');
+var ShaderSourceVS = require('../shaders/BitmapMask-vert.js');
 var WebGLPipeline = require('../WebGLPipeline');
 
 /**

src/renderer/webgl/pipelines/FlatTintPipeline.js

@@ -9,8 +9,8 @@ var Class = require('../../../utils/Class');
 var Commands = require('../../../gameobjects/graphics/Commands');
 var Earcut = require('../../../geom/polygon/Earcut');
 var ModelViewProjection = require('./components/ModelViewProjection');
-var ShaderSourceFS = require('../shaders/FlatTint.frag');
-var ShaderSourceVS = require('../shaders/FlatTint.vert');
+var ShaderSourceFS = require('../shaders/FlatTint-frag.js');
+var ShaderSourceVS = require('../shaders/FlatTint-vert.js');
 var Utils = require('../Utils');
 var WebGLPipeline = require('../WebGLPipeline');
 

src/renderer/webgl/pipelines/ForwardDiffuseLightPipeline.js

@@ -6,7 +6,7 @@
  */
 
 var Class = require('../../../utils/Class');
-var ShaderSourceFS = require('../shaders/ForwardDiffuse.frag');
+var ShaderSourceFS = require('../shaders/ForwardDiffuse-frag.js');
 var TextureTintPipeline = require('./TextureTintPipeline');
 
 var LIGHT_COUNT = 10;

src/renderer/webgl/pipelines/TextureTintPipeline.js

@@ -7,8 +7,8 @@
 
 var Class = require('../../../utils/Class');
 var ModelViewProjection = require('./components/ModelViewProjection');
-var ShaderSourceFS = require('../shaders/TextureTint.frag');
-var ShaderSourceVS = require('../shaders/TextureTint.vert');
+var ShaderSourceFS = require('../shaders/TextureTint-frag.js');
+var ShaderSourceVS = require('../shaders/TextureTint-vert.js');
 var Utils = require('../Utils');
 var WebGLPipeline = require('../WebGLPipeline');
 

src/renderer/webgl/shaders/BitmapMask-frag.js

@@ -0,0 +1,30 @@
+module.exports = [
+    '#define SHADER_NAME PHASER_BITMAP_MASK_FS',
+    '',
+    'precision mediump float;',
+    '',
+    'uniform vec2 uResolution;',
+    'uniform sampler2D uMainSampler;',
+    'uniform sampler2D uMaskSampler;',
+    'uniform bool uInvertMaskAlpha;',
+    '',
+    'void main()',
+    '{',
+    '    vec2 uv = gl_FragCoord.xy / uResolution;',
+    '    vec4 mainColor = texture2D(uMainSampler, uv);',
+    '    vec4 maskColor = texture2D(uMaskSampler, uv);',
+    '    float alpha = mainColor.a;',
+    '',
+    '    if (!uInvertMaskAlpha)',
+    '    {',
+    '        alpha *= (maskColor.a);',
+    '    }',
+    '    else',
+    '    {',
+    '        alpha *= (1.0 - maskColor.a);',
+    '    }',
+    '',
+    '    gl_FragColor = vec4(mainColor.rgb * alpha, alpha);',
+    '}',
+    ''
+].join('\n');

src/renderer/webgl/shaders/BitmapMask-vert.js

@@ -0,0 +1,13 @@
+module.exports = [
+    '#define SHADER_NAME PHASER_BITMAP_MASK_VS',
+    '',
+    'precision mediump float;',
+    '',
+    'attribute vec2 inPosition;',
+    '',
+    'void main()',
+    '{',
+    '    gl_Position = vec4(inPosition, 0.0, 1.0);',
+    '}',
+    ''
+].join('\n');