Improved jsdocs, finished splitting up render process

Author: photonstorm

src/gameobjects/shader/Shader.js

@@ -36,7 +36,7 @@ var TransformMatrix = require('../components/TransformMatrix');
  * @extends Phaser.GameObjects.Components.Visible
  *
  * @param {Phaser.Scene} scene - The Scene to which this Game Object belongs. A Game Object can only belong to one Scene at a time.
- * @param {string} key - 
+ * @param {string} key - The key of the shader to use from the shader cache.
  * @param {number} [x=0] - The horizontal position of this Game Object in the world.
  * @param {number} [y=0] - The vertical position of this Game Object in the world.
  * @param {number} [width=128] - The width of the Game Object.
@@ -523,23 +523,25 @@ var Shader = new Class({
      * Called automatically during render.
      * 
      * This method performs matrix ITRS and then stores the resulting value in the `uViewMatrix` uniform.
-     * It then sets up the vertex buffer and shader, updates and syncs the uniforms and finally draws it
-     * to a single quad.
+     * It then sets up the vertex buffer and shader, updates and syncs the uniforms ready
+     * for flush to be called.
      * 
      * @method Phaser.GameObjects.Shader#load
-     * @private
      * @since 3.17.0
+     * 
+     * @param {Phaser.GameObjects.Components.TransformMatrix} matrix2D - The transform matrix to use during rendering.
      */
     load: function (matrix2D)
     {
         //  ITRS
 
+        var width = this.width;
+        var height = this.height;
+        var renderer = this.renderer;
         var program = this.program;
 
         var x = -this._displayOriginX;
         var y = -this._displayOriginY;
-        var width = this.width;
-        var height = this.height;
 
         var vm = this.viewMatrix;
 
@@ -554,25 +556,6 @@ var Shader = new Class({
 
         this.renderer.setMatrix4(program, 'uViewMatrix', false, this.viewMatrix);
 
-        //  Bind
-
-        var gl = this.gl;
-        var vertexBuffer = this.vertexBuffer;
-        var renderer = this.renderer;
-        var vertexSize = Float32Array.BYTES_PER_ELEMENT * 2;
-
-        renderer.setProgram(program);
-        renderer.setVertexBuffer(vertexBuffer);
-
-        var location = gl.getAttribLocation(program, 'inPosition');
-
-        if (location !== -1)
-        {
-            gl.enableVertexAttribArray(location);
-
-            gl.vertexAttribPointer(location, 2, gl.FLOAT, false, vertexSize, 0);
-        }
-   
         //  Update common uniforms
 
         var uniforms = this.uniforms;
@@ -597,6 +580,40 @@ var Shader = new Class({
         }
 
         this.syncUniforms();
+    },
+
+    /**
+     * Called automatically during render.
+     * 
+     * Sets the active shader, loads the vertex buffer and then draws.
+     * 
+     * @method Phaser.GameObjects.Shader#flush
+     * @since 3.17.0
+     */
+    flush: function ()
+    {
+        //  Bind
+
+        var width = this.width;
+        var height = this.height;
+        var program = this.program;
+
+        var gl = this.gl;
+        var vertexBuffer = this.vertexBuffer;
+        var renderer = this.renderer;
+        var vertexSize = Float32Array.BYTES_PER_ELEMENT * 2;
+
+        renderer.setProgram(program);
+        renderer.setVertexBuffer(vertexBuffer);
+
+        var location = gl.getAttribLocation(program, 'inPosition');
+
+        if (location !== -1)
+        {
+            gl.enableVertexAttribArray(location);
+
+            gl.vertexAttribPointer(location, 2, gl.FLOAT, false, vertexSize, 0);
+        }
 
         //  Draw
 
@@ -643,12 +660,13 @@ var Shader = new Class({
     },
 
     /**
-     * Removes all object references in this WebGL Pipeline and removes its program from the WebGL context.
+     * Internal destroy handler, called as part of the destroy process.
      *
-     * @method Phaser.GameObjects.Shader#destroy
-     * @since 3.17.0
+     * @method Phaser.GameObjects.RenderTexture#preDestroy
+     * @protected
+     * @since 3.9.0
      */
-    destroy: function ()
+    preDestroy: function ()
     {
         var gl = this.gl;
 

src/gameobjects/shader/ShaderCanvasRenderer.js

@@ -8,7 +8,7 @@
  * This is a stub function for Shader.Render. There is no Canvas renderer for Shader objects.
  *
  * @method Phaser.GameObjects.Shader#renderCanvas
- * @since 3.0.0
+ * @since 3.17.0
  * @private
  *
  * @param {Phaser.Renderer.Canvas.CanvasRenderer} renderer - A reference to the current active Canvas renderer.

src/gameobjects/shader/ShaderCreator.js

@@ -7,43 +7,41 @@
 var BuildGameObject = require('../BuildGameObject');
 var GameObjectCreator = require('../GameObjectCreator');
 var GetAdvancedValue = require('../../utils/object/GetAdvancedValue');
-var GetValue = require('../../utils/object/GetValue');
 var Shader = require('./Shader');
 
 /**
  * Creates a new Shader Game Object and returns it.
  *
  * Note: This method will only be available if the Shader Game Object and WebGL support have been built into Phaser.
  *
- * @method Phaser.GameObjects.GameObjectCreator#mesh
- * @since 3.0.0
+ * @method Phaser.GameObjects.GameObjectCreator#shader
+ * @since 3.17.0
  *
  * @param {object} config - The configuration object this Game Object will use to create itself.
  * @param {boolean} [addToScene] - Add this Game Object to the Scene after creating it? If set this argument overrides the `add` property in the config object.
  *
  * @return {Phaser.GameObjects.Shader} The Game Object that was created.
  */
-GameObjectCreator.register('mesh', function (config, addToScene)
+GameObjectCreator.register('shader', function (config, addToScene)
 {
     if (config === undefined) { config = {}; }
 
     var key = GetAdvancedValue(config, 'key', null);
-    var frame = GetAdvancedValue(config, 'frame', null);
-    var vertices = GetValue(config, 'vertices', []);
-    var colors = GetValue(config, 'colors', []);
-    var alphas = GetValue(config, 'alphas', []);
-    var uv = GetValue(config, 'uv', []);
+    var x = GetAdvancedValue(config, 'x', 0);
+    var y = GetAdvancedValue(config, 'y', 0);
+    var width = GetAdvancedValue(config, 'width', 128);
+    var height = GetAdvancedValue(config, 'height', 128);
 
-    var mesh = new Shader(this.scene, 0, 0, vertices, uv, colors, alphas, key, frame);
+    var shader = new Shader(this.scene, key, x, y, width, height);
 
     if (addToScene !== undefined)
     {
         config.add = addToScene;
     }
 
-    BuildGameObject(this.scene, mesh, config);
+    BuildGameObject(this.scene, shader, config);
 
-    return mesh;
+    return shader;
 });
 
 //  When registering a factory function 'this' refers to the GameObjectCreator context.

src/gameobjects/shader/ShaderFactory.js

@@ -16,7 +16,7 @@ var GameObjectFactory = require('../GameObjectFactory');
  * @webglOnly
  * @since 3.17.0
  *
- * @param {string} key - 
+ * @param {string} key - The key of the shader to use from the shader cache.
  * @param {number} [x=0] - The horizontal position of this Game Object in the world.
  * @param {number} [y=0] - The vertical position of this Game Object in the world.
  * @param {number} [width=128] - The width of the Game Object.

src/gameobjects/shader/ShaderWebGLRenderer.js

@@ -10,7 +10,7 @@
  * This method should not be called directly. It is a utility function of the Render module.
  *
  * @method Phaser.GameObjects.Shader#renderWebGL
- * @since 3.0.0
+ * @since 3.17.0
  * @private
  *
  * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
@@ -57,6 +57,7 @@ var ShaderWebGLRenderer = function (renderer, src, interpolationPercentage, came
     }
 
     src.load(calcMatrix.matrix);
+    src.flush();
 
     renderer.rebindPipeline(pipeline);
 };