diff --git a/src/phaser.js b/src/phaser.js
index d824d69d7..902b39680 100644
--- a/src/phaser.js
+++ b/src/phaser.js
@@ -33,6 +33,7 @@ var Phaser = {
     Loader: require('./loader'),
     Math: require('./math'),
     Physics: require('./physics'),
+    Renderer: require('./renderer'),
     Scene: require('./scene/Scene'),
     Scenes: require('./scene'),
     Sound: require('./sound'),
diff --git a/src/renderer/webgl/WebGLPipeline.js b/src/renderer/webgl/WebGLPipeline.js
index 9c3153d23..be9a7c9ec 100644
--- a/src/renderer/webgl/WebGLPipeline.js
+++ b/src/renderer/webgl/WebGLPipeline.js
@@ -198,6 +198,33 @@ var WebGLPipeline = new Class({
         this.flushLocked = false;
     },
 
+    /**
+     * [description]
+     *
+     * @method Phaser.Renderer.WebGL.WebGLPipeline#addAttribute
+     * @since 3.2.0
+     *
+     * @param {string} name - [description]
+     * @param {int} size - [description]
+     * @param {int} type - [description]
+     * @param {boolean} normalized - [description]
+     * @param {int} offset - [description]
+     *
+     * @return {Phaser.Renderer.WebGL.WebGLPipeline} [description]
+     */
+    addAttribute: function (name, size, type, normalized, offset) 
+    {
+        this.attributes.push({
+            name: name,
+            size: size,
+            type: this.renderer.glFormats[type],
+            normalized: normalized,
+            offset: offset
+        });
+
+        return this;
+    },
+
     /**
      * [description]
      *
@@ -381,6 +408,211 @@ var WebGLPipeline = new Class({
         delete this.vertexBuffer;
         delete this.gl;
 
+        return this;
+    },
+
+    /**
+     * [description]
+     *
+     * @method Phaser.Renderer.WebGL.WebGLPipeline#setFloat1
+     * @since 3.2.0
+     *
+     * @param {string} name - [description]
+     * @param {float} x - [description]
+     *
+     * @return {Phaser.Renderer.WebGL.WebGLPipeline} [description]
+     */
+    setFloat1: function (name, x)
+    {
+        this.renderer.setFloat1(this.program, name, x);
+        return this;
+    },
+
+    /**
+     * [description]
+     *
+     * @method Phaser.Renderer.WebGL.WebGLPipeline#setFloat2
+     * @since 3.2.0
+     *
+     * @param {string} name - [description]
+     * @param {float} x - [description]
+     * @param {float} y - [description]
+     *
+     * @return {Phaser.Renderer.WebGL.WebGLPipeline} [description]
+     */
+    setFloat2: function (name, x, y)
+    {
+
+        this.renderer.setFloat2(this.program, name, x, y);
+        return this;
+    },
+
+    /**
+     * [description]
+     *
+     * @method Phaser.Renderer.WebGL.WebGLPipeline#setFloat3
+     * @since 3.2.0
+     *
+     * @param {string} name - [description]
+     * @param {float} x - [description]
+     * @param {float} y - [description]
+     * @param {float} z - [description]
+     *
+     * @return {Phaser.Renderer.WebGL.WebGLPipeline} [description]
+     */
+    setFloat3: function (name, x, y, z)
+    {
+
+        this.renderer.setFloat3(this.program, name, x, y, z);
+        return this;
+    },
+
+    /**
+     * [description]
+     *
+     * @method Phaser.Renderer.WebGL.WebGLPipeline#setFloat4
+     * @since 3.2.0
+     *
+     * @param {string} name - [description]
+     * @param {float} x - [description]
+     * @param {float} y - [description]
+     * @param {float} z - [description]
+     * @param {float} w - [description]
+     *
+     * @return {Phaser.Renderer.WebGL.WebGLPipeline} [description]
+     */
+    setFloat4: function (name, x, y, z, w)
+    {
+
+        this.renderer.setFloat4(this.program, name, x, y, z, w);
+        return this;
+    },
+
+    /**
+     * [description]
+     *
+     * @method Phaser.Renderer.WebGL.WebGLPipeline#setInt1
+     * @since 3.2.0
+     *
+     * @param {string} name - [description]
+     * @param {int} x - [description]
+     *
+     * @return {Phaser.Renderer.WebGL.WebGLPipeline} [description]
+     */
+    setInt1: function (name, x)
+    {
+        this.renderer.setInt1(this.program, name, x);
+        return this;
+    },
+
+    /**
+     * [description]
+     *
+     * @method Phaser.Renderer.WebGL.WebGLPipeline#setInt2
+     * @since 3.2.0
+     *
+     * @param {string} name - [description]
+     * @param {int} x - [description]
+     * @param {int} y - [description]
+     *
+     * @return {Phaser.Renderer.WebGL.WebGLPipeline} [description]
+     */
+    setInt2: function (name, x, y)
+    {
+        this.renderer.setInt2(this.program, name, x, y);
+        return this;
+    },
+
+    /**
+     * [description]
+     *
+     * @method Phaser.Renderer.WebGL.WebGLPipeline#setInt3
+     * @since 3.2.0
+     *
+     * @param {string} name - [description]
+     * @param {int} x - [description]
+     * @param {int} y - [description]
+     * @param {int} z - [description]
+     *
+     * @return {Phaser.Renderer.WebGL.WebGLPipeline} [description]
+     */
+    setInt3: function (name, x, y, z)
+    {
+        this.renderer.setInt3(this.program, name, x, y, z);
+        return this;
+    },
+
+    /**
+     * [description]
+     *
+     * @method Phaser.Renderer.WebGL.WebGLPipeline#setInt4
+     * @since 3.2.0
+     *
+     * @param {string} name - [description]
+     * @param {int} x - [description]
+     * @param {int} y - [description]
+     * @param {int} z - [description]
+     * @param {int} w - [description]
+     *
+     * @return {Phaser.Renderer.WebGL.WebGLPipeline} [description]
+     */
+    setInt4: function (name, x, y, z, w)
+    {
+        this.renderer.setInt4(this.program, name, x, y, z, w);
+        return this;
+    },
+
+    /**
+     * [description]
+     *
+     * @method Phaser.Renderer.WebGL.WebGLPipeline#setMatrix2
+     * @since 3.2.0
+     *
+     * @param {string} name - [description]
+     * @param {boolean} transpose - [description]
+     * @param {Float32Array} matrix - [description]
+     *
+     * @return {Phaser.Renderer.WebGL.WebGLPipeline} [description]
+     */
+    setMatrix2: function (name, transpose, matrix)
+    {
+        this.renderer.setMatrix2(this.program, name, transpose,  matrix);
+        return this;
+    },
+
+    /**
+     * [description]
+     *
+     * @method Phaser.Renderer.WebGL.WebGLPipeline#setMatrix3
+     * @since 3.2.0
+     *
+     * @param {string} name - [description]
+     * @param {boolean} transpose - [description]
+     * @param {Float32Array} matrix - [description]
+     *
+     * @return {Phaser.Renderer.WebGL.WebGLPipeline} [description]
+     */
+    setMatrix3: function (name, transpose, matrix)
+    {
+        this.renderer.setMatrix3(this.program, name, transpose,  matrix);
+        return this;
+    },
+
+    /**
+     * [description]
+     *
+     * @method Phaser.Renderer.WebGL.WebGLPipeline#setMatrix4
+     * @since 3.2.0
+     *
+     * @param {string} name - [description]
+     * @param {boolean} transpose - [description]
+     * @param {Float32Array} matrix - [description]
+     *
+     * @return {Phaser.Renderer.WebGL.WebGLPipeline} [description]
+     */
+    setMatrix4: function (name, transpose, matrix)
+    {
+        this.renderer.setMatrix4(this.program, name, transpose,  matrix);
         return this;
     }
 
diff --git a/src/renderer/webgl/WebGLRenderer.js b/src/renderer/webgl/WebGLRenderer.js
index 30471c5a2..2a83ed3a9 100644
--- a/src/renderer/webgl/WebGLRenderer.js
+++ b/src/renderer/webgl/WebGLRenderer.js
@@ -354,6 +354,16 @@ var WebGLRenderer = new Class({
          */
         this.extensions = {};
 
+        /**
+         * [description]
+         *
+         * @name Phaser.Renderer.WebGL.WebGLRenderer#glFormats
+         * @type {array}
+         * @default []
+         * @since 3.2.0
+         */
+        this.glFormats = [];
+
         this.init(this.config);
     },
 
@@ -390,6 +400,12 @@ var WebGLRenderer = new Class({
         this.blendModes[2].func = [ gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA ];
         this.blendModes[3].func = [ gl.ONE, gl.ONE_MINUS_SRC_COLOR ];
 
+        this.glFormats[0] = gl.BYTE;
+        this.glFormats[1] = gl.SHORT;
+        this.glFormats[2] = gl.UNSIGNED_BYTE;
+        this.glFormats[3] = gl.UNSIGNED_SHORT;
+        this.glFormats[4] = gl.FLOAT;
+
         // Load supported extensions
         this.supportedExtensions = gl.getSupportedExtensions();
 
@@ -409,10 +425,10 @@ var WebGLRenderer = new Class({
         // Clear previous pipelines and reload default ones
         this.pipelines = {};
 
-        this.addPipeline('TextureTintPipeline', new TextureTintPipeline(this.game, gl, this));
-        this.addPipeline('FlatTintPipeline', new FlatTintPipeline(this.game, gl, this));
-        this.addPipeline('BitmapMaskPipeline', new BitmapMaskPipeline(this.game, gl, this));
-        this.addPipeline('Light2D', new ForwardDiffuseLightPipeline(this.game, gl, this));
+        this.addPipeline('TextureTintPipeline', new TextureTintPipeline({ game: this.game, renderer: this }));
+        this.addPipeline('FlatTintPipeline', new FlatTintPipeline({ game: this.game, renderer: this }));
+        this.addPipeline('BitmapMaskPipeline', new BitmapMaskPipeline({ game: this.game, renderer: this }));
+        this.addPipeline('Light2D', new ForwardDiffuseLightPipeline({ game: this.game, renderer: this }));
         
         this.setBlendMode(CONST.BlendModes.NORMAL);
         this.resize(this.width, this.height);
@@ -602,7 +618,7 @@ var WebGLRenderer = new Class({
      * @param {string} pipelineName - [description]
      * @param {Phaser.Renderer.WebGL.WebGLPipeline} pipelineInstance - [description]
      *
-     * @return {Phaser.Renderer.WebGL.WebGLRenderer} [description]
+     * @return {Phaser.Renderer.WebGL.WebGLPipeline} [description]
      */
     addPipeline: function (pipelineName, pipelineInstance)
     {
@@ -612,7 +628,7 @@ var WebGLRenderer = new Class({
         pipelineInstance.name = pipelineName;
         this.pipelines[pipelineName].resize(this.width, this.height, this.config.resolution);
 
-        return this;
+        return pipelineInstance;
     },
 
     /**
diff --git a/src/renderer/webgl/index.js b/src/renderer/webgl/index.js
index 2d2d8714f..981d1309b 100644
--- a/src/renderer/webgl/index.js
+++ b/src/renderer/webgl/index.js
@@ -12,6 +12,14 @@ module.exports = {
 
     Utils: require('./Utils'),
     WebGLPipeline: require('./WebGLPipeline'),
-    WebGLRenderer: require('./WebGLRenderer')
+    WebGLRenderer: require('./WebGLRenderer'),
+    Pipelines: require('./pipelines'),
+
+    // Constants
+    BYTE: 0,
+    SHORT: 1,
+    UNSIGNED_BYTE: 2,
+    UNSIGNED_SHORT: 3,
+    FLOAT: 4
 
 };
diff --git a/src/renderer/webgl/pipelines/BitmapMaskPipeline.js b/src/renderer/webgl/pipelines/BitmapMaskPipeline.js
index 1f1540105..3c151327b 100644
--- a/src/renderer/webgl/pipelines/BitmapMaskPipeline.js
+++ b/src/renderer/webgl/pipelines/BitmapMaskPipeline.js
@@ -19,9 +19,7 @@ var WebGLPipeline = require('../WebGLPipeline');
  * @constructor
  * @since 3.0.0
  *
- * @param {Phaser.Game} game - [description]
- * @param {WebGLRenderingContext} gl - [description]
- * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - [description]
+ * @param {object} config - [description]
  */
 var BitmapMaskPipeline = new Class({
 
@@ -29,19 +27,19 @@ var BitmapMaskPipeline = new Class({
     
     initialize:
 
-    function BitmapMaskPipeline (game, gl, renderer)
+    function BitmapMaskPipeline (config)
     {
         WebGLPipeline.call(this, {
-            game: game,
-            gl: gl,
-            renderer: renderer,
-            topology: gl.TRIANGLES,
-            vertShader: ShaderSourceVS,
-            fragShader: ShaderSourceFS,
-            vertexCapacity: 3,
+            game: config.game,
+            renderer: config.renderer,
+            gl: config.renderer.gl,
+            topology: (config.topology ? config.topology : config.renderer.gl.TRIANGLES),
+            vertShader: (config.vertShader ? config.vertShader : ShaderSourceVS),
+            fragShader: (config.fragShader ? config.fragShader : ShaderSourceFS),
+            vertexCapacity: (config.vertexCapacity ? config.vertexCapacity : 3),
 
-            vertexSize:
-                Float32Array.BYTES_PER_ELEMENT * 2,
+            vertexSize: (config.vertexSize ? config.vertexSize :
+                Float32Array.BYTES_PER_ELEMENT * 2),
 
             vertices: new Float32Array([
                 -1, +1, -1, -7, +7, +1
@@ -51,7 +49,7 @@ var BitmapMaskPipeline = new Class({
                 {
                     name: 'inPosition',
                     size: 2,
-                    type: gl.FLOAT,
+                    type: config.renderer.gl.FLOAT,
                     normalized: false,
                     offset: 0
                 }
diff --git a/src/renderer/webgl/pipelines/FlatTintPipeline.js b/src/renderer/webgl/pipelines/FlatTintPipeline.js
index 987b177da..f6fda780e 100644
--- a/src/renderer/webgl/pipelines/FlatTintPipeline.js
+++ b/src/renderer/webgl/pipelines/FlatTintPipeline.js
@@ -44,9 +44,7 @@ var pathArray = [];
  * @constructor
  * @since 3.0.0
  *
- * @param {Phaser.Game} game - [description]
- * @param {WebGLRenderingContext} gl - [description]
- * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - [description]
+ * @param {object} config - [description]
  */
 var FlatTintPipeline = new Class({
 
@@ -58,33 +56,33 @@ var FlatTintPipeline = new Class({
 
     initialize:
 
-    function FlatTintPipeline (game, gl, renderer)
+    function FlatTintPipeline (config)
     {
         WebGLPipeline.call(this, {
-            game: game,
-            gl: gl,
-            renderer: renderer,
-            topology: gl.TRIANGLES,
-            vertShader: ShaderSourceVS,
-            fragShader: ShaderSourceFS,
-            vertexCapacity: 12000,
+            game: config.game,
+            renderer: config.renderer,
+            gl: config.renderer.gl,
+            topology: (config.topology ? config.topology : config.renderer.gl.TRIANGLES),
+            vertShader: (config.vertShader ? config.vertShader : ShaderSourceVS),
+            fragShader: (config.fragShader ? config.fragShader : ShaderSourceFS),
+            vertexCapacity: (config.vertexCapcity ? config.vertexCapacity : 12000),
 
-            vertexSize:
+            vertexSize: (config.vertexSize ? config.vertexSize :
                 Float32Array.BYTES_PER_ELEMENT * 2 +
-                Uint8Array.BYTES_PER_ELEMENT * 4,
+                Uint8Array.BYTES_PER_ELEMENT * 4),
 
             attributes: [
                 {
                     name: 'inPosition',
                     size: 2,
-                    type: gl.FLOAT,
+                    type: config.renderer.gl.FLOAT,
                     normalized: false,
                     offset: 0
                 },
                 {
                     name: 'inTint',
                     size: 4,
-                    type: gl.UNSIGNED_BYTE,
+                    type: config.renderer.gl.UNSIGNED_BYTE,
                     normalized: true,
                     offset: Float32Array.BYTES_PER_ELEMENT * 2
                 }
diff --git a/src/renderer/webgl/pipelines/ForwardDiffuseLightPipeline.js b/src/renderer/webgl/pipelines/ForwardDiffuseLightPipeline.js
index 8b69f33ff..6cb227375 100644
--- a/src/renderer/webgl/pipelines/ForwardDiffuseLightPipeline.js
+++ b/src/renderer/webgl/pipelines/ForwardDiffuseLightPipeline.js
@@ -20,9 +20,7 @@ var LIGHT_COUNT = 10;
  * @constructor
  * @since 3.0.0
  *
- * @param {Phaser.Game} game - [description]
- * @param {WebGLRenderingContext} gl - [description]
- * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - [description]
+ * @param {object} config - [description]
  */
 var ForwardDiffuseLightPipeline = new Class({
 
@@ -30,9 +28,11 @@ var ForwardDiffuseLightPipeline = new Class({
 
     initialize:
 
-    function ForwardDiffuseLightPipeline (game, gl, renderer)
+    function ForwardDiffuseLightPipeline (config)
     {
-        TextureTintPipeline.call(this, game, gl, renderer, ShaderSourceFS.replace('%LIGHT_COUNT%', LIGHT_COUNT.toString()));
+        config.fragShader = ShaderSourceFS.replace('%LIGHT_COUNT%', LIGHT_COUNT.toString());
+
+        TextureTintPipeline.call(this, config);
     },
 
     /**
diff --git a/src/renderer/webgl/pipelines/TextureTintPipeline.js b/src/renderer/webgl/pipelines/TextureTintPipeline.js
index 87170b518..1f6dbf654 100644
--- a/src/renderer/webgl/pipelines/TextureTintPipeline.js
+++ b/src/renderer/webgl/pipelines/TextureTintPipeline.js
@@ -21,10 +21,7 @@ var WebGLPipeline = require('../WebGLPipeline');
  * @constructor
  * @since 3.0.0
  *
- * @param {Phaser.Game} game - [description]
- * @param {WebGLRenderingContext} gl - [description]
- * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - [description]
- * @param {boolean} overrideFragmentShader - [description]
+ * @param {object} config - [description]
  */
 var TextureTintPipeline = new Class({
 
@@ -36,41 +33,41 @@ var TextureTintPipeline = new Class({
 
     initialize:
 
-    function TextureTintPipeline (game, gl, renderer, overrideFragmentShader)
+    function TextureTintPipeline (config)
     {
         WebGLPipeline.call(this, {
-            game: game,
-            gl: gl,
-            renderer: renderer,
-            topology: gl.TRIANGLES,
-            vertShader: ShaderSourceVS,
-            fragShader: (overrideFragmentShader ? overrideFragmentShader : ShaderSourceFS),
-            vertexCapacity: 6 * 2000,
+            game: config.game,
+            renderer: config.renderer,
+            gl: config.renderer.gl,
+            topology: (config.topology ? config.topology : config.renderer.gl.TRIANGLES),
+            vertShader: (config.vertShader ? config.vertShader : ShaderSourceVS),
+            fragShader: (config.fragShader ? config.fragShader : ShaderSourceFS),
+            vertexCapacity: (config.vertexCapacity ? config.vertexCapacity : 6 * 2000),
 
-            vertexSize:
+            vertexSize: (config.vertexSize ? config.vertexSize :
                 Float32Array.BYTES_PER_ELEMENT * 2 +
                 Float32Array.BYTES_PER_ELEMENT * 2 +
-                Uint8Array.BYTES_PER_ELEMENT * 4,
+                Uint8Array.BYTES_PER_ELEMENT * 4),
 
             attributes: [
                 {
                     name: 'inPosition',
                     size: 2,
-                    type: gl.FLOAT,
+                    type: config.renderer.gl.FLOAT,
                     normalized: false,
                     offset: 0
                 },
                 {
                     name: 'inTexCoord',
                     size: 2,
-                    type: gl.FLOAT,
+                    type: config.renderer.gl.FLOAT,
                     normalized: false,
                     offset: Float32Array.BYTES_PER_ELEMENT * 2
                 },
                 {
                     name: 'inTint',
                     size: 4,
-                    type: gl.UNSIGNED_BYTE,
+                    type: config.renderer.gl.UNSIGNED_BYTE,
                     normalized: true,
                     offset: Float32Array.BYTES_PER_ELEMENT * 4
                 }
diff --git a/src/renderer/webgl/pipelines/index.js b/src/renderer/webgl/pipelines/index.js
new file mode 100644
index 000000000..d340eefe9
--- /dev/null
+++ b/src/renderer/webgl/pipelines/index.js
@@ -0,0 +1,18 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2018 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+/**
+ * @namespace Phaser.Renderer.WebGL.Pipelines
+ */
+
+module.exports = {
+
+    BitmapMaskPipeline: require('./BitmapMaskPipeline'),
+    FlatTintPipeline: require('./FlatTintPipeline'),
+    ForwardDiffuseLightPipeline: require('./ForwardDiffuseLightPipeline'),
+    TextureTintPipeline: require('./TextureTintPipeline')
+
+};