Skip to content

Releases: phaserjs/phaser

Phaser v3.50.1

21 Dec 13:39
Compare
Choose a tag to compare

Version 3.50.1 - Subaru - 21st December 2020

  • The new Web Audio Panning feature breaks WebAudio on Safari (OSX and iOS). The stero panner node is now only created if supported. Fix #5460 (thanks @d4rkforce)

Version 3.50.0 - Subaru - 16th December 2020

Due to the massive amount of changes in 3.50 this Change Log is, by its nature, very long. It's important to scan through it, especially if you're porting a game from an earlier version of Phaser to 3.50. However, if you're after more top-level descriptions of what's new, with example code, then please see the posts we will be making to the Phaser site and Phaser Patreon in the coming months after release. We have also updated the Phaser 3 Examples site, so that every single example up there has been rewritten for 3.50, so you don't have to struggle working through old or deprecated syntax. Virtually all new features are covered in new examples, as well.

With that said, we've tried to organize the Change Log into commonly themed sections to make it more digestible, but we appreciate there is a lot here. Please don't feel overwhelmed! If you need clarification about something, join us on the Phaser Discord and feel free to ask.

WebGL Pipelines and Post Processing

WebGL Pipelines are responsible for the rendering of all Game Objects in Phaser and they have had a complete rewrite in 3.50. This was to allow for the introduction of post processing pipelines, now readily available to be created from the new Post FX Pipeline class. The changes in this area have been extensive, so if you use custom WebGL Pipelines in your game already, you must update your code to use Phaser 3.50.

Pipeline Manager

The WebGL.PipelineManager is a new class that is responsible for managing all of the WebGL Pipelines in Phaser. An instance of the Pipeline Manager is created by the WebGL Renderer and is available under the pipelines property. This means that the WebGL Renderer no longer handles pipelines directly, causing the following API changes:

  • WebGLRenderer.pipelines is no longer a plain object containing pipeline instances. It's now an instance of the PipelineManager class. This instance is created during the init and boot phase of the renderer.
  • The WebGLRenderer.currentPipeline property no longer exists, instead use PipelineManager.current.
  • The WebGLRenderer.previousPipeline property no longer exists, instead use PipelineManager.previous.
  • The WebGLRenderer.hasPipeline method no longer exists, instead use PipelineManager.has.
  • The WebGLRenderer.getPipeline method no longer exists, instead use PipelineManager.get.
  • The WebGLRenderer.removePipeline method no longer exists, instead use PipelineManager.remove.
  • The WebGLRenderer.addPipeline method no longer exists, instead use PipelineManager.add.
  • The WebGLRenderer.setPipeline method no longer exists, instead use PipelineManager.set.
  • The WebGLRenderer.rebindPipeline method no longer exists, instead use PipelineManager.rebind.
  • The WebGLRenderer.clearPipeline method no longer exists, instead use PipelineManager.clear.

The Pipeline Manager also offers the following new features:

  • The PipelineManager.resize method automatically handles resize events across all pipelines.
  • The PipelineManager.preRender method calls the pre-render method of all pipelines.
  • The PipelineManager.render method calls the render method of all pipelines.
  • The PipelineManager.postRender method calls the post-render method of all pipelines.
  • The PipelineManager.setMulti method automatically binds the Multi Texture Pipeline, Phasers default.
  • The PipelineManager.clear method will clear the pipeline, store it in previous and free the renderer.
  • The PipelineManager.rebind method will reset the rendering context and restore the previous pipeline, if set.
  • The PipelineManager.copyFrame method will copy a source Render Target to the target Render Target, optionally setting the brightness of the copy.
  • The PipelineManager.blitFrame method will copy a source Render Target to the target Render Target. Unlike copyFrame no resizing takes place and you can optionally set the brightness and erase mode of the copy.
  • The PipelineManager.copyFrameRect method binds the source Render Target and then copies a section of it to the target using gl.copyTexSubImage2D rather than a shader, making it much faster if you don't need blending or preserving alpha details.
  • The PipelineManager.copyToGame method pops the framebuffer from the renderers FBO stack and sets that as the active target, then draws the source Render Target to it. Use when you need to render the final result to the game canvas.
  • The PipelineManager.drawFrame method will copy a source Render Target, optionally to a target Render Target, using the given ColorMatrix, allowing for full control over the luminance values used during the copy.
  • The PipelineManager.blendFrames method draws the source1 and source2 Render Targets to the target Render Target using a linear blend effect, which is controlled by the strength parameter.
  • The PipelineManager.blendFramesAdditive method draws the source1 and source2 Render Targets to the target Render Target using an additive blend effect, which is controlled by the strength parameter.
  • The PipelineManager.clearFrame method clears the given Render Target.

New constants have been created to help you reference a pipeline without needing to use strings:

  • Phaser.Renderer.WebGL.Pipelines.BITMAPMASK_PIPELINE for the Bitmap Mask Pipeline.
  • Phaser.Renderer.WebGL.Pipelines.LIGHT_PIPELINE for the Light 2D Pipeline.
  • Phaser.Renderer.WebGL.Pipelines.SINGLE_PIPELINE for the Single Pipeline.
  • Phaser.Renderer.WebGL.Pipelines.MULTI_PIPELINE for the Multi Pipeline.
  • Phaser.Renderer.WebGL.Pipelines.ROPE_PIPELINE for the Rope Pipeline.
  • Phaser.Renderer.WebGL.Pipelines.POINTLIGHT_PIPELINE for the Point Light Pipeline.
  • Phaser.Renderer.WebGL.Pipelines.POSTFX_PIPELINE for the Post FX Pipeline.
  • Phaser.Renderer.WebGL.Pipelines.UTILITY_PIPELINE for the Utility Pipeline.

All Game Objects have been updated to use the new constants and Pipeline Manager.

Post FX Pipeline

The Post FX Pipeline is a brand new and special kind of pipeline specifically for handling post processing effects in Phaser 3.50.

Where-as a standard Pipeline allows you to control the process of rendering Game Objects by configuring the shaders and attributes used to draw them, a Post FX Pipeline is designed to allow you to apply processing after the Game Object/s have been rendered.

Typical examples of post processing effects are bloom filters, blurs, light effects and color manipulation.

The pipeline works by creating a tiny vertex buffer with just one single hard-coded quad in it. Game Objects can have a Post Pipeline set on them, which becomes their own unique pipeline instance. Those objects are then rendered using their standard pipeline, but are redirected to the Render Targets owned by the post pipeline, which can then apply their own shaders and effects, before passing them back to the main renderer.

The following properties and methods are available in the new PostFXPipeline class:

  • The PostFXPipeline.gameObject property is a reference to the Game Object that owns the Post Pipeline, if any.
  • The PostFXPipeline.colorMatrix property is a Color Matrix instance used by the draw shader.
  • The PostFXPipeline.fullFrame1 property is a reference to the fullFrame1 Render Target that belongs to the Utility Pipeline, as it's commonly used in post processing.
  • The PostFXPipeline.fullFrame2 property is a reference to the fullFrame2 Render Target that belongs to the Utility Pipeline, as it's commonly used in post processing.
  • The PostFXPipeline.halfFrame1 property is a reference to the halfFrame1 Render Target that belongs to the Utility Pipeline, as it's commonly used in post processing.
  • The PostFXPipeline.halfFrame2 property is a reference to the halfFrame2 Render Target that belongs to the Utility Pipeline, as it's commonly used in post processing.
  • The PostFXPipeline.copyFrame method will copy a source Render Target to the target Render Target, optionally setting the brightness of the copy.
  • The PostFXPipeline.blitFrame method will copy a source Render Target to the target Render Target. Unlike copyFrame no resizing takes place and you can optionally set the brightness and erase mode of the copy.
  • The PostFXPipeline.copyFrameRect method binds the source Render Target and then copies a section of it to the target using gl.copyTexSubImage2D rather than a shader, making it much faster if you don't need blending or preserving alpha details.
  • The PostFXPipeline.copyToGame method pops the framebuffer from the renderers FBO stack and sets that as the active target, then draws the source Render Target to it. Use when you need to render the final result to the game canvas.
  • The PostFXPipeline.drawFrame method will copy a source Render Target, optionally to a target Render Target, using the given ColorMatrix, allowing for full control over the luminance values used during the copy.
  • The PostFXPipeline.blendFrames method draws the source1 and source2 Render Targets to the target Render Target using a linear blend effect, which is controlled by the strength parameter.
  • The PostFXPipeline.blendFramesAdditive method draws the source1 and source2 Render Targets to the target Render Target using an additive blend effect, which is controlled by the strength parameter.
  • The PostFXPipeline.clearFrame method clears the given Render Target.
  • The PostFXPipeline.bindAndDraw method binds this pipeline and draws the source Render Target to the target Render Target. This is typical...
Read more

Phaser v3.50.0

16 Dec 16:24
Compare
Choose a tag to compare

Version 3.50.0 - Subaru - 16th December 2020

Due to the massive amount of changes in 3.50 this Change Log is, by its nature, very long. It's important to scan through it, especially if you're porting a game from an earlier version of Phaser to 3.50. However, if you're after more top-level descriptions of what's new, with example code, then please see the posts we will be making to the Phaser site and Phaser Patreon in the coming months after release. We have also updated the Phaser 3 Examples site, so that every single example up there has been rewritten for 3.50, so you don't have to struggle working through old or deprecated syntax. Virtually all new features are covered in new examples, as well.

With that said, we've tried to organize the Change Log into commonly themed sections to make it more digestible, but we appreciate there is a lot here. Please don't feel overwhelmed! If you need clarification about something, join us on the Phaser Discord and feel free to ask.

WebGL Pipelines and Post Processing

WebGL Pipelines are responsible for the rendering of all Game Objects in Phaser and they have had a complete rewrite in 3.50. This was to allow for the introduction of post processing pipelines, now readily available to be created from the new Post FX Pipeline class. The changes in this area have been extensive, so if you use custom WebGL Pipelines in your game already, you must update your code to use Phaser 3.50.

Pipeline Manager

The WebGL.PipelineManager is a new class that is responsible for managing all of the WebGL Pipelines in Phaser. An instance of the Pipeline Manager is created by the WebGL Renderer and is available under the pipelines property. This means that the WebGL Renderer no longer handles pipelines directly, causing the following API changes:

  • WebGLRenderer.pipelines is no longer a plain object containing pipeline instances. It's now an instance of the PipelineManager class. This instance is created during the init and boot phase of the renderer.
  • The WebGLRenderer.currentPipeline property no longer exists, instead use PipelineManager.current.
  • The WebGLRenderer.previousPipeline property no longer exists, instead use PipelineManager.previous.
  • The WebGLRenderer.hasPipeline method no longer exists, instead use PipelineManager.has.
  • The WebGLRenderer.getPipeline method no longer exists, instead use PipelineManager.get.
  • The WebGLRenderer.removePipeline method no longer exists, instead use PipelineManager.remove.
  • The WebGLRenderer.addPipeline method no longer exists, instead use PipelineManager.add.
  • The WebGLRenderer.setPipeline method no longer exists, instead use PipelineManager.set.
  • The WebGLRenderer.rebindPipeline method no longer exists, instead use PipelineManager.rebind.
  • The WebGLRenderer.clearPipeline method no longer exists, instead use PipelineManager.clear.

The Pipeline Manager also offers the following new features:

  • The PipelineManager.resize method automatically handles resize events across all pipelines.
  • The PipelineManager.preRender method calls the pre-render method of all pipelines.
  • The PipelineManager.render method calls the render method of all pipelines.
  • The PipelineManager.postRender method calls the post-render method of all pipelines.
  • The PipelineManager.setMulti method automatically binds the Multi Texture Pipeline, Phasers default.
  • The PipelineManager.clear method will clear the pipeline, store it in previous and free the renderer.
  • The PipelineManager.rebind method will reset the rendering context and restore the previous pipeline, if set.
  • The PipelineManager.copyFrame method will copy a source Render Target to the target Render Target, optionally setting the brightness of the copy.
  • The PipelineManager.blitFrame method will copy a source Render Target to the target Render Target. Unlike copyFrame no resizing takes place and you can optionally set the brightness and erase mode of the copy.
  • The PipelineManager.copyFrameRect method binds the source Render Target and then copies a section of it to the target using gl.copyTexSubImage2D rather than a shader, making it much faster if you don't need blending or preserving alpha details.
  • The PipelineManager.copyToGame method pops the framebuffer from the renderers FBO stack and sets that as the active target, then draws the source Render Target to it. Use when you need to render the final result to the game canvas.
  • The PipelineManager.drawFrame method will copy a source Render Target, optionally to a target Render Target, using the given ColorMatrix, allowing for full control over the luminance values used during the copy.
  • The PipelineManager.blendFrames method draws the source1 and source2 Render Targets to the target Render Target using a linear blend effect, which is controlled by the strength parameter.
  • The PipelineManager.blendFramesAdditive method draws the source1 and source2 Render Targets to the target Render Target using an additive blend effect, which is controlled by the strength parameter.
  • The PipelineManager.clearFrame method clears the given Render Target.

New constants have been created to help you reference a pipeline without needing to use strings:

  • Phaser.Renderer.WebGL.Pipelines.BITMAPMASK_PIPELINE for the Bitmap Mask Pipeline.
  • Phaser.Renderer.WebGL.Pipelines.LIGHT_PIPELINE for the Light 2D Pipeline.
  • Phaser.Renderer.WebGL.Pipelines.SINGLE_PIPELINE for the Single Pipeline.
  • Phaser.Renderer.WebGL.Pipelines.MULTI_PIPELINE for the Multi Pipeline.
  • Phaser.Renderer.WebGL.Pipelines.ROPE_PIPELINE for the Rope Pipeline.
  • Phaser.Renderer.WebGL.Pipelines.POINTLIGHT_PIPELINE for the Point Light Pipeline.
  • Phaser.Renderer.WebGL.Pipelines.POSTFX_PIPELINE for the Post FX Pipeline.
  • Phaser.Renderer.WebGL.Pipelines.UTILITY_PIPELINE for the Utility Pipeline.

All Game Objects have been updated to use the new constants and Pipeline Manager.

Post FX Pipeline

The Post FX Pipeline is a brand new and special kind of pipeline specifically for handling post processing effects in Phaser 3.50.

Where-as a standard Pipeline allows you to control the process of rendering Game Objects by configuring the shaders and attributes used to draw them, a Post FX Pipeline is designed to allow you to apply processing after the Game Object/s have been rendered.

Typical examples of post processing effects are bloom filters, blurs, light effects and color manipulation.

The pipeline works by creating a tiny vertex buffer with just one single hard-coded quad in it. Game Objects can have a Post Pipeline set on them, which becomes their own unique pipeline instance. Those objects are then rendered using their standard pipeline, but are redirected to the Render Targets owned by the post pipeline, which can then apply their own shaders and effects, before passing them back to the main renderer.

The following properties and methods are available in the new PostFXPipeline class:

  • The PostFXPipeline.gameObject property is a reference to the Game Object that owns the Post Pipeline, if any.
  • The PostFXPipeline.colorMatrix property is a Color Matrix instance used by the draw shader.
  • The PostFXPipeline.fullFrame1 property is a reference to the fullFrame1 Render Target that belongs to the Utility Pipeline, as it's commonly used in post processing.
  • The PostFXPipeline.fullFrame2 property is a reference to the fullFrame2 Render Target that belongs to the Utility Pipeline, as it's commonly used in post processing.
  • The PostFXPipeline.halfFrame1 property is a reference to the halfFrame1 Render Target that belongs to the Utility Pipeline, as it's commonly used in post processing.
  • The PostFXPipeline.halfFrame2 property is a reference to the halfFrame2 Render Target that belongs to the Utility Pipeline, as it's commonly used in post processing.
  • The PostFXPipeline.copyFrame method will copy a source Render Target to the target Render Target, optionally setting the brightness of the copy.
  • The PostFXPipeline.blitFrame method will copy a source Render Target to the target Render Target. Unlike copyFrame no resizing takes place and you can optionally set the brightness and erase mode of the copy.
  • The PostFXPipeline.copyFrameRect method binds the source Render Target and then copies a section of it to the target using gl.copyTexSubImage2D rather than a shader, making it much faster if you don't need blending or preserving alpha details.
  • The PostFXPipeline.copyToGame method pops the framebuffer from the renderers FBO stack and sets that as the active target, then draws the source Render Target to it. Use when you need to render the final result to the game canvas.
  • The PostFXPipeline.drawFrame method will copy a source Render Target, optionally to a target Render Target, using the given ColorMatrix, allowing for full control over the luminance values used during the copy.
  • The PostFXPipeline.blendFrames method draws the source1 and source2 Render Targets to the target Render Target using a linear blend effect, which is controlled by the strength parameter.
  • The PostFXPipeline.blendFramesAdditive method draws the source1 and source2 Render Targets to the target Render Target using an additive blend effect, which is controlled by the strength parameter.
  • The PostFXPipeline.clearFrame method clears the given Render Target.
  • The PostFXPipeline.bindAndDraw method binds this pipeline and draws the source Render Target to the target Render Target. This is typically the final step taken in when post processing.

Renamed WebGL Pipelines

Due to the huge amount of work that has taken place in this area, all of the pipelines have been renamed. If you extend any of these ...

Read more

Phaser v3.50.0 Beta 12

04 Dec 13:48
Compare
Choose a tag to compare
Pre-release

Version 3.50.0 - Subaru - in development

WebGL Pipeline Updates

If you use a custom WebGL Pipeline in your game, you must update your code in order to use Phaser 3.50.

Due to the huge amount of work that has taken place in this area, all of the pipelines have been renamed. If you extend any of these pipelines or use them in your game code (referenced by name), then please update accordingly. The name changes are:

  • TextureTintPipeline is now called the MultiPipeline.
  • TextureTintStripPipeline is now called the RopePipeline.
  • ForwardDiffuseLightPipeline is now called the LightPipeline.

There is also the new GraphicsPipeline. Previously, the TextureTintPipeline was responsible for rendering all Sprites, Graphics and Shape objects. Now, it only renders Sprites. All Graphics and Shapes are handled by the new GraphicsPipeline which uses its own shaders. See further below for details about this change.

To match the new pipeline names, the shader source code has also been renamed.

  • ForwardDiffuse.frag is now called Light.frag.
  • TextureTint.frag is now called Multi.frag.
  • TextureTint.vert is now called Multi.vert.

Other pipeline changes are as follows:

  • None of the shaders or pipelines use the uViewMatrix and uModelMatrix uniforms any longer. These were always just plain identity matrices, so there is no point spending CPU and GPU time to set them as uniforms, or use them in the shaders. Should you need these uniforms, you can add them to your own custom pipelines.
  • Types.Renderer.WebGL.WebGLPipelineConfig is a new TypeDef that helps you easily configure your own Custom Pipeline when using TypeScript and also provides better JSDocs.
  • Types.Renderer.WebGL.WebGLPipelineAttributesConfig is a new TypeDef that helps you easily configure the attributes for your own Custom Pipelines when using TypeScript and also provides better JSDocs.
  • All pipelines will now work out the renderer property automatically, so it's no longer required in the config.
  • All pipelines will now work out the gl property automatically, so it's no longer required in the config.
  • All pipelines will now extract the name property from the config, allowing you to set it externally.
  • All pipelines will now extract the vertexCapacity property from the config, allowing you to set it externally.
  • All pipelines will now extract the vertexSize property from the config, allowing you to set it externally.
  • All pipelines will now extract the vertexData property from the config, allowing you to set it externally.
  • All pipelines will now extract the attributes property from the config, allowing you to set it externally.
  • All pipelines will now extract the topology property from the config, allowing you to set it externally.
  • The WebGLPipeline.shouldFlush method now accepts an optional parameter amount. If given, it will return true if when the amount is added to the vertex count it will exceed the vertex capacity. The Multi Pipeline has been updated to now use this method instead of performing the comparison multiple times itself.
  • The RopePipeline now extends MultiPipeline and just changes the topolgy, vastly reducing the filesize.
  • The WebGLPipeline.flushLocked property has been removed. A pipeline can never flush in the middle of a flush anyway, so it was just wasting CPU cycles being set.
  • You can now pass a pipeline instance to the GameObject.setPipeline method, as well as a string.

Post FX Pipelines

TODO - Explain them here + pipeline component updates.

Pipeline Uniform Changes

Piplines now have a new uniforms array that can be passed in with the config. All default pipelines now set these. The array contains the names, as strings, of all uniforms your pipeline shader uses. Once the pipeline shader has been successfully linked, it will use the array of names to look-up the WebGLUniformLocation of all uniforms specified. These are stored in the new WebGLPipeline.uniforms object. This takes place in the new WebGLPipeline.setUniformLocations method.

When a pipeline is bound, you can now use the new methods (listed below) to set uniform values directly on the pipeline. Previously, calling a method such as setFloat3 on a pipeline would pass that call over to WebGLRenderer. The renderer would first check to see if the pipeline program was current, and if not, make it so, before then looking up the uniform location and finally setting it. This is a lot of steps to take for pipelines that potentially need to change uniforms for every Game Object they render.

Under the new methods, and using the new pre-cached uniform locations, these extra steps are skipped. The uniform value is set directly, no shader binding takes place and no location look-up happens. This dramatically reduces the number of WebGL ops being issued per frame. To clearly differentiate these pipline methods, we have renamed them. The new method names are as follows:

  • WebGLPipeline.set1f will set a 1f uniform based on the given name.
  • WebGLPipeline.set2f will set a 2f uniform based on the given name.
  • WebGLPipeline.set3f will set a 3f uniform based on the given name.
  • WebGLPipeline.set4f will set a 4f uniform based on the given name.
  • WebGLPipeline.set1fv will set a 1fv uniform based on the given name.
  • WebGLPipeline.set2fv will set a 2fv uniform based on the given name.
  • WebGLPipeline.set3fv will set a 3fv uniform based on the given name.
  • WebGLPipeline.set4fv will set a 4fv uniform based on the given name.
  • WebGLPipeline.set1iv will set a 1iv uniform based on the given name.
  • WebGLPipeline.set2iv will set a 2iv uniform based on the given name.
  • WebGLPipeline.set3iv will set a 3iv uniform based on the given name.
  • WebGLPipeline.set4iv will set a 4iv uniform based on the given name.
  • WebGLPipeline.set1i will set a 1i uniform based on the given name.
  • WebGLPipeline.set2i will set a 2i uniform based on the given name.
  • WebGLPipeline.set3i will set a 3i uniform based on the given name.
  • WebGLPipeline.set4i will set a 4i uniform based on the given name.
  • WebGLPipeline.setMatrix2fv will set a matrix 2fv uniform based on the given name.
  • WebGLPipeline.setMatrix3fv will set a matrix 3fv uniform based on the given name.
  • WebGLPipeline.setMatrix4fv will set a matrix 4fv uniform based on the given name.

If your code uses any of the old method names, please update them using the list below:

  • WebGLPipeline.setFloat1 has been removed. Please use set1f instead.
  • WebGLPipeline.setFloat2 has been removed. Please use set2f instead.
  • WebGLPipeline.setFloat3 has been removed. Please use set3f instead.
  • WebGLPipeline.setFloat4 has been removed. Please use set4f instead.
  • WebGLPipeline.setFloat1v has been removed. Please use set1fv instead.
  • WebGLPipeline.setFloat2v has been removed. Please use set2fv instead.
  • WebGLPipeline.setFloat3v has been removed. Please use set3fv instead.
  • WebGLPipeline.setFloat4v has been removed. Please use set4fv instead.
  • WebGLPipeline.setInt1 has been removed. Please use set1i instead.
  • WebGLPipeline.setInt2 has been removed. Please use set2i instead.
  • WebGLPipeline.setInt3 has been removed. Please use set3i instead.
  • WebGLPipeline.setInt4 has been removed. Please use set4i instead.
  • WebGLPipeline.setMatrix1 has been removed. Please use setMatrix2fv instead.
  • WebGLPipeline.setMatrix2 has been removed. Please use setMatrix3fv instead.
  • WebGLPipeline.setMatrix3 has been removed. Please use setMatrix4fv instead.

Pipeline Manager

The WebGL.PipelineManager is a new class that is responsbile for managing all of the WebGL Pipelines in Phaser. An instance of the Pipeline Manager is created by the WebGL Renderer and is available under the pipelines property. This means that the WebGL Renderer no longer handles pipelines directly, causing the following API changes:

  • WebGLRenderer.pipelines is no longer a plain object containing pipeline instances. It's now an instance of the PipelineManager class. This instance is created during the init and boot phase of the renderer.
  • The WebGLRenderer.currentPipeline property no longer exists, instead use PipelineManager.current.
  • The WebGLRenderer.previousPipeline property no longer exists, instead use PipelineManager.previous.
  • The WebGLRenderer.hasPipeline method no longer exists, instead use PipelineManager.has.
  • The WebGLRenderer.getPipeline method no longer exists, instead use PipelineManager.get.
  • The WebGLRenderer.removePipeline method no longer exists, instead use PipelineManager.remove.
  • The WebGLRenderer.addPipeline method no longer exists, instead use PipelineManager.add.
  • The WebGLRenderer.setPipeline method no longer exists, instead use PipelineManager.set.
  • The WebGLRenderer.rebindPipeline method no longer exists, instead use PipelineManager.rebind.
  • The WebGLRenderer.clearPipeline method no longer exists, instead use PipelineManager.clear.

The Pipeline Manager also offers the following new features:

  • The PipelineManager.resize method automatically handles resize events across all pipelines.
  • The PipelineManager.preRender method calls the pre-render method of all pipelines.
  • The PipelineManager.render method calls the render method of all pipelines.
  • The PipelineManager.postRender method calls the post-render method of all pipelines.
  • The PipelineManager.setMulti method automatically binds the Multi Texture Pipeline, Phaser's default.
  • The PipelineManager.clear method will clear the pipeline, store it in previous and free the renderer.
  • The PipelineManager.rebind method will reset the rendering context and restore the previous pipeline, if set.

New constants have been created to help you refe...

Read more

Phaser v3.50.0 Beta 11

27 Nov 12:53
Compare
Choose a tag to compare
Pre-release

Version 3.50.0 - Subaru - in development

WebGL Pipeline Updates

If you use a custom WebGL Pipeline in your game, you must update your code in order to use Phaser 3.50.

Due to the huge amount of work that has taken place in this area, all of the pipelines have been renamed. If you extend any of these pipelines or use them in your game code (referenced by name), then please update accordingly. The name changes are:

  • TextureTintPipeline is now called the MultiPipeline.
  • TextureTintStripPipeline is now called the RopePipeline.
  • ForwardDiffuseLightPipeline is now called the LightPipeline.

There is also the new GraphicsPipeline. Previously, the TextureTintPipeline was responsible for rendering all Sprites, Graphics and Shape objects. Now, it only renders Sprites. All Graphics and Shapes are handled by the new GraphicsPipeline which uses its own shaders. See further below for details about this change.

To match the new pipeline names, the shader source code has also been renamed.

  • ForwardDiffuse.frag is now called Light.frag.
  • TextureTint.frag is now called Multi.frag.
  • TextureTint.vert is now called Multi.vert.

Other pipeline changes are as follows:

  • None of the shaders or pipelines use the uViewMatrix and uModelMatrix uniforms any longer. These were always just plain identity matrices, so there is no point spending CPU and GPU time to set them as uniforms, or use them in the shaders. Should you need these uniforms, you can add them to your own custom pipelines.
  • Types.Renderer.WebGL.WebGLPipelineConfig is a new TypeDef that helps you easily configure your own Custom Pipeline when using TypeScript and also provides better JSDocs.
  • Types.Renderer.WebGL.WebGLPipelineAttributesConfig is a new TypeDef that helps you easily configure the attributes for your own Custom Pipelines when using TypeScript and also provides better JSDocs.
  • All pipelines will now work out the renderer property automatically, so it's no longer required in the config.
  • All pipelines will now work out the gl property automatically, so it's no longer required in the config.
  • All pipelines will now extract the name property from the config, allowing you to set it externally.
  • All pipelines will now extract the vertexCapacity property from the config, allowing you to set it externally.
  • All pipelines will now extract the vertexSize property from the config, allowing you to set it externally.
  • All pipelines will now extract the vertexData property from the config, allowing you to set it externally.
  • All pipelines will now extract the attributes property from the config, allowing you to set it externally.
  • All pipelines will now extract the topology property from the config, allowing you to set it externally.
  • The WebGLPipeline.shouldFlush method now accepts an optional parameter amount. If given, it will return true if when the amount is added to the vertex count it will exceed the vertex capacity. The Multi Pipeline has been updated to now use this method instead of performing the comparison multiple times itself.
  • The RopePipeline now extends MultiPipeline and just changes the topolgy, vastly reducing the filesize.
  • The WebGLPipeline.flushLocked property has been removed. A pipeline can never flush in the middle of a flush anyway, so it was just wasting CPU cycles being set.
  • You can now pass a pipeline instance to the GameObject.setPipeline method, as well as a string.

Pipeline Uniform Changes

Piplines now have a new uniforms array that can be passed in with the config. All default pipelines now set these. The array contains the names, as strings, of all uniforms your pipeline shader uses. Once the pipeline shader has been successfully linked, it will use the array of names to look-up the WebGLUniformLocation of all uniforms specified. These are stored in the new WebGLPipeline.uniforms object. This takes place in the new WebGLPipeline.setUniformLocations method.

When a pipeline is bound, you can now use the new methods (listed below) to set uniform values directly on the pipeline. Previously, calling a method such as setFloat3 on a pipeline would pass that call over to WebGLRenderer. The renderer would first check to see if the pipeline program was current, and if not, make it so, before then looking up the uniform location and finally setting it. This is a lot of steps to take for pipelines that potentially need to change uniforms for every Game Object they render.

Under the new methods, and using the new pre-cached uniform locations, these extra steps are skipped. The uniform value is set directly, no shader binding takes place and no location look-up happens. This dramatically reduces the number of WebGL ops being issued per frame. To clearly differentiate these pipline methods, we have renamed them. The new method names are as follows:

  • WebGLPipeline.set1f will set a 1f uniform based on the given name.
  • WebGLPipeline.set2f will set a 2f uniform based on the given name.
  • WebGLPipeline.set3f will set a 3f uniform based on the given name.
  • WebGLPipeline.set4f will set a 4f uniform based on the given name.
  • WebGLPipeline.set1fv will set a 1fv uniform based on the given name.
  • WebGLPipeline.set2fv will set a 2fv uniform based on the given name.
  • WebGLPipeline.set3fv will set a 3fv uniform based on the given name.
  • WebGLPipeline.set4fv will set a 4fv uniform based on the given name.
  • WebGLPipeline.set1iv will set a 1iv uniform based on the given name.
  • WebGLPipeline.set2iv will set a 2iv uniform based on the given name.
  • WebGLPipeline.set3iv will set a 3iv uniform based on the given name.
  • WebGLPipeline.set4iv will set a 4iv uniform based on the given name.
  • WebGLPipeline.set1i will set a 1i uniform based on the given name.
  • WebGLPipeline.set2i will set a 2i uniform based on the given name.
  • WebGLPipeline.set3i will set a 3i uniform based on the given name.
  • WebGLPipeline.set4i will set a 4i uniform based on the given name.
  • WebGLPipeline.setMatrix2fv will set a matrix 2fv uniform based on the given name.
  • WebGLPipeline.setMatrix3fv will set a matrix 3fv uniform based on the given name.
  • WebGLPipeline.setMatrix4fv will set a matrix 4fv uniform based on the given name.

If your code uses any of the old method names, please update them using the list below:

  • WebGLPipeline.setFloat1 has been removed. Please use set1f instead.
  • WebGLPipeline.setFloat2 has been removed. Please use set2f instead.
  • WebGLPipeline.setFloat3 has been removed. Please use set3f instead.
  • WebGLPipeline.setFloat4 has been removed. Please use set4f instead.
  • WebGLPipeline.setFloat1v has been removed. Please use set1fv instead.
  • WebGLPipeline.setFloat2v has been removed. Please use set2fv instead.
  • WebGLPipeline.setFloat3v has been removed. Please use set3fv instead.
  • WebGLPipeline.setFloat4v has been removed. Please use set4fv instead.
  • WebGLPipeline.setInt1 has been removed. Please use set1i instead.
  • WebGLPipeline.setInt2 has been removed. Please use set2i instead.
  • WebGLPipeline.setInt3 has been removed. Please use set3i instead.
  • WebGLPipeline.setInt4 has been removed. Please use set4i instead.
  • WebGLPipeline.setMatrix1 has been removed. Please use setMatrix2fv instead.
  • WebGLPipeline.setMatrix2 has been removed. Please use setMatrix3fv instead.
  • WebGLPipeline.setMatrix3 has been removed. Please use setMatrix4fv instead.

Pipeline Manager

The WebGL.PipelineManager is a new class that is responsbile for managing all of the WebGL Pipelines in Phaser. An instance of the Pipeline Manager is created by the WebGL Renderer and is available under the pipelines property. This means that the WebGL Renderer no longer handles pipelines directly, causing the following API changes:

  • WebGLRenderer.pipelines is no longer a plain object containing pipeline instances. It's now an instance of the PipelineManager class. This instance is created during the init and boot phase of the renderer.
  • The WebGLRenderer.currentPipeline property no longer exists, instead use PipelineManager.current.
  • The WebGLRenderer.previousPipeline property no longer exists, instead use PipelineManager.previous.
  • The WebGLRenderer.hasPipeline method no longer exists, instead use PipelineManager.has.
  • The WebGLRenderer.getPipeline method no longer exists, instead use PipelineManager.get.
  • The WebGLRenderer.removePipeline method no longer exists, instead use PipelineManager.remove.
  • The WebGLRenderer.addPipeline method no longer exists, instead use PipelineManager.add.
  • The WebGLRenderer.setPipeline method no longer exists, instead use PipelineManager.set.
  • The WebGLRenderer.rebindPipeline method no longer exists, instead use PipelineManager.rebind.
  • The WebGLRenderer.clearPipeline method no longer exists, instead use PipelineManager.clear.

The Pipeline Manager also offers the following new features:

  • The PipelineManager.resize method automatically handles resize events across all pipelines.
  • The PipelineManager.preRender method calls the pre-render method of all pipelines.
  • The PipelineManager.render method calls the render method of all pipelines.
  • The PipelineManager.postRender method calls the post-render method of all pipelines.
  • The PipelineManager.setMulti method automatically binds the Multi Texture Pipeline, Phaser's default.
  • The PipelineManager.clear method will clear the pipeline, store it in previous and free the renderer.
  • The PipelineManager.rebind method will reset the rendering context and restore the previous pipeline, if set.

New constants have been created to help you reference a pipeline without needing to use strings:

  • `Phaser.Renderer.WebGL.Pipeli...
Read more

Phaser v3.50.0 Beta 10

09 Nov 14:48
Compare
Choose a tag to compare
Pre-release

Version 3.50.0 - Subaru - in development

WebGL Pipeline Updates

If you use a custom WebGL Pipeline in your game, you must update your code in order to use Phaser 3.50.

Due to the huge amount of work that has taken place in this area, all of the pipelines have been renamed. If you extend any of these pipelines or use them in your game code (referenced by name), then please update accordingly. The name changes are:

  • TextureTintPipeline is now called the MultiPipeline.
  • TextureTintStripPipeline is now called the RopePipeline.
  • ForwardDiffuseLightPipeline is now called the LightPipeline.

There is also the new GraphicsPipeline. Previously, the TextureTintPipeline was responsible for rendering all Sprites, Graphics and Shape objects. Now, it only renders Sprites. All Graphics and Shapes are handled by the new GraphicsPipeline which uses its own shaders. See further below for details about this change.

To match the new pipeline names, the shader source code has also been renamed.

  • ForwardDiffuse.frag is now called Light.frag.
  • TextureTint.frag is now called Multi.frag.
  • TextureTint.vert is now called Multi.vert.

Other pipeline changes are as follows:

  • None of the shaders or pipelines use the uViewMatrix and uModelMatrix uniforms any longer. These were always just plain identity matrices, so there is no point spending CPU and GPU time to set them as uniforms, or use them in the shaders. Should you need these uniforms, you can add them to your own custom pipelines.
  • Types.Renderer.WebGL.WebGLPipelineConfig is a new TypeDef that helps you easily configure your own Custom Pipeline when using TypeScript and also provides better JSDocs.
  • Types.Renderer.WebGL.WebGLPipelineAttributesConfig is a new TypeDef that helps you easily configure the attributes for your own Custom Pipelines when using TypeScript and also provides better JSDocs.
  • All pipelines will now work out the renderer property automatically, so it's no longer required in the config.
  • All pipelines will now work out the gl property automatically, so it's no longer required in the config.
  • All pipelines will now extract the name property from the config, allowing you to set it externally.
  • All pipelines will now extract the vertexCapacity property from the config, allowing you to set it externally.
  • All pipelines will now extract the vertexSize property from the config, allowing you to set it externally.
  • All pipelines will now extract the vertexData property from the config, allowing you to set it externally.
  • All pipelines will now extract the attributes property from the config, allowing you to set it externally.
  • All pipelines will now extract the topology property from the config, allowing you to set it externally.
  • The WebGLPipeline.shouldFlush method now accepts an optional parameter amount. If given, it will return true if when the amount is added to the vertex count it will exceed the vertex capacity. The Multi Pipeline has been updated to now use this method instead of performing the comparison multiple times itself.
  • The RopePipeline now extends MultiPipeline and just changes the topolgy, vastly reducing the filesize.
  • The WebGLPipeline.flushLocked property has been removed. A pipeline can never flush in the middle of a flush anyway, so it was just wasting CPU cycles being set.
  • You can now pass a pipeline instance to the GameObject.setPipeline method, as well as a string.

Pipeline Uniform Changes

Piplines now have a new uniforms array that can be passed in with the config. All default pipelines now set these. The array contains the names, as strings, of all uniforms your pipeline shader uses. Once the pipeline shader has been successfully linked, it will use the array of names to look-up the WebGLUniformLocation of all uniforms specified. These are stored in the new WebGLPipeline.uniforms object. This takes place in the new WebGLPipeline.setUniformLocations method.

When a pipeline is bound, you can now use the new methods (listed below) to set uniform values directly on the pipeline. Previously, calling a method such as setFloat3 on a pipeline would pass that call over to WebGLRenderer. The renderer would first check to see if the pipeline program was current, and if not, make it so, before then looking up the uniform location and finally setting it. This is a lot of steps to take for pipelines that potentially need to change uniforms for every Game Object they render.

Under the new methods, and using the new pre-cached uniform locations, these extra steps are skipped. The uniform value is set directly, no shader binding takes place and no location look-up happens. This dramatically reduces the number of WebGL ops being issued per frame. To clearly differentiate these pipline methods, we have renamed them. The new method names are as follows:

  • WebGLPipeline.set1f will set a 1f uniform based on the given name.
  • WebGLPipeline.set2f will set a 2f uniform based on the given name.
  • WebGLPipeline.set3f will set a 3f uniform based on the given name.
  • WebGLPipeline.set4f will set a 4f uniform based on the given name.
  • WebGLPipeline.set1fv will set a 1fv uniform based on the given name.
  • WebGLPipeline.set2fv will set a 2fv uniform based on the given name.
  • WebGLPipeline.set3fv will set a 3fv uniform based on the given name.
  • WebGLPipeline.set4fv will set a 4fv uniform based on the given name.
  • WebGLPipeline.set1iv will set a 1iv uniform based on the given name.
  • WebGLPipeline.set2iv will set a 2iv uniform based on the given name.
  • WebGLPipeline.set3iv will set a 3iv uniform based on the given name.
  • WebGLPipeline.set4iv will set a 4iv uniform based on the given name.
  • WebGLPipeline.set1i will set a 1i uniform based on the given name.
  • WebGLPipeline.set2i will set a 2i uniform based on the given name.
  • WebGLPipeline.set3i will set a 3i uniform based on the given name.
  • WebGLPipeline.set4i will set a 4i uniform based on the given name.
  • WebGLPipeline.setMatrix2fv will set a matrix 2fv uniform based on the given name.
  • WebGLPipeline.setMatrix3fv will set a matrix 3fv uniform based on the given name.
  • WebGLPipeline.setMatrix4fv will set a matrix 4fv uniform based on the given name.

If your code uses any of the old method names, please update them using the list below:

  • WebGLPipeline.setFloat1 has been removed. Please use set1f instead.
  • WebGLPipeline.setFloat2 has been removed. Please use set2f instead.
  • WebGLPipeline.setFloat3 has been removed. Please use set3f instead.
  • WebGLPipeline.setFloat4 has been removed. Please use set4f instead.
  • WebGLPipeline.setFloat1v has been removed. Please use set1fv instead.
  • WebGLPipeline.setFloat2v has been removed. Please use set2fv instead.
  • WebGLPipeline.setFloat3v has been removed. Please use set3fv instead.
  • WebGLPipeline.setFloat4v has been removed. Please use set4fv instead.
  • WebGLPipeline.setInt1 has been removed. Please use set1i instead.
  • WebGLPipeline.setInt2 has been removed. Please use set2i instead.
  • WebGLPipeline.setInt3 has been removed. Please use set3i instead.
  • WebGLPipeline.setInt4 has been removed. Please use set4i instead.
  • WebGLPipeline.setMatrix1 has been removed. Please use setMatrix2fv instead.
  • WebGLPipeline.setMatrix2 has been removed. Please use setMatrix3fv instead.
  • WebGLPipeline.setMatrix3 has been removed. Please use setMatrix4fv instead.

Pipeline Manager

The WebGL.PipelineManager is a new class that is responsbile for managing all of the WebGL Pipelines in Phaser. An instance of the Pipeline Manager is created by the WebGL Renderer and is available under the pipelines property. This means that the WebGL Renderer no longer handles pipelines directly, causing the following API changes:

  • WebGLRenderer.pipelines is no longer a plain object containing pipeline instances. It's now an instance of the PipelineManager class. This instance is created during the init and boot phase of the renderer.
  • The WebGLRenderer.currentPipeline property no longer exists, instead use PipelineManager.current.
  • The WebGLRenderer.previousPipeline property no longer exists, instead use PipelineManager.previous.
  • The WebGLRenderer.hasPipeline method no longer exists, instead use PipelineManager.has.
  • The WebGLRenderer.getPipeline method no longer exists, instead use PipelineManager.get.
  • The WebGLRenderer.removePipeline method no longer exists, instead use PipelineManager.remove.
  • The WebGLRenderer.addPipeline method no longer exists, instead use PipelineManager.add.
  • The WebGLRenderer.setPipeline method no longer exists, instead use PipelineManager.set.
  • The WebGLRenderer.rebindPipeline method no longer exists, instead use PipelineManager.rebind.
  • The WebGLRenderer.clearPipeline method no longer exists, instead use PipelineManager.clear.

The Pipeline Manager also offers the following new features:

  • The PipelineManager.resize method automatically handles resize events across all pipelines.
  • The PipelineManager.preRender method calls the pre-render method of all pipelines.
  • The PipelineManager.render method calls the render method of all pipelines.
  • The PipelineManager.postRender method calls the post-render method of all pipelines.
  • The PipelineManager.setMulti method automatically binds the Multi Texture Pipeline, Phaser's default.
  • The PipelineManager.clear method will clear the pipeline, store it in previous and free the renderer.
  • The PipelineManager.rebind method will reset the rendering context and restore the previous pipeline, if set.

New constants have been created to help you reference a pipeline without needing to use strings:

  • `Phaser.Renderer.WebGL.Pipeli...
Read more

Phaser v3.50.0 Beta 9

12 Oct 14:20
Compare
Choose a tag to compare
Phaser v3.50.0 Beta 9 Pre-release
Pre-release

Version 3.50.0 - Subaru - in development

WebGL Pipeline Updates

If you use a custom WebGL Pipeline in your game, you must update your code in order to use Phaser 3.50.

Due to the huge amount of work that has taken place in this area, all of the pipelines have been renamed. If you extend any of these pipelines or use them in your game code (referenced by name), then please update accordingly. The name changes are:

  • TextureTintPipeline is now called the MultiPipeline.
  • TextureTintStripPipeline is now called the RopePipeline.
  • ForwardDiffuseLightPipeline is now called the LightPipeline.

To match the new pipeline names, the shader source code has also been renamed.

  • ForwardDiffuse.frag is now called Light.frag.
  • TextureTint.frag is now called Multi.frag.
  • TextureTint.vert is now called Multi.vert.

Other pipeline changes are as follows:

  • Types.Renderer.WebGL.WebGLPipelineConfig is a new TypeDef that helps you easily configure your own Custom Pipeline when using TypeScript and also provides better JSDocs.
  • Types.Renderer.WebGL.WebGLPipelineAttributesConfig is a new TypeDef that helps you easily configure the attributes for your own Custom Pipelines when using TypeScript and also provides better JSDocs.
  • All pipelines will now work out the renderer property automatically, so it's no longer required in the config.
  • All pipelines will now work out the gl property automatically, so it's no longer required in the config.
  • All pipelines will now extract the name property from the config, allowing you to set it externally.
  • All pipelines will now extract the vertexCapacity property from the config, allowing you to set it externally.
  • All pipelines will now extract the vertexSize property from the config, allowing you to set it externally.
  • All pipelines will now extract the vertexData property from the config, allowing you to set it externally.
  • All pipelines will now extract the attributes property from the config, allowing you to set it externally.
  • All pipelines will now extract the topology property from the config, allowing you to set it externally.
  • The WebGLPipeline.shouldFlush method now accepts an optional parameter amount. If given, it will return true if when the amount is added to the vertex count it will exceed the vertex capacity. The Multi Pipeline has been updated to now use this method instead of performing the comparison multiple times itself.
  • The RopePipeline now extends MultiPipeline and just changes the topolgy, vastly reducing the filesize.

Pipeline Uniform Changes

Piplines now have a new uniforms array that can be passed in with the config. All default pipelines now set these. The array contains the names, as strings, of all uniforms your pipeline shader uses. Once the pipeline shader has been successfully linked, it will use the array of names to look-up the WebGLUniformLocation of all uniforms specified. These are stored in the new WebGLPipeline.uniforms object. This takes place in the new WebGLPipeline.setUniformLocations method.

When a pipeline is bound, you can now use the new methods (listed below) to set uniform values directly on the pipeline. Previously, calling a method such as setFloat3 on a pipeline would pass that call over to WebGLRenderer. The renderer would first check to see if the pipeline program was current, and if not, make it so, before then looking up the uniform location and finally setting it. This is a lot of steps to take for pipelines that potentially need to change uniforms for every Game Object they render.

Under the new methods, and using the new pre-cached uniform locations, these extra steps are skipped. The uniform value is set directly, no shader binding takes place and no location look-up happens. This dramatically reduces the number of WebGL ops being issued per frame. To clearly differentiate these pipline methods, we have renamed them. The new method names are as follows:

  • WebGLPipeline.set1f will set a 1f uniform based on the given name.
  • WebGLPipeline.set2f will set a 2f uniform based on the given name.
  • WebGLPipeline.set3f will set a 3f uniform based on the given name.
  • WebGLPipeline.set4f will set a 4f uniform based on the given name.
  • WebGLPipeline.set1fv will set a 1fv uniform based on the given name.
  • WebGLPipeline.set2fv will set a 2fv uniform based on the given name.
  • WebGLPipeline.set3fv will set a 3fv uniform based on the given name.
  • WebGLPipeline.set4fv will set a 4fv uniform based on the given name.
  • WebGLPipeline.set1iv will set a 1iv uniform based on the given name.
  • WebGLPipeline.set2iv will set a 2iv uniform based on the given name.
  • WebGLPipeline.set3iv will set a 3iv uniform based on the given name.
  • WebGLPipeline.set4iv will set a 4iv uniform based on the given name.
  • WebGLPipeline.set1i will set a 1i uniform based on the given name.
  • WebGLPipeline.set2i will set a 2i uniform based on the given name.
  • WebGLPipeline.set3i will set a 3i uniform based on the given name.
  • WebGLPipeline.set4i will set a 4i uniform based on the given name.
  • WebGLPipeline.setMatrix2fv will set a matrix 2fv uniform based on the given name.
  • WebGLPipeline.setMatrix3fv will set a matrix 3fv uniform based on the given name.
  • WebGLPipeline.setMatrix4fv will set a matrix 4fv uniform based on the given name.

If your code uses any of the old method names, please update them using the list below:

  • WebGLPipeline.setFloat1 has been removed. Please use set1f instead.
  • WebGLPipeline.setFloat2 has been removed. Please use set2f instead.
  • WebGLPipeline.setFloat3 has been removed. Please use set3f instead.
  • WebGLPipeline.setFloat4 has been removed. Please use set4f instead.
  • WebGLPipeline.setFloat1v has been removed. Please use set1fv instead.
  • WebGLPipeline.setFloat2v has been removed. Please use set2fv instead.
  • WebGLPipeline.setFloat3v has been removed. Please use set3fv instead.
  • WebGLPipeline.setFloat4v has been removed. Please use set4fv instead.
  • WebGLPipeline.setInt1 has been removed. Please use set1i instead.
  • WebGLPipeline.setInt2 has been removed. Please use set2i instead.
  • WebGLPipeline.setInt3 has been removed. Please use set3i instead.
  • WebGLPipeline.setInt4 has been removed. Please use set4i instead.
  • WebGLPipeline.setMatrix1 has been removed. Please use setMatrix2fv instead.
  • WebGLPipeline.setMatrix2 has been removed. Please use setMatrix3fv instead.
  • WebGLPipeline.setMatrix3 has been removed. Please use setMatrix4fv instead.

Pipeline Manager

The WebGL.PipelineManager is a new class that is responsbile for managing all of the WebGL Pipelines in Phaser. An instance of the Pipeline Manager is created by the WebGL Renderer and is available under the pipelines property. This means that the WebGL Renderer no longer handles pipelines directly, causing the following API changes:

  • WebGLRenderer.pipelines is no longer a plain object containing pipeline instances. It's now an instance of the PipelineManager class. This instance is created during the init and boot phase of the renderer.
  • The WebGLRenderer.currentPipeline property no longer exists, instead use PipelineManager.current.
  • The WebGLRenderer.previousPipeline property no longer exists, instead use PipelineManager.previous.
  • The WebGLRenderer.hasPipeline method no longer exists, instead use PipelineManager.has.
  • The WebGLRenderer.getPipeline method no longer exists, instead use PipelineManager.get.
  • The WebGLRenderer.removePipeline method no longer exists, instead use PipelineManager.remove.
  • The WebGLRenderer.addPipeline method no longer exists, instead use PipelineManager.add.
  • The WebGLRenderer.setPipeline method no longer exists, instead use PipelineManager.set.
  • The WebGLRenderer.rebindPipeline method no longer exists, instead use PipelineManager.rebind.
  • The WebGLRenderer.clearPipeline method no longer exists, instead use PipelineManager.clear.

The Pipeline Manager also offers the following new features:

  • The PipelineManager.resize method automatically handles resize events across all pipelines.
  • The PipelineManager.preRender method calls the pre-render method of all pipelines.
  • The PipelineManager.render method calls the render method of all pipelines.
  • The PipelineManager.postRender method calls the post-render method of all pipelines.
  • The PipelineManager.setMulti method automatically binds the Multi Texture Pipeline, Phaser's default.
  • The PipelineManager.clear method will clear the pipeline, store it in previous and free the renderer.
  • The PipelineManager.rebind method will reset the rendering context and restore the previous pipeline, if set.

New constants have been created to help you reference a pipeline without needing to use strings:

  • Phaser.Renderer.WebGL.Pipelines.BITMAPMASK_PIPELINE for the Bitmap Mask Pipeline.
  • Phaser.Renderer.WebGL.Pipelines.LIGHT_PIPELINE for the Light 2D Pipeline.
  • Phaser.Renderer.WebGL.Pipelines.SINGLE_PIPELINE for the Single Pipeline.
  • Phaser.Renderer.WebGL.Pipelines.MULTI_PIPELINE for the Multi Pipeline.
  • Phaser.Renderer.WebGL.Pipelines.ROPE_PIPELINE for the Rope Pipeline.

All Game Objects have been updated to use the new constants and Pipeline Manager.

Single Pipeline

There is also a new pipeline called SinglePipeline, created to emulate the old TextureTintPipeline. This special pipeline uses just a single texture and makes things a lot easier if you wish to create a custom pipeline, but not have to recode your shaders to work with multiple textures. Instead, just extend SinglePipeline, where-as before you extended the TextureTintPipeline and you won't have to change any of your shader code. Howeve...

Read more

Phaser v3.50.0 Beta 8

09 Oct 16:55
Compare
Choose a tag to compare
Phaser v3.50.0 Beta 8 Pre-release
Pre-release

Version 3.50.0 - Subaru - in development

WebGL Pipeline Updates

If you use a custom WebGL Pipeline in your game, you must update your code in order to use Phaser 3.50.

Due to the huge amount of work that has taken place in this area, all of the pipelines have been renamed. If you extend any of these pipelines or use them in your game code (referenced by name), then please update accordingly. The name changes are:

  • TextureTintPipeline is now called the MultiPipeline.
  • TextureTintStripPipeline is now called the RopePipeline.
  • ForwardDiffuseLightPipeline is now called the LightPipeline.

To match the new pipeline names, the shader source code has also been renamed.

  • ForwardDiffuse.frag is now called Light.frag.
  • TextureTint.frag is now called Multi.frag.
  • TextureTint.vert is now called Multi.vert.

Other pipeline changes are as follows:

  • Types.Renderer.WebGL.WebGLPipelineConfig is a new TypeDef that helps you easily configure your own Custom Pipeline when using TypeScript and also provides better JSDocs.
  • Types.Renderer.WebGL.WebGLPipelineAttributesConfig is a new TypeDef that helps you easily configure the attributes for your own Custom Pipelines when using TypeScript and also provides better JSDocs.
  • All pipelines will now work out the renderer property automatically, so it's no longer required in the config.
  • All pipelines will now work out the gl property automatically, so it's no longer required in the config.
  • All pipelines will now extract the name property from the config, allowing you to set it externally.
  • All pipelines will now extract the vertexCapacity property from the config, allowing you to set it externally.
  • All pipelines will now extract the vertexSize property from the config, allowing you to set it externally.
  • All pipelines will now extract the vertexData property from the config, allowing you to set it externally.
  • All pipelines will now extract the attributes property from the config, allowing you to set it externally.
  • All pipelines will now extract the topology property from the config, allowing you to set it externally.
  • The WebGLPipeline.shouldFlush method now accepts an optional parameter amount. If given, it will return true if when the amount is added to the vertex count it will exceed the vertex capacity. The Multi Pipeline has been updated to now use this method instead of performing the comparison multiple times itself.
  • The RopePipeline now extends MultiPipeline and just changes the topolgy, vastly reducing the filesize.

Pipeline Uniform Changes

Piplines now have a new uniforms array that can be passed in with the config. All default pipelines now set these. The array contains the names, as strings, of all uniforms your pipeline shader uses. Once the pipeline shader has been successfully linked, it will use the array of names to look-up the WebGLUniformLocation of all uniforms specified. These are stored in the new WebGLPipeline.uniforms object. This takes place in the new WebGLPipeline.setUniformLocations method.

When a pipeline is bound, you can now use the new methods (listed below) to set uniform values directly on the pipeline. Previously, calling a method such as setFloat3 on a pipeline would pass that call over to WebGLRenderer. The renderer would first check to see if the pipeline program was current, and if not, make it so, before then looking up the uniform location and finally setting it. This is a lot of steps to take for pipelines that potentially need to change uniforms for every Game Object they render.

Under the new methods, and using the new pre-cached uniform locations, these extra steps are skipped. The uniform value is set directly, no shader binding takes place and no location look-up happens. This dramatically reduces the number of WebGL ops being issued per frame. To clearly differentiate these pipline methods, we have renamed them. The new method names are as follows:

  • WebGLPipeline.set1f will set a 1f uniform based on the given name.
  • WebGLPipeline.set2f will set a 2f uniform based on the given name.
  • WebGLPipeline.set3f will set a 3f uniform based on the given name.
  • WebGLPipeline.set4f will set a 4f uniform based on the given name.
  • WebGLPipeline.set1fv will set a 1fv uniform based on the given name.
  • WebGLPipeline.set2fv will set a 2fv uniform based on the given name.
  • WebGLPipeline.set3fv will set a 3fv uniform based on the given name.
  • WebGLPipeline.set4fv will set a 4fv uniform based on the given name.
  • WebGLPipeline.set1iv will set a 1iv uniform based on the given name.
  • WebGLPipeline.set2iv will set a 2iv uniform based on the given name.
  • WebGLPipeline.set3iv will set a 3iv uniform based on the given name.
  • WebGLPipeline.set4iv will set a 4iv uniform based on the given name.
  • WebGLPipeline.set1i will set a 1i uniform based on the given name.
  • WebGLPipeline.set2i will set a 2i uniform based on the given name.
  • WebGLPipeline.set3i will set a 3i uniform based on the given name.
  • WebGLPipeline.set4i will set a 4i uniform based on the given name.
  • WebGLPipeline.setMatrix2fv will set a matrix 2fv uniform based on the given name.
  • WebGLPipeline.setMatrix3fv will set a matrix 3fv uniform based on the given name.
  • WebGLPipeline.setMatrix4fv will set a matrix 4fv uniform based on the given name.

If your code uses any of the old method names, please update them using the list below:

  • WebGLPipeline.setFloat1 has been removed. Please use set1f instead.
  • WebGLPipeline.setFloat2 has been removed. Please use set2f instead.
  • WebGLPipeline.setFloat3 has been removed. Please use set3f instead.
  • WebGLPipeline.setFloat4 has been removed. Please use set4f instead.
  • WebGLPipeline.setFloat1v has been removed. Please use set1fv instead.
  • WebGLPipeline.setFloat2v has been removed. Please use set2fv instead.
  • WebGLPipeline.setFloat3v has been removed. Please use set3fv instead.
  • WebGLPipeline.setFloat4v has been removed. Please use set4fv instead.
  • WebGLPipeline.setInt1 has been removed. Please use set1i instead.
  • WebGLPipeline.setInt2 has been removed. Please use set2i instead.
  • WebGLPipeline.setInt3 has been removed. Please use set3i instead.
  • WebGLPipeline.setInt4 has been removed. Please use set4i instead.
  • WebGLPipeline.setMatrix1 has been removed. Please use setMatrix2fv instead.
  • WebGLPipeline.setMatrix2 has been removed. Please use setMatrix3fv instead.
  • WebGLPipeline.setMatrix3 has been removed. Please use setMatrix4fv instead.

Pipeline Manager

The WebGL.PipelineManager is a new class that is responsbile for managing all of the WebGL Pipelines in Phaser. An instance of the Pipeline Manager is created by the WebGL Renderer and is available under the pipelines property. This means that the WebGL Renderer no longer handles pipelines directly, causing the following API changes:

  • WebGLRenderer.pipelines is no longer a plain object containing pipeline instances. It's now an instance of the PipelineManager class. This instance is created during the init and boot phase of the renderer.
  • The WebGLRenderer.currentPipeline property no longer exists, instead use PipelineManager.current.
  • The WebGLRenderer.previousPipeline property no longer exists, instead use PipelineManager.previous.
  • The WebGLRenderer.hasPipeline method no longer exists, instead use PipelineManager.has.
  • The WebGLRenderer.getPipeline method no longer exists, instead use PipelineManager.get.
  • The WebGLRenderer.removePipeline method no longer exists, instead use PipelineManager.remove.
  • The WebGLRenderer.addPipeline method no longer exists, instead use PipelineManager.add.
  • The WebGLRenderer.setPipeline method no longer exists, instead use PipelineManager.set.
  • The WebGLRenderer.rebindPipeline method no longer exists, instead use PipelineManager.rebind.
  • The WebGLRenderer.clearPipeline method no longer exists, instead use PipelineManager.clear.

The Pipeline Manager also offers the following new features:

  • The PipelineManager.resize method automatically handles resize events across all pipelines.
  • The PipelineManager.preRender method calls the pre-render method of all pipelines.
  • The PipelineManager.render method calls the render method of all pipelines.
  • The PipelineManager.postRender method calls the post-render method of all pipelines.
  • The PipelineManager.setMulti method automatically binds the Multi Texture Pipeline, Phaser's default.
  • The PipelineManager.clear method will clear the pipeline, store it in previous and free the renderer.
  • The PipelineManager.rebind method will reset the rendering context and restore the previous pipeline, if set.

New constants have been created to help you reference a pipeline without needing to use strings:

  • Phaser.Renderer.WebGL.Pipelines.BITMAPMASK_PIPELINE for the Bitmap Mask Pipeline.
  • Phaser.Renderer.WebGL.Pipelines.LIGHT_PIPELINE for the Light 2D Pipeline.
  • Phaser.Renderer.WebGL.Pipelines.SINGLE_PIPELINE for the Single Pipeline.
  • Phaser.Renderer.WebGL.Pipelines.MULTI_PIPELINE for the Multi Pipeline.
  • Phaser.Renderer.WebGL.Pipelines.ROPE_PIPELINE for the Rope Pipeline.

All Game Objects have been updated to use the new constants and Pipeline Manager.

Single Pipeline

There is also a new pipeline called SinglePipeline, created to emulate the old TextureTintPipeline. This special pipeline uses just a single texture and makes things a lot easier if you wish to create a custom pipeline, but not have to recode your shaders to work with multiple textures. Instead, just extend SinglePipeline, where-as before you extended the TextureTintPipeline and you won't have to change any of your shader code. Howeve...

Read more

Phaser v3.50.0 Beta 7

01 Oct 16:36
Compare
Choose a tag to compare
Phaser v3.50.0 Beta 7 Pre-release
Pre-release

Version 3.50.0 - Subaru - in development

WebGL Pipeline Updates

If you use a custom WebGL Pipeline in your game, you must update your code in order to use Phaser 3.50.

Due to the huge amount of work that has taken place in this area, all of the pipelines have been renamed. If you extend any of these pipelines or use them in your game code (referenced by name), then please update accordingly. The name changes are:

  • TextureTintPipeline is now called the MultiPipeline.
  • TextureTintStripPipeline is now called the RopePipeline.
  • ForwardDiffuseLightPipeline is now called the LightPipeline.

To match the new pipeline names, the shader source code has also been renamed.

  • ForwardDiffuse.frag is now called Light.frag.
  • TextureTint.frag is now called Multi.frag.
  • TextureTint.vert is now called Multi.vert.

Other pipeline changes are as follows:

  • Types.Renderer.WebGL.WebGLPipelineConfig is a new TypeDef that helps you easily configure your own Custom Pipeline when using TypeScript and also provides better JSDocs.
  • Types.Renderer.WebGL.WebGLPipelineAttributesConfig is a new TypeDef that helps you easily configure the attributes for your own Custom Pipelines when using TypeScript and also provides better JSDocs.
  • All pipelines will now work out the renderer property automatically, so it's no longer required in the config.
  • All pipelines will now work out the gl property automatically, so it's no longer required in the config.
  • All pipelines will now extract the name property from the config, allowing you to set it externally.
  • All pipelines will now extract the vertexCapacity property from the config, allowing you to set it externally.
  • All pipelines will now extract the vertexSize property from the config, allowing you to set it externally.
  • All pipelines will now extract the vertexData property from the config, allowing you to set it externally.
  • All pipelines will now extract the attributes property from the config, allowing you to set it externally.
  • All pipelines will now extract the topology property from the config, allowing you to set it externally.
  • The WebGLPipeline.shouldFlush method now accepts an optional parameter amount. If given, it will return true if when the amount is added to the vertex count it will exceed the vertex capacity. The Multi Pipeline has been updated to now use this method instead of performing the comparison multiple times itself.

Pipeline Uniform Changes

Piplines now have a new uniforms array that can be passed in with the config. All default pipelines now set these. The array contains the names, as strings, of all uniforms your pipeline shader uses. Once the pipeline shader has been successfully linked, it will use the array of names to look-up the WebGLUniformLocation of all uniforms specified. These are stored in the new WebGLPipeline.uniforms object. This takes place in the new WebGLPipeline.setUniformLocations method.

When a pipeline is bound, you can now use the new methods (listed below) to set uniform values directly on the pipeline. Previously, calling a method such as setFloat3 on a pipeline would pass that call over to WebGLRenderer. The renderer would first check to see if the pipeline program was current, and if not, make it so, before then looking up the uniform location and finally setting it. This is a lot of steps to take for pipelines that potentially need to change uniforms for every Game Object they render.

Under the new methods, and using the new pre-cached uniform locations, these extra steps are skipped. The uniform value is set directly, no shader binding takes place and no location look-up happens. This dramatically reduces the number of WebGL ops being issued per frame. To clearly differentiate these pipline methods, we have renamed them. The new method names are as follows:

  • WebGLPipeline.set1f will set a 1f uniform based on the given name.
  • WebGLPipeline.set2f will set a 2f uniform based on the given name.
  • WebGLPipeline.set3f will set a 3f uniform based on the given name.
  • WebGLPipeline.set4f will set a 4f uniform based on the given name.
  • WebGLPipeline.set1fv will set a 1fv uniform based on the given name.
  • WebGLPipeline.set2fv will set a 2fv uniform based on the given name.
  • WebGLPipeline.set3fv will set a 3fv uniform based on the given name.
  • WebGLPipeline.set4fv will set a 4fv uniform based on the given name.
  • WebGLPipeline.set1iv will set a 1iv uniform based on the given name.
  • WebGLPipeline.set2iv will set a 2iv uniform based on the given name.
  • WebGLPipeline.set3iv will set a 3iv uniform based on the given name.
  • WebGLPipeline.set4iv will set a 4iv uniform based on the given name.
  • WebGLPipeline.set1i will set a 1i uniform based on the given name.
  • WebGLPipeline.set2i will set a 2i uniform based on the given name.
  • WebGLPipeline.set3i will set a 3i uniform based on the given name.
  • WebGLPipeline.set4i will set a 4i uniform based on the given name.
  • WebGLPipeline.setMatrix2fv will set a matrix 2fv uniform based on the given name.
  • WebGLPipeline.setMatrix3fv will set a matrix 3fv uniform based on the given name.
  • WebGLPipeline.setMatrix4fv will set a matrix 4fv uniform based on the given name.

If your code uses any of the old method names, please update them using the list below:

  • WebGLPipeline.setFloat1 has been removed. Please use set1f instead.
  • WebGLPipeline.setFloat2 has been removed. Please use set2f instead.
  • WebGLPipeline.setFloat3 has been removed. Please use set3f instead.
  • WebGLPipeline.setFloat4 has been removed. Please use set4f instead.
  • WebGLPipeline.setFloat1v has been removed. Please use set1fv instead.
  • WebGLPipeline.setFloat2v has been removed. Please use set2fv instead.
  • WebGLPipeline.setFloat3v has been removed. Please use set3fv instead.
  • WebGLPipeline.setFloat4v has been removed. Please use set4fv instead.
  • WebGLPipeline.setInt1 has been removed. Please use set1i instead.
  • WebGLPipeline.setInt2 has been removed. Please use set2i instead.
  • WebGLPipeline.setInt3 has been removed. Please use set3i instead.
  • WebGLPipeline.setInt4 has been removed. Please use set4i instead.
  • WebGLPipeline.setMatrix1 has been removed. Please use setMatrix2fv instead.
  • WebGLPipeline.setMatrix2 has been removed. Please use setMatrix3fv instead.
  • WebGLPipeline.setMatrix3 has been removed. Please use setMatrix4fv instead.

Pipeline Manager

The WebGL.PipelineManager is a new class that is responsbile for managing all of the WebGL Pipelines in Phaser. An instance of the Pipeline Manager is created by the WebGL Renderer and is available under the pipelines property. This means that the WebGL Renderer no longer handles pipelines directly, causing the following API changes:

  • WebGLRenderer.pipelines is no longer a plain object containing pipeline instances. It's now an instance of the PipelineManager class. This instance is created during the init and boot phase of the renderer.
  • The WebGLRenderer.currentPipeline property no longer exists, instead use PipelineManager.current.
  • The WebGLRenderer.previousPipeline property no longer exists, instead use PipelineManager.previous.
  • The WebGLRenderer.hasPipeline method no longer exists, instead use PipelineManager.has.
  • The WebGLRenderer.getPipeline method no longer exists, instead use PipelineManager.get.
  • The WebGLRenderer.removePipeline method no longer exists, instead use PipelineManager.remove.
  • The WebGLRenderer.addPipeline method no longer exists, instead use PipelineManager.add.
  • The WebGLRenderer.setPipeline method no longer exists, instead use PipelineManager.set.
  • The WebGLRenderer.rebindPipeline method no longer exists, instead use PipelineManager.rebind.
  • The WebGLRenderer.clearPipeline method no longer exists, instead use PipelineManager.clear.

The Pipeline Manager also offers the following new features:

  • The PipelineManager.resize method automatically handles resize events across all pipelines.
  • The PipelineManager.preRender method calls the pre-render method of all pipelines.
  • The PipelineManager.render method calls the render method of all pipelines.
  • The PipelineManager.postRender method calls the post-render method of all pipelines.
  • The PipelineManager.setMulti method automatically binds the Multi Texture Pipeline, Phaser's default.
  • The PipelineManager.clear method will clear the pipeline, store it in previous and free the renderer.
  • The PipelineManager.rebind method will reset the rendering context and restore the previous pipeline, if set.

New constants have been created to help you reference a pipeline without needing to use strings:

  • Phaser.Renderer.WebGL.Pipelines.BITMAPMASK_PIPELINE for the Bitmap Mask Pipeline.
  • Phaser.Renderer.WebGL.Pipelines.LIGHT_PIPELINE for the Light 2D Pipeline.
  • Phaser.Renderer.WebGL.Pipelines.SINGLE_PIPELINE for the Single Pipeline.
  • Phaser.Renderer.WebGL.Pipelines.MULTI_PIPELINE for the Multi Pipeline.
  • Phaser.Renderer.WebGL.Pipelines.ROPE_PIPELINE for the Rope Pipeline.

All Game Objects have been updated to use the new constants and Pipeline Manager.

Single Pipeline

There is also a new pipeline called SinglePipeline, created to emulate the old TextureTintPipeline. This special pipeline uses just a single texture and makes things a lot easier if you wish to create a custom pipeline, but not have to recode your shaders to work with multiple textures. Instead, just extend SinglePipeline, where-as before you extended the TextureTintPipeline and you won't have to change any of your shader code. However, if you can, you should update it to make it perform faster, but that choice is left up to you.

WebGL...

Read more

Phaser v3.50.0 Beta 4

08 Sep 12:55
Compare
Choose a tag to compare
Phaser v3.50.0 Beta 4 Pre-release
Pre-release

WebGL Pipeline Updates

If you use a custom WebGL Pipeline in your game, you must update your code in order to use Phaser 3.50.

Due to the huge amount of work that has taken place in this area, all of the pipelines have been renamed. If you extend any of these pipelines or use them in your game code (referenced by name), then please update accordingly. The name changes are:

  • TextureTintPipeline is now called the MultiPipeline.
  • TextureTintStripPipeline is now called the RopePipeline.
  • ForwardDiffuseLightPipeline is now called the LightPipeline.

To match the new pipeline names, the shader source code has also been renamed.

  • ForwardDiffuse.frag is now called Light.frag.
  • TextureTint.frag is now called Multi.frag.
  • TextureTint.vert is now called Multi.vert.

Other pipeline changes are as follows:

  • Types.Renderer.WebGL.WebGLPipelineConfig is a new TypeDef that helps you easily configure your own Custom Pipeline when using TypeScript and also provides better JSDocs.
  • Types.Renderer.WebGL.WebGLPipelineAttributesConfig is a new TypeDef that helps you easily configure the attributes for your own Custom Pipelines when using TypeScript and also provides better JSDocs.
  • All pipelines will now work out the renderer property automatically, so it's no longer required in the config.
  • All pipelines will now work out the gl property automatically, so it's no longer required in the config.
  • All pipelines will now extract the name property from the config, allowing you to set it externally.
  • All pipelines will now extract the vertexCapacity property from the config, allowing you to set it externally.
  • All pipelines will now extract the vertexSize property from the config, allowing you to set it externally.
  • All pipelines will now extract the vertexData property from the config, allowing you to set it externally.
  • All pipelines will now extract the attributes property from the config, allowing you to set it externally.
  • All pipelines will now extract the topology property from the config, allowing you to set it externally.

Single Pipeline

There is also a new pipeline called SinglePipeline, created to emulate the old TextureTintPipeline. This special pipeline uses just a single texture and makes things a lot easier if you wish to create a custom pipeline, but not have to recode your shaders to work with multiple textures. Instead, just extend SinglePipeline, where-as before you extended the TextureTintPipeline and you won't have to change any of your shader code. However, if you can, you should update it to make it perform faster, but that choice is left up to you.

WebGL Multi-Texture Rendering

The Multi Pipeline (previously the Texture Tint Pipeline) has had its core flow rewritten to eliminate the need for constantly creating batch objects. Instead, it now supports the new multi-texture shader, vastly increasing rendering performance, especially on draw-call bound systems.

All of the internal functions, such as batchQuad and batchSprite have been updated to use the new method of texture setting. The method signatures all remain the same unless indicated below.

  • Config.render.maxTextures is a new game config setting that allows you to control how many texture units will be used in WebGL.
  • WebGL.Utils.checkShaderMax is a new function, used internally by the renderer, to determine the maximum number of texture units the GPU + browser supports.
  • The property WebGLRenderer.currentActiveTextureUnit has been renamed to currentActiveTexture.
  • WebGLRenderer.startActiveTexture is a new read-only property contains the current starting active texture unit.
  • WebGLRenderer.maxTextures is a new read-only property that contains the maximum number of texture units WebGL can use.
  • WebGLRenderer.textureIndexes is a new read-only array that contains all of the available WebGL texture units.
  • WebGLRenderer.tempTextures is a new read-only array that contains temporary WebGL textures.
  • The WebGLRenderer.currentTextures property has been removed, as it's no longer used.
  • TextureSource.glIndex is a new property that holds the currently assigned texture unit for the Texture Source.
  • TextureSource.glIndexCounter is a new property that holds the time the index was assigned to the Texture Source.
  • WebGLRenderer.currentTextures has been removed, as it's no longer used internally.
  • WebGLRenderer.setBlankTexture no longer has a force parameter, as it's set by default.
  • The Mesh Game Object WebGL Renderer function has been updated to support multi-texture units.
  • The Blitter Game Object WebGL Renderer function has been updated to support multi-texture units.
  • The Bitmap Text Game Object WebGL Renderer function has been updated to support multi-texture units.
  • The Dynamic Bitmap Text Game Object WebGL Renderer function has been updated to support multi-texture units.
  • The Particle Emitter Game Object WebGL Renderer function has been updated to support multi-texture units.
  • The Texture Tint vertex and fragment shaders have been updated to support the inTexId float attribute and dynamic generation.
  • The Texture Tint Pipeline has a new attribute, inTexId which is a gl.FLOAT.
  • TextureTintPipeline.bind is a new method that sets the uMainSampler uniform.
  • The TextureTintPipeline.requireTextureBatch method has been removed, as it's no longer required.
  • The TextureTintPipeline.pushBatch method has been removed, as it's no longer required.
  • The TextureTintPipeline.maxQuads property has been removed, as it's no longer required.
  • The TextureTintPipeline.batches property has been removed, as it's no longer required.
  • TextureTintPipeline.flush has been rewritten to support multi-textures.
  • TextureTintPipeline.flush no longer creates a sub-array if the batch is full, but instead uses bufferData for speed.
  • WebGLPipeline.currentUnit is a new property that holds the most recently assigned texture unit. Treat as read-only.
  • WebGLRenderer.setTextureSource is a new method, used by pipelines and Game Objects, that will assign a texture unit to the given Texture Source.
  • The WebGLRenderer.setTexture2D method has been updated to use the new texture unit assignment. It no longer takes the textureUnit or flush parameters and these have been removed from its method signature.
  • WebGLRenderer.setTextureZero is a new method that activates texture zero and binds the given texture to it. Useful for fbo backed game objects.
  • WebGLRenderer.clearTextureZero is a new method that clears the texture that was bound to unit zero.
  • WebGLRenderer.textureZero is a new property that holds the currently bound unit zero texture.
  • WebGLRenderer.normalTexture is a new property that holds the currently bound normal map (texture unit one).
  • WebGLRenderer.setNormalMap is a new method that sets the current normal map texture.
  • WebGLRenderer.clearNormalMap is a new method that clears the current normal map texture.
  • WebGLRenderer.resetTextures is a new method that flushes the pipeline, resets all textures back to the temporary ones, and resets the active texture counter.
  • WebGLPipeline.boot will now check all of the attributes and store the pointer location within the attribute entry.
  • WebGLPipeline.bind no longer looks-up and enables every attribute, every frame. Instead, it uses the cached pointer location stored in the attribute entry, cutting down on redundant WebGL operations.
  • WebGLRenderer.isNewNormalMap is a new method that returns a boolean if the given parameters are not currently used.
  • WebGLPipeline.forceZero is a new property that informs Game Objects if the pipeline requires a zero bound texture unit.
  • WebGLPipeline.setAttribPointers is a new method that will set the vertex attribute pointers for the pipeline.
  • WebGLRenderer.unbindTextures is a new method that will activate and then null bind all WebGL textures.
  • Renderer.WebGL.Utils.parseFragmentShaderMaxTextures is a new function that will take fragment shader source and search it for %count% and %forloop% declarations, replacing them with the required GLSL for multi-texture support, returning the modified source.

Light Pipeline Changes

The Light Pipeline (previously called the Forward Diffuse Light Pipeline), which is responsible for rendering lights under WebGL, has been rewritten to work with the new Multi Pipeline features. Lots of redundant code has been removed and the following changes and improvements took place:

  • The pipeline now works with Game Objects that do not have a normal map. They will be rendered using the new default normal map, which allows for a flat light effect to pass over them and merge with their diffuse map colors.
  • Fixed a bug in the way lights were handled that caused Tilemaps to render one tile at a time, causing massive slow down. They're now batched properly, making a combination of lights and tilemaps possible again.
  • The Bitmap Text (Static and Dynamic) Game Objects now support rendering with normal maps.
  • The TileSprite Game Objects now support rendering with normal maps.
  • Mesh and Quad Game Objects now support rendering with normal maps.
  • The Graphics Game Objects now support rendering in Light2d. You can even use normal map textures for the texture fills.
  • Particle Emitter Game Object now supports rendering in Light2d.
  • All Shape Game Objects (Rectangle, IsoBox, Star, Polygon, etc) now support rendering in Light2d.
  • The Text Game Object now supports rendering in Light2d, no matter which font, stroke or style it is using.
  • Both Static and Dynamic Tilemap Layer Game Objects now support the Light2d pipeline, with or without normal maps.
  • The pipeline will no longer look-up and set all of the light uniforms unless the Light is dirty.
  • The pipeline will no longer ...
Read more

Phaser v3.50.0 Beta 2

21 Aug 15:33
Compare
Choose a tag to compare
Phaser v3.50.0 Beta 2 Pre-release
Pre-release

WebGL Pipeline Updates

If you use a custom WebGL Pipeline in your game, you must update in order to use Phaser 3.50.

Due to the huge amount of work that has taken place in this area, all of the pipelines have been renamed. If you extend any of these pipelines or use them in your game code (referenced by name), then please update accordingly. The name changes are:

  • TextureTintPipeline is now called the MultiPipeline.
  • TextureTintStripPipeline is now called the RopePipeline.
  • ForwardDiffuseLightPipeline is now called the LightPipeline.

To match the new pipeline names, the shader source code has also been renamed.

  • ForwardDiffuse.frag is now called Light.frag.
  • TextureTint.frag is now called Multi.frag.
  • TextureTint.vert is now called Multi.vert.

Other pipeline changes are as follows:

  • Types.Renderer.WebGL.WebGLPipelineConfig is a new TypeDef that helps you easily configure your own Custom Pipeline when using TypeScript and also provides better JSDocs.
  • Types.Renderer.WebGL.WebGLPipelineAttributesConfig is a new TypeDef that helps you easily configure the attributes for your own Custom Pipelines when using TypeScript and also provides better JSDocs.
  • All pipelines will now work out the renderer property automatically, so it's no longer required in the config.
  • All pipelines will now work out the gl property automatically, so it's no longer required in the config.
  • All pipelines will now extract the name property from the config, allowing you to set it externally.
  • All pipelines will now extract the vertexCapacity property from the config, allowing you to set it externally.
  • All pipelines will now extract the vertexSize property from the config, allowing you to set it externally.
  • All pipelines will now extract the vertexData property from the config, allowing you to set it externally.
  • All pipelines will now extract the attributes property from the config, allowing you to set it externally.
  • All pipelines will now extract the topology property from the config, allowing you to set it externally.

Single Pipeline

There is also a new pipeline called SinglePipeline, created to emulate the old TextureTintPipeline. This special pipeline uses just a single texture and makes things a lot easier if you wish to create a custom pipeline, but not have to recode your shaders to work with multiple textures. Instead, just extend SinglePipeline, where-as before you extended the TextureTintPipeline and you won't have to change any of your shader code. However, if you can, you should update it to make it perform faster, but that choice is left up to you.

WebGL Multi-Texture Rendering

The Multi Pipeline (previously the Texture Tint Pipeline) has had its core flow rewritten to eliminate the need for constantly creating batch objects. Instead, it now supports the new multi-texture shader, vastly increasing rendering performance, especially on draw call-bound systems.

All of the internal functions, such as batchQuad and batchSprite have been updated to use the new method of texture setting. The method signatures all remain the same unless indicated below.

  • Config.render.maxTextures is a new game config setting that allows you to control how many texture units will be used in WebGL.
  • WebGL.Utils.checkShaderMax is a new function, used internally by the renderer, to determine the maximum number of texture units the GPU + browser supports.
  • The property WebGLRenderer.currentActiveTextureUnit has been renamed to currentActiveTexture.
  • WebGLRenderer.startActiveTexture is a new read-only property contains the current starting active texture unit.
  • WebGLRenderer.maxTextures is a new read-only property that contains the maximum number of texture units WebGL can use.
  • WebGLRenderer.textureIndexes is a new read-only array that contains all of the available WebGL texture units.
  • WebGLRenderer.tempTextures is a new read-only array that contains temporary WebGL textures.
  • The WebGLRenderer.currentTextures property has been removed, as it's no longer used.
  • TextureSource.glIndex is a new property that holds the currently assigned texture unit for the Texture Source.
  • TextureSource.glIndexCounter is a new property that holds the time the index was assigned to the Texture Source.
  • WebGLRenderer.currentTextures has been removed, as it's no longer used internally.
  • WebGLRenderer.setBlankTexture no longer has a force parameter, as it's set by default.
  • The Mesh Game Object WebGL Renderer function has been updated to support multi-texture units.
  • The Blitter Game Object WebGL Renderer function has been updated to support multi-texture units.
  • The Bitmap Text Game Object WebGL Renderer function has been updated to support multi-texture units.
  • The Dynamic Bitmap Text Game Object WebGL Renderer function has been updated to support multi-texture units.
  • The Particle Emitter Game Object WebGL Renderer function has been updated to support multi-texture units.
  • The Texture Tint vertex and fragment shaders have been updated to support the inTexId float attribute and dynamic generation.
  • The Texture Tint Pipeline has a new attribute, inTexId which is a gl.FLOAT.
  • TextureTintPipeline.bind is a new method that sets the uMainSampler uniform.
  • The TextureTintPipeline.requireTextureBatch method has been removed, as it's no longer required.
  • The TextureTintPipeline.pushBatch method has been removed, as it's no longer required.
  • The TextureTintPipeline.maxQuads property has been removed, as it's no longer required.
  • The TextureTintPipeline.batches property has been removed, as it's no longer required.
  • TextureTintPipeline.flush has been rewritten to support multi-textures.
  • TextureTintPipeline.flush no longer creates a sub-array if the batch is full, but instead uses bufferData for speed.
  • WebGLPipeline.currentUnit is a new property that holds the most recently assigned texture unit. Treat as read-only.
  • WebGLRenderer.setTextureSource is a new method, used by pipelines and Game Objects, that will assign a texture unit to the given Texture Source.
  • The WebGLRenderer.setTexture2D method has been updated to use the new texture unit assignment. It no longer takes the textureUnit or flush parameters and these have been removed from its method signature.
  • WebGLRenderer.setTextureZero is a new method that activates texture zero and binds the given texture to it. Useful for fbo backed game objects.
  • WebGLRenderer.clearTextureZero is a new method that clears the texture that was bound to unit zero.
  • WebGLRenderer.textureZero is a new property that holds the currently bound unit zero texture.
  • WebGLRenderer.normalTexture is a new property that holds the currently bound normal map (texture unit one).
  • WebGLRenderer.setNormalMap is a new method that sets the current normal map texture.
  • WebGLRenderer.clearNormalMap is a new method that clears the current normal map texture.
  • WebGLRenderer.resetTextures is a new method that flushes the pipeline, resets all textures back to the temporary ones, and resets the active texture counter.
  • WebGLPipeline.boot will now check all of the attributes and store the pointer location within the attribute entry.
  • WebGLPipeline.bind no longer looks-up and enables every attribute, every frame. Instead, it uses the cached pointer location stored in the attribute entry, cutting down on redundant WebGL operations.
  • WebGLRenderer.isNewNormalMap is a new method that returns a boolean if the given parameters are not currently used.
  • WebGLPipeline.forceZero is a new property that informs Game Objects if the pipeline requires a zero bound texture unit.
  • WebGLPipeline.setAttribPointers is a new method that will set the vertex attribute pointers for the pipeline.
  • WebGLRenderer.unbindTextures is a new method that will activate and then null bind all WebGL textures.
  • Renderer.WebGL.Utils.parseFragmentShaderMaxTextures is a new function that will take fragment shader source and search it for %count% and %forloop% declarations, replacing them with the required GLSL for multi-texture support, returning the modified source.

Light Pipeline Changes

The Light Pipeline (previously called the Forward Diffuse Light Pipeline), which is responsible for rendering lights under WebGL, has been rewritten to work with the new Multi Pipeline features. Lots of redundant code has been removed and the following changes and improvements took place:

  • The pipeline now works with Game Objects that do not have a normal map. They will be rendered using the new default normal map, which allows for a flat light effect to pass over them and merge with their diffuse map colors.
  • Fixed a bug in the way lights were handled that caused Tilemaps to render one tile at a time, causing massive slow down. They're now batched properly, making a combination of lights and tilemaps possible again.
  • The Bitmap Text (Static and Dynamic) Game Objects now support rendering with normal maps.
  • The TileSprite Game Objects now support rendering with normal maps.
  • Mesh and Quad Game Objects now support rendering with normal maps.
  • The Graphics Game Objects now support rendering in Light2d. You can even use normal map textures for the texture fills.
  • Particle Emitter Game Object now supports rendering in Light2d.
  • All Shape Game Objects (Rectangle, IsoBox, Star, Polygon, etc) now support rendering in Light2d.
  • The Text Game Object now supports rendering in Light2d, no matter which font, stroke or style it is using.
  • Both Static and Dynamic Tilemap Layer Game Objects now support the Light2d pipeline, with or without normal maps.
  • The pipeline will no longer look-up and set all of the light uniforms unless the Light is dirty.
  • The pipeline will no longer reset all ...
Read more