Releases: phaserjs/phaser
Phaser v3.50.1
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 thePipelineManager
class. This instance is created during the init and boot phase of the renderer.- The
WebGLRenderer.currentPipeline
property no longer exists, instead usePipelineManager.current
. - The
WebGLRenderer.previousPipeline
property no longer exists, instead usePipelineManager.previous
. - The
WebGLRenderer.hasPipeline
method no longer exists, instead usePipelineManager.has
. - The
WebGLRenderer.getPipeline
method no longer exists, instead usePipelineManager.get
. - The
WebGLRenderer.removePipeline
method no longer exists, instead usePipelineManager.remove
. - The
WebGLRenderer.addPipeline
method no longer exists, instead usePipelineManager.add
. - The
WebGLRenderer.setPipeline
method no longer exists, instead usePipelineManager.set
. - The
WebGLRenderer.rebindPipeline
method no longer exists, instead usePipelineManager.rebind
. - The
WebGLRenderer.clearPipeline
method no longer exists, instead usePipelineManager.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 inprevious
and free the renderer. - The
PipelineManager.rebind
method will reset the rendering context and restore theprevious
pipeline, if set. - The
PipelineManager.copyFrame
method will copy asource
Render Target to thetarget
Render Target, optionally setting the brightness of the copy. - The
PipelineManager.blitFrame
method will copy asource
Render Target to thetarget
Render Target. UnlikecopyFrame
no resizing takes place and you can optionally set the brightness and erase mode of the copy. - The
PipelineManager.copyFrameRect
method binds thesource
Render Target and then copies a section of it to thetarget
usinggl.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 thesource
Render Target to it. Use when you need to render the final result to the game canvas. - The
PipelineManager.drawFrame
method will copy asource
Render Target, optionally to atarget
Render Target, using the given ColorMatrix, allowing for full control over the luminance values used during the copy. - The
PipelineManager.blendFrames
method draws thesource1
andsource2
Render Targets to thetarget
Render Target using a linear blend effect, which is controlled by thestrength
parameter. - The
PipelineManager.blendFramesAdditive
method draws thesource1
andsource2
Render Targets to thetarget
Render Target using an additive blend effect, which is controlled by thestrength
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 thefullFrame1
Render Target that belongs to the Utility Pipeline, as it's commonly used in post processing. - The
PostFXPipeline.fullFrame2
property is a reference to thefullFrame2
Render Target that belongs to the Utility Pipeline, as it's commonly used in post processing. - The
PostFXPipeline.halfFrame1
property is a reference to thehalfFrame1
Render Target that belongs to the Utility Pipeline, as it's commonly used in post processing. - The
PostFXPipeline.halfFrame2
property is a reference to thehalfFrame2
Render Target that belongs to the Utility Pipeline, as it's commonly used in post processing. - The
PostFXPipeline.copyFrame
method will copy asource
Render Target to thetarget
Render Target, optionally setting the brightness of the copy. - The
PostFXPipeline.blitFrame
method will copy asource
Render Target to thetarget
Render Target. UnlikecopyFrame
no resizing takes place and you can optionally set the brightness and erase mode of the copy. - The
PostFXPipeline.copyFrameRect
method binds thesource
Render Target and then copies a section of it to thetarget
usinggl.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 thesource
Render Target to it. Use when you need to render the final result to the game canvas. - The
PostFXPipeline.drawFrame
method will copy asource
Render Target, optionally to atarget
Render Target, using the given ColorMatrix, allowing for full control over the luminance values used during the copy. - The
PostFXPipeline.blendFrames
method draws thesource1
andsource2
Render Targets to thetarget
Render Target using a linear blend effect, which is controlled by thestrength
parameter. - The
PostFXPipeline.blendFramesAdditive
method draws thesource1
andsource2
Render Targets to thetarget
Render Target using an additive blend effect, which is controlled by thestrength
parameter. - The
PostFXPipeline.clearFrame
method clears the given Render Target. - The
PostFXPipeline.bindAndDraw
method binds this pipeline and draws thesource
Render Target to thetarget
Render Target. This is typical...
Phaser v3.50.0
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 thePipelineManager
class. This instance is created during the init and boot phase of the renderer.- The
WebGLRenderer.currentPipeline
property no longer exists, instead usePipelineManager.current
. - The
WebGLRenderer.previousPipeline
property no longer exists, instead usePipelineManager.previous
. - The
WebGLRenderer.hasPipeline
method no longer exists, instead usePipelineManager.has
. - The
WebGLRenderer.getPipeline
method no longer exists, instead usePipelineManager.get
. - The
WebGLRenderer.removePipeline
method no longer exists, instead usePipelineManager.remove
. - The
WebGLRenderer.addPipeline
method no longer exists, instead usePipelineManager.add
. - The
WebGLRenderer.setPipeline
method no longer exists, instead usePipelineManager.set
. - The
WebGLRenderer.rebindPipeline
method no longer exists, instead usePipelineManager.rebind
. - The
WebGLRenderer.clearPipeline
method no longer exists, instead usePipelineManager.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 inprevious
and free the renderer. - The
PipelineManager.rebind
method will reset the rendering context and restore theprevious
pipeline, if set. - The
PipelineManager.copyFrame
method will copy asource
Render Target to thetarget
Render Target, optionally setting the brightness of the copy. - The
PipelineManager.blitFrame
method will copy asource
Render Target to thetarget
Render Target. UnlikecopyFrame
no resizing takes place and you can optionally set the brightness and erase mode of the copy. - The
PipelineManager.copyFrameRect
method binds thesource
Render Target and then copies a section of it to thetarget
usinggl.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 thesource
Render Target to it. Use when you need to render the final result to the game canvas. - The
PipelineManager.drawFrame
method will copy asource
Render Target, optionally to atarget
Render Target, using the given ColorMatrix, allowing for full control over the luminance values used during the copy. - The
PipelineManager.blendFrames
method draws thesource1
andsource2
Render Targets to thetarget
Render Target using a linear blend effect, which is controlled by thestrength
parameter. - The
PipelineManager.blendFramesAdditive
method draws thesource1
andsource2
Render Targets to thetarget
Render Target using an additive blend effect, which is controlled by thestrength
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 thefullFrame1
Render Target that belongs to the Utility Pipeline, as it's commonly used in post processing. - The
PostFXPipeline.fullFrame2
property is a reference to thefullFrame2
Render Target that belongs to the Utility Pipeline, as it's commonly used in post processing. - The
PostFXPipeline.halfFrame1
property is a reference to thehalfFrame1
Render Target that belongs to the Utility Pipeline, as it's commonly used in post processing. - The
PostFXPipeline.halfFrame2
property is a reference to thehalfFrame2
Render Target that belongs to the Utility Pipeline, as it's commonly used in post processing. - The
PostFXPipeline.copyFrame
method will copy asource
Render Target to thetarget
Render Target, optionally setting the brightness of the copy. - The
PostFXPipeline.blitFrame
method will copy asource
Render Target to thetarget
Render Target. UnlikecopyFrame
no resizing takes place and you can optionally set the brightness and erase mode of the copy. - The
PostFXPipeline.copyFrameRect
method binds thesource
Render Target and then copies a section of it to thetarget
usinggl.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 thesource
Render Target to it. Use when you need to render the final result to the game canvas. - The
PostFXPipeline.drawFrame
method will copy asource
Render Target, optionally to atarget
Render Target, using the given ColorMatrix, allowing for full control over the luminance values used during the copy. - The
PostFXPipeline.blendFrames
method draws thesource1
andsource2
Render Targets to thetarget
Render Target using a linear blend effect, which is controlled by thestrength
parameter. - The
PostFXPipeline.blendFramesAdditive
method draws thesource1
andsource2
Render Targets to thetarget
Render Target using an additive blend effect, which is controlled by thestrength
parameter. - The
PostFXPipeline.clearFrame
method clears the given Render Target. - The
PostFXPipeline.bindAndDraw
method binds this pipeline and draws thesource
Render Target to thetarget
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 ...
Phaser v3.50.0 Beta 12
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 theMultiPipeline
.TextureTintStripPipeline
is now called theRopePipeline
.ForwardDiffuseLightPipeline
is now called theLightPipeline
.
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 calledLight.frag
.TextureTint.frag
is now calledMulti.frag
.TextureTint.vert
is now calledMulti.vert
.
Other pipeline changes are as follows:
- None of the shaders or pipelines use the
uViewMatrix
anduModelMatrix
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 parameteramount
. If given, it will returntrue
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 extendsMultiPipeline
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 useset1f
instead.WebGLPipeline.setFloat2
has been removed. Please useset2f
instead.WebGLPipeline.setFloat3
has been removed. Please useset3f
instead.WebGLPipeline.setFloat4
has been removed. Please useset4f
instead.WebGLPipeline.setFloat1v
has been removed. Please useset1fv
instead.WebGLPipeline.setFloat2v
has been removed. Please useset2fv
instead.WebGLPipeline.setFloat3v
has been removed. Please useset3fv
instead.WebGLPipeline.setFloat4v
has been removed. Please useset4fv
instead.WebGLPipeline.setInt1
has been removed. Please useset1i
instead.WebGLPipeline.setInt2
has been removed. Please useset2i
instead.WebGLPipeline.setInt3
has been removed. Please useset3i
instead.WebGLPipeline.setInt4
has been removed. Please useset4i
instead.WebGLPipeline.setMatrix1
has been removed. Please usesetMatrix2fv
instead.WebGLPipeline.setMatrix2
has been removed. Please usesetMatrix3fv
instead.WebGLPipeline.setMatrix3
has been removed. Please usesetMatrix4fv
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 thePipelineManager
class. This instance is created during the init and boot phase of the renderer.- The
WebGLRenderer.currentPipeline
property no longer exists, instead usePipelineManager.current
. - The
WebGLRenderer.previousPipeline
property no longer exists, instead usePipelineManager.previous
. - The
WebGLRenderer.hasPipeline
method no longer exists, instead usePipelineManager.has
. - The
WebGLRenderer.getPipeline
method no longer exists, instead usePipelineManager.get
. - The
WebGLRenderer.removePipeline
method no longer exists, instead usePipelineManager.remove
. - The
WebGLRenderer.addPipeline
method no longer exists, instead usePipelineManager.add
. - The
WebGLRenderer.setPipeline
method no longer exists, instead usePipelineManager.set
. - The
WebGLRenderer.rebindPipeline
method no longer exists, instead usePipelineManager.rebind
. - The
WebGLRenderer.clearPipeline
method no longer exists, instead usePipelineManager.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 inprevious
and free the renderer. - The
PipelineManager.rebind
method will reset the rendering context and restore theprevious
pipeline, if set.
New constants have been created to help you refe...
Phaser v3.50.0 Beta 11
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 theMultiPipeline
.TextureTintStripPipeline
is now called theRopePipeline
.ForwardDiffuseLightPipeline
is now called theLightPipeline
.
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 calledLight.frag
.TextureTint.frag
is now calledMulti.frag
.TextureTint.vert
is now calledMulti.vert
.
Other pipeline changes are as follows:
- None of the shaders or pipelines use the
uViewMatrix
anduModelMatrix
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 parameteramount
. If given, it will returntrue
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 extendsMultiPipeline
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 useset1f
instead.WebGLPipeline.setFloat2
has been removed. Please useset2f
instead.WebGLPipeline.setFloat3
has been removed. Please useset3f
instead.WebGLPipeline.setFloat4
has been removed. Please useset4f
instead.WebGLPipeline.setFloat1v
has been removed. Please useset1fv
instead.WebGLPipeline.setFloat2v
has been removed. Please useset2fv
instead.WebGLPipeline.setFloat3v
has been removed. Please useset3fv
instead.WebGLPipeline.setFloat4v
has been removed. Please useset4fv
instead.WebGLPipeline.setInt1
has been removed. Please useset1i
instead.WebGLPipeline.setInt2
has been removed. Please useset2i
instead.WebGLPipeline.setInt3
has been removed. Please useset3i
instead.WebGLPipeline.setInt4
has been removed. Please useset4i
instead.WebGLPipeline.setMatrix1
has been removed. Please usesetMatrix2fv
instead.WebGLPipeline.setMatrix2
has been removed. Please usesetMatrix3fv
instead.WebGLPipeline.setMatrix3
has been removed. Please usesetMatrix4fv
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 thePipelineManager
class. This instance is created during the init and boot phase of the renderer.- The
WebGLRenderer.currentPipeline
property no longer exists, instead usePipelineManager.current
. - The
WebGLRenderer.previousPipeline
property no longer exists, instead usePipelineManager.previous
. - The
WebGLRenderer.hasPipeline
method no longer exists, instead usePipelineManager.has
. - The
WebGLRenderer.getPipeline
method no longer exists, instead usePipelineManager.get
. - The
WebGLRenderer.removePipeline
method no longer exists, instead usePipelineManager.remove
. - The
WebGLRenderer.addPipeline
method no longer exists, instead usePipelineManager.add
. - The
WebGLRenderer.setPipeline
method no longer exists, instead usePipelineManager.set
. - The
WebGLRenderer.rebindPipeline
method no longer exists, instead usePipelineManager.rebind
. - The
WebGLRenderer.clearPipeline
method no longer exists, instead usePipelineManager.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 inprevious
and free the renderer. - The
PipelineManager.rebind
method will reset the rendering context and restore theprevious
pipeline, if set.
New constants have been created to help you reference a pipeline without needing to use strings:
- `Phaser.Renderer.WebGL.Pipeli...
Phaser v3.50.0 Beta 10
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 theMultiPipeline
.TextureTintStripPipeline
is now called theRopePipeline
.ForwardDiffuseLightPipeline
is now called theLightPipeline
.
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 calledLight.frag
.TextureTint.frag
is now calledMulti.frag
.TextureTint.vert
is now calledMulti.vert
.
Other pipeline changes are as follows:
- None of the shaders or pipelines use the
uViewMatrix
anduModelMatrix
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 parameteramount
. If given, it will returntrue
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 extendsMultiPipeline
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 useset1f
instead.WebGLPipeline.setFloat2
has been removed. Please useset2f
instead.WebGLPipeline.setFloat3
has been removed. Please useset3f
instead.WebGLPipeline.setFloat4
has been removed. Please useset4f
instead.WebGLPipeline.setFloat1v
has been removed. Please useset1fv
instead.WebGLPipeline.setFloat2v
has been removed. Please useset2fv
instead.WebGLPipeline.setFloat3v
has been removed. Please useset3fv
instead.WebGLPipeline.setFloat4v
has been removed. Please useset4fv
instead.WebGLPipeline.setInt1
has been removed. Please useset1i
instead.WebGLPipeline.setInt2
has been removed. Please useset2i
instead.WebGLPipeline.setInt3
has been removed. Please useset3i
instead.WebGLPipeline.setInt4
has been removed. Please useset4i
instead.WebGLPipeline.setMatrix1
has been removed. Please usesetMatrix2fv
instead.WebGLPipeline.setMatrix2
has been removed. Please usesetMatrix3fv
instead.WebGLPipeline.setMatrix3
has been removed. Please usesetMatrix4fv
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 thePipelineManager
class. This instance is created during the init and boot phase of the renderer.- The
WebGLRenderer.currentPipeline
property no longer exists, instead usePipelineManager.current
. - The
WebGLRenderer.previousPipeline
property no longer exists, instead usePipelineManager.previous
. - The
WebGLRenderer.hasPipeline
method no longer exists, instead usePipelineManager.has
. - The
WebGLRenderer.getPipeline
method no longer exists, instead usePipelineManager.get
. - The
WebGLRenderer.removePipeline
method no longer exists, instead usePipelineManager.remove
. - The
WebGLRenderer.addPipeline
method no longer exists, instead usePipelineManager.add
. - The
WebGLRenderer.setPipeline
method no longer exists, instead usePipelineManager.set
. - The
WebGLRenderer.rebindPipeline
method no longer exists, instead usePipelineManager.rebind
. - The
WebGLRenderer.clearPipeline
method no longer exists, instead usePipelineManager.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 inprevious
and free the renderer. - The
PipelineManager.rebind
method will reset the rendering context and restore theprevious
pipeline, if set.
New constants have been created to help you reference a pipeline without needing to use strings:
- `Phaser.Renderer.WebGL.Pipeli...
Phaser v3.50.0 Beta 9
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 theMultiPipeline
.TextureTintStripPipeline
is now called theRopePipeline
.ForwardDiffuseLightPipeline
is now called theLightPipeline
.
To match the new pipeline names, the shader source code has also been renamed.
ForwardDiffuse.frag
is now calledLight.frag
.TextureTint.frag
is now calledMulti.frag
.TextureTint.vert
is now calledMulti.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 parameteramount
. If given, it will returntrue
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 extendsMultiPipeline
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 useset1f
instead.WebGLPipeline.setFloat2
has been removed. Please useset2f
instead.WebGLPipeline.setFloat3
has been removed. Please useset3f
instead.WebGLPipeline.setFloat4
has been removed. Please useset4f
instead.WebGLPipeline.setFloat1v
has been removed. Please useset1fv
instead.WebGLPipeline.setFloat2v
has been removed. Please useset2fv
instead.WebGLPipeline.setFloat3v
has been removed. Please useset3fv
instead.WebGLPipeline.setFloat4v
has been removed. Please useset4fv
instead.WebGLPipeline.setInt1
has been removed. Please useset1i
instead.WebGLPipeline.setInt2
has been removed. Please useset2i
instead.WebGLPipeline.setInt3
has been removed. Please useset3i
instead.WebGLPipeline.setInt4
has been removed. Please useset4i
instead.WebGLPipeline.setMatrix1
has been removed. Please usesetMatrix2fv
instead.WebGLPipeline.setMatrix2
has been removed. Please usesetMatrix3fv
instead.WebGLPipeline.setMatrix3
has been removed. Please usesetMatrix4fv
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 thePipelineManager
class. This instance is created during the init and boot phase of the renderer.- The
WebGLRenderer.currentPipeline
property no longer exists, instead usePipelineManager.current
. - The
WebGLRenderer.previousPipeline
property no longer exists, instead usePipelineManager.previous
. - The
WebGLRenderer.hasPipeline
method no longer exists, instead usePipelineManager.has
. - The
WebGLRenderer.getPipeline
method no longer exists, instead usePipelineManager.get
. - The
WebGLRenderer.removePipeline
method no longer exists, instead usePipelineManager.remove
. - The
WebGLRenderer.addPipeline
method no longer exists, instead usePipelineManager.add
. - The
WebGLRenderer.setPipeline
method no longer exists, instead usePipelineManager.set
. - The
WebGLRenderer.rebindPipeline
method no longer exists, instead usePipelineManager.rebind
. - The
WebGLRenderer.clearPipeline
method no longer exists, instead usePipelineManager.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 inprevious
and free the renderer. - The
PipelineManager.rebind
method will reset the rendering context and restore theprevious
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...
Phaser v3.50.0 Beta 8
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 theMultiPipeline
.TextureTintStripPipeline
is now called theRopePipeline
.ForwardDiffuseLightPipeline
is now called theLightPipeline
.
To match the new pipeline names, the shader source code has also been renamed.
ForwardDiffuse.frag
is now calledLight.frag
.TextureTint.frag
is now calledMulti.frag
.TextureTint.vert
is now calledMulti.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 parameteramount
. If given, it will returntrue
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 extendsMultiPipeline
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 useset1f
instead.WebGLPipeline.setFloat2
has been removed. Please useset2f
instead.WebGLPipeline.setFloat3
has been removed. Please useset3f
instead.WebGLPipeline.setFloat4
has been removed. Please useset4f
instead.WebGLPipeline.setFloat1v
has been removed. Please useset1fv
instead.WebGLPipeline.setFloat2v
has been removed. Please useset2fv
instead.WebGLPipeline.setFloat3v
has been removed. Please useset3fv
instead.WebGLPipeline.setFloat4v
has been removed. Please useset4fv
instead.WebGLPipeline.setInt1
has been removed. Please useset1i
instead.WebGLPipeline.setInt2
has been removed. Please useset2i
instead.WebGLPipeline.setInt3
has been removed. Please useset3i
instead.WebGLPipeline.setInt4
has been removed. Please useset4i
instead.WebGLPipeline.setMatrix1
has been removed. Please usesetMatrix2fv
instead.WebGLPipeline.setMatrix2
has been removed. Please usesetMatrix3fv
instead.WebGLPipeline.setMatrix3
has been removed. Please usesetMatrix4fv
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 thePipelineManager
class. This instance is created during the init and boot phase of the renderer.- The
WebGLRenderer.currentPipeline
property no longer exists, instead usePipelineManager.current
. - The
WebGLRenderer.previousPipeline
property no longer exists, instead usePipelineManager.previous
. - The
WebGLRenderer.hasPipeline
method no longer exists, instead usePipelineManager.has
. - The
WebGLRenderer.getPipeline
method no longer exists, instead usePipelineManager.get
. - The
WebGLRenderer.removePipeline
method no longer exists, instead usePipelineManager.remove
. - The
WebGLRenderer.addPipeline
method no longer exists, instead usePipelineManager.add
. - The
WebGLRenderer.setPipeline
method no longer exists, instead usePipelineManager.set
. - The
WebGLRenderer.rebindPipeline
method no longer exists, instead usePipelineManager.rebind
. - The
WebGLRenderer.clearPipeline
method no longer exists, instead usePipelineManager.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 inprevious
and free the renderer. - The
PipelineManager.rebind
method will reset the rendering context and restore theprevious
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...
Phaser v3.50.0 Beta 7
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 theMultiPipeline
.TextureTintStripPipeline
is now called theRopePipeline
.ForwardDiffuseLightPipeline
is now called theLightPipeline
.
To match the new pipeline names, the shader source code has also been renamed.
ForwardDiffuse.frag
is now calledLight.frag
.TextureTint.frag
is now calledMulti.frag
.TextureTint.vert
is now calledMulti.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 parameteramount
. If given, it will returntrue
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 useset1f
instead.WebGLPipeline.setFloat2
has been removed. Please useset2f
instead.WebGLPipeline.setFloat3
has been removed. Please useset3f
instead.WebGLPipeline.setFloat4
has been removed. Please useset4f
instead.WebGLPipeline.setFloat1v
has been removed. Please useset1fv
instead.WebGLPipeline.setFloat2v
has been removed. Please useset2fv
instead.WebGLPipeline.setFloat3v
has been removed. Please useset3fv
instead.WebGLPipeline.setFloat4v
has been removed. Please useset4fv
instead.WebGLPipeline.setInt1
has been removed. Please useset1i
instead.WebGLPipeline.setInt2
has been removed. Please useset2i
instead.WebGLPipeline.setInt3
has been removed. Please useset3i
instead.WebGLPipeline.setInt4
has been removed. Please useset4i
instead.WebGLPipeline.setMatrix1
has been removed. Please usesetMatrix2fv
instead.WebGLPipeline.setMatrix2
has been removed. Please usesetMatrix3fv
instead.WebGLPipeline.setMatrix3
has been removed. Please usesetMatrix4fv
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 thePipelineManager
class. This instance is created during the init and boot phase of the renderer.- The
WebGLRenderer.currentPipeline
property no longer exists, instead usePipelineManager.current
. - The
WebGLRenderer.previousPipeline
property no longer exists, instead usePipelineManager.previous
. - The
WebGLRenderer.hasPipeline
method no longer exists, instead usePipelineManager.has
. - The
WebGLRenderer.getPipeline
method no longer exists, instead usePipelineManager.get
. - The
WebGLRenderer.removePipeline
method no longer exists, instead usePipelineManager.remove
. - The
WebGLRenderer.addPipeline
method no longer exists, instead usePipelineManager.add
. - The
WebGLRenderer.setPipeline
method no longer exists, instead usePipelineManager.set
. - The
WebGLRenderer.rebindPipeline
method no longer exists, instead usePipelineManager.rebind
. - The
WebGLRenderer.clearPipeline
method no longer exists, instead usePipelineManager.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 inprevious
and free the renderer. - The
PipelineManager.rebind
method will reset the rendering context and restore theprevious
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...
Phaser v3.50.0 Beta 4
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 theMultiPipeline
.TextureTintStripPipeline
is now called theRopePipeline
.ForwardDiffuseLightPipeline
is now called theLightPipeline
.
To match the new pipeline names, the shader source code has also been renamed.
ForwardDiffuse.frag
is now calledLight.frag
.TextureTint.frag
is now calledMulti.frag
.TextureTint.vert
is now calledMulti.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 tocurrentActiveTexture
. 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 aforce
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 agl.FLOAT
. TextureTintPipeline.bind
is a new method that sets theuMainSampler
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 usesbufferData
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 thetextureUnit
orflush
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 ...
Phaser v3.50.0 Beta 2
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 theMultiPipeline
.TextureTintStripPipeline
is now called theRopePipeline
.ForwardDiffuseLightPipeline
is now called theLightPipeline
.
To match the new pipeline names, the shader source code has also been renamed.
ForwardDiffuse.frag
is now calledLight.frag
.TextureTint.frag
is now calledMulti.frag
.TextureTint.vert
is now calledMulti.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 tocurrentActiveTexture
. 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 aforce
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 agl.FLOAT
. TextureTintPipeline.bind
is a new method that sets theuMainSampler
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 usesbufferData
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 thetextureUnit
orflush
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 ...