Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2024-11-24 05:33:35 +00:00
Code Issues Projects Releases Packages Wiki Activity

Updated to use new external MVP functions

Browse source
This commit is contained in:
Richard Davey 2020-07-14 16:49:30 +01:00
parent 06c1336f41
commit 0003d278fd
5 changed files with 181 additions and 172 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

137
src/gameobjects/rendertexture/RenderTexture.js
View file

@ -13,6 +13,7 @@ var CONST = require('../../const');
var Frame = require('../../textures/Frame');
var GameObject = require('../GameObject');
var NOOP = require('../../utils/NOOP');
var ProjectOrtho = require('../../renderer/webgl/mvp/ProjectOrtho');
var Render = require('./RenderTextureRender');
var Utils = require('../../renderer/webgl/Utils');
var UUID = require('../../utils/string/UUID');
@ -20,11 +21,11 @@ var UUID = require('../../utils/string/UUID');
/**
* @classdesc
* A Render Texture.
*
*
* A Render Texture is a special texture that allows any number of Game Objects to be drawn to it. You can take many complex objects and
* draw them all to this one texture, which can they be used as the texture for other Game Object's. It's a way to generate dynamic
* textures at run-time that are WebGL friendly and don't invoke expensive GPU uploads.
*
*
* Note that under WebGL a FrameBuffer, which is what the Render Texture uses internally, cannot be anti-aliased. This means
* that when drawing objects such as Shapes to a Render Texture they will appear to be drawn with no aliasing, however this
* is a technical limitation of WebGL. To get around it, create your shape as a texture in an art package, then draw that
@ -202,14 +203,14 @@ var RenderTexture = new Class({
// Create a new Texture for this Text object
this.texture = scene.sys.textures.addCanvas(UUID(), this.canvas);
// Get the frame
this.frame = this.texture.get();
}
else
{
this.texture = scene.sys.textures.get(key);
// Get the frame
this.frame = this.texture.get(frame);
@ -308,13 +309,13 @@ var RenderTexture = new Class({
/**
* Sets the size of this Game Object.
*
*
* @method Phaser.GameObjects.RenderTexture#setSize
* @since 3.0.0
*
* @param {number} width - The width of this Game Object.
* @param {number} height - The height of this Game Object.
*
*
* @return {this} This Game Object instance.
*/
setSize: function (width, height)
@ -324,7 +325,7 @@ var RenderTexture = new Class({
/**
* Resizes the Render Texture to the new dimensions given.
*
*
* If Render Texture was created from specific frame, only the size of the frame will be changed. The size of the source
* texture will not change.
*
@ -355,10 +356,10 @@ var RenderTexture = new Class({
this.canvas.width = width;
this.canvas.height = height;
this.texture.width = width;
this.texture.height = height;
if (this.gl)
{
var gl = this.gl;
@ -455,24 +456,24 @@ var RenderTexture = new Class({
/**
* Stores a copy of this Render Texture in the Texture Manager using the given key.
*
*
* After doing this, any texture based Game Object, such as a Sprite, can use the contents of this
* Render Texture by using the texture key:
*
*
* ```javascript
* var rt = this.add.renderTexture(0, 0, 128, 128);
*
*
* // Draw something to the Render Texture
*
*
* rt.saveTexture('doodle');
*
*
* this.add.image(400, 300, 'doodle');
* ```
*
*
* Updating the contents of this Render Texture will automatically update _any_ Game Object
* that is using it as a texture. Calling `saveTexture` again will not save another copy
* of the same texture, it will just rename the key of the existing copy.
*
*
* By default it will create a single base texture. You can add frames to the texture
* by using the `Texture.add` method. After doing this, you can then allow Game Objects
* to use a specific frame from a Render Texture.
@ -487,7 +488,7 @@ var RenderTexture = new Class({
saveTexture: function (key)
{
this.textureManager.renameTexture(this.texture.key, key);
this._saved = true;
return this.texture;
@ -537,8 +538,8 @@ var RenderTexture = new Class({
this.renderer.pushScissor(cx, cy, cw, ch, ch);
var pipeline = this.pipeline;
pipeline.projOrtho(0, this.texture.width, 0, this.texture.height, -1000.0, 1000.0);
ProjectOrtho(pipeline, 0, this.texture.width, 0, this.texture.height, -1000.0, 1000.0);
pipeline.drawFillRect(
x, y, width, height,
@ -550,7 +551,7 @@ var RenderTexture = new Class({
this.renderer.popScissor();
pipeline.projOrtho(0, pipeline.width, pipeline.height, 0, -1000.0, 1000.0);
ProjectOrtho(pipeline, 0, pipeline.width, pipeline.height, 0, -1000.0, 1000.0);
}
else
{
@ -586,7 +587,7 @@ var RenderTexture = new Class({
var renderer = this.renderer;
renderer.setFramebuffer(this.framebuffer, true);
if (this.frame.cutWidth !== this.canvas.width || this.frame.cutHeight !== this.canvas.height)
{
gl.scissor(this.frame.cutX, this.frame.cutY, this.frame.cutWidth, this.frame.cutHeight);
@ -616,9 +617,9 @@ var RenderTexture = new Class({
/**
* Draws the given object, or an array of objects, to this Render Texture using a blend mode of ERASE.
* This has the effect of erasing any filled pixels in the objects from this Render Texture.
*
*
* It can accept any of the following:
*
*
* * Any renderable Game Object, such as a Sprite, Text, Graphics or TileSprite.
* * Dynamic and Static Tilemap Layers.
* * A Group. The contents of which will be iterated and drawn in turn.
@ -627,24 +628,24 @@ var RenderTexture = new Class({
* * Another Render Texture.
* * A Texture Frame instance.
* * A string. This is used to look-up a texture from the Texture Manager.
*
*
* Note: You cannot erase a Render Texture from itself.
*
*
* If passing in a Group or Container it will only draw children that return `true`
* when their `willRender()` method is called. I.e. a Container with 10 children,
* 5 of which have `visible=false` will only draw the 5 visible ones.
*
*
* If passing in an array of Game Objects it will draw them all, regardless if
* they pass a `willRender` check or not.
*
*
* You can pass in a string in which case it will look for a texture in the Texture
* Manager matching that string, and draw the base frame.
*
*
* You can pass in the `x` and `y` coordinates to draw the objects at. The use of
* the coordinates differ based on what objects are being drawn. If the object is
* a Group, Container or Display List, the coordinates are _added_ to the positions
* of the children. For all other types of object, the coordinates are exact.
*
*
* Calling this method causes the WebGL batch to flush, so it can write the texture
* data to the framebuffer being used internally. The batch is flushed at the end,
* after the entries have been iterated. So if you've a bunch of objects to draw,
@ -679,9 +680,9 @@ var RenderTexture = new Class({
/**
* Draws the given object, or an array of objects, to this Render Texture.
*
*
* It can accept any of the following:
*
*
* * Any renderable Game Object, such as a Sprite, Text, Graphics or TileSprite.
* * Dynamic and Static Tilemap Layers.
* * A Group. The contents of which will be iterated and drawn in turn.
@ -690,28 +691,28 @@ var RenderTexture = new Class({
* * Another Render Texture.
* * A Texture Frame instance.
* * A string. This is used to look-up a texture from the Texture Manager.
*
*
* Note: You cannot draw a Render Texture to itself.
*
*
* If passing in a Group or Container it will only draw children that return `true`
* when their `willRender()` method is called. I.e. a Container with 10 children,
* 5 of which have `visible=false` will only draw the 5 visible ones.
*
*
* If passing in an array of Game Objects it will draw them all, regardless if
* they pass a `willRender` check or not.
*
*
* You can pass in a string in which case it will look for a texture in the Texture
* Manager matching that string, and draw the base frame. If you need to specify
* exactly which frame to draw then use the method `drawFrame` instead.
*
*
* You can pass in the `x` and `y` coordinates to draw the objects at. The use of
* the coordinates differ based on what objects are being drawn. If the object is
* a Group, Container or Display List, the coordinates are _added_ to the positions
* of the children. For all other types of object, the coordinates are exact.
*
*
* The `alpha` and `tint` values are only used by Texture Frames.
* Game Objects use their own alpha and tint values when being drawn.
*
*
* Calling this method causes the WebGL batch to flush, so it can write the texture
* data to the framebuffer being used internally. The batch is flushed at the end,
* after the entries have been iterated. So if you've a bunch of objects to draw,
@ -763,8 +764,8 @@ var RenderTexture = new Class({
this.renderer.pushScissor(cx, cy, cw, ch, ch);
var pipeline = this.pipeline;
pipeline.projOrtho(0, this.texture.width, 0, this.texture.height, -1000.0, 1000.0);
ProjectOrtho(pipeline, 0, this.texture.width, 0, this.texture.height, -1000.0, 1000.0);
this.batchList(entries, x, y, alpha, tint);
@ -774,7 +775,7 @@ var RenderTexture = new Class({
this.renderer.popScissor();
pipeline.projOrtho(0, pipeline.width, pipeline.height, 0, -1000.0, 1000.0);
ProjectOrtho(pipeline, 0, pipeline.width, pipeline.height, 0, -1000.0, 1000.0);
}
else
{
@ -792,20 +793,20 @@ var RenderTexture = new Class({
/**
* Draws the Texture Frame to the Render Texture at the given position.
*
*
* Textures are referenced by their string-based keys, as stored in the Texture Manager.
*
*
* ```javascript
* var rt = this.add.renderTexture(0, 0, 800, 600);
* rt.drawFrame(key, frame);
* ```
*
*
* You can optionally provide a position, alpha and tint value to apply to the frame
* before it is drawn.
*
*
* Calling this method will cause a batch flush, so if you've got a stack of things to draw
* in a tight loop, try using the `draw` method instead.
*
*
* If you need to draw a Sprite to this Render Texture, use the `draw` method instead.
*
* @method Phaser.GameObjects.RenderTexture#drawFrame
@ -848,24 +849,24 @@ var RenderTexture = new Class({
var cy = this.camera._cy;
var cw = this.camera._cw;
var ch = this.camera._ch;
this.renderer.setFramebuffer(this.framebuffer, false);
this.renderer.pushScissor(cx, cy, cw, ch, ch);
var pipeline = this.pipeline;
pipeline.projOrtho(0, this.texture.width, 0, this.texture.height, -1000.0, 1000.0);
ProjectOrtho(pipeline, 0, this.texture.width, 0, this.texture.height, -1000.0, 1000.0);
pipeline.batchTextureFrame(textureFrame, x + this.frame.cutX, y + this.frame.cutY, tint, alpha, this.camera.matrix, null);
pipeline.flush();
this.renderer.setFramebuffer(null, false);
this.renderer.popScissor();
pipeline.projOrtho(0, pipeline.width, pipeline.height, 0, -1000.0, 1000.0);
ProjectOrtho(pipeline, 0, pipeline.width, pipeline.height, 0, -1000.0, 1000.0);
}
else
{
@ -988,7 +989,7 @@ var RenderTexture = new Class({
}
gameObject.setPosition(x + this.frame.cutX, y + this.frame.cutY);
gameObject.renderWebGL(this.renderer, gameObject, 0, this.camera, null);
gameObject.setPosition(prevX, prevY);
@ -1085,9 +1086,9 @@ var RenderTexture = new Class({
var ctx = this.context;
var cd = textureFrame.canvasData;
var source = textureFrame.source.image;
var matrix = this.camera.matrix;
ctx.globalAlpha = this.globalAlpha;
ctx.setTransform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
@ -1098,11 +1099,11 @@ var RenderTexture = new Class({
/**
* Takes a snapshot of the given area of this Render Texture.
*
*
* The snapshot is taken immediately.
*
*
* To capture the whole Render Texture see the `snapshot` method. To capture a specific pixel, see `snapshotPixel`.
*
*
* Snapshots work by using the WebGL `readPixels` feature to grab every pixel from the frame buffer into an ArrayBufferView.
* It then parses this, copying the contents to a temporary Canvas and finally creating an Image object from it,
* which is the image returned to the callback provided. All in all, this is a computationally expensive and blocking process,
@ -1137,11 +1138,11 @@ var RenderTexture = new Class({
/**
* Takes a snapshot of the whole of this Render Texture.
*
*
* The snapshot is taken immediately.
*
*
* To capture just a portion of the Render Texture see the `snapshotArea` method. To capture a specific pixel, see `snapshotPixel`.
*
*
* Snapshots work by using the WebGL `readPixels` feature to grab every pixel from the frame buffer into an ArrayBufferView.
* It then parses this, copying the contents to a temporary Canvas and finally creating an Image object from it,
* which is the image returned to the callback provided. All in all, this is a computationally expensive and blocking process,
@ -1172,11 +1173,11 @@ var RenderTexture = new Class({
/**
* Takes a snapshot of the given pixel from this Render Texture.
*
*
* The snapshot is taken immediately.
*
*
* To capture the whole Render Texture see the `snapshot` method. To capture a specific portion, see `snapshotArea`.
*
*
* Unlike the other two snapshot methods, this one will send your callback a `Color` object containing the color data for
* the requested pixel. It doesn't need to create an internal Canvas or Image object, so is a lot faster to execute,
* using less memory, than the other snapshot methods.

137
src/renderer/webgl/WebGLRenderer.js
View file

@ -12,6 +12,7 @@ var CONST = require('../../const');
var GameEvents = require('../../core/events');
var IsSizePowerOfTwo = require('../../math/pow2/IsSizePowerOfTwo');
var NOOP = require('../../utils/NOOP');
var ProjectOrtho = require('./mvp/ProjectOrtho');
var ScaleEvents = require('../../scale/events');
var SpliceOne = require('../../utils/array/SpliceOne');
var TextureEvents = require('../../textures/events');
@ -137,7 +138,7 @@ var WebGLRenderer = new Class({
/**
* An array of blend modes supported by the WebGL Renderer.
*
*
* This array includes the default blend modes as well as any custom blend modes added through {@link #addBlendMode}.
*
* @name Phaser.Renderer.WebGL.WebGLRenderer#blendModes
@ -179,7 +180,7 @@ var WebGLRenderer = new Class({
/**
* Details about the currently scheduled snapshot.
*
*
* If a non-null `callback` is set in this object, a snapshot of the canvas will be taken after the current frame is fully rendered.
*
* @name Phaser.Renderer.WebGL.WebGLRenderer#snapshotState
@ -489,7 +490,7 @@ var WebGLRenderer = new Class({
/**
* Internal gl function mapping for uniform look-up.
* https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/uniform
*
*
* @name Phaser.Renderer.WebGL.WebGLRenderer#glFuncMap
* @type {any}
* @since 3.17.0
@ -499,7 +500,7 @@ var WebGLRenderer = new Class({
/**
* The `type` of the Game Object being currently rendered.
* This can be used by advanced render functions for batching look-ahead.
*
*
* @name Phaser.Renderer.WebGL.WebGLRenderer#currentType
* @type {string}
* @since 3.19.0
@ -509,7 +510,7 @@ var WebGLRenderer = new Class({
/**
* Is the `type` of the Game Object being currently rendered different than the
* type of the object before it in the display list? I.e. it's a 'new' type.
*
*
* @name Phaser.Renderer.WebGL.WebGLRenderer#newType
* @type {boolean}
* @since 3.19.0
@ -519,7 +520,7 @@ var WebGLRenderer = new Class({
/**
* Does the `type` of the next Game Object in the display list match that
* of the object being currently rendered?
*
*
* @name Phaser.Renderer.WebGL.WebGLRenderer#nextTypeMatch
* @type {boolean}
* @since 3.19.0
@ -528,24 +529,24 @@ var WebGLRenderer = new Class({
/**
* The mipmap magFilter to be used when creating textures.
*
*
* You can specify this as a string in the game config, i.e.:
*
*
* `renderer: { mipmapFilter: 'NEAREST_MIPMAP_LINEAR' }`
*
*
* The 6 options for WebGL1 are, in order from least to most computationally expensive:
*
*
* NEAREST (for pixel art)
* LINEAR (the default)
* NEAREST_MIPMAP_NEAREST
* LINEAR_MIPMAP_NEAREST
* NEAREST_MIPMAP_LINEAR
* LINEAR_MIPMAP_LINEAR
*
*
* Mipmaps only work with textures that are fully power-of-two in size.
*
*
* For more details see https://webglfundamentals.org/webgl/lessons/webgl-3d-textures.html
*
*
* @name Phaser.Renderer.WebGL.WebGLRenderer#mipmapFilter
* @type {GLenum}
* @since 3.21.0
@ -979,7 +980,7 @@ var WebGLRenderer = new Class({
*
* @method Phaser.Renderer.WebGL.WebGLRenderer#setScissor
* @since 3.0.0
*
*
* @param {integer} x - The x position of the scissor.
* @param {integer} y - The y position of the scissor.
* @param {integer} width - The width of the scissor.
@ -1071,7 +1072,7 @@ var WebGLRenderer = new Class({
*
* @method Phaser.Renderer.WebGL.WebGLRenderer#hasActiveStencilMask
* @since 3.17.0
*
*
* @return {boolean} `true` if there is an active stencil mask, otherwise `false`.
*/
hasActiveStencilMask: function ()
@ -1085,20 +1086,20 @@ var WebGLRenderer = new Class({
/**
* Use this to reset the gl context to the state that Phaser requires to continue rendering.
* Calling this will:
*
*
* * Disable `DEPTH_TEST`, `CULL_FACE` and `STENCIL_TEST`.
* * Clear the depth buffer and stencil buffers.
* * Reset the viewport size.
* * Reset the blend mode.
* * Bind a blank texture as the active texture on texture unit zero.
* * Rebinds the given pipeline instance.
*
*
* You should call this having previously called `clearPipeline` and then wishing to return
* control to Phaser again.
*
* @method Phaser.Renderer.WebGL.WebGLRenderer#rebindPipeline
* @since 3.16.0
*
*
* @param {Phaser.Renderer.WebGL.WebGLPipeline} pipelineInstance - The pipeline instance to be activated.
*/
rebindPipeline: function (pipelineInstance)
@ -1202,7 +1203,7 @@ var WebGLRenderer = new Class({
/**
* Creates a new custom blend mode for the renderer.
*
*
* See https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Constants#Blending_modes
*
* @method Phaser.Renderer.WebGL.WebGLRenderer#addBlendMode
@ -1850,7 +1851,7 @@ var WebGLRenderer = new Class({
gl.clear(gl.COLOR_BUFFER_BIT);
TextureTintPipeline.projOrtho(cx, cw + cx, cy, ch + cy, -1000, 1000);
ProjectOrtho(TextureTintPipeline, cx, cw + cx, cy, ch + cy, -1000, 1000);
if (camera.mask)
{
@ -1868,7 +1869,7 @@ var WebGLRenderer = new Class({
color.alphaGL
);
}
camera.emit(CameraEvents.PRE_RENDER, camera);
}
else
@ -1924,7 +1925,7 @@ var WebGLRenderer = new Class({
postRenderCamera: function (camera)
{
this.setPipeline(this.pipelines.TextureTintPipeline);
var TextureTintPipeline = this.pipelines.TextureTintPipeline;
camera.flashEffect.postRenderWebGL(TextureTintPipeline, Utils.getTintFromFloats);
@ -1944,12 +1945,12 @@ var WebGLRenderer = new Class({
if (camera.renderToGame)
{
TextureTintPipeline.projOrtho(0, TextureTintPipeline.width, TextureTintPipeline.height, 0, -1000.0, 1000.0);
ProjectOrtho(TextureTintPipeline, 0, TextureTintPipeline.width, TextureTintPipeline.height, 0, -1000.0, 1000.0);
var getTint = Utils.getTintAppendFloatAlpha;
var pipeline = (camera.pipeline) ? camera.pipeline : TextureTintPipeline;
pipeline.batchTexture(
camera,
camera.glTexture,
@ -2037,12 +2038,12 @@ var WebGLRenderer = new Class({
/**
* The core render step for a Scene Camera.
*
*
* Iterates through the given Game Object's array and renders them with the given Camera.
*
*
* This is called by the `CameraManager.render` method. The Camera Manager instance belongs to a Scene, and is invoked
* by the Scene Systems.render method.
*
*
* This method is not called if `Camera.visible` is `false`, or `Camera.alpha` is zero.
*
* @method Phaser.Renderer.WebGL.WebGLRenderer#render
@ -2082,7 +2083,7 @@ var WebGLRenderer = new Class({
// Reset the current type
this.currentType = '';
var current = this.currentMask;
for (var i = 0; i < childCount; i++)
@ -2176,12 +2177,12 @@ var WebGLRenderer = new Class({
/**
* Schedules a snapshot of the entire game viewport to be taken after the current frame is rendered.
*
*
* To capture a specific area see the `snapshotArea` method. To capture a specific pixel, see `snapshotPixel`.
*
*
* Only one snapshot can be active _per frame_. If you have already called `snapshotPixel`, for example, then
* calling this method will override it.
*
*
* Snapshots work by using the WebGL `readPixels` feature to grab every pixel from the frame buffer into an ArrayBufferView.
* It then parses this, copying the contents to a temporary Canvas and finally creating an Image object from it,
* which is the image returned to the callback provided. All in all, this is a computationally expensive and blocking process,
@ -2203,12 +2204,12 @@ var WebGLRenderer = new Class({
/**
* Schedules a snapshot of the given area of the game viewport to be taken after the current frame is rendered.
*
*
* To capture the whole game viewport see the `snapshot` method. To capture a specific pixel, see `snapshotPixel`.
*
*
* Only one snapshot can be active _per frame_. If you have already called `snapshotPixel`, for example, then
* calling this method will override it.
*
*
* Snapshots work by using the WebGL `readPixels` feature to grab every pixel from the frame buffer into an ArrayBufferView.
* It then parses this, copying the contents to a temporary Canvas and finally creating an Image object from it,
* which is the image returned to the callback provided. All in all, this is a computationally expensive and blocking process,
@ -2245,12 +2246,12 @@ var WebGLRenderer = new Class({
/**
* Schedules a snapshot of the given pixel from the game viewport to be taken after the current frame is rendered.
*
*
* To capture the whole game viewport see the `snapshot` method. To capture a specific area, see `snapshotArea`.
*
*
* Only one snapshot can be active _per frame_. If you have already called `snapshotArea`, for example, then
* calling this method will override it.
*
*
* Unlike the other two snapshot methods, this one will return a `Color` object containing the color data for
* the requested pixel. It doesn't need to create an internal Canvas or Image object, so is a lot faster to execute,
* using less memory.
@ -2275,9 +2276,9 @@ var WebGLRenderer = new Class({
/**
* Takes a snapshot of the given area of the given frame buffer.
*
*
* Unlike the other snapshot methods, this one is processed immediately and doesn't wait for the next render.
*
*
* Snapshots work by using the WebGL `readPixels` feature to grab every pixel from the frame buffer into an ArrayBufferView.
* It then parses this, copying the contents to a temporary Canvas and finally creating an Image object from it,
* which is the image returned to the callback provided. All in all, this is a computationally expensive and blocking process,
@ -2334,17 +2335,17 @@ var WebGLRenderer = new Class({
/**
* Creates a new WebGL Texture based on the given Canvas Element.
*
*
* If the `dstTexture` parameter is given, the WebGL Texture is updated, rather than created fresh.
*
* @method Phaser.Renderer.WebGL.WebGLRenderer#canvasToTexture
* @since 3.0.0
*
*
* @param {HTMLCanvasElement} srcCanvas - The Canvas to create the WebGL Texture from
* @param {WebGLTexture} [dstTexture] - The destination WebGL Texture to set.
* @param {boolean} [noRepeat=false] - Should this canvas be allowed to set `REPEAT` (such as for Text objects?)
* @param {boolean} [flipY=false] - Should the WebGL Texture set `UNPACK_MULTIPLY_FLIP_Y`?
*
*
* @return {WebGLTexture} The newly created, or updated, WebGL Texture.
*/
canvasToTexture: function (srcCanvas, dstTexture, noRepeat, flipY)
@ -2367,11 +2368,11 @@ var WebGLRenderer = new Class({
*
* @method Phaser.Renderer.WebGL.WebGLRenderer#createCanvasTexture
* @since 3.20.0
*
*
* @param {HTMLCanvasElement} srcCanvas - The Canvas to create the WebGL Texture from
* @param {boolean} [noRepeat=false] - Should this canvas be allowed to set `REPEAT` (such as for Text objects?)
* @param {boolean} [flipY=false] - Should the WebGL Texture set `UNPACK_MULTIPLY_FLIP_Y`?
*
*
* @return {WebGLTexture} The newly created WebGL Texture.
*/
createCanvasTexture: function (srcCanvas, noRepeat, flipY)
@ -2409,11 +2410,11 @@ var WebGLRenderer = new Class({
*
* @method Phaser.Renderer.WebGL.WebGLRenderer#updateCanvasTexture
* @since 3.20.0
*
*
* @param {HTMLCanvasElement} srcCanvas - The Canvas to update the WebGL Texture from.
* @param {WebGLTexture} dstTexture - The destination WebGL Texture to update.
* @param {boolean} [flipY=false] - Should the WebGL Texture set `UNPACK_MULTIPLY_FLIP_Y`?
*
*
* @return {WebGLTexture} The updated WebGL Texture.
*/
updateCanvasTexture: function (srcCanvas, dstTexture, flipY)
@ -2432,10 +2433,10 @@ var WebGLRenderer = new Class({
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipY);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, srcCanvas);
dstTexture.width = width;
dstTexture.height = height;
this.setTexture2D(null, 0);
}
@ -2447,11 +2448,11 @@ var WebGLRenderer = new Class({
*
* @method Phaser.Renderer.WebGL.WebGLRenderer#createVideoTexture
* @since 3.20.0
*
*
* @param {HTMLVideoElement} srcVideo - The Video to create the WebGL Texture from
* @param {boolean} [noRepeat=false] - Should this canvas be allowed to set `REPEAT`?
* @param {boolean} [flipY=false] - Should the WebGL Texture set `UNPACK_MULTIPLY_FLIP_Y`?
*
*
* @return {WebGLTexture} The newly created WebGL Texture.
*/
createVideoTexture: function (srcVideo, noRepeat, flipY)
@ -2489,11 +2490,11 @@ var WebGLRenderer = new Class({
*
* @method Phaser.Renderer.WebGL.WebGLRenderer#updateVideoTexture
* @since 3.20.0
*
*
* @param {HTMLVideoElement} srcVideo - The Video to update the WebGL Texture with.
* @param {WebGLTexture} dstTexture - The destination WebGL Texture to update.
* @param {boolean} [flipY=false] - Should the WebGL Texture set `UNPACK_MULTIPLY_FLIP_Y`?
*
*
* @return {WebGLTexture} The updated WebGL Texture.
*/
updateVideoTexture: function (srcVideo, dstTexture, flipY)
@ -2550,7 +2551,7 @@ var WebGLRenderer = new Class({
/**
* Sets a 1f uniform value on the given shader.
*
*
* If the shader is not currently active, it is made active first.
*
* @method Phaser.Renderer.WebGL.WebGLRenderer#setFloat1
@ -2573,7 +2574,7 @@ var WebGLRenderer = new Class({
/**
* Sets the 2f uniform values on the given shader.
*
*
* If the shader is not currently active, it is made active first.
*
* @method Phaser.Renderer.WebGL.WebGLRenderer#setFloat2
@ -2597,7 +2598,7 @@ var WebGLRenderer = new Class({
/**
* Sets the 3f uniform values on the given shader.
*
*
* If the shader is not currently active, it is made active first.
*
* @method Phaser.Renderer.WebGL.WebGLRenderer#setFloat3
@ -2622,7 +2623,7 @@ var WebGLRenderer = new Class({
/**
* Sets the 4f uniform values on the given shader.
*
*
* If the shader is not currently active, it is made active first.
*
* @method Phaser.Renderer.WebGL.WebGLRenderer#setFloat4
@ -2648,7 +2649,7 @@ var WebGLRenderer = new Class({
/**
* Sets the value of a 1fv uniform variable in the given WebGLProgram.
*
*
* If the shader is not currently active, it is made active first.
*
* @method Phaser.Renderer.WebGL.WebGLRenderer#setFloat1v
@ -2671,7 +2672,7 @@ var WebGLRenderer = new Class({
/**
* Sets the value of a 2fv uniform variable in the given WebGLProgram.
*
*
* If the shader is not currently active, it is made active first.
*
* @method Phaser.Renderer.WebGL.WebGLRenderer#setFloat2v
@ -2694,7 +2695,7 @@ var WebGLRenderer = new Class({
/**
* Sets the value of a 3fv uniform variable in the given WebGLProgram.
*
*
* If the shader is not currently active, it is made active first.
*
* @method Phaser.Renderer.WebGL.WebGLRenderer#setFloat3v
@ -2717,7 +2718,7 @@ var WebGLRenderer = new Class({
/**
* Sets the value of a 4fv uniform variable in the given WebGLProgram.
*
*
* If the shader is not currently active, it is made active first.
*
* @method Phaser.Renderer.WebGL.WebGLRenderer#setFloat4v
@ -2741,7 +2742,7 @@ var WebGLRenderer = new Class({
/**
* Sets a 1i uniform value on the given shader.
*
*
* If the shader is not currently active, it is made active first.
*
* @method Phaser.Renderer.WebGL.WebGLRenderer#setInt1
@ -2764,7 +2765,7 @@ var WebGLRenderer = new Class({
/**
* Sets the 2i uniform values on the given shader.
*
*
* If the shader is not currently active, it is made active first.
*
* @method Phaser.Renderer.WebGL.WebGLRenderer#setInt2
@ -2788,7 +2789,7 @@ var WebGLRenderer = new Class({
/**
* Sets the 3i uniform values on the given shader.
*
*
* If the shader is not currently active, it is made active first.
*
* @method Phaser.Renderer.WebGL.WebGLRenderer#setInt3
@ -2813,7 +2814,7 @@ var WebGLRenderer = new Class({
/**
* Sets the 4i uniform values on the given shader.
*
*
* If the shader is not currently active, it is made active first.
*
* @method Phaser.Renderer.WebGL.WebGLRenderer#setInt4
@ -2839,7 +2840,7 @@ var WebGLRenderer = new Class({
/**
* Sets the value of a matrix 2fv uniform variable in the given WebGLProgram.
*
*
* If the shader is not currently active, it is made active first.
*
* @method Phaser.Renderer.WebGL.WebGLRenderer#setMatrix2
@ -2863,7 +2864,7 @@ var WebGLRenderer = new Class({
/**
* Sets the value of a matrix 3fv uniform variable in the given WebGLProgram.
*
*
* If the shader is not currently active, it is made active first.
*
* @method Phaser.Renderer.WebGL.WebGLRenderer#setMatrix3
@ -2887,7 +2888,7 @@ var WebGLRenderer = new Class({
/**
* Sets the value of a matrix 4fv uniform variable in the given WebGLProgram.
*
*
* If the shader is not currently active, it is made active first.
*
* @method Phaser.Renderer.WebGL.WebGLRenderer#setMatrix4

51
src/renderer/webgl/pipelines/TextureTintPipeline.js
View file

@ -9,6 +9,7 @@ var Class = require('../../../utils/Class');
var Earcut = require('../../../geom/polygon/Earcut');
var GetFastValue = require('../../../utils/object/GetFastValue');
var ModelViewProjection = require('./components/ModelViewProjection');
var ProjectOrtho = require('../mvp/ProjectOrtho');
var ShaderSourceFS = require('../shaders/TextureTint-frag.js');
var ShaderSourceVS = require('../shaders/TextureTint-vert.js');
var TransformMatrix = require('../../../gameobjects/components/TransformMatrix');
@ -187,7 +188,7 @@ var TextureTintPipeline = new Class({
/**
* The tint effect to be applied by the shader in the next geometry draw:
*
*
* 0 = texture multiplied by color
* 1 = solid color + texture alpha
* 2 = solid color, no texture
@ -297,7 +298,7 @@ var TextureTintPipeline = new Class({
{
WebGLPipeline.prototype.resize.call(this, width, height, resolution);
this.projOrtho(0, this.width, this.height, 0, -1000.0, 1000.0);
ProjectOrtho(this, 0, this.width, this.height, 0, -1000.0, 1000.0);
return this;
},
@ -355,13 +356,13 @@ var TextureTintPipeline = new Class({
/**
* Creates a new batch object and pushes it to a batch array.
* The batch object contains information relevant to the current
* vertex batch like the offset in the vertex buffer, vertex count and
* The batch object contains information relevant to the current
* vertex batch like the offset in the vertex buffer, vertex count and
* the textures used by that batch.
*
* @method Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline#pushBatch
* @since 3.1.0
*
*
* @param {WebGLTexture} texture - Optional WebGLTexture that will be assigned to the created batch.
* @param {integer} unit - Texture unit to which the texture needs to be bound.
*/
@ -609,7 +610,7 @@ var TextureTintPipeline = new Class({
{
spriteMatrix.e -= camera.scrollX * sprite.scrollFactorX;
spriteMatrix.f -= camera.scrollY * sprite.scrollFactorY;
// Multiply by the Sprite matrix, store result in calcMatrix
camMatrix.multiply(spriteMatrix, calcMatrix);
}
@ -658,9 +659,9 @@ var TextureTintPipeline = new Class({
/**
* Adds the vertices data into the batch and flushes if full.
*
*
* Assumes 6 vertices in the following arrangement:
*
*
* ```
* 0----3
* |\ B|
@ -670,7 +671,7 @@ var TextureTintPipeline = new Class({
* | \
* 1----2
* ```
*
*
* Where tx0/ty0 = 0, tx1/ty1 = 1, tx2/ty2 = 2 and tx3/ty3 = 3
*
* @method Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline#batchQuad
@ -695,7 +696,7 @@ var TextureTintPipeline = new Class({
* @param {(number|boolean)} tintEffect - The tint effect for the shader to use.
* @param {WebGLTexture} [texture] - WebGLTexture that will be assigned to the current batch if a flush occurs.
* @param {integer} [unit=0] - Texture unit to which the texture needs to be bound.
*
*
* @return {boolean} `true` if this method caused the batch to flush, otherwise `false`.
*/
batchQuad: function (x0, y0, x1, y1, x2, y2, x3, y3, u0, v0, u1, v1, tintTL, tintTR, tintBL, tintBR, tintEffect, texture, unit)
@ -715,7 +716,7 @@ var TextureTintPipeline = new Class({
var vertexViewU32 = this.vertexViewU32;
var vertexOffset = (this.vertexCount * this.vertexComponentCount) - 1;
vertexViewF32[++vertexOffset] = x0;
vertexViewF32[++vertexOffset] = y0;
vertexViewF32[++vertexOffset] = u0;
@ -765,9 +766,9 @@ var TextureTintPipeline = new Class({
/**
* Adds the vertices data into the batch and flushes if full.
*
*
* Assumes 3 vertices in the following arrangement:
*
*
* ```
* 0
* |\
@ -797,7 +798,7 @@ var TextureTintPipeline = new Class({
* @param {(number|boolean)} tintEffect - The tint effect for the shader to use.
* @param {WebGLTexture} [texture] - WebGLTexture that will be assigned to the current batch if a flush occurs.
* @param {integer} [unit=0] - Texture unit to which the texture needs to be bound.
*
*
* @return {boolean} `true` if this method caused the batch to flush, otherwise `false`.
*/
batchTri: function (x1, y1, x2, y2, x3, y3, u0, v0, u1, v1, tintTL, tintTR, tintBL, tintEffect, texture, unit)
@ -937,7 +938,7 @@ var TextureTintPipeline = new Class({
{
ox = (frameWidth - crop.x - crop.width);
}
if (flipY && !texture.isRenderTexture)
{
oy = (frameHeight - crop.y - crop.height);
@ -990,7 +991,7 @@ var TextureTintPipeline = new Class({
{
spriteMatrix.e -= camera.scrollX * scrollFactorX;
spriteMatrix.f -= camera.scrollY * scrollFactorY;
// Multiply by the Sprite matrix, store result in calcMatrix
camMatrix.multiply(spriteMatrix, calcMatrix);
}
@ -1137,7 +1138,7 @@ var TextureTintPipeline = new Class({
{
parentMatrix.multiply(currentMatrix, calcMatrix);
}
var xw = x + width;
var yh = y + height;
@ -1190,7 +1191,7 @@ var TextureTintPipeline = new Class({
{
parentMatrix.multiply(currentMatrix, calcMatrix);
}
var tx0 = calcMatrix.getX(x0, y0);
var ty0 = calcMatrix.getY(x0, y0);
@ -1253,10 +1254,10 @@ var TextureTintPipeline = new Class({
/**
* Adds the given path to the vertex batch for rendering.
*
*
* It works by taking the array of path data and then passing it through Earcut, which
* creates a list of polygons. Each polygon is then added to the batch.
*
*
* The path is always automatically closed because it's filled.
*
* @method Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline#batchFillPath
@ -1314,10 +1315,10 @@ var TextureTintPipeline = new Class({
var tx0 = calcMatrix.getX(x0, y0);
var ty0 = calcMatrix.getY(x0, y0);
var tx1 = calcMatrix.getX(x1, y1);
var ty1 = calcMatrix.getY(x1, y1);
var tx2 = calcMatrix.getX(x2, y2);
var ty2 = calcMatrix.getY(x2, y2);
@ -1325,7 +1326,7 @@ var TextureTintPipeline = new Class({
var v0 = frame.v0;
var u1 = frame.u1;
var v1 = frame.v1;
this.batchTri(tx0, ty0, tx1, ty1, tx2, ty2, u0, v0, u1, v1, tintTL, tintTR, tintBL, tintEffect);
}
@ -1334,10 +1335,10 @@ var TextureTintPipeline = new Class({
/**
* Adds the given path to the vertex batch for rendering.
*
*
* It works by taking the array of path data and calling `batchLine` for each section
* of the path.
*
*
* The path is optionally closed at the end.
*
* @method Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline#batchStrokePath

9
src/renderer/webgl/pipelines/TextureTintStripPipeline.js
View file

@ -8,6 +8,7 @@
var Class = require('../../../utils/Class');
var GetFastValue = require('../../../utils/object/GetFastValue');
var ModelViewProjection = require('./components/ModelViewProjection');
var ProjectOrtho = require('../mvp/ProjectOrtho');
var ShaderSourceFS = require('../shaders/TextureTint-frag.js');
var ShaderSourceVS = require('../shaders/TextureTint-vert.js');
var TransformMatrix = require('../../../gameobjects/components/TransformMatrix');
@ -193,7 +194,7 @@ var TextureTintStripPipeline = new Class({
{
WebGLPipeline.prototype.resize.call(this, width, height, resolution);
this.projOrtho(0, this.width, this.height, 0, -1000.0, 1000.0);
ProjectOrtho(this, 0, this.width, this.height, 0, -1000.0, 1000.0);
return this;
},
@ -251,13 +252,13 @@ var TextureTintStripPipeline = new Class({
/**
* Creates a new batch object and pushes it to a batch array.
* The batch object contains information relevant to the current
* vertex batch like the offset in the vertex buffer, vertex count and
* The batch object contains information relevant to the current
* vertex batch like the offset in the vertex buffer, vertex count and
* the textures used by that batch.
*
* @method Phaser.Renderer.WebGL.Pipelines.TextureTintStripPipeline#pushBatch
* @since 3.23.0
*
*
* @param {WebGLTexture} texture - Optional WebGLTexture that will be assigned to the created batch.
* @param {integer} unit - Texture unit to which the texture needs to be bound.
*/

19
src/tilemaps/staticlayer/StaticTilemapLayerWebGLRenderer.js
View file

@ -4,6 +4,12 @@
* @license {@link https://opensource.org/licenses/MIT|MIT License}
*/
var Identity = require('../../renderer/webgl/mvp/Identity');
var Scale = require('../../renderer/webgl/mvp/Scale');
var Translate = require('../../renderer/webgl/mvp/Translate');
var ViewIdentity = require('../../renderer/webgl/mvp/ViewIdentity');
var ViewLoad2D = require('../../renderer/webgl/mvp/ViewLoad2D');
/**
* Renders this Game Object with the WebGL Renderer to the given Camera.
*
@ -30,11 +36,10 @@ var StaticTilemapLayerWebGLRenderer = function (renderer, src, interpolationPerc
renderer.setPipeline(pipeline);
pipeline.modelIdentity();
pipeline.modelTranslate(src.x - (camera.scrollX * src.scrollFactorX), src.y - (camera.scrollY * src.scrollFactorY), 0);
pipeline.modelScale(src.scaleX, src.scaleY, 1);
pipeline.viewLoad2D(camera.matrix.matrix);
Identity(pipeline);
Translate(pipeline, src.x - (camera.scrollX * src.scrollFactorX), src.y - (camera.scrollY * src.scrollFactorY), 0);
Scale(pipeline, src.scaleX, src.scaleY, 1);
ViewLoad2D(pipeline, camera.matrix.matrix);
for (var i = 0; i < tilesets.length; i++)
{
@ -60,8 +65,8 @@ var StaticTilemapLayerWebGLRenderer = function (renderer, src, interpolationPerc
// Restore the pipeline
pipeline.vertexBuffer = pipelineVertexBuffer;
pipeline.viewIdentity();
pipeline.modelIdentity();
ViewIdentity(pipeline);
Identity(pipeline);
};
module.exports = StaticTilemapLayerWebGLRenderer;