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

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');

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

@@ -0,0 +1,48 @@
+module.exports = [
+    '#define SHADER_NAME PHASER_DEFERRED_DIFFUSE_FS',
+    '',
+    'precision mediump float;',
+    '',
+    'struct Light',
+    '{',
+    '    vec3 position;',
+    '    vec3 color;',
+    '    float attenuation;',
+    '    float radius;',
+    '};',
+    '',
+    'const int kMaxLights = 50;',
+    '',
+    'uniform vec4 uCamera; /* x, y, rotation, zoom */',
+    'uniform vec2 uResolution;',
+    'uniform sampler2D uMainSampler; // gbuffer color',
+    'uniform sampler2D uNormSampler; // gbuffer normal',
+    'uniform vec3 uAmbientLightColor;',
+    'uniform Light uLights[kMaxLights];',
+    '',
+    'void main()',
+    '{',
+    '    vec2 uv = vec2(gl_FragCoord.xy / uResolution);',
+    '    vec3 finalColor = vec3(0.0, 0.0, 0.0);',
+    '    vec4 gbColor = texture2D(uMainSampler, uv);',
+    '    vec3 gbNormal = texture2D(uNormSampler, uv).rgb;',
+    '    vec3 normal = normalize(vec3(gbNormal * 2.0 - 1.0));',
+    '    vec2 res = vec2(min(uResolution.x, uResolution.y)) * uCamera.w;',
+    '',
+    '    for (int index = 0; index < kMaxLights; ++index)',
+    '    {',
+    '        Light light = uLights[index];',
+    '        vec3 lightDir = vec3((light.position.xy / res) - (gl_FragCoord.xy / res), light.position.z);',
+    '        vec3 lightNormal = normalize(lightDir);',
+    '        float distToSurf = length(lightDir) * uCamera.w;',
+    '        float diffuseFactor = max(dot(normal, lightNormal), 0.0);',
+    '        float radius = (light.radius / res.x * uCamera.w) * uCamera.w;',
+    '        float attenuation = clamp(1.0 - distToSurf * distToSurf / (radius * radius), 0.0, 1.0);',
+    '        vec3 diffuse = light.color * gbColor.rgb * diffuseFactor;',
+    '        finalColor += attenuation * diffuse;',
+    '    }',
+    '',
+    '    vec4 colorOutput = vec4(uAmbientLightColor + finalColor, gbColor.a);',
+    '    gl_FragColor = colorOutput;',
+    '}'
+].join('\n');

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

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

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

@@ -0,0 +1,12 @@
+module.exports = [
+    '#define SHADER_NAME PHASER_FLAT_TINT_FS',
+    '',
+    'precision mediump float;',
+    '',
+    'varying vec4 outTint;',
+    '',
+    'void main() {',
+    '    gl_FragColor = vec4(outTint.rgb * outTint.a, outTint.a);',
+    '}',
+    ''
+].join('\n');

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

@@ -0,0 +1,20 @@
+module.exports = [
+    '#define SHADER_NAME PHASER_FLAT_TINT_VS',
+    '',
+    'precision mediump float;',
+    '',
+    'uniform mat4 uProjectionMatrix;',
+    'uniform mat4 uViewMatrix;',
+    'uniform mat4 uModelMatrix;',
+    '',
+    'attribute vec2 inPosition;',
+    'attribute vec4 inTint;',
+    '',
+    'varying vec4 outTint;',
+    '',
+    'void main () {',
+    '    gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * vec4(inPosition, 1.0, 1.0);',
+    '    outTint = inTint;',
+    '}',
+    ''
+].join('\n');

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

@@ -0,0 +1,52 @@
+module.exports = [
+    '#define SHADER_NAME PHASER_FORWARD_DIFFUSE_FS',
+    '',
+    'precision mediump float;',
+    '',
+    'struct Light',
+    '{',
+    '    vec2 position;',
+    '    vec3 color;',
+    '    float intensity;',
+    '    float radius;',
+    '};',
+    '',
+    'const int kMaxLights = %LIGHT_COUNT%;',
+    '',
+    'uniform vec4 uCamera; /* x, y, rotation, zoom */',
+    'uniform vec2 uResolution;',
+    'uniform sampler2D uMainSampler;',
+    'uniform sampler2D uNormSampler;',
+    'uniform vec3 uAmbientLightColor;',
+    'uniform Light uLights[kMaxLights];',
+    '',
+    'varying vec2 outTexCoord;',
+    'varying vec4 outTint;',
+    '',
+    'void main()',
+    '{',
+    '    vec3 finalColor = vec3(0.0, 0.0, 0.0);',
+    '    vec4 color = texture2D(uMainSampler, outTexCoord) * vec4(outTint.rgb * outTint.a, outTint.a);',
+    '    vec3 normalMap = texture2D(uNormSampler, outTexCoord).rgb;',
+    '    vec3 normal = normalize(vec3(normalMap * 2.0 - 1.0));',
+    '    vec2 res = vec2(min(uResolution.x, uResolution.y)) * uCamera.w;',
+    '',
+    '    for (int index = 0; index < kMaxLights; ++index)',
+    '    {',
+    '        Light light = uLights[index];',
+    '        vec3 lightDir = vec3((light.position.xy / res) - (gl_FragCoord.xy / res), 0.1);',
+    '        vec3 lightNormal = normalize(lightDir);',
+    '        float distToSurf = length(lightDir) * uCamera.w;',
+    '        float diffuseFactor = max(dot(normal, lightNormal), 0.0);',
+    '        float radius = (light.radius / res.x * uCamera.w) * uCamera.w;',
+    '        float attenuation = clamp(1.0 - distToSurf * distToSurf / (radius * radius), 0.0, 1.0);',
+    '        vec3 diffuse = light.color * diffuseFactor;',
+    '        finalColor += (attenuation * diffuse) * light.intensity;',
+    '    }',
+    '',
+    '    vec4 colorOutput = vec4(uAmbientLightColor + finalColor, 1.0);',
+    '    gl_FragColor = color * vec4(colorOutput.rgb * colorOutput.a, colorOutput.a);',
+    '',
+    '}',
+    ''
+].join('\n');

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

@@ -0,0 +1,23 @@
+module.exports = [
+    '#extension GL_EXT_draw_buffers : require',
+    '',
+    '#define SHADER_NAME PHASER_GBUFFER_FS',
+    '',
+    'precision mediump float;',
+    '',
+    'uniform sampler2D uMainSampler;',
+    'uniform sampler2D uNormSampler;',
+    '',
+    'varying vec2 outTexCoord;',
+    'varying vec4 outTint;',
+    '',
+    'void main()',
+    '{',
+    '    vec4 color = texture2D(uMainSampler, outTexCoord) * vec4(outTint.rgb * outTint.a, outTint.a);',
+    '    vec3 normal = texture2D(uNormSampler, outTexCoord).rgb;',
+    '',
+    '    gl_FragData[0] = color;',
+    '    gl_FragData[1] = vec4(normal, color.a);',
+    '}',
+    ''
+].join('\n');

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

@@ -0,0 +1,18 @@
+module.exports = [
+    '#define SHADER_NAME PHASER_TEXTURE_TINT_FS',
+    '',
+    'precision mediump float;',
+    '',
+    'uniform sampler2D uMainSampler;',
+    '',
+    'varying vec2 outTexCoord;',
+    'varying vec4 outTint;',
+    '',
+    'void main()',
+    '{',
+    '    vec4 texel = texture2D(uMainSampler, outTexCoord);',
+    '    texel *= vec4(outTint.rgb * outTint.a, outTint.a);',
+    '    gl_FragColor = texel;',
+    '}',
+    ''
+].join('\n');

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

@@ -0,0 +1,25 @@
+module.exports = [
+    '#define SHADER_NAME PHASER_TEXTURE_TINT_VS',
+    '',
+    'precision mediump float;',
+    '',
+    'uniform mat4 uProjectionMatrix;',
+    'uniform mat4 uViewMatrix;',
+    'uniform mat4 uModelMatrix;',
+    '',
+    'attribute vec2 inPosition;',
+    'attribute vec2 inTexCoord;',
+    'attribute vec4 inTint;',
+    '',
+    'varying vec2 outTexCoord;',
+    'varying vec4 outTint;',
+    '',
+    'void main ()',
+    '{',
+    '    gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * vec4(inPosition, 1.0, 1.0);',
+    '    outTexCoord = inTexCoord;',
+    '    outTint = inTint;',
+    '}',
+    '',
+    ''
+].join('\n');

webpack.config.js

@@ -23,18 +23,8 @@ module.exports = {
         umdNamedDefine: true
     },
 
-    module: {
-        rules: [
-            {
-                test: [ /\.vert$/, /\.frag$/ ],
-                use: 'raw-loader'
-            }
-        ]
-    },
-
     plugins: [
         new webpack.DefinePlugin({
-            "typeof SHADER_REQUIRE": JSON.stringify(false),
             "typeof CANVAS_RENDERER": JSON.stringify(true),
             "typeof WEBGL_RENDERER": JSON.stringify(true)
         }),

webpack.dist.config.js

@@ -26,15 +26,6 @@ module.exports = {
         umdNamedDefine: true
     },
 
-    module: {
-        rules: [
-            {
-                test: [ /\.vert$/, /\.frag$/ ],
-                use: 'raw-loader'
-            }
-        ]
-    },
-
     optimization: {
         minimizer: [
             new UglifyJSPlugin({
@@ -55,7 +46,6 @@ module.exports = {
 
     plugins: [
         new webpack.DefinePlugin({
-            "typeof SHADER_REQUIRE": JSON.stringify(false),
             "typeof CANVAS_RENDERER": JSON.stringify(true),
             "typeof WEBGL_RENDERER": JSON.stringify(true)
         }),