You can now set the WebGL batch size in the Game Config via the property batchSize. The default is 2000 before the batch will flush, which is a happy average between desktop and mobile. If targeting desktop specifically, you may wish to increase this value to reduce draw calls.

Author: photonstorm

CHANGELOG.md

@@ -53,6 +53,7 @@ There is a third game config property called `pixelArt`. If set to `true` it's t
 * `ScenePlugin.wake` (and the corresponding methods in Scene Systems and the Scene Manager) now has a new optional `data` argument, which is passed to the target Scene and emitted in its 'wake' event.
 * `ScenePlugin.setActive` now has a new optional `data` argument, which is passed to the target Scene and emitted in its 'pause' or 'resume' events.
 * `TileSprite.tileScaleX` and `tileScaleY` are two new properties that allow you to control the scale of the texture within the Tile Sprite. This impacts the way the repeating texture is scaled, and is independent to scaling the Tile Sprite itself. It works in both Canvas and WebGL mode.
+* You can now set the WebGL batch size in the Game Config via the property `batchSize`. The default is 2000 before the batch will flush, which is a happy average between desktop and mobile. If targeting desktop specifically, you may wish to increase this value to reduce draw calls.
 
 ### Updates
 

src/boot/Config.js

@@ -94,6 +94,7 @@ var ValueToColor = require('../display/color/ValueToColor');
  * @property {boolean} [render.preserveDrawingBuffer=false] - [description]
  * @property {boolean} [render.failIfMajorPerformanceCaveat=false] - [description]
  * @property {string} [render.powerPreference='default'] - "high-performance", "low-power" or "default"
+ * @property {integer} [render.batchSize=2000] - The default WebGL batch size.
  * @property {(string|number)} [backgroundColor=0x000000] - [description]
  * @property {object} [callbacks] - [description]
  * @property {BootCallback} [callbacks.preBoot=NOOP] - [description]
@@ -355,7 +356,7 @@ var Config = new Class({
         this.transparent = GetValue(renderConfig, 'transparent', false);
 
         /**
-         * @const {boolean} Phaser.Boot.Config#zoclearBeforeRenderom - [description]
+         * @const {boolean} Phaser.Boot.Config#clearBeforeRender - [description]
          */
         this.clearBeforeRender = GetValue(renderConfig, 'clearBeforeRender', true);
 
@@ -379,6 +380,11 @@ var Config = new Class({
          */
         this.powerPreference = GetValue(renderConfig, 'powerPreference', 'default');
 
+        /**
+         * @const {integer} Phaser.Boot.Config#batchSize - The default WebGL Batch size.
+         */
+        this.batchSize = GetValue(renderConfig, 'batchSize', 2000);
+
         var bgc = GetValue(config, 'backgroundColor', 0);
 
         /**

src/renderer/webgl/WebGLRenderer.js

@@ -39,7 +39,7 @@ var TextureTintPipeline = require('./pipelines/TextureTintPipeline');
  * any context change that happens for WebGL rendering inside of Phaser. This means
  * if raw webgl functions are called outside the WebGLRenderer of the Phaser WebGL
  * rendering ecosystem they might pollute the current WebGLRenderingContext state producing
- * unexpected behaviour. It's recommended that WebGL interaction is done through 
+ * unexpected behavior. It's recommended that WebGL interaction is done through 
  * WebGLRenderer and/or WebGLPipeline.
  *
  * @class WebGLRenderer
@@ -87,7 +87,8 @@ var WebGLRenderer = new Class({
             autoResize: gameConfig.autoResize,
             roundPixels: gameConfig.roundPixels,
             maxTextures: gameConfig.maxTextures,
-            maxTextureSize: gameConfig.maxTextureSize
+            maxTextureSize: gameConfig.maxTextureSize,
+            batchSize: gameConfig.batchSize
         };
 
         /**
@@ -442,7 +443,7 @@ var WebGLRenderer = new Class({
 
         this.gl = gl;
 
-        //  Set it back into the Game, so devs can access it from there too
+        //  Set it back into the Game, so developers can access it from there too
         this.game.context = gl;
 
         for (var i = 0; i <= 16; i++)

src/renderer/webgl/pipelines/TextureTintPipeline.js

@@ -46,21 +46,19 @@ var TextureTintPipeline = new Class({
 
     function TextureTintPipeline (config)
     {
+        var rendererConfig = config.renderer.config;
+
+        //  Vertex Size = attribute size added together (2 + 2 + 1 + 4)
+
         WebGLPipeline.call(this, {
             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: (config.vertexSize ? config.vertexSize :
-                Float32Array.BYTES_PER_ELEMENT * 2 +
-                Float32Array.BYTES_PER_ELEMENT * 2 +
-                Float32Array.BYTES_PER_ELEMENT * 1 +
-                Uint8Array.BYTES_PER_ELEMENT * 4
-            ),
+            topology: config.renderer.gl.TRIANGLES,
+            vertShader: ShaderSourceVS,
+            fragShader: ShaderSourceFS,
+            vertexCapacity: 6 * rendererConfig.batchSize,
+            vertexSize: Float32Array.BYTES_PER_ELEMENT * 5 + Uint8Array.BYTES_PER_ELEMENT * 4,
 
             attributes: [
                 {
@@ -117,10 +115,9 @@ var TextureTintPipeline = new Class({
          *
          * @name Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline#maxQuads
          * @type {integer}
-         * @default 2000
          * @since 3.0.0
          */
-        this.maxQuads = 2000;
+        this.maxQuads = rendererConfig.batchSize;
 
         /**
          * Collection of batch information