diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index d5b9d4d..2928363 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -1,7 +1,6 @@ var BaseTexture = require('./BaseTexture'), math = require('../math'), - CONST = require('../const'), - tempRect = new math.Rectangle(); + CONST = require('../const'); /** * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. @@ -136,148 +135,3 @@ this.renderer = null; }; -/** - * Will return a HTML Image of the texture - * - * @return {Image} - */ -BaseRenderTexture.prototype.getImage = function (frame) -{ - var image = new Image(); - image.src = this.getBase64(frame); - return image; -}; - -/** - * Will return a a base64 encoded string of this texture. It works by calling BaseRenderTexture.getCanvas and then running toDataURL on that. - * - * @return {string} A base64 encoded string of the texture. - */ -BaseRenderTexture.prototype.getBase64 = function ( frame ) -{ - return this.getCanvas(frame).toDataURL(); -}; - -/** - * Creates a Canvas element, renders this BaseRenderTexture to it and then returns it. - * - * @return {HTMLCanvasElement} A Canvas element with the texture rendered on. - */ -BaseRenderTexture.prototype.getCanvas = function ( frame ) -{ - - - if (this.renderer.type === CONST.RENDERER_TYPE.WEBGL) - { - if(!frame) - { - frame = tempRect; - frame.width = this.textureBuffer.size.width; - frame.height = this.textureBuffer.size.height; - } - - var width = frame.width * this.resolution; - var height = frame.height * this.resolution; - - var gl = this.renderer.gl; - - var webGLPixels = new Uint8Array(4 * width * height); - - gl.bindFramebuffer(gl.FRAMEBUFFER, this.textureBuffer.frameBuffer); - gl.readPixels(frame.x * this.resolution, frame.y * this.resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); - gl.bindFramebuffer(gl.FRAMEBUFFER, null); - - var tempCanvas = new CanvasBuffer(width, height); - var canvasData = tempCanvas.context.getImageData(0, 0, width, height); - canvasData.data.set(webGLPixels); - - tempCanvas.context.putImageData(canvasData, 0, 0); - - return tempCanvas.canvas; - } - else - { - if(!frame) - { - frame = tempRect; - frame.width = this.textureBuffer.canvas.width; - frame.height = this.textureBuffer.canvas.height; - } - - if(frame.width === this.textureBuffer.canvas.width && - frame.height === this.textureBuffer.canvas.height ) - { - return this.textureBuffer.canvas; - } - else - { - - var resolution = this.resolution; - - var tempCanvas2 = new CanvasBuffer(frame.width * resolution, frame.height * resolution); - var canvasData2 = this.textureBuffer.context.getImageData(frame.x * resolution, frame.y * resolution, frame.width * resolution, frame.height * resolution); - - tempCanvas2.context.putImageData(canvasData2, 0, 0); - - return tempCanvas2.canvas; - } - } -}; - -/** - * Will return a one-dimensional array containing the pixel data of the entire texture in RGBA order, with integer values between 0 and 255 (included). - * - * @return {Uint8ClampedArray} - */ -BaseRenderTexture.prototype.getPixels = function ( frame ) -{ - if(!frame) - { - frame = tempRect; - frame.width = this.textureBuffer.size.width; - frame.height = this.textureBuffer.size.height; - } - - var width = frame.width * this.resolution; - var height = frame.height * this.resolution; - - if (this.renderer.type === CONST.RENDERER_TYPE.WEBGL) - { - var gl = this.renderer.gl; - - var webGLPixels = new Uint8Array(4 * width * height); - - gl.bindFramebuffer(gl.FRAMEBUFFER, this.textureBuffer.frameBuffer); - gl.readPixels(frame.x * this.resolution, frame.y * this.resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); - gl.bindFramebuffer(gl.FRAMEBUFFER, null); - - return webGLPixels; - } - else - { - return this.textureBuffer.canvas.getContext('2d').getImageData(frame.x * this.resolution, frame.y * this.resolution, width, height).data; - } -}; - -/** - * Will return a one-dimensional array containing the pixel data of a pixel within the texture in RGBA order, with integer values between 0 and 255 (included). - * - * @param x {number} The x coordinate of the pixel to retrieve. - * @param y {number} The y coordinate of the pixel to retrieve. - * @return {Uint8ClampedArray} - */ -BaseRenderTexture.prototype.getPixel = function (frame, x, y) -{ - tempRect.x = x; - tempRect.y = y; - tempRect.width = 1 / this.resolution; - tempRect.height = 1 / this.resolution; - - if(frame) - { - tempRect.x += frame.x; - tempRect.y += frame.y; - } - - return this.getPixels(tempRect); -}; diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index d5b9d4d..2928363 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -1,7 +1,6 @@ var BaseTexture = require('./BaseTexture'), math = require('../math'), - CONST = require('../const'), - tempRect = new math.Rectangle(); + CONST = require('../const'); /** * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. @@ -136,148 +135,3 @@ this.renderer = null; }; -/** - * Will return a HTML Image of the texture - * - * @return {Image} - */ -BaseRenderTexture.prototype.getImage = function (frame) -{ - var image = new Image(); - image.src = this.getBase64(frame); - return image; -}; - -/** - * Will return a a base64 encoded string of this texture. It works by calling BaseRenderTexture.getCanvas and then running toDataURL on that. - * - * @return {string} A base64 encoded string of the texture. - */ -BaseRenderTexture.prototype.getBase64 = function ( frame ) -{ - return this.getCanvas(frame).toDataURL(); -}; - -/** - * Creates a Canvas element, renders this BaseRenderTexture to it and then returns it. - * - * @return {HTMLCanvasElement} A Canvas element with the texture rendered on. - */ -BaseRenderTexture.prototype.getCanvas = function ( frame ) -{ - - - if (this.renderer.type === CONST.RENDERER_TYPE.WEBGL) - { - if(!frame) - { - frame = tempRect; - frame.width = this.textureBuffer.size.width; - frame.height = this.textureBuffer.size.height; - } - - var width = frame.width * this.resolution; - var height = frame.height * this.resolution; - - var gl = this.renderer.gl; - - var webGLPixels = new Uint8Array(4 * width * height); - - gl.bindFramebuffer(gl.FRAMEBUFFER, this.textureBuffer.frameBuffer); - gl.readPixels(frame.x * this.resolution, frame.y * this.resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); - gl.bindFramebuffer(gl.FRAMEBUFFER, null); - - var tempCanvas = new CanvasBuffer(width, height); - var canvasData = tempCanvas.context.getImageData(0, 0, width, height); - canvasData.data.set(webGLPixels); - - tempCanvas.context.putImageData(canvasData, 0, 0); - - return tempCanvas.canvas; - } - else - { - if(!frame) - { - frame = tempRect; - frame.width = this.textureBuffer.canvas.width; - frame.height = this.textureBuffer.canvas.height; - } - - if(frame.width === this.textureBuffer.canvas.width && - frame.height === this.textureBuffer.canvas.height ) - { - return this.textureBuffer.canvas; - } - else - { - - var resolution = this.resolution; - - var tempCanvas2 = new CanvasBuffer(frame.width * resolution, frame.height * resolution); - var canvasData2 = this.textureBuffer.context.getImageData(frame.x * resolution, frame.y * resolution, frame.width * resolution, frame.height * resolution); - - tempCanvas2.context.putImageData(canvasData2, 0, 0); - - return tempCanvas2.canvas; - } - } -}; - -/** - * Will return a one-dimensional array containing the pixel data of the entire texture in RGBA order, with integer values between 0 and 255 (included). - * - * @return {Uint8ClampedArray} - */ -BaseRenderTexture.prototype.getPixels = function ( frame ) -{ - if(!frame) - { - frame = tempRect; - frame.width = this.textureBuffer.size.width; - frame.height = this.textureBuffer.size.height; - } - - var width = frame.width * this.resolution; - var height = frame.height * this.resolution; - - if (this.renderer.type === CONST.RENDERER_TYPE.WEBGL) - { - var gl = this.renderer.gl; - - var webGLPixels = new Uint8Array(4 * width * height); - - gl.bindFramebuffer(gl.FRAMEBUFFER, this.textureBuffer.frameBuffer); - gl.readPixels(frame.x * this.resolution, frame.y * this.resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); - gl.bindFramebuffer(gl.FRAMEBUFFER, null); - - return webGLPixels; - } - else - { - return this.textureBuffer.canvas.getContext('2d').getImageData(frame.x * this.resolution, frame.y * this.resolution, width, height).data; - } -}; - -/** - * Will return a one-dimensional array containing the pixel data of a pixel within the texture in RGBA order, with integer values between 0 and 255 (included). - * - * @param x {number} The x coordinate of the pixel to retrieve. - * @param y {number} The y coordinate of the pixel to retrieve. - * @return {Uint8ClampedArray} - */ -BaseRenderTexture.prototype.getPixel = function (frame, x, y) -{ - tempRect.x = x; - tempRect.y = y; - tempRect.width = 1 / this.resolution; - tempRect.height = 1 / this.resolution; - - if(frame) - { - tempRect.x += frame.x; - tempRect.y += frame.y; - } - - return this.getPixels(tempRect); -}; diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js new file mode 100644 index 0000000..8c901c8 --- /dev/null +++ b/src/extract/canvas/CanvasExtract.js @@ -0,0 +1,136 @@ +var core = require('../../core'); +tempRect = new core.Rectangle(); + +/** + * The extract manager provides functionality to export content from the renderers + * @class + * @memberof PIXI + * @param renderer {PIXI.WebGLRenderer} A reference to the current renderer + */ +function WebGLExtract(renderer) +{ + this.renderer = renderer; + renderer.extract = this; +} + + +WebGLExtract.prototype.constructor = WebGLExtract; +module.exports = WebGLExtract; + +/** + * Will return a HTML Image of the target + * + * @return {Image} + * @param target {PIXI.DisplayObject|PIXI.RenderTexture} A displayObject or renderTexture to convert. If left empty will use use the main renderer + */ +WebGLExtract.prototype.image = function ( target ) +{ + var image = new Image(); + image.src = this.base64( target ); + return image; +} + +/** + * Will return a a base64 encoded string of this target. It works by calling WebGLExtract.getCanvas and then running toDataURL on that. + * @param target {PIXI.DisplayObject|PIXI.RenderTexture} A displayObject or renderTexture to convert. If left empty will use use the main renderer + * @return {string} A base64 encoded string of the texture. + */ +WebGLExtract.prototype.base64 = function ( target ) +{ + return this.canvas( target ).toDataURL(); +}; + +/** + * Creates a Canvas element, renders this target to it and then returns it. + * @param target {PIXI.DisplayObject|PIXI.RenderTexture} A displayObject or renderTexture to convert. If left empty will use use the main renderer + * @return {HTMLCanvasElement} A Canvas element with the texture rendered on. + */ +WebGLExtract.prototype.canvas = function ( target ) +{ + var renderer = this.renderer; + var context; + var resolution; + var frame; + var renderTexture; + + if(target) + { + if(target instanceof core.RenderTexture) + { + renderTexture = target; + } + else + { + renderTexture = this.renderer.generateTexture(target); + } + } + + if(renderTexture) + { + context = renderTexture.baseTexture._canvasRenderTarget.context; + resolution = renderTexture.baseTexture._canvasRenderTarget.resolution; + frame = renderTexture.frame; + } + else + { + context = this.renderer.rootContext; + resolution = this.renderer.rootResolution; + + frame = tempRect; + frame.width = this.renderer.width; + frame.height = this.renderer.height; + } + + var width = frame.width * resolution; + var height = frame.height * resolution; + + var canvasBuffer = new core.CanvasRenderTarget(width, height); + var canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); + canvasBuffer.context.putImageData(canvasData, 0, 0); + + + // send the canvas back.. + return canvasBuffer.canvas; +}; + +/** + * Will return a one-dimensional array containing the pixel data of the entire texture in RGBA order, with integer values between 0 and 255 (included). + * @param target {PIXI.DisplayObject|PIXI.RenderTexture} A displayObject or renderTexture to convert. If left empty will use use the main renderer + * @return {Uint8ClampedArray} + */ +WebGLExtract.prototype.pixels = function ( renderTexture ) +{ + var renderer = this.renderer; + var context; + var resolution; + + if(renderTexture) + { + context = renderTexture.baseTexture._canvasRenderTarget.context; + resolution = renderTexture.baseTexture._canvasRenderTarget.resolution; + frame = renderTexture.frame; + } + else + { + context = this.renderer.rootContext; + resolution = this.renderer.rootResolution; + + frame = tempRect; + frame.width = this.renderer.width; + frame.height = this.renderer.height; + } + + return context.getImageData(0, 0, frame.width * resolution, frame.height * resolution).data; +}; + +/** + * Destroys the extract + * + */ +WebGLExtract.prototype.destroy = function () +{ + this.renderer.extract = null; + this.renderer = null; +}; + +core.CanvasRenderer.registerPlugin('extract', WebGLExtract); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index d5b9d4d..2928363 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -1,7 +1,6 @@ var BaseTexture = require('./BaseTexture'), math = require('../math'), - CONST = require('../const'), - tempRect = new math.Rectangle(); + CONST = require('../const'); /** * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. @@ -136,148 +135,3 @@ this.renderer = null; }; -/** - * Will return a HTML Image of the texture - * - * @return {Image} - */ -BaseRenderTexture.prototype.getImage = function (frame) -{ - var image = new Image(); - image.src = this.getBase64(frame); - return image; -}; - -/** - * Will return a a base64 encoded string of this texture. It works by calling BaseRenderTexture.getCanvas and then running toDataURL on that. - * - * @return {string} A base64 encoded string of the texture. - */ -BaseRenderTexture.prototype.getBase64 = function ( frame ) -{ - return this.getCanvas(frame).toDataURL(); -}; - -/** - * Creates a Canvas element, renders this BaseRenderTexture to it and then returns it. - * - * @return {HTMLCanvasElement} A Canvas element with the texture rendered on. - */ -BaseRenderTexture.prototype.getCanvas = function ( frame ) -{ - - - if (this.renderer.type === CONST.RENDERER_TYPE.WEBGL) - { - if(!frame) - { - frame = tempRect; - frame.width = this.textureBuffer.size.width; - frame.height = this.textureBuffer.size.height; - } - - var width = frame.width * this.resolution; - var height = frame.height * this.resolution; - - var gl = this.renderer.gl; - - var webGLPixels = new Uint8Array(4 * width * height); - - gl.bindFramebuffer(gl.FRAMEBUFFER, this.textureBuffer.frameBuffer); - gl.readPixels(frame.x * this.resolution, frame.y * this.resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); - gl.bindFramebuffer(gl.FRAMEBUFFER, null); - - var tempCanvas = new CanvasBuffer(width, height); - var canvasData = tempCanvas.context.getImageData(0, 0, width, height); - canvasData.data.set(webGLPixels); - - tempCanvas.context.putImageData(canvasData, 0, 0); - - return tempCanvas.canvas; - } - else - { - if(!frame) - { - frame = tempRect; - frame.width = this.textureBuffer.canvas.width; - frame.height = this.textureBuffer.canvas.height; - } - - if(frame.width === this.textureBuffer.canvas.width && - frame.height === this.textureBuffer.canvas.height ) - { - return this.textureBuffer.canvas; - } - else - { - - var resolution = this.resolution; - - var tempCanvas2 = new CanvasBuffer(frame.width * resolution, frame.height * resolution); - var canvasData2 = this.textureBuffer.context.getImageData(frame.x * resolution, frame.y * resolution, frame.width * resolution, frame.height * resolution); - - tempCanvas2.context.putImageData(canvasData2, 0, 0); - - return tempCanvas2.canvas; - } - } -}; - -/** - * Will return a one-dimensional array containing the pixel data of the entire texture in RGBA order, with integer values between 0 and 255 (included). - * - * @return {Uint8ClampedArray} - */ -BaseRenderTexture.prototype.getPixels = function ( frame ) -{ - if(!frame) - { - frame = tempRect; - frame.width = this.textureBuffer.size.width; - frame.height = this.textureBuffer.size.height; - } - - var width = frame.width * this.resolution; - var height = frame.height * this.resolution; - - if (this.renderer.type === CONST.RENDERER_TYPE.WEBGL) - { - var gl = this.renderer.gl; - - var webGLPixels = new Uint8Array(4 * width * height); - - gl.bindFramebuffer(gl.FRAMEBUFFER, this.textureBuffer.frameBuffer); - gl.readPixels(frame.x * this.resolution, frame.y * this.resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); - gl.bindFramebuffer(gl.FRAMEBUFFER, null); - - return webGLPixels; - } - else - { - return this.textureBuffer.canvas.getContext('2d').getImageData(frame.x * this.resolution, frame.y * this.resolution, width, height).data; - } -}; - -/** - * Will return a one-dimensional array containing the pixel data of a pixel within the texture in RGBA order, with integer values between 0 and 255 (included). - * - * @param x {number} The x coordinate of the pixel to retrieve. - * @param y {number} The y coordinate of the pixel to retrieve. - * @return {Uint8ClampedArray} - */ -BaseRenderTexture.prototype.getPixel = function (frame, x, y) -{ - tempRect.x = x; - tempRect.y = y; - tempRect.width = 1 / this.resolution; - tempRect.height = 1 / this.resolution; - - if(frame) - { - tempRect.x += frame.x; - tempRect.y += frame.y; - } - - return this.getPixels(tempRect); -}; diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js new file mode 100644 index 0000000..8c901c8 --- /dev/null +++ b/src/extract/canvas/CanvasExtract.js @@ -0,0 +1,136 @@ +var core = require('../../core'); +tempRect = new core.Rectangle(); + +/** + * The extract manager provides functionality to export content from the renderers + * @class + * @memberof PIXI + * @param renderer {PIXI.WebGLRenderer} A reference to the current renderer + */ +function WebGLExtract(renderer) +{ + this.renderer = renderer; + renderer.extract = this; +} + + +WebGLExtract.prototype.constructor = WebGLExtract; +module.exports = WebGLExtract; + +/** + * Will return a HTML Image of the target + * + * @return {Image} + * @param target {PIXI.DisplayObject|PIXI.RenderTexture} A displayObject or renderTexture to convert. If left empty will use use the main renderer + */ +WebGLExtract.prototype.image = function ( target ) +{ + var image = new Image(); + image.src = this.base64( target ); + return image; +} + +/** + * Will return a a base64 encoded string of this target. It works by calling WebGLExtract.getCanvas and then running toDataURL on that. + * @param target {PIXI.DisplayObject|PIXI.RenderTexture} A displayObject or renderTexture to convert. If left empty will use use the main renderer + * @return {string} A base64 encoded string of the texture. + */ +WebGLExtract.prototype.base64 = function ( target ) +{ + return this.canvas( target ).toDataURL(); +}; + +/** + * Creates a Canvas element, renders this target to it and then returns it. + * @param target {PIXI.DisplayObject|PIXI.RenderTexture} A displayObject or renderTexture to convert. If left empty will use use the main renderer + * @return {HTMLCanvasElement} A Canvas element with the texture rendered on. + */ +WebGLExtract.prototype.canvas = function ( target ) +{ + var renderer = this.renderer; + var context; + var resolution; + var frame; + var renderTexture; + + if(target) + { + if(target instanceof core.RenderTexture) + { + renderTexture = target; + } + else + { + renderTexture = this.renderer.generateTexture(target); + } + } + + if(renderTexture) + { + context = renderTexture.baseTexture._canvasRenderTarget.context; + resolution = renderTexture.baseTexture._canvasRenderTarget.resolution; + frame = renderTexture.frame; + } + else + { + context = this.renderer.rootContext; + resolution = this.renderer.rootResolution; + + frame = tempRect; + frame.width = this.renderer.width; + frame.height = this.renderer.height; + } + + var width = frame.width * resolution; + var height = frame.height * resolution; + + var canvasBuffer = new core.CanvasRenderTarget(width, height); + var canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); + canvasBuffer.context.putImageData(canvasData, 0, 0); + + + // send the canvas back.. + return canvasBuffer.canvas; +}; + +/** + * Will return a one-dimensional array containing the pixel data of the entire texture in RGBA order, with integer values between 0 and 255 (included). + * @param target {PIXI.DisplayObject|PIXI.RenderTexture} A displayObject or renderTexture to convert. If left empty will use use the main renderer + * @return {Uint8ClampedArray} + */ +WebGLExtract.prototype.pixels = function ( renderTexture ) +{ + var renderer = this.renderer; + var context; + var resolution; + + if(renderTexture) + { + context = renderTexture.baseTexture._canvasRenderTarget.context; + resolution = renderTexture.baseTexture._canvasRenderTarget.resolution; + frame = renderTexture.frame; + } + else + { + context = this.renderer.rootContext; + resolution = this.renderer.rootResolution; + + frame = tempRect; + frame.width = this.renderer.width; + frame.height = this.renderer.height; + } + + return context.getImageData(0, 0, frame.width * resolution, frame.height * resolution).data; +}; + +/** + * Destroys the extract + * + */ +WebGLExtract.prototype.destroy = function () +{ + this.renderer.extract = null; + this.renderer = null; +}; + +core.CanvasRenderer.registerPlugin('extract', WebGLExtract); diff --git a/src/extract/index.js b/src/extract/index.js new file mode 100644 index 0000000..28195ea --- /dev/null +++ b/src/extract/index.js @@ -0,0 +1,5 @@ + +module.exports = { + webGL: require('./webgl/WebGLExtract'), + canvas: require('./canvas/CanvasExtract') +} \ No newline at end of file diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index d5b9d4d..2928363 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -1,7 +1,6 @@ var BaseTexture = require('./BaseTexture'), math = require('../math'), - CONST = require('../const'), - tempRect = new math.Rectangle(); + CONST = require('../const'); /** * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. @@ -136,148 +135,3 @@ this.renderer = null; }; -/** - * Will return a HTML Image of the texture - * - * @return {Image} - */ -BaseRenderTexture.prototype.getImage = function (frame) -{ - var image = new Image(); - image.src = this.getBase64(frame); - return image; -}; - -/** - * Will return a a base64 encoded string of this texture. It works by calling BaseRenderTexture.getCanvas and then running toDataURL on that. - * - * @return {string} A base64 encoded string of the texture. - */ -BaseRenderTexture.prototype.getBase64 = function ( frame ) -{ - return this.getCanvas(frame).toDataURL(); -}; - -/** - * Creates a Canvas element, renders this BaseRenderTexture to it and then returns it. - * - * @return {HTMLCanvasElement} A Canvas element with the texture rendered on. - */ -BaseRenderTexture.prototype.getCanvas = function ( frame ) -{ - - - if (this.renderer.type === CONST.RENDERER_TYPE.WEBGL) - { - if(!frame) - { - frame = tempRect; - frame.width = this.textureBuffer.size.width; - frame.height = this.textureBuffer.size.height; - } - - var width = frame.width * this.resolution; - var height = frame.height * this.resolution; - - var gl = this.renderer.gl; - - var webGLPixels = new Uint8Array(4 * width * height); - - gl.bindFramebuffer(gl.FRAMEBUFFER, this.textureBuffer.frameBuffer); - gl.readPixels(frame.x * this.resolution, frame.y * this.resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); - gl.bindFramebuffer(gl.FRAMEBUFFER, null); - - var tempCanvas = new CanvasBuffer(width, height); - var canvasData = tempCanvas.context.getImageData(0, 0, width, height); - canvasData.data.set(webGLPixels); - - tempCanvas.context.putImageData(canvasData, 0, 0); - - return tempCanvas.canvas; - } - else - { - if(!frame) - { - frame = tempRect; - frame.width = this.textureBuffer.canvas.width; - frame.height = this.textureBuffer.canvas.height; - } - - if(frame.width === this.textureBuffer.canvas.width && - frame.height === this.textureBuffer.canvas.height ) - { - return this.textureBuffer.canvas; - } - else - { - - var resolution = this.resolution; - - var tempCanvas2 = new CanvasBuffer(frame.width * resolution, frame.height * resolution); - var canvasData2 = this.textureBuffer.context.getImageData(frame.x * resolution, frame.y * resolution, frame.width * resolution, frame.height * resolution); - - tempCanvas2.context.putImageData(canvasData2, 0, 0); - - return tempCanvas2.canvas; - } - } -}; - -/** - * Will return a one-dimensional array containing the pixel data of the entire texture in RGBA order, with integer values between 0 and 255 (included). - * - * @return {Uint8ClampedArray} - */ -BaseRenderTexture.prototype.getPixels = function ( frame ) -{ - if(!frame) - { - frame = tempRect; - frame.width = this.textureBuffer.size.width; - frame.height = this.textureBuffer.size.height; - } - - var width = frame.width * this.resolution; - var height = frame.height * this.resolution; - - if (this.renderer.type === CONST.RENDERER_TYPE.WEBGL) - { - var gl = this.renderer.gl; - - var webGLPixels = new Uint8Array(4 * width * height); - - gl.bindFramebuffer(gl.FRAMEBUFFER, this.textureBuffer.frameBuffer); - gl.readPixels(frame.x * this.resolution, frame.y * this.resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); - gl.bindFramebuffer(gl.FRAMEBUFFER, null); - - return webGLPixels; - } - else - { - return this.textureBuffer.canvas.getContext('2d').getImageData(frame.x * this.resolution, frame.y * this.resolution, width, height).data; - } -}; - -/** - * Will return a one-dimensional array containing the pixel data of a pixel within the texture in RGBA order, with integer values between 0 and 255 (included). - * - * @param x {number} The x coordinate of the pixel to retrieve. - * @param y {number} The y coordinate of the pixel to retrieve. - * @return {Uint8ClampedArray} - */ -BaseRenderTexture.prototype.getPixel = function (frame, x, y) -{ - tempRect.x = x; - tempRect.y = y; - tempRect.width = 1 / this.resolution; - tempRect.height = 1 / this.resolution; - - if(frame) - { - tempRect.x += frame.x; - tempRect.y += frame.y; - } - - return this.getPixels(tempRect); -}; diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js new file mode 100644 index 0000000..8c901c8 --- /dev/null +++ b/src/extract/canvas/CanvasExtract.js @@ -0,0 +1,136 @@ +var core = require('../../core'); +tempRect = new core.Rectangle(); + +/** + * The extract manager provides functionality to export content from the renderers + * @class + * @memberof PIXI + * @param renderer {PIXI.WebGLRenderer} A reference to the current renderer + */ +function WebGLExtract(renderer) +{ + this.renderer = renderer; + renderer.extract = this; +} + + +WebGLExtract.prototype.constructor = WebGLExtract; +module.exports = WebGLExtract; + +/** + * Will return a HTML Image of the target + * + * @return {Image} + * @param target {PIXI.DisplayObject|PIXI.RenderTexture} A displayObject or renderTexture to convert. If left empty will use use the main renderer + */ +WebGLExtract.prototype.image = function ( target ) +{ + var image = new Image(); + image.src = this.base64( target ); + return image; +} + +/** + * Will return a a base64 encoded string of this target. It works by calling WebGLExtract.getCanvas and then running toDataURL on that. + * @param target {PIXI.DisplayObject|PIXI.RenderTexture} A displayObject or renderTexture to convert. If left empty will use use the main renderer + * @return {string} A base64 encoded string of the texture. + */ +WebGLExtract.prototype.base64 = function ( target ) +{ + return this.canvas( target ).toDataURL(); +}; + +/** + * Creates a Canvas element, renders this target to it and then returns it. + * @param target {PIXI.DisplayObject|PIXI.RenderTexture} A displayObject or renderTexture to convert. If left empty will use use the main renderer + * @return {HTMLCanvasElement} A Canvas element with the texture rendered on. + */ +WebGLExtract.prototype.canvas = function ( target ) +{ + var renderer = this.renderer; + var context; + var resolution; + var frame; + var renderTexture; + + if(target) + { + if(target instanceof core.RenderTexture) + { + renderTexture = target; + } + else + { + renderTexture = this.renderer.generateTexture(target); + } + } + + if(renderTexture) + { + context = renderTexture.baseTexture._canvasRenderTarget.context; + resolution = renderTexture.baseTexture._canvasRenderTarget.resolution; + frame = renderTexture.frame; + } + else + { + context = this.renderer.rootContext; + resolution = this.renderer.rootResolution; + + frame = tempRect; + frame.width = this.renderer.width; + frame.height = this.renderer.height; + } + + var width = frame.width * resolution; + var height = frame.height * resolution; + + var canvasBuffer = new core.CanvasRenderTarget(width, height); + var canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); + canvasBuffer.context.putImageData(canvasData, 0, 0); + + + // send the canvas back.. + return canvasBuffer.canvas; +}; + +/** + * Will return a one-dimensional array containing the pixel data of the entire texture in RGBA order, with integer values between 0 and 255 (included). + * @param target {PIXI.DisplayObject|PIXI.RenderTexture} A displayObject or renderTexture to convert. If left empty will use use the main renderer + * @return {Uint8ClampedArray} + */ +WebGLExtract.prototype.pixels = function ( renderTexture ) +{ + var renderer = this.renderer; + var context; + var resolution; + + if(renderTexture) + { + context = renderTexture.baseTexture._canvasRenderTarget.context; + resolution = renderTexture.baseTexture._canvasRenderTarget.resolution; + frame = renderTexture.frame; + } + else + { + context = this.renderer.rootContext; + resolution = this.renderer.rootResolution; + + frame = tempRect; + frame.width = this.renderer.width; + frame.height = this.renderer.height; + } + + return context.getImageData(0, 0, frame.width * resolution, frame.height * resolution).data; +}; + +/** + * Destroys the extract + * + */ +WebGLExtract.prototype.destroy = function () +{ + this.renderer.extract = null; + this.renderer = null; +}; + +core.CanvasRenderer.registerPlugin('extract', WebGLExtract); diff --git a/src/extract/index.js b/src/extract/index.js new file mode 100644 index 0000000..28195ea --- /dev/null +++ b/src/extract/index.js @@ -0,0 +1,5 @@ + +module.exports = { + webGL: require('./webgl/WebGLExtract'), + canvas: require('./canvas/CanvasExtract') +} \ No newline at end of file diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js new file mode 100644 index 0000000..caf54c3 --- /dev/null +++ b/src/extract/webgl/WebGLExtract.js @@ -0,0 +1,183 @@ +var core = require('../../core'); +tempRect = new core.Rectangle(); + +/** + * The extract manager provides functionality to export content from the renderers + * @class + * @memberof PIXI + * @param renderer {PIXI.CanvasRenderer} A reference to the current renderer + */ +function Extract(renderer) +{ + this.renderer = renderer; + renderer.extract = this; +} + + +Extract.prototype.constructor = Extract; +module.exports = Extract; + +/** + * Will return a HTML Image of the target + * + * @return {Image} + * @param target {PIXI.DisplayObject|PIXI.RenderTexture} A displayObject or renderTexture to convert. If left empty will use use the main renderer + */ +Extract.prototype.image = function ( target ) +{ + var image = new Image(); + image.src = this.base64( target ); + return image; +} + +/** + * Will return a a base64 encoded string of this target. It works by calling WebGLExtract.getCanvas and then running toDataURL on that. + * @param target {PIXI.DisplayObject|PIXI.RenderTexture} A displayObject or renderTexture to convert. If left empty will use use the main renderer + * @return {string} A base64 encoded string of the texture. + */ +Extract.prototype.base64 = function ( target ) +{ + return this.canvas( target ).toDataURL(); +}; + +/** + * Creates a Canvas element, renders this target to it and then returns it. + * @param target {PIXI.DisplayObject|PIXI.RenderTexture} A displayObject or renderTexture to convert. If left empty will use use the main renderer + * @return {HTMLCanvasElement} A Canvas element with the texture rendered on. + */ +Extract.prototype.canvas = function ( target ) +{ + var renderer = this.renderer; + var textureBuffer; + var resolution; + var frame; + var flipY = false; + var renderTexture; + + if(target) + { + if(target instanceof core.RenderTexture) + { + renderTexture = target; + } + else + { + renderTexture = this.renderer.generateTexture(target); + + } + } + + if(renderTexture) + { + textureBuffer = renderTexture.baseTexture._glRenderTargets[this.renderer.CONTEXT_UID]; + resolution = textureBuffer.resolution; + frame = renderTexture.frame; + flipY = false; + } + else + { + textureBuffer = this.renderer.rootRenderTarget; + resolution = textureBuffer.resolution; + flipY = true; + + frame = tempRect; + frame.width = textureBuffer.size.width; + frame.height = textureBuffer.size.height; + + } + + + + var width = frame.width * resolution; + var height = frame.height * resolution; + + var canvasBuffer = new core.CanvasRenderTarget(width, height); + + if(textureBuffer) + { + // bind the buffer + renderer.bindRenderTarget(textureBuffer); + + // set up an array of pixels + var webGLPixels = new Uint8Array(4 * width * height); + + // read pixels to the array + var gl = renderer.gl; + gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); + + // add the pixels to the canvas + var canvasData = canvasBuffer.context.getImageData(0, 0, width, height); + canvasData.data.set(webGLPixels); + + canvasBuffer.context.putImageData(canvasData, 0, 0); + + // pulling pixels + if(flipY) + { + canvasBuffer.context.scale(1, -1); + canvasBuffer.context.drawImage(canvasBuffer.canvas, 0,-height); + } + } + + // send the canvas back.. + return canvasBuffer.canvas; +}; + +/** + * Will return a one-dimensional array containing the pixel data of the entire texture in RGBA order, with integer values between 0 and 255 (included). + * @param target {PIXI.DisplayObject|PIXI.RenderTexture} A displayObject or renderTexture to convert. If left empty will use use the main renderer + * @return {Uint8ClampedArray} + */ +Extract.prototype.pixels = function ( renderTexture, area ) +{ + var renderer = this.renderer; + var textureBuffer; + var resolution; + + if(renderTexture) + { + textureBuffer = renderTexture.baseTexture._glRenderTargets[this.renderer.CONTEXT_UID]; + resolution = textureBuffer.resolution; + frame = renderTexture.frame; + + } + else + { + textureBuffer = this.renderer.rootRenderTarget; + resolution = textureBuffer.resolution; + + frame = tempRect; + frame.width = textureBuffer.size.width; + frame.height = textureBuffer.size.height; + } + + var width = frame.width * resolution; + var height = frame.height * resolution; + + var gl = this.renderer.gl; + + var webGLPixels = new Uint8Array(4 * width * height); + + if(textureBuffer) + { + // bind the buffer + renderer.bindRenderTarget(textureBuffer); + // read pixels to the array + var gl = renderer.gl; + gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); + } + + return webGLPixels; +}; + +/** + * Destroys the extract + * + */ +Extract.prototype.destroy = function () +{ + this.renderer.extract = null; + this.renderer = null; +}; + +core.WebGLRenderer.registerPlugin('extract', Extract); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index d5b9d4d..2928363 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -1,7 +1,6 @@ var BaseTexture = require('./BaseTexture'), math = require('../math'), - CONST = require('../const'), - tempRect = new math.Rectangle(); + CONST = require('../const'); /** * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. @@ -136,148 +135,3 @@ this.renderer = null; }; -/** - * Will return a HTML Image of the texture - * - * @return {Image} - */ -BaseRenderTexture.prototype.getImage = function (frame) -{ - var image = new Image(); - image.src = this.getBase64(frame); - return image; -}; - -/** - * Will return a a base64 encoded string of this texture. It works by calling BaseRenderTexture.getCanvas and then running toDataURL on that. - * - * @return {string} A base64 encoded string of the texture. - */ -BaseRenderTexture.prototype.getBase64 = function ( frame ) -{ - return this.getCanvas(frame).toDataURL(); -}; - -/** - * Creates a Canvas element, renders this BaseRenderTexture to it and then returns it. - * - * @return {HTMLCanvasElement} A Canvas element with the texture rendered on. - */ -BaseRenderTexture.prototype.getCanvas = function ( frame ) -{ - - - if (this.renderer.type === CONST.RENDERER_TYPE.WEBGL) - { - if(!frame) - { - frame = tempRect; - frame.width = this.textureBuffer.size.width; - frame.height = this.textureBuffer.size.height; - } - - var width = frame.width * this.resolution; - var height = frame.height * this.resolution; - - var gl = this.renderer.gl; - - var webGLPixels = new Uint8Array(4 * width * height); - - gl.bindFramebuffer(gl.FRAMEBUFFER, this.textureBuffer.frameBuffer); - gl.readPixels(frame.x * this.resolution, frame.y * this.resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); - gl.bindFramebuffer(gl.FRAMEBUFFER, null); - - var tempCanvas = new CanvasBuffer(width, height); - var canvasData = tempCanvas.context.getImageData(0, 0, width, height); - canvasData.data.set(webGLPixels); - - tempCanvas.context.putImageData(canvasData, 0, 0); - - return tempCanvas.canvas; - } - else - { - if(!frame) - { - frame = tempRect; - frame.width = this.textureBuffer.canvas.width; - frame.height = this.textureBuffer.canvas.height; - } - - if(frame.width === this.textureBuffer.canvas.width && - frame.height === this.textureBuffer.canvas.height ) - { - return this.textureBuffer.canvas; - } - else - { - - var resolution = this.resolution; - - var tempCanvas2 = new CanvasBuffer(frame.width * resolution, frame.height * resolution); - var canvasData2 = this.textureBuffer.context.getImageData(frame.x * resolution, frame.y * resolution, frame.width * resolution, frame.height * resolution); - - tempCanvas2.context.putImageData(canvasData2, 0, 0); - - return tempCanvas2.canvas; - } - } -}; - -/** - * Will return a one-dimensional array containing the pixel data of the entire texture in RGBA order, with integer values between 0 and 255 (included). - * - * @return {Uint8ClampedArray} - */ -BaseRenderTexture.prototype.getPixels = function ( frame ) -{ - if(!frame) - { - frame = tempRect; - frame.width = this.textureBuffer.size.width; - frame.height = this.textureBuffer.size.height; - } - - var width = frame.width * this.resolution; - var height = frame.height * this.resolution; - - if (this.renderer.type === CONST.RENDERER_TYPE.WEBGL) - { - var gl = this.renderer.gl; - - var webGLPixels = new Uint8Array(4 * width * height); - - gl.bindFramebuffer(gl.FRAMEBUFFER, this.textureBuffer.frameBuffer); - gl.readPixels(frame.x * this.resolution, frame.y * this.resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); - gl.bindFramebuffer(gl.FRAMEBUFFER, null); - - return webGLPixels; - } - else - { - return this.textureBuffer.canvas.getContext('2d').getImageData(frame.x * this.resolution, frame.y * this.resolution, width, height).data; - } -}; - -/** - * Will return a one-dimensional array containing the pixel data of a pixel within the texture in RGBA order, with integer values between 0 and 255 (included). - * - * @param x {number} The x coordinate of the pixel to retrieve. - * @param y {number} The y coordinate of the pixel to retrieve. - * @return {Uint8ClampedArray} - */ -BaseRenderTexture.prototype.getPixel = function (frame, x, y) -{ - tempRect.x = x; - tempRect.y = y; - tempRect.width = 1 / this.resolution; - tempRect.height = 1 / this.resolution; - - if(frame) - { - tempRect.x += frame.x; - tempRect.y += frame.y; - } - - return this.getPixels(tempRect); -}; diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js new file mode 100644 index 0000000..8c901c8 --- /dev/null +++ b/src/extract/canvas/CanvasExtract.js @@ -0,0 +1,136 @@ +var core = require('../../core'); +tempRect = new core.Rectangle(); + +/** + * The extract manager provides functionality to export content from the renderers + * @class + * @memberof PIXI + * @param renderer {PIXI.WebGLRenderer} A reference to the current renderer + */ +function WebGLExtract(renderer) +{ + this.renderer = renderer; + renderer.extract = this; +} + + +WebGLExtract.prototype.constructor = WebGLExtract; +module.exports = WebGLExtract; + +/** + * Will return a HTML Image of the target + * + * @return {Image} + * @param target {PIXI.DisplayObject|PIXI.RenderTexture} A displayObject or renderTexture to convert. If left empty will use use the main renderer + */ +WebGLExtract.prototype.image = function ( target ) +{ + var image = new Image(); + image.src = this.base64( target ); + return image; +} + +/** + * Will return a a base64 encoded string of this target. It works by calling WebGLExtract.getCanvas and then running toDataURL on that. + * @param target {PIXI.DisplayObject|PIXI.RenderTexture} A displayObject or renderTexture to convert. If left empty will use use the main renderer + * @return {string} A base64 encoded string of the texture. + */ +WebGLExtract.prototype.base64 = function ( target ) +{ + return this.canvas( target ).toDataURL(); +}; + +/** + * Creates a Canvas element, renders this target to it and then returns it. + * @param target {PIXI.DisplayObject|PIXI.RenderTexture} A displayObject or renderTexture to convert. If left empty will use use the main renderer + * @return {HTMLCanvasElement} A Canvas element with the texture rendered on. + */ +WebGLExtract.prototype.canvas = function ( target ) +{ + var renderer = this.renderer; + var context; + var resolution; + var frame; + var renderTexture; + + if(target) + { + if(target instanceof core.RenderTexture) + { + renderTexture = target; + } + else + { + renderTexture = this.renderer.generateTexture(target); + } + } + + if(renderTexture) + { + context = renderTexture.baseTexture._canvasRenderTarget.context; + resolution = renderTexture.baseTexture._canvasRenderTarget.resolution; + frame = renderTexture.frame; + } + else + { + context = this.renderer.rootContext; + resolution = this.renderer.rootResolution; + + frame = tempRect; + frame.width = this.renderer.width; + frame.height = this.renderer.height; + } + + var width = frame.width * resolution; + var height = frame.height * resolution; + + var canvasBuffer = new core.CanvasRenderTarget(width, height); + var canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); + canvasBuffer.context.putImageData(canvasData, 0, 0); + + + // send the canvas back.. + return canvasBuffer.canvas; +}; + +/** + * Will return a one-dimensional array containing the pixel data of the entire texture in RGBA order, with integer values between 0 and 255 (included). + * @param target {PIXI.DisplayObject|PIXI.RenderTexture} A displayObject or renderTexture to convert. If left empty will use use the main renderer + * @return {Uint8ClampedArray} + */ +WebGLExtract.prototype.pixels = function ( renderTexture ) +{ + var renderer = this.renderer; + var context; + var resolution; + + if(renderTexture) + { + context = renderTexture.baseTexture._canvasRenderTarget.context; + resolution = renderTexture.baseTexture._canvasRenderTarget.resolution; + frame = renderTexture.frame; + } + else + { + context = this.renderer.rootContext; + resolution = this.renderer.rootResolution; + + frame = tempRect; + frame.width = this.renderer.width; + frame.height = this.renderer.height; + } + + return context.getImageData(0, 0, frame.width * resolution, frame.height * resolution).data; +}; + +/** + * Destroys the extract + * + */ +WebGLExtract.prototype.destroy = function () +{ + this.renderer.extract = null; + this.renderer = null; +}; + +core.CanvasRenderer.registerPlugin('extract', WebGLExtract); diff --git a/src/extract/index.js b/src/extract/index.js new file mode 100644 index 0000000..28195ea --- /dev/null +++ b/src/extract/index.js @@ -0,0 +1,5 @@ + +module.exports = { + webGL: require('./webgl/WebGLExtract'), + canvas: require('./canvas/CanvasExtract') +} \ No newline at end of file diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js new file mode 100644 index 0000000..caf54c3 --- /dev/null +++ b/src/extract/webgl/WebGLExtract.js @@ -0,0 +1,183 @@ +var core = require('../../core'); +tempRect = new core.Rectangle(); + +/** + * The extract manager provides functionality to export content from the renderers + * @class + * @memberof PIXI + * @param renderer {PIXI.CanvasRenderer} A reference to the current renderer + */ +function Extract(renderer) +{ + this.renderer = renderer; + renderer.extract = this; +} + + +Extract.prototype.constructor = Extract; +module.exports = Extract; + +/** + * Will return a HTML Image of the target + * + * @return {Image} + * @param target {PIXI.DisplayObject|PIXI.RenderTexture} A displayObject or renderTexture to convert. If left empty will use use the main renderer + */ +Extract.prototype.image = function ( target ) +{ + var image = new Image(); + image.src = this.base64( target ); + return image; +} + +/** + * Will return a a base64 encoded string of this target. It works by calling WebGLExtract.getCanvas and then running toDataURL on that. + * @param target {PIXI.DisplayObject|PIXI.RenderTexture} A displayObject or renderTexture to convert. If left empty will use use the main renderer + * @return {string} A base64 encoded string of the texture. + */ +Extract.prototype.base64 = function ( target ) +{ + return this.canvas( target ).toDataURL(); +}; + +/** + * Creates a Canvas element, renders this target to it and then returns it. + * @param target {PIXI.DisplayObject|PIXI.RenderTexture} A displayObject or renderTexture to convert. If left empty will use use the main renderer + * @return {HTMLCanvasElement} A Canvas element with the texture rendered on. + */ +Extract.prototype.canvas = function ( target ) +{ + var renderer = this.renderer; + var textureBuffer; + var resolution; + var frame; + var flipY = false; + var renderTexture; + + if(target) + { + if(target instanceof core.RenderTexture) + { + renderTexture = target; + } + else + { + renderTexture = this.renderer.generateTexture(target); + + } + } + + if(renderTexture) + { + textureBuffer = renderTexture.baseTexture._glRenderTargets[this.renderer.CONTEXT_UID]; + resolution = textureBuffer.resolution; + frame = renderTexture.frame; + flipY = false; + } + else + { + textureBuffer = this.renderer.rootRenderTarget; + resolution = textureBuffer.resolution; + flipY = true; + + frame = tempRect; + frame.width = textureBuffer.size.width; + frame.height = textureBuffer.size.height; + + } + + + + var width = frame.width * resolution; + var height = frame.height * resolution; + + var canvasBuffer = new core.CanvasRenderTarget(width, height); + + if(textureBuffer) + { + // bind the buffer + renderer.bindRenderTarget(textureBuffer); + + // set up an array of pixels + var webGLPixels = new Uint8Array(4 * width * height); + + // read pixels to the array + var gl = renderer.gl; + gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); + + // add the pixels to the canvas + var canvasData = canvasBuffer.context.getImageData(0, 0, width, height); + canvasData.data.set(webGLPixels); + + canvasBuffer.context.putImageData(canvasData, 0, 0); + + // pulling pixels + if(flipY) + { + canvasBuffer.context.scale(1, -1); + canvasBuffer.context.drawImage(canvasBuffer.canvas, 0,-height); + } + } + + // send the canvas back.. + return canvasBuffer.canvas; +}; + +/** + * Will return a one-dimensional array containing the pixel data of the entire texture in RGBA order, with integer values between 0 and 255 (included). + * @param target {PIXI.DisplayObject|PIXI.RenderTexture} A displayObject or renderTexture to convert. If left empty will use use the main renderer + * @return {Uint8ClampedArray} + */ +Extract.prototype.pixels = function ( renderTexture, area ) +{ + var renderer = this.renderer; + var textureBuffer; + var resolution; + + if(renderTexture) + { + textureBuffer = renderTexture.baseTexture._glRenderTargets[this.renderer.CONTEXT_UID]; + resolution = textureBuffer.resolution; + frame = renderTexture.frame; + + } + else + { + textureBuffer = this.renderer.rootRenderTarget; + resolution = textureBuffer.resolution; + + frame = tempRect; + frame.width = textureBuffer.size.width; + frame.height = textureBuffer.size.height; + } + + var width = frame.width * resolution; + var height = frame.height * resolution; + + var gl = this.renderer.gl; + + var webGLPixels = new Uint8Array(4 * width * height); + + if(textureBuffer) + { + // bind the buffer + renderer.bindRenderTarget(textureBuffer); + // read pixels to the array + var gl = renderer.gl; + gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); + } + + return webGLPixels; +}; + +/** + * Destroys the extract + * + */ +Extract.prototype.destroy = function () +{ + this.renderer.extract = null; + this.renderer = null; +}; + +core.WebGLRenderer.registerPlugin('extract', Extract); diff --git a/src/index.js b/src/index.js index 3791291..28e86ad 100644 --- a/src/index.js +++ b/src/index.js @@ -11,6 +11,7 @@ core.mesh = require('./mesh'); core.particles = require('./particles'); core.accessibility = require('./accessibility'); +core.extract = require('./extract'); // export a premade loader instance /** diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index d5b9d4d..2928363 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -1,7 +1,6 @@ var BaseTexture = require('./BaseTexture'), math = require('../math'), - CONST = require('../const'), - tempRect = new math.Rectangle(); + CONST = require('../const'); /** * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. @@ -136,148 +135,3 @@ this.renderer = null; }; -/** - * Will return a HTML Image of the texture - * - * @return {Image} - */ -BaseRenderTexture.prototype.getImage = function (frame) -{ - var image = new Image(); - image.src = this.getBase64(frame); - return image; -}; - -/** - * Will return a a base64 encoded string of this texture. It works by calling BaseRenderTexture.getCanvas and then running toDataURL on that. - * - * @return {string} A base64 encoded string of the texture. - */ -BaseRenderTexture.prototype.getBase64 = function ( frame ) -{ - return this.getCanvas(frame).toDataURL(); -}; - -/** - * Creates a Canvas element, renders this BaseRenderTexture to it and then returns it. - * - * @return {HTMLCanvasElement} A Canvas element with the texture rendered on. - */ -BaseRenderTexture.prototype.getCanvas = function ( frame ) -{ - - - if (this.renderer.type === CONST.RENDERER_TYPE.WEBGL) - { - if(!frame) - { - frame = tempRect; - frame.width = this.textureBuffer.size.width; - frame.height = this.textureBuffer.size.height; - } - - var width = frame.width * this.resolution; - var height = frame.height * this.resolution; - - var gl = this.renderer.gl; - - var webGLPixels = new Uint8Array(4 * width * height); - - gl.bindFramebuffer(gl.FRAMEBUFFER, this.textureBuffer.frameBuffer); - gl.readPixels(frame.x * this.resolution, frame.y * this.resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); - gl.bindFramebuffer(gl.FRAMEBUFFER, null); - - var tempCanvas = new CanvasBuffer(width, height); - var canvasData = tempCanvas.context.getImageData(0, 0, width, height); - canvasData.data.set(webGLPixels); - - tempCanvas.context.putImageData(canvasData, 0, 0); - - return tempCanvas.canvas; - } - else - { - if(!frame) - { - frame = tempRect; - frame.width = this.textureBuffer.canvas.width; - frame.height = this.textureBuffer.canvas.height; - } - - if(frame.width === this.textureBuffer.canvas.width && - frame.height === this.textureBuffer.canvas.height ) - { - return this.textureBuffer.canvas; - } - else - { - - var resolution = this.resolution; - - var tempCanvas2 = new CanvasBuffer(frame.width * resolution, frame.height * resolution); - var canvasData2 = this.textureBuffer.context.getImageData(frame.x * resolution, frame.y * resolution, frame.width * resolution, frame.height * resolution); - - tempCanvas2.context.putImageData(canvasData2, 0, 0); - - return tempCanvas2.canvas; - } - } -}; - -/** - * Will return a one-dimensional array containing the pixel data of the entire texture in RGBA order, with integer values between 0 and 255 (included). - * - * @return {Uint8ClampedArray} - */ -BaseRenderTexture.prototype.getPixels = function ( frame ) -{ - if(!frame) - { - frame = tempRect; - frame.width = this.textureBuffer.size.width; - frame.height = this.textureBuffer.size.height; - } - - var width = frame.width * this.resolution; - var height = frame.height * this.resolution; - - if (this.renderer.type === CONST.RENDERER_TYPE.WEBGL) - { - var gl = this.renderer.gl; - - var webGLPixels = new Uint8Array(4 * width * height); - - gl.bindFramebuffer(gl.FRAMEBUFFER, this.textureBuffer.frameBuffer); - gl.readPixels(frame.x * this.resolution, frame.y * this.resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); - gl.bindFramebuffer(gl.FRAMEBUFFER, null); - - return webGLPixels; - } - else - { - return this.textureBuffer.canvas.getContext('2d').getImageData(frame.x * this.resolution, frame.y * this.resolution, width, height).data; - } -}; - -/** - * Will return a one-dimensional array containing the pixel data of a pixel within the texture in RGBA order, with integer values between 0 and 255 (included). - * - * @param x {number} The x coordinate of the pixel to retrieve. - * @param y {number} The y coordinate of the pixel to retrieve. - * @return {Uint8ClampedArray} - */ -BaseRenderTexture.prototype.getPixel = function (frame, x, y) -{ - tempRect.x = x; - tempRect.y = y; - tempRect.width = 1 / this.resolution; - tempRect.height = 1 / this.resolution; - - if(frame) - { - tempRect.x += frame.x; - tempRect.y += frame.y; - } - - return this.getPixels(tempRect); -}; diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js new file mode 100644 index 0000000..8c901c8 --- /dev/null +++ b/src/extract/canvas/CanvasExtract.js @@ -0,0 +1,136 @@ +var core = require('../../core'); +tempRect = new core.Rectangle(); + +/** + * The extract manager provides functionality to export content from the renderers + * @class + * @memberof PIXI + * @param renderer {PIXI.WebGLRenderer} A reference to the current renderer + */ +function WebGLExtract(renderer) +{ + this.renderer = renderer; + renderer.extract = this; +} + + +WebGLExtract.prototype.constructor = WebGLExtract; +module.exports = WebGLExtract; + +/** + * Will return a HTML Image of the target + * + * @return {Image} + * @param target {PIXI.DisplayObject|PIXI.RenderTexture} A displayObject or renderTexture to convert. If left empty will use use the main renderer + */ +WebGLExtract.prototype.image = function ( target ) +{ + var image = new Image(); + image.src = this.base64( target ); + return image; +} + +/** + * Will return a a base64 encoded string of this target. It works by calling WebGLExtract.getCanvas and then running toDataURL on that. + * @param target {PIXI.DisplayObject|PIXI.RenderTexture} A displayObject or renderTexture to convert. If left empty will use use the main renderer + * @return {string} A base64 encoded string of the texture. + */ +WebGLExtract.prototype.base64 = function ( target ) +{ + return this.canvas( target ).toDataURL(); +}; + +/** + * Creates a Canvas element, renders this target to it and then returns it. + * @param target {PIXI.DisplayObject|PIXI.RenderTexture} A displayObject or renderTexture to convert. If left empty will use use the main renderer + * @return {HTMLCanvasElement} A Canvas element with the texture rendered on. + */ +WebGLExtract.prototype.canvas = function ( target ) +{ + var renderer = this.renderer; + var context; + var resolution; + var frame; + var renderTexture; + + if(target) + { + if(target instanceof core.RenderTexture) + { + renderTexture = target; + } + else + { + renderTexture = this.renderer.generateTexture(target); + } + } + + if(renderTexture) + { + context = renderTexture.baseTexture._canvasRenderTarget.context; + resolution = renderTexture.baseTexture._canvasRenderTarget.resolution; + frame = renderTexture.frame; + } + else + { + context = this.renderer.rootContext; + resolution = this.renderer.rootResolution; + + frame = tempRect; + frame.width = this.renderer.width; + frame.height = this.renderer.height; + } + + var width = frame.width * resolution; + var height = frame.height * resolution; + + var canvasBuffer = new core.CanvasRenderTarget(width, height); + var canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); + canvasBuffer.context.putImageData(canvasData, 0, 0); + + + // send the canvas back.. + return canvasBuffer.canvas; +}; + +/** + * Will return a one-dimensional array containing the pixel data of the entire texture in RGBA order, with integer values between 0 and 255 (included). + * @param target {PIXI.DisplayObject|PIXI.RenderTexture} A displayObject or renderTexture to convert. If left empty will use use the main renderer + * @return {Uint8ClampedArray} + */ +WebGLExtract.prototype.pixels = function ( renderTexture ) +{ + var renderer = this.renderer; + var context; + var resolution; + + if(renderTexture) + { + context = renderTexture.baseTexture._canvasRenderTarget.context; + resolution = renderTexture.baseTexture._canvasRenderTarget.resolution; + frame = renderTexture.frame; + } + else + { + context = this.renderer.rootContext; + resolution = this.renderer.rootResolution; + + frame = tempRect; + frame.width = this.renderer.width; + frame.height = this.renderer.height; + } + + return context.getImageData(0, 0, frame.width * resolution, frame.height * resolution).data; +}; + +/** + * Destroys the extract + * + */ +WebGLExtract.prototype.destroy = function () +{ + this.renderer.extract = null; + this.renderer = null; +}; + +core.CanvasRenderer.registerPlugin('extract', WebGLExtract); diff --git a/src/extract/index.js b/src/extract/index.js new file mode 100644 index 0000000..28195ea --- /dev/null +++ b/src/extract/index.js @@ -0,0 +1,5 @@ + +module.exports = { + webGL: require('./webgl/WebGLExtract'), + canvas: require('./canvas/CanvasExtract') +} \ No newline at end of file diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js new file mode 100644 index 0000000..caf54c3 --- /dev/null +++ b/src/extract/webgl/WebGLExtract.js @@ -0,0 +1,183 @@ +var core = require('../../core'); +tempRect = new core.Rectangle(); + +/** + * The extract manager provides functionality to export content from the renderers + * @class + * @memberof PIXI + * @param renderer {PIXI.CanvasRenderer} A reference to the current renderer + */ +function Extract(renderer) +{ + this.renderer = renderer; + renderer.extract = this; +} + + +Extract.prototype.constructor = Extract; +module.exports = Extract; + +/** + * Will return a HTML Image of the target + * + * @return {Image} + * @param target {PIXI.DisplayObject|PIXI.RenderTexture} A displayObject or renderTexture to convert. If left empty will use use the main renderer + */ +Extract.prototype.image = function ( target ) +{ + var image = new Image(); + image.src = this.base64( target ); + return image; +} + +/** + * Will return a a base64 encoded string of this target. It works by calling WebGLExtract.getCanvas and then running toDataURL on that. + * @param target {PIXI.DisplayObject|PIXI.RenderTexture} A displayObject or renderTexture to convert. If left empty will use use the main renderer + * @return {string} A base64 encoded string of the texture. + */ +Extract.prototype.base64 = function ( target ) +{ + return this.canvas( target ).toDataURL(); +}; + +/** + * Creates a Canvas element, renders this target to it and then returns it. + * @param target {PIXI.DisplayObject|PIXI.RenderTexture} A displayObject or renderTexture to convert. If left empty will use use the main renderer + * @return {HTMLCanvasElement} A Canvas element with the texture rendered on. + */ +Extract.prototype.canvas = function ( target ) +{ + var renderer = this.renderer; + var textureBuffer; + var resolution; + var frame; + var flipY = false; + var renderTexture; + + if(target) + { + if(target instanceof core.RenderTexture) + { + renderTexture = target; + } + else + { + renderTexture = this.renderer.generateTexture(target); + + } + } + + if(renderTexture) + { + textureBuffer = renderTexture.baseTexture._glRenderTargets[this.renderer.CONTEXT_UID]; + resolution = textureBuffer.resolution; + frame = renderTexture.frame; + flipY = false; + } + else + { + textureBuffer = this.renderer.rootRenderTarget; + resolution = textureBuffer.resolution; + flipY = true; + + frame = tempRect; + frame.width = textureBuffer.size.width; + frame.height = textureBuffer.size.height; + + } + + + + var width = frame.width * resolution; + var height = frame.height * resolution; + + var canvasBuffer = new core.CanvasRenderTarget(width, height); + + if(textureBuffer) + { + // bind the buffer + renderer.bindRenderTarget(textureBuffer); + + // set up an array of pixels + var webGLPixels = new Uint8Array(4 * width * height); + + // read pixels to the array + var gl = renderer.gl; + gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); + + // add the pixels to the canvas + var canvasData = canvasBuffer.context.getImageData(0, 0, width, height); + canvasData.data.set(webGLPixels); + + canvasBuffer.context.putImageData(canvasData, 0, 0); + + // pulling pixels + if(flipY) + { + canvasBuffer.context.scale(1, -1); + canvasBuffer.context.drawImage(canvasBuffer.canvas, 0,-height); + } + } + + // send the canvas back.. + return canvasBuffer.canvas; +}; + +/** + * Will return a one-dimensional array containing the pixel data of the entire texture in RGBA order, with integer values between 0 and 255 (included). + * @param target {PIXI.DisplayObject|PIXI.RenderTexture} A displayObject or renderTexture to convert. If left empty will use use the main renderer + * @return {Uint8ClampedArray} + */ +Extract.prototype.pixels = function ( renderTexture, area ) +{ + var renderer = this.renderer; + var textureBuffer; + var resolution; + + if(renderTexture) + { + textureBuffer = renderTexture.baseTexture._glRenderTargets[this.renderer.CONTEXT_UID]; + resolution = textureBuffer.resolution; + frame = renderTexture.frame; + + } + else + { + textureBuffer = this.renderer.rootRenderTarget; + resolution = textureBuffer.resolution; + + frame = tempRect; + frame.width = textureBuffer.size.width; + frame.height = textureBuffer.size.height; + } + + var width = frame.width * resolution; + var height = frame.height * resolution; + + var gl = this.renderer.gl; + + var webGLPixels = new Uint8Array(4 * width * height); + + if(textureBuffer) + { + // bind the buffer + renderer.bindRenderTarget(textureBuffer); + // read pixels to the array + var gl = renderer.gl; + gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); + } + + return webGLPixels; +}; + +/** + * Destroys the extract + * + */ +Extract.prototype.destroy = function () +{ + this.renderer.extract = null; + this.renderer = null; +}; + +core.WebGLRenderer.registerPlugin('extract', Extract); diff --git a/src/index.js b/src/index.js index 3791291..28e86ad 100644 --- a/src/index.js +++ b/src/index.js @@ -11,6 +11,7 @@ core.mesh = require('./mesh'); core.particles = require('./particles'); core.accessibility = require('./accessibility'); +core.extract = require('./extract'); // export a premade loader instance /** diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index dbeb410..c9e877f 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -406,7 +406,7 @@ // it has a filterArea! Same as mask but easier, its a rectangle if(hitTest && displayObject.filterArea) { - if(!displayObject.filterArea.containsPoint(point)) + if(!displayObject.filterArea.contains(point)) { hitTest = false; } @@ -420,7 +420,6 @@ for (var i = children.length-1; i >= 0; i--) { - var child = children[i]; // time to get recursive.. if this function will return if somthing is hit..