pxscene_pixi.patch

diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js
index 8960425..d44e19d 100644
--- a/src/core/autoDetectRenderer.js
+++ b/src/core/autoDetectRenderer.js
@@ -1,6 +1,7 @@
 import * as utils from './utils';
 import CanvasRenderer from './renderers/canvas/CanvasRenderer';
 import WebGLRenderer from './renderers/webgl/WebGLRenderer';
+import PXSceneRenderer from './renderers/pxscene/PXSceneRenderer';
 
 /**
  * This helper function will automatically detect which renderer you should be using.
@@ -19,10 +20,19 @@ import WebGLRenderer from './renderers/webgl/WebGLRenderer';
  *      need to call toDataUrl on the webgl context
  * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2
  * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present
- * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer
+ * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer|PIXI.PXSceneRenderer} Returns the detected renderer
  */
 export function autoDetectRenderer(width = 800, height = 600, options, noWebGL)
 {
+    if (utils.isV8())
+    {
+        const PXSceneHelper = require('./utils/PXSceneHelper').default; // eslint-disable-line global-require
+
+        PXSceneHelper.getInstance().injectPxScene(options.view);
+
+        return new PXSceneRenderer(width, height, options);
+    }
+
     if (!noWebGL && utils.isWebGLSupported())
     {
         return new WebGLRenderer(width, height, options);
diff --git a/src/core/const.js b/src/core/const.js
index f9235e4..4d29a35 100644
--- a/src/core/const.js
+++ b/src/core/const.js
@@ -50,11 +50,13 @@ export const DEG_TO_RAD = Math.PI / 180;
  * @property {number} UNKNOWN - Unknown render type.
  * @property {number} WEBGL - WebGL render type.
  * @property {number} CANVAS - Canvas render type.
+ * @property {number} PXSCENE - PXScene render type.
  */
 export const RENDERER_TYPE = {
     UNKNOWN:    0,
     WEBGL:      1,
     CANVAS:     2,
+    PXSCENE:    3,
 };
 
 /**
diff --git a/src/core/display/Container.js b/src/core/display/Container.js
index ed8cd5f..b25ac64 100644
--- a/src/core/display/Container.js
+++ b/src/core/display/Container.js
@@ -317,10 +317,10 @@ export default class Container extends DisplayObject
     {
         this._boundsID++;
 
-        this.transform.updateTransform(this.parent.transform);
-
-        // TODO: check render flags, how to process stuff here
-        this.worldAlpha = this.alpha * this.parent.worldAlpha;
+        if (this.parent)
+        {
+            this.transform.updateTransform(this.parent.transform);
+        }
 
         for (let i = 0, j = this.children.length; i < j; ++i)
         {
@@ -500,6 +500,122 @@ export default class Container extends DisplayObject
     }
 
     /**
+     * To be overridden by the subclass
+     *
+     * @private
+     * @param {PIXI.PXSceneRenderer} renderer - The renderer
+     */
+    _renderPXScene(renderer) // eslint-disable-line no-unused-vars
+    {
+        // this is where content itself gets rendered...
+        if (!this.renderedObject)
+        {
+            const parentRenderedObject = (this.parent && this.parent.renderedObject) || renderer.context;
+
+            this.renderedObject = renderer.view.create({
+                t: 'rect',
+                parent: parentRenderedObject,
+                clip: false,
+                fillColor: 0,
+            });
+        }
+
+        const renderedObject = this.renderedObject;
+
+        renderedObject.cx = this.pivot.x;
+        renderedObject.cy = this.pivot.y;
+        renderedObject.x = (this.x - renderedObject.cx);
+        renderedObject.y = (this.y - renderedObject.cy);
+        renderedObject.w = this.width;
+        renderedObject.h = this.height;
+        renderedObject.r = this.rotation * (180 / Math.PI);
+        renderedObject.sx = this.scale.x;
+        renderedObject.sy = this.scale.y;
+
+        // mask
+        if (this.mask)
+        {
+            const maskRenderedObject = this.mask.renderedObject;
+
+            if (maskRenderedObject)
+            {
+                this.__backupMaskWidth = maskRenderedObject.w;
+                this.__backupMaskHeight = maskRenderedObject.h;
+                this.__backupMaskParent = maskRenderedObject.parent;
+                this.__backupMaskRenderedObject = maskRenderedObject;
+
+                if (this.mask.renderedObjects)
+                {
+                    for (let i = 0, j = this.mask.renderedObjects.length; i < j; ++i)
+                    {
+                        const maskRenderedObject = this.mask.renderedObjects[i];
+
+                        this.mask.renderedObject.w = maskRenderedObject.w;
+                        this.mask.renderedObject.h = maskRenderedObject.h;
+
+                        innerRenderMask.call(this, this.mask.renderedObject);
+                    }
+                }
+                else
+                {
+                    const maskRenderedObject = this.mask.renderedObject;
+
+                    innerRenderMask.call(this, maskRenderedObject);
+                }
+            }
+        }
+        else
+        {
+            const renderedObjectMaskContainer = this.renderedObjectMaskContainer;
+
+            if (renderedObjectMaskContainer)
+            {
+                const maskRenderedObject = this.__backupMaskRenderedObject;
+
+                renderedObject.parent = renderedObjectMaskContainer.parent;
+
+                maskRenderedObject.parent = this.__backupMaskParent;
+
+                renderedObjectMaskContainer.remove();
+
+                maskRenderedObject.w = this.__backupMaskWidth;
+                maskRenderedObject.h = this.__backupMaskHeight;
+                maskRenderedObject.mask = false;
+
+                this.__backupMaskWidth = undefined;
+                this.__backupMaskHeight = undefined;
+                this.__backupMaskParent = undefined;
+                this.__backupMaskRenderedObject = undefined;
+                this.renderedObjectMaskContainer = null;
+            }
+        }
+
+        function innerRenderMask(maskRenderedObject)
+        {
+            if (!this.renderedObjectMaskContainer)
+            {
+                this.renderedObjectMaskContainer = renderer.view.create({
+                    t: 'rect',
+                    parent: renderedObject.parent,
+                    fillColor: 0,
+                });
+            }
+
+            maskRenderedObject.parent = this.renderedObjectMaskContainer;
+            renderedObject.parent = this.renderedObjectMaskContainer;
+
+            const renderedObjectMaskContainer = this.renderedObjectMaskContainer;
+
+            renderedObjectMaskContainer.x = 0;
+            renderedObjectMaskContainer.y = 0;
+            renderedObjectMaskContainer.w = renderer.width;
+            renderedObjectMaskContainer.h = renderer.height;
+
+            maskRenderedObject.mask = true;
+        }
+    }
+
+    /**
      * Renders the object using the Canvas renderer
      *
      * @param {PIXI.CanvasRenderer} renderer - The renderer
@@ -530,6 +646,26 @@ export default class Container extends DisplayObject
     }
 
     /**
+     * Renders the object using the PXScene renderer
+     *
+     * @param {PIXI.PXSceneRenderer} renderer - The renderer
+     */
+    renderPXScene(renderer)
+    {
+        // if not visible or the alpha is 0 then no need to render this
+        if (!this.visible || this.worldAlpha <= 0 || !this.renderable)
+        {
+            return;
+        }
+
+        this._renderPXScene(renderer);
+        for (let i = 0, j = this.children.length; i < j; ++i)
+        {
+            this.children[i].renderPXScene(renderer);
+        }
+    }
+
+    /**
      * Removes all internal references and listeners as well as removes children from the display list.
      * Do not use a Container after calling `destroy`.
      *
@@ -546,6 +682,23 @@ export default class Container extends DisplayObject
     {
         super.destroy();
 
+        this.destroyAllChildren(options);
+    }
+
+    /**
+     * Removes children from the display list.
+     *
+     * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options
+     *  have been set to that value
+     * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy
+     *  method called as well. 'options' will be passed on to those calls.
+     * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true
+     *  Should it destroy the texture of the child sprite
+     * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true
+     *  Should it destroy the base texture of the child sprite
+     */
+    destroyAllChildren(options)
+    {
         const destroyChildren = typeof options === 'boolean' ? options : options && options.children;
 
         const oldChildren = this.removeChildren(0, this.children.length);
@@ -566,7 +719,14 @@ export default class Container extends DisplayObject
      */
     get width()
     {
-        return this.scale.x * this.getLocalBounds().width;
+        const width = this.getLocalBounds().width;
+
+        if (width !== 0)
+        {
+            return this.scale.x * width;
+        }
+
+        return this._width;
     }
 
     set width(value) // eslint-disable-line require-jsdoc
@@ -592,7 +752,14 @@ export default class Container extends DisplayObject
      */
     get height()
     {
-        return this.scale.y * this.getLocalBounds().height;
+        const height = this.getLocalBounds().height;
+
+        if (height !== 0)
+        {
+            return this.scale.y * height;
+        }
+
+        return this._height;
     }
 
     set height(value) // eslint-disable-line require-jsdoc
diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js
index 4e6c77d..41f69ac 100644
--- a/src/core/display/DisplayObject.js
+++ b/src/core/display/DisplayObject.js
@@ -5,6 +5,7 @@ import TransformStatic from './TransformStatic';
 import Transform from './Transform';
 import Bounds from './Bounds';
 import { Rectangle } from '../math';
+import { isV8 } from '../utils';
 // _tempDisplayObjectParent = new DisplayObject();
 
 /**
@@ -331,6 +332,16 @@ export default class DisplayObject extends EventEmitter
     }
 
     /**
+     * Renders the object using the PXScene renderer
+     *
+     * @param {PIXI.PXSceneRenderer} renderer - The renderer
+     */
+    renderPXScene(renderer) // eslint-disable-line no-unused-vars
+    {
+        // OVERWRITE;
+    }
+
+    /**
      * Set the parent Container of this DisplayObject
      *
      * @param {PIXI.Container} container - The Container to add this DisplayObject to
@@ -578,16 +589,23 @@ export default class DisplayObject extends EventEmitter
 
     set mask(value) // eslint-disable-line require-jsdoc
     {
-        if (this._mask)
+        if (isV8())
         {
-            this._mask.renderable = true;
+            this._mask = value;
         }
+        else
+        {
+            if (this._mask)
+            {
+                this._mask.renderable = true;
+            }
 
-        this._mask = value;
+            this._mask = value;
 
-        if (this._mask)
-        {
-            this._mask.renderable = false;
+            if (this._mask)
+            {
+                this._mask.renderable = false;
+            }
         }
     }
 
diff --git a/src/core/graphics/GraphicsV8.js b/src/core/graphics/GraphicsV8.js
new file mode 100644
index 0000000..b409c29
--- /dev/null
+++ b/src/core/graphics/GraphicsV8.js
@@ -0,0 +1,1040 @@
+import Container from '../display/Container';
+import GraphicsData from './GraphicsData';
+import { Point, Rectangle, RoundedRectangle, Ellipse, Polygon, Circle } from '../math';
+import { SHAPES, BLEND_MODES } from '../const';
+import Bounds from '../display/Bounds';
+import bezierCurveTo from './utils/bezierCurveTo';
+
+const tempPoint = new Point();
+
+/**
+ * The Graphics class contains methods used to draw primitive shapes such as lines, circles and
+ * rectangles to the display, and to color and fill them.
+ *
+ * @class
+ * @extends PIXI.Container
+ * @memberof PIXI
+ */
+export default class GraphicsV8 extends Container
+{
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+        super();
+
+        // Native lines default to fault
+        this.nativeLines = false;
+
+        /**
+         * The alpha value used when filling the Graphics object.
+         *
+         * @member {number}
+         * @default 1
+         */
+        this.fillAlpha = 1;
+
+        /**
+         * The width (thickness) of any lines drawn.
+         *
+         * @member {number}
+         * @default 0
+         */
+        this.lineWidth = 0;
+
+        /**
+         * The color of any lines drawn.
+         *
+         * @member {string}
+         * @default 0
+         */
+        this.lineColor = 0;
+
+        /**
+         * Graphics data
+         *
+         * @member {PIXI.GraphicsData[]}
+         * @private
+         */
+        this.graphicsData = [];
+
+        /**
+         * The tint applied to the graphic shape. This is a hex value. Apply a value of 0xFFFFFF to
+         * reset the tint.
+         *
+         * @member {number}
+         * @default 0xFFFFFF
+         */
+        this.tint = 0xFFFFFF;
+
+        /**
+         * The previous tint applied to the graphic shape. Used to compare to the current tint and
+         * check if theres change.
+         *
+         * @member {number}
+         * @private
+         * @default 0xFFFFFF
+         */
+        this._prevTint = 0xFFFFFF;
+
+        /**
+         * The blend mode to be applied to the graphic shape. Apply a value of
+         * `PIXI.BLEND_MODES.NORMAL` to reset the blend mode.
+         *
+         * @member {number}
+         * @default PIXI.BLEND_MODES.NORMAL;
+         * @see PIXI.BLEND_MODES
+         */
+        this.blendMode = BLEND_MODES.NORMAL;
+
+        /**
+         * Current path
+         *
+         * @member {PIXI.GraphicsData}
+         * @private
+         */
+        this.currentPath = null;
+
+        /**
+         * Whether this shape is being used as a mask.
+         *
+         * @member {boolean}
+         */
+        this.isMask = false;
+
+        /**
+         * The bounds' padding used for bounds calculation.
+         *
+         * @member {number}
+         */
+        this.boundsPadding = 0;
+
+        /**
+         * A cache of the local bounds to prevent recalculation.
+         *
+         * @member {PIXI.Rectangle}
+         * @private
+         */
+        this._localBounds = new Bounds();
+
+        /**
+         * Used to detect if the graphics object has changed. If this is set to true then the graphics
+         * object will be recalculated.
+         *
+         * @member {boolean}
+         * @private
+         */
+        this.dirty = 0;
+
+        /**
+         * Used to detect if we need to do a fast rect check using the id compare method
+         * @type {Number}
+         */
+        this.fastRectDirty = -1;
+
+        /**
+         * Used to detect if we clear the graphics webGL data
+         * @type {Number}
+         */
+        this.clearDirty = 0;
+
+        /**
+         * Used to detect if we we need to recalculate local bounds
+         * @type {Number}
+         */
+        this.boundsDirty = -1;
+
+        /**
+         * Used to detect if the cached sprite object needs to be updated.
+         *
+         * @member {boolean}
+         * @private
+         */
+        this.cachedSpriteDirty = false;
+
+        this._spriteRect = null;
+        this._fastRect = false;
+
+        /**
+         * When cacheAsBitmap is set to true the graphics object will be rendered as if it was a sprite.
+         * This is useful if your graphics element does not change often, as it will speed up the rendering
+         * of the object in exchange for taking up texture memory. It is also useful if you need the graphics
+         * object to be anti-aliased, because it will be rendered using canvas. This is not recommended if
+         * you are constantly redrawing the graphics element.
+         *
+         * @name cacheAsBitmap
+         * @member {boolean}
+         * @memberof PIXI.Graphics#
+         * @default false
+         */
+
+        /**
+         * Plugin that is responsible for rendering this element.
+         * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods.
+         *
+         * @member {string}
+         * @default 'TextV8'
+         */
+        this.pluginName = 'graphicsV8';
+
+        // Cached objects for clearing.
+        this.renderedObjects = [];
+    }
+
+    /**
+     * Creates a new Graphics object with the same values as this one.
+     * Note that the only the properties of the object are cloned, not its transform (position,scale,etc)
+     *
+     * @return {PIXI.Graphics} A clone of the graphics object
+     */
+    clone()
+    {
+        const clone = new GraphicsV8();
+
+        clone.renderable = this.renderable;
+        clone.fillAlpha = this.fillAlpha;
+        clone.lineWidth = this.lineWidth;
+        clone.lineColor = this.lineColor;
+        clone.tint = this.tint;
+        clone.blendMode = this.blendMode;
+        clone.isMask = this.isMask;
+        clone.boundsPadding = this.boundsPadding;
+        clone.dirty = 0;
+        clone.cachedSpriteDirty = this.cachedSpriteDirty;
+
+        // copy graphics data
+        for (let i = 0; i < this.graphicsData.length; ++i)
+        {
+            clone.graphicsData.push(this.graphicsData[i].clone());
+        }
+
+        clone.currentPath = clone.graphicsData[clone.graphicsData.length - 1];
+
+        clone.updateLocalBounds();
+
+        return clone;
+    }
+
+    /**
+     * Renders the object using the PXScene renderer
+     *
+     * @private
+     * @param {PIXI.PXSceneRenderer} renderer - The renderer
+     */
+    _renderPXScene(renderer)
+    {
+        super._renderPXScene(renderer);
+
+        // this is where content itself gets rendered...
+        if (this.renderedObject)
+        {
+            this.renderedObject.x = this.x;
+            this.renderedObject.y = this.y;
+            this.renderedObject.w = renderer.view.w;
+            this.renderedObject.h = renderer.view.h;
+            this.renderedObject.sx = this.scale.x;
+            this.renderedObject.sy = this.scale.y;
+        }
+        renderer.plugins[this.pluginName].render(this);
+    }
+
+    /**
+     * Specifies the line style used for subsequent calls to GraphicsV8 methods such as the lineTo()
+     * method or the drawCircle() method.
+     *
+     * @param {number} [lineWidth=0] - width of the line to draw, will update the objects stored style
+     * @param {number} [color=0] - color of the line to draw, will update the objects stored style
+     * @param {number} [alpha=1] - alpha of the line to draw, will update the objects stored style
+     * @return {PIXI.GraphicsV8} This GraphicsV8 object. Good for chaining method calls
+     */
+    lineStyle(lineWidth = 0, color = 0, alpha = 1)
+    {
+        this.lineWidth = lineWidth;
+        this.lineColor = color;
+        this.lineAlpha = alpha;
+
+        if (this.currentPath)
+        {
+            if (this.currentPath.shape.points.length)
+            {
+                // halfway through a line? start a new one!
+                const shape = new Polygon(this.currentPath.shape.points.slice(-2));
+
+                shape.closed = false;
+
+                this.drawShape(shape);
+            }
+            else
+            {
+                // otherwise its empty so lets just set the line properties
+                this.currentPath.lineWidth = this.lineWidth;
+                this.currentPath.lineColor = this.lineColor;
+                this.currentPath.lineAlpha = this.lineAlpha;
+            }
+        }
+
+        return this;
+    }
+
+    /**
+     * Moves the current drawing position to x, y.
+     *
+     * @param {number} x - the X coordinate to move to
+     * @param {number} y - the Y coordinate to move to
+     * @return {PIXI.GraphicsV8} This GraphicsV8 object. Good for chaining method calls
+     */
+    moveTo(x, y)
+    {
+        const shape = new Polygon([x, y]);
+
+        shape.closed = false;
+        this.drawShape(shape);
+
+        return this;
+    }
+
+    /**
+     * Draws a line using the current line style from the current drawing position to (x, y);
+     * The current drawing position is then set to (x, y).
+     *
+     * @param {number} x - the X coordinate to draw to
+     * @param {number} y - the Y coordinate to draw to
+     * @return {PIXI.GraphicsV8} This GraphicsV8 object. Good for chaining method calls
+     */
+    lineTo(x, y)
+    {
+        this.currentPath.shape.points.push(x, y);
+        this.dirty++;
+
+        return this;
+    }
+
+    /**
+     * Calculate the points for a quadratic bezier curve and then draws it.
+     * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c
+     *
+     * @param {number} cpX - Control point x
+     * @param {number} cpY - Control point y
+     * @param {number} toX - Destination point x
+     * @param {number} toY - Destination point y
+     * @return {PIXI.GraphicsV8} This GraphicsV8 object. Good for chaining method calls
+     */
+    quadraticCurveTo(cpX, cpY, toX, toY)
+    {
+        if (this.currentPath)
+        {
+            if (this.currentPath.shape.points.length === 0)
+            {
+                this.currentPath.shape.points = [0, 0];
+            }
+        }
+        else
+        {
+            this.moveTo(0, 0);
+        }
+
+        const n = 20;
+        const points = this.currentPath.shape.points;
+        let xa = 0;
+        let ya = 0;
+
+        if (points.length === 0)
+        {
+            this.moveTo(0, 0);
+        }
+
+        const fromX = points[points.length - 2];
+        const fromY = points[points.length - 1];
+
+        for (let i = 1; i <= n; ++i)
+        {
+            const j = i / n;
+
+            xa = fromX + ((cpX - fromX) * j);
+            ya = fromY + ((cpY - fromY) * j);
+
+            points.push(xa + (((cpX + ((toX - cpX) * j)) - xa) * j),
+                ya + (((cpY + ((toY - cpY) * j)) - ya) * j));
+        }
+
+        this.dirty++;
+
+        return this;
+    }
+
+    /**
+     * Calculate the points for a bezier curve and then draws it.
+     *
+     * @param {number} cpX - Control point x
+     * @param {number} cpY - Control point y
+     * @param {number} cpX2 - Second Control point x
+     * @param {number} cpY2 - Second Control point y
+     * @param {number} toX - Destination point x
+     * @param {number} toY - Destination point y
+     * @return {PIXI.GraphicsV8} This GraphicsV8 object. Good for chaining method calls
+     */
+    bezierCurveTo(cpX, cpY, cpX2, cpY2, toX, toY)
+    {
+        if (this.currentPath)
+        {
+            if (this.currentPath.shape.points.length === 0)
+            {
+                this.currentPath.shape.points = [0, 0];
+            }
+        }
+        else
+        {
+            this.moveTo(0, 0);
+        }
+
+        const points = this.currentPath.shape.points;
+
+        const fromX = points[points.length - 2];
+        const fromY = points[points.length - 1];
+
+        points.length -= 2;
+
+        bezierCurveTo(fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, points);
+
+        this.dirty++;
+
+        return this;
+    }
+
+    /**
+     * The arcTo() method creates an arc/curve between two tangents on the canvas.
+     *
+     * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google!
+     *
+     * @param {number} x1 - The x-coordinate of the beginning of the arc
+     * @param {number} y1 - The y-coordinate of the beginning of the arc
+     * @param {number} x2 - The x-coordinate of the end of the arc
+     * @param {number} y2 - The y-coordinate of the end of the arc
+     * @param {number} radius - The radius of the arc
+     * @return {PIXI.GraphicsV8} This GraphicsV8 object. Good for chaining method calls
+     */
+    arcTo(x1, y1, x2, y2, radius)
+    {
+        if (this.currentPath)
+        {
+            if (this.currentPath.shape.points.length === 0)
+            {
+                this.currentPath.shape.points.push(x1, y1);
+            }
+        }
+        else
+        {
+            this.moveTo(x1, y1);
+        }
+
+        const points = this.currentPath.shape.points;
+        const fromX = points[points.length - 2];
+        const fromY = points[points.length - 1];
+        const a1 = fromY - y1;
+        const b1 = fromX - x1;
+        const a2 = y2 - y1;
+        const b2 = x2 - x1;
+        const mm = Math.abs((a1 * b2) - (b1 * a2));
+
+        if (mm < 1.0e-8 || radius === 0)
+        {
+            if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1)
+            {
+                points.push(x1, y1);
+            }
+        }
+        else
+        {
+            const dd = (a1 * a1) + (b1 * b1);
+            const cc = (a2 * a2) + (b2 * b2);
+            const tt = (a1 * a2) + (b1 * b2);
+            const k1 = radius * Math.sqrt(dd) / mm;
+            const k2 = radius * Math.sqrt(cc) / mm;
+            const j1 = k1 * tt / dd;
+            const j2 = k2 * tt / cc;
+            const cx = (k1 * b2) + (k2 * b1);
+            const cy = (k1 * a2) + (k2 * a1);
+            const px = b1 * (k2 + j1);
+            const py = a1 * (k2 + j1);
+            const qx = b2 * (k1 + j2);
+            const qy = a2 * (k1 + j2);
+            const startAngle = Math.atan2(py - cy, px - cx);
+            const endAngle = Math.atan2(qy - cy, qx - cx);
+
+            this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1);
+        }
+
+        this.dirty++;
+
+        return this;
+    }
+
+    /**
+     * The arc method creates an arc/curve (used to create circles, or parts of circles).
+     *
+     * @param {number} cx - The x-coordinate of the center of the circle
+     * @param {number} cy - The y-coordinate of the center of the circle
+     * @param {number} radius - The radius of the circle
+     * @param {number} startAngle - The starting angle, in radians (0 is at the 3 o'clock position
+     *  of the arc's circle)
+     * @param {number} endAngle - The ending angle, in radians
+     * @param {boolean} [anticlockwise=false] - Specifies whether the drawing should be
+     *  counter-clockwise or clockwise. False is default, and indicates clockwise, while true
+     *  indicates counter-clockwise.
+     * @return {PIXI.GraphicsV8} This GraphicsV8 object. Good for chaining method calls
+     */
+    arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false)
+    {
+        if (startAngle === endAngle)
+        {
+            return this;
+        }
+
+        if (!anticlockwise && endAngle <= startAngle)
+        {
+            endAngle += Math.PI * 2;
+        }
+        else if (anticlockwise && startAngle <= endAngle)
+        {
+            startAngle += Math.PI * 2;
+        }
+
+        const sweep = endAngle - startAngle;
+        const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40;
+
+        if (sweep === 0)
+        {
+            return this;
+        }
+
+        const startX = cx + (Math.cos(startAngle) * radius);
+        const startY = cy + (Math.sin(startAngle) * radius);
+
+        // If the currentPath exists, take its points. Otherwise call `moveTo` to start a path.
+        let points = this.currentPath ? this.currentPath.shape.points : null;
+
+        if (points)
+        {
+            if (points[points.length - 2] !== startX || points[points.length - 1] !== startY)
+            {
+                points.push(startX, startY);
+            }
+        }
+        else
+        {
+            this.moveTo(startX, startY);
+            points = this.currentPath.shape.points;
+        }
+
+        const theta = sweep / (segs * 2);
+        const theta2 = theta * 2;
+
+        const cTheta = Math.cos(theta);
+        const sTheta = Math.sin(theta);
+
+        const segMinus = segs - 1;
+
+        const remainder = (segMinus % 1) / segMinus;
+
+        for (let i = 0; i <= segMinus; ++i)
+        {
+            const real = i + (remainder * i);
+
+            const angle = ((theta) + startAngle + (theta2 * real));
+
+            const c = Math.cos(angle);
+            const s = -Math.sin(angle);
+
+            points.push(
+                (((cTheta * c) + (sTheta * s)) * radius) + cx,
+                (((cTheta * -s) + (sTheta * c)) * radius) + cy
+            );
+        }
+
+        this.dirty++;
+
+        return this;
+    }
+
+    /**
+     * Specifies a simple one-color fill that subsequent calls to other GraphicsV8 methods
+     * (such as lineTo() or drawCircle()) use when drawing.
+     *
+     * @param {number} [color=0] - the color of the fill
+     * @param {number} [alpha=1] - the alpha of the fill
+     * @return {PIXI.GraphicsV8} This GraphicsV8 object. Good for chaining method calls
+     */
+    beginFill(color = 0, alpha = 1)
+    {
+        this.filling = true;
+        this.fillColor = color;
+        this.fillAlpha = alpha;
+
+        if (this.currentPath)
+        {
+            if (this.currentPath.shape.points.length <= 2)
+            {
+                this.currentPath.fill = this.filling;
+                this.currentPath.fillColor = this.fillColor;
+                this.currentPath.fillAlpha = this.fillAlpha;
+            }
+        }
+
+        return this;
+    }
+
+    /**
+     * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method.
+     *
+     * @return {PIXI.GraphicsV8} This GraphicsV8 object. Good for chaining method calls
+     */
+    endFill()
+    {
+        this.filling = false;
+        this.fillColor = null;
+        this.fillAlpha = 1;
+
+        return this;
+    }
+
+    /**
+     *
+     * @param {number} x - The X coord of the top-left of the rectangle
+     * @param {number} y - The Y coord of the top-left of the rectangle
+     * @param {number} width - The width of the rectangle
+     * @param {number} height - The height of the rectangle
+     * @return {PIXI.GraphicsV8} This GraphicsV8 object. Good for chaining method calls
+     */
+    drawRect(x, y, width, height)
+    {
+        this.drawShape(new Rectangle(x, y, width, height));
+
+        return this;
+    }
+
+    /**
+     *
+     * @param {number} x - The X coord of the top-left of the rectangle
+     * @param {number} y - The Y coord of the top-left of the rectangle
+     * @param {number} width - The width of the rectangle
+     * @param {number} height - The height of the rectangle
+     * @param {number} radius - Radius of the rectangle corners
+     * @return {PIXI.GraphicsV8} This GraphicsV8 object. Good for chaining method calls
+     */
+    drawRoundedRect(x, y, width, height, radius)
+    {
+        this.drawShape(new RoundedRectangle(x, y, width, height, radius));
+
+        return this;
+    }
+
+    /**
+     * Draws a circle.
+     *
+     * @param {number} x - The X coordinate of the center of the circle
+     * @param {number} y - The Y coordinate of the center of the circle
+     * @param {number} radius - The radius of the circle
+     * @return {PIXI.GraphicsV8} This GraphicsV8 object. Good for chaining method calls
+     */
+    drawCircle(x, y, radius)
+    {
+        this.drawShape(new Circle(x, y, radius));
+
+        return this;
+    }
+
+    /**
+     * Draws an ellipse.
+     *
+     * @param {number} x - The X coordinate of the center of the ellipse
+     * @param {number} y - The Y coordinate of the center of the ellipse
+     * @param {number} width - The half width of the ellipse
+     * @param {number} height - The half height of the ellipse
+     * @return {PIXI.GraphicsV8} This GraphicsV8 object. Good for chaining method calls
+     */
+    drawEllipse(x, y, width, height)
+    {
+        this.drawShape(new Ellipse(x, y, width, height));
+
+        return this;
+    }
+
+    /**
+     * Draws a polygon using the given path.
+     *
+     * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon.
+     * @return {PIXI.GraphicsV8} This GraphicsV8 object. Good for chaining method calls
+     */
+    drawPolygon(path)
+    {
+        // prevents an argument assignment deopt
+        // see section 3.1: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments
+        let points = path;
+
+        let closed = true;
+
+        if (points instanceof Polygon)
+        {
+            closed = points.closed;
+            points = points.points;
+        }
+
+        if (!Array.isArray(points))
+        {
+            // prevents an argument leak deopt
+            // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments
+            points = new Array(arguments.length);
+
+            for (let i = 0; i < points.length; ++i)
+            {
+                points[i] = arguments[i]; // eslint-disable-line prefer-rest-params
+            }
+        }
+
+        const shape = new Polygon(points);
+
+        shape.closed = closed;
+
+        this.drawShape(shape);
+
+        return this;
+    }
+
+    /**
+     * Clears the graphics that were drawn to this GraphicsV8 object, and resets fill and line style settings.
+     *
+     * @return {PIXI.GraphicsV8} This GraphicsV8 object. Good for chaining method calls
+     */
+    clear()
+    {
+        if (this.lineWidth || this.filling || this.graphicsData.length > 0)
+        {
+            this.lineWidth = 0;
+            this.filling = false;
+
+            this.boundsDirty = -1;
+            this.dirty++;
+            this.clearDirty++;
+            this.graphicsData.length = 0;
+        }
+
+        this.currentPath = null;
+        this._spriteRect = null;
+
+        return this;
+    }
+
+    /**
+     * Clear all rendered objects in scene.
+     */
+    clearAllRenderedObjects()
+    {
+        for (let i = 0; i < this.renderedObjects.length; ++i)
+        {
+            const obj = this.renderedObjects[i];
+
+            if (obj)
+            {
+                obj.remove();
+            }
+        }
+        this.renderedObjects.length = 0;
+    }
+
+    /**
+     * Retrieves the bounds of the graphic shape as a rectangle object
+     *
+     * @private
+     */
+    _calculateBounds()
+    {
+        if (this.boundsDirty !== this.dirty)
+        {
+            this.boundsDirty = this.dirty;
+            this.updateLocalBounds();
+
+            this.cachedSpriteDirty = true;
+        }
+
+        const lb = this._localBounds;
+
+        this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY);
+    }
+
+    /**
+     * Tests if a point is inside this graphics object
+     *
+     * @param {PIXI.Point} point - the point to test
+     * @return {boolean} the result of the test
+     */
+    containsPoint(point)
+    {
+        this.worldTransform.applyInverse(point, tempPoint);
+
+        const graphicsData = this.graphicsData;
+
+        for (let i = 0; i < graphicsData.length; ++i)
+        {
+            const data = graphicsData[i];
+
+            if (!data.fill)
+            {
+                continue;
+            }
+
+            // only deal with fills..
+            if (data.shape)
+            {
+                if (data.shape.contains(tempPoint.x, tempPoint.y))
+                {
+                    return true;
+                }
+            }
+        }
+
+        return false;
+    }
+
+    /**
+     * Update the bounds of the object
+     *
+     */
+    updateLocalBounds()
+    {
+        let minX = Infinity;
+        let maxX = -Infinity;
+
+        let minY = Infinity;
+        let maxY = -Infinity;
+
+        if (this.graphicsData.length)
+        {
+            let shape = 0;
+            let x = 0;
+            let y = 0;
+            let w = 0;
+            let h = 0;
+
+            for (let i = 0; i < this.graphicsData.length; i++)
+            {
+                const data = this.graphicsData[i];
+                const type = data.type;
+                const lineWidth = data.lineWidth;
+
+                shape = data.shape;
+
+                if (type === SHAPES.RECT || type === SHAPES.RREC)
+                {
+                    x = shape.x - (lineWidth / 2);
+                    y = shape.y - (lineWidth / 2);
+                    w = shape.width + lineWidth;
+                    h = shape.height + lineWidth;
+
+                    minX = x < minX ? x : minX;
+                    maxX = x + w > maxX ? x + w : maxX;
+
+                    minY = y < minY ? y : minY;
+                    maxY = y + h > maxY ? y + h : maxY;
+                }
+                else if (type === SHAPES.CIRC)
+                {
+                    x = shape.x;
+                    y = shape.y;
+                    w = shape.radius + (lineWidth / 2);
+                    h = shape.radius + (lineWidth / 2);
+
+                    minX = x - w < minX ? x - w : minX;
+                    maxX = x + w > maxX ? x + w : maxX;
+
+                    minY = y - h < minY ? y - h : minY;
+                    maxY = y + h > maxY ? y + h : maxY;
+                }
+                else if (type === SHAPES.ELIP)
+                {
+                    x = shape.x;
+                    y = shape.y;
+                    w = shape.width + (lineWidth / 2);
+                    h = shape.height + (lineWidth / 2);
+
+                    minX = x - w < minX ? x - w : minX;
+                    maxX = x + w > maxX ? x + w : maxX;
+
+                    minY = y - h < minY ? y - h : minY;
+                    maxY = y + h > maxY ? y + h : maxY;
+                }
+                else
+                {
+                    // POLY
+                    const points = shape.points;
+                    let x2 = 0;
+                    let y2 = 0;
+                    let dx = 0;
+                    let dy = 0;
+                    let rw = 0;
+                    let rh = 0;
+                    let cx = 0;
+                    let cy = 0;
+
+                    for (let j = 0; j + 2 < points.length; j += 2)
+                    {
+                        x = points[j];
+                        y = points[j + 1];
+                        x2 = points[j + 2];
+                        y2 = points[j + 3];
+                        dx = Math.abs(x2 - x);
+                        dy = Math.abs(y2 - y);
+                        h = lineWidth;
+                        w = Math.sqrt((dx * dx) + (dy * dy));
+
+                        if (w < 1e-9)
+                        {
+                            continue;
+                        }
+
+                        rw = ((h / w * dy) + dx) / 2;
+                        rh = ((h / w * dx) + dy) / 2;
+                        cx = (x2 + x) / 2;
+                        cy = (y2 + y) / 2;
+
+                        minX = cx - rw < minX ? cx - rw : minX;
+                        maxX = cx + rw > maxX ? cx + rw : maxX;
+
+                        minY = cy - rh < minY ? cy - rh : minY;
+                        maxY = cy + rh > maxY ? cy + rh : maxY;
+                    }
+                }
+            }
+        }
+        else
+        {
+            minX = 0;
+            maxX = 0;
+            minY = 0;
+            maxY = 0;
+        }
+
+        const padding = this.boundsPadding;
+
+        this._localBounds.minX = minX - padding;
+        this._localBounds.maxX = maxX + (padding * 2);
+
+        this._localBounds.minY = minY - padding;
+        this._localBounds.maxY = maxY + (padding * 2);
+    }
+
+    /**
+     * Draws the given shape to this GraphicsV8 object. Can be any of Circle, Rectangle, Ellipse, Line or Polygon.
+     *
+     * @param {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} shape - The shape object to draw.
+     * @return {PIXI.GraphicsData} The generated GraphicsData object.
+     */
+    drawShape(shape)
+    {
+        if (this.currentPath)
+        {
+            // check current path!
+            if (this.currentPath.shape.points.length <= 2)
+            {
+                this.graphicsData.pop();
+            }
+        }
+
+        this.currentPath = null;
+
+        const data = new GraphicsData(
+            this.lineWidth,
+            this.lineColor,
+            this.lineAlpha,
+            this.fillColor,
+            this.fillAlpha,
+            this.filling,
+            this.nativeLines,
+            shape
+        );
+
+        this.graphicsData.push(data);
+
+        if (data.type === SHAPES.POLY)
+        {
+            data.shape.closed = data.shape.closed || this.filling;
+            this.currentPath = data;
+        }
+
+        this.dirty++;
+
+        return data;
+    }
+
+    /**
+     * Closes the current path.
+     *
+     * @return {PIXI.GraphicsV8} Returns itself.
+     */
+    closePath()
+    {
+        // ok so close path assumes next one is a hole!
+        const currentPath = this.currentPath;
+
+        if (currentPath && currentPath.shape)
+        {
+            currentPath.shape.close();
+        }
+
+        return this;
+    }
+
+    /**
+     * Adds a hole in the current path.
+     *
+     * @return {PIXI.GraphicsV8} Returns itself.
+     */
+    addHole()
+    {
+        // this is a hole!
+        const hole = this.graphicsData.pop();
+
+        this.currentPath = this.graphicsData[this.graphicsData.length - 1];
+
+        this.currentPath.addHole(hole.shape);
+        this.currentPath = null;
+
+        return this;
+    }
+
+    /**
+     * Destroys the GraphicsV8 object.
+     *
+     * @param {object|boolean} [options] - Options parameter. A boolean will act as if all
+     *  options have been set to that value
+     * @param {boolean} [options.children=false] - if set to true, all the children will have
+     *  their destroy method called as well. 'options' will be passed on to those calls.
+     * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true
+     *  Should it destroy the texture of the child sprite
+     * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true
+     *  Should it destroy the base texture of the child sprite
+     */
+    destroy(options)
+    {
+        super.destroy(options);
+
+        // destroy each of the GraphicsData objects
+        for (let i = 0; i < this.graphicsData.length; ++i)
+        {
+            this.graphicsData[i].destroy();
+        }
+
+        if (this._spriteRect)
+        {
+            this._spriteRect.destroy();
+        }
+
+        this.graphicsData = null;
+
+        this.currentPath = null;
+        this._localBounds = null;
+    }
+
+}
+
+GraphicsV8._SPRITE_TEXTURE = null;
diff --git a/src/core/graphics/pxscene/PXSceneGraphicsRenderer.js b/src/core/graphics/pxscene/PXSceneGraphicsRenderer.js
new file mode 100644
index 0000000..1790a43
--- /dev/null
+++ b/src/core/graphics/pxscene/PXSceneGraphicsRenderer.js
@@ -0,0 +1,317 @@
+import PXSceneRenderer from '../../renderers/pxscene/PXSceneRenderer';
+import { SHAPES } from '../../const';
+import earcut from 'earcut';
+/**
+ * Renderer dedicated to drawing and batching graphics objects.
+ *
+ * @class
+ * @private
+ * @memberof PIXI
+ */
+export default class PXSceneGraphicsRenderer
+{
+    /**
+     * @param {PIXI.CanvasRenderer} renderer - The current PIXI renderer.
+     */
+    constructor(renderer)
+    {
+        this.renderer = renderer;
+
+        this.prevPoint = null;
+
+        this.renderOptions = null;
+
+        this.graphics = null;
+    }
+
+    /**
+     * Moves the current drawing position to x, y.
+     *
+     * @param {number} x - the X coordinate to move to
+     * @param {number} y - the Y coordinate to move to
+     */
+    moveTo(x, y)
+    {
+        this.prevPoint = { x, y };
+    }
+
+    /**
+     * Draws a line using the current line style from the current drawing position to (x, y);
+     * The current drawing position is then set to (x, y).
+     *
+     * @param {number} x - the X coordinate to draw to
+     * @param {number} y - the Y coordinate to draw to
+     */
+    lineTo(x, y)
+    {
+        const curPoint = { x, y };
+        const graphics = this.graphics;
+
+        graphics.renderedObjects.push(this.drawLine(this.prevPoint, curPoint, this.renderOptions));
+        this.prevPoint = curPoint;
+    }
+
+    /**
+     * Renders a Graphics object to a canvas.
+     *
+     * @param {PIXI.Graphics} graphics - the actual graphics object to render
+     */
+    render(graphics)
+    {
+        if (!graphics || !graphics.renderedObject)
+        {
+            return;
+        }
+
+        this.graphics = graphics;
+        graphics.clearAllRenderedObjects();
+
+        const worldAlpha = graphics.worldAlpha;
+
+        // if the tint has changed, set the graphics object to dirty.
+        if (this._prevTint !== this.tint)
+        {
+            this.dirty = true;
+        }
+
+        if (graphics.dirty)
+        {
+            this.updateGraphicsTint(graphics);
+            graphics.dirty = false;
+        }
+
+        for (let i = 0; i < graphics.graphicsData.length; i++)
+        {
+            const data = graphics.graphicsData[i];
+            const shape = data.shape;
+
+            const fillColor = (Math.ceil(data.fillColor) * 256) + (255 * data.fillAlpha);
+            const strokeLineColor = (Math.ceil(data.lineColor) * 256) + (255 * data.lineAlpha);
+            let strokeLineWidth = data.lineWidth;
+
+            if (strokeLineWidth > 0 && strokeLineWidth < 1) // the minimal line width is 1
+            {
+                strokeLineWidth = 1;
+            }
+            const options = {
+                globalAlpha: data.fillAlpha * worldAlpha,
+                fillColor,
+                strokeLineColor,
+                strokeLineWidth,
+            };
+
+            if (data.type === SHAPES.POLY)
+            {
+                this.renderOptions = options;
+                if (!shape.closed)
+                {
+                    this.renderLines(shape.points); // render line
+                }
+                else
+                {
+                    let points = shape.points;
+                    const holes = data.holes;
+                    const holeArray = [];
+
+                    for (let i = 0; i < holes.length; i++)
+                    {
+                        const hole = holes[i];
+
+                        holeArray.push(points.length / 2);
+                        points = points.concat(hole.points);
+                    }
+
+                    const triangles = earcut(shape.points, holeArray, 2);
+                    const newPoints = [];
+
+                    for (let j = 0; j < triangles.length; j++)
+                    {
+                        const index = triangles[j];
+
+                        newPoints.push(points[index * 2]);
+                        newPoints.push(points[(index * 2) + 1]);
+                    }
+
+                    this.renderPolygon(newPoints, false); // render the inner solid polygon
+                    this.renderPolygon(points.slice(0, points.length - 2), true); // render the polygon outline
+
+                    for (let j = 0; j < holes.length; j++)
+                    {
+                        const hole = holes[j];
+
+                        this.renderPolygon(hole.points, true); // if got holes, render the holes outline
+                    }
+                }
+                this.renderOptions = null;
+            }
+            else if (data.type === SHAPES.RECT)
+            {
+                // Draw rect directly
+                this.renderOptions = options;
+                this.renderRect(shape);
+                this.renderOptions = null;
+            }
+            else if (data.type === SHAPES.CIRC)
+            {
+                this.renderOptions = options;
+                const radius = shape.radius;
+
+                shape.width = shape.height = radius * 2;
+                shape.circle = true;
+                this.renderRect(shape);
+                this.renderOptions = null;
+            }
+            else if (data.type === SHAPES.ELIP)
+            {
+                // TODO
+                // Not supported yet
+            }
+            else if (data.type === SHAPES.RREC)
+            {
+                this.renderOptions = options;
+                this.renderRect(shape);
+                this.renderOptions = null;
+            }
+        }
+
+        this.graphics = null;
+    }
+
+    /**
+     * Updates the tint of a graphics object
+     *
+     * @private
+     * @param {PIXI.Graphics} graphics - the graphics that will have its tint updated
+     */
+    updateGraphicsTint(graphics)
+    {
+        graphics._prevTint = graphics.tint;
+
+        const tintR = ((graphics.tint >> 16) & 0xFF) / 255;
+        const tintG = ((graphics.tint >> 8) & 0xFF) / 255;
+        const tintB = (graphics.tint & 0xFF) / 255;
+
+        for (let i = 0; i < graphics.graphicsData.length; ++i)
+        {
+            const data = graphics.graphicsData[i];
+
+            const fillColor = data.fillColor | 0;
+            const lineColor = data.lineColor | 0;
+
+            // super inline cos im an optimization NAZI :)
+            data._fillTint = (
+                (((fillColor >> 16) & 0xFF) / 255 * tintR * 255 << 16)
+                + (((fillColor >> 8) & 0xFF) / 255 * tintG * 255 << 8)
+                + (((fillColor & 0xFF) / 255) * tintB * 255)
+            );
+
+            data._lineTint = (
+                (((lineColor >> 16) & 0xFF) / 255 * tintR * 255 << 16)
+                + (((lineColor >> 8) & 0xFF) / 255 * tintG * 255 << 8)
+                + (((lineColor & 0xFF) / 255) * tintB * 255)
+            );
+        }
+    }
+
+    /**
+     * Renders a polygon.
+     *
+     * @param {PIXI.Point[]} points - The points to render
+     * @param {boolean} outLine whether to draw outline
+     *
+     */
+    renderPolygon(points, outLine)
+    {
+        const graphics = this.graphics;
+
+        if (!graphics || !graphics.renderedObject)
+        {
+            return;
+        }
+
+        const parentRenderedObject = graphics.renderedObject || this.renderer.context;
+        const renderOptions = this.renderOptions;
+        const polyon = this.renderer.view.create({
+            t: 'graphic',
+            parent: parentRenderedObject,
+            blendMode: graphics.blendMode,
+            type: 'polygon',
+            fillColor: outLine ? 0x00 : renderOptions.fillColor,
+            points, // dont need the last point(same value with first)
+            lineColor: renderOptions.strokeLineColor,
+            lineWidth: outLine ? renderOptions.strokeLineWidth : 0,
+        });
+
+        graphics.renderedObjects.push(polyon);
+    }
+
+   /**
+    * render the lines
+    * @param {Array} points the lines points
+    */
+    renderLines(points)
+    {
+        const graphics = this.graphics;
+
+        if (!graphics || !graphics.renderedObject)
+        {
+            return;
+        }
+        const parentRenderedObject = graphics.renderedObject || this.renderer.context;
+        const renderOptions = this.renderOptions;
+
+        const rect = this.renderer.view.create({
+            t: 'graphic',
+            type: 'lines',
+            blendMode: graphics.blendMode,
+            points,
+            parent: parentRenderedObject,
+            lineColor: renderOptions.strokeLineColor,
+            lineWidth: renderOptions.strokeLineWidth,
+        });
+
+        graphics.renderedObjects.push(rect);
+    }
+    /**
+     * Renders a rectangle.
+     *
+     * @param {Object} shape - The shape data.
+     */
+    renderRect(shape)
+    {
+        const graphics = this.graphics;
+
+        if (!graphics || !graphics.renderedObject)
+        {
+            return;
+        }
+        const parentRenderedObject = graphics.renderedObject || this.renderer.context;
+        const renderOptions = this.renderOptions;
+        const rect = this.renderer.view.create({
+            t: 'rect',
+            blendMode: graphics.blendMode,
+            parent: parentRenderedObject,
+            fillColor: renderOptions.fillColor,
+            radius: shape.radius || 0,
+            x: shape.x - (shape.circle ? shape.radius : 0),
+            y: shape.y - (shape.circle ? shape.radius : 0),
+            w: shape.width,
+            h: shape.height,
+            lineColor: renderOptions.strokeLineColor,
+            lineWidth: renderOptions.strokeLineWidth,
+        });
+
+        graphics.renderedObjects.push(rect);
+    }
+
+    /**
+     * destroy graphics object
+     */
+    destroy()
+    {
+        this.renderer = null;
+        this.graphics = null;
+    }
+}
+
+PXSceneRenderer.registerPlugin('graphicsV8', PXSceneGraphicsRenderer);
diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js
index fe73567..d3a1851 100644
--- a/src/core/graphics/utils/bezierCurveTo.js
+++ b/src/core/graphics/utils/bezierCurveTo.js
@@ -17,7 +17,7 @@
  */
 export default function bezierCurveTo(fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path = [])
 {
-    const n = 20;
+    const n = 64;
     let dt = 0;
     let dt2 = 0;
     let dt3 = 0;
diff --git a/src/core/index.js b/src/core/index.js
index f03fe15..7b7f772 100644
--- a/src/core/index.js
+++ b/src/core/index.js
@@ -9,8 +9,9 @@ import * as ticker from './ticker';
 import settings from './settings';
 import CanvasRenderer from './renderers/canvas/CanvasRenderer';
 import WebGLRenderer from './renderers/webgl/WebGLRenderer';
+import PXSceneRenderer from './renderers/pxscene/PXSceneRenderer';
 
-export { settings, utils, ticker, CanvasRenderer, WebGLRenderer };
+export { settings, utils, ticker, CanvasRenderer, WebGLRenderer, PXSceneRenderer };
 
 export { default as glCore } from 'pixi-gl-core';
 
@@ -22,14 +23,18 @@ export { default as TransformStatic } from './display/TransformStatic';
 export { default as TransformBase } from './display/TransformBase';
 export { default as Sprite } from './sprites/Sprite';
 export { default as CanvasSpriteRenderer } from './sprites/canvas/CanvasSpriteRenderer';
+export { default as PXSceneSpriteRenderer } from './sprites/pxscene/PXSceneSpriteRenderer';
 export { default as CanvasTinter } from './sprites/canvas/CanvasTinter';
 export { default as SpriteRenderer } from './sprites/webgl/SpriteRenderer';
 export { default as Text } from './text/Text';
 export { default as TextStyle } from './text/TextStyle';
+export { default as PXSceneTextRenderer } from './text/pxscene/PXSceneTextRenderer';
 export { default as Graphics } from './graphics/Graphics';
 export { default as GraphicsData } from './graphics/GraphicsData';
 export { default as GraphicsRenderer } from './graphics/webgl/GraphicsRenderer';
 export { default as CanvasGraphicsRenderer } from './graphics/canvas/CanvasGraphicsRenderer';
+export { default as GraphicsV8 } from './graphics/GraphicsV8';
+export { default as PXSceneGraphicsRenderer } from './graphics/pxscene/PXSceneGraphicsRenderer';
 export { default as Spritesheet } from './textures/Spritesheet';
 export { default as Texture } from './textures/Texture';
 export { default as BaseTexture } from './textures/BaseTexture';
diff --git a/src/core/renderers/pxscene/PXSceneRenderer.js b/src/core/renderers/pxscene/PXSceneRenderer.js
new file mode 100644
index 0000000..0218d98
--- /dev/null
+++ b/src/core/renderers/pxscene/PXSceneRenderer.js
@@ -0,0 +1,255 @@
+import SystemRenderer from '../SystemRenderer';
+import { pluginTarget, hex2rgb, rgb2rgba, rgba2hex } from '../../utils';
+import { RENDERER_TYPE, SCALE_MODES } from '../../const';
+import settings from '../../settings';
+import PXSceneRenderTarget from './utils/PXSceneRenderTarget';
+import * as _ from 'lodash';
+
+/**
+ * The PXSceneRenderer draws the scene and all its content onto a pxscene window.
+ *
+ * @class
+ * @memberof PIXI
+ * @extends PIXI.SystemRenderer
+ */
+export default class PXSceneRenderer extends SystemRenderer
+{
+    /**
+     * @param {number} [screenWidth=800] - the width of the screen
+     * @param {number} [screenHeight=600] - the height of the screen
+     * @param {object} [options] - The optional renderer parameters
+     * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional
+     * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area
+     *  (shown if not transparent).
+     */
+    constructor(screenWidth, screenHeight, options = {})
+    {
+        super('PXScene', screenWidth, screenHeight, options);
+
+        this.type = RENDERER_TYPE.PXSCENE;
+
+        let backgroundColor = 0;
+
+        if (!options.transparent && typeof options.backgroundColor !== 'undefined')
+        {
+            backgroundColor = rgba2hex(rgb2rgba(hex2rgb(options.backgroundColor)));
+        }
+
+        /**
+         * The canvas 2d context that everything is drawn with.
+         *
+         * @member {rtObject}
+         */
+        this.rootContext = this.view.create({
+            t: 'rect',
+            w: screenWidth,
+            h: screenHeight,
+            parent: this.view.root,
+            clip: true,
+            fillColor: backgroundColor,
+        });
+
+        /**
+         * Boolean flag controlling view refresh.
+         *
+         * @member {boolean}
+         */
+        this.refresh = true;
+
+        this.initPlugins();
+    }
+
+    /**
+     * Renders the object to this view
+     *
+     * @param {PIXI.DisplayObject} displayObject - The object to be rendered
+     * @param {PIXI.RenderTexture} [renderTexture] - A render texture to be rendered to.
+     *  If unset, it will render to the root context.
+     * @param {boolean} [clear=false] - Whether to clear the canvas before drawing
+     * @param {PIXI.Transform} [transform] - A transformation to be applied
+     * @param {boolean} [skipUpdateTransform=false] - Whether to skip the update transform
+     * @param {boolean} [forceRender=false] - forceRender a renderTexture, no matter the display object is changed or not.
+     */
+    render(displayObject, renderTexture, clear,
+        transform, skipUpdateTransform, forceRender = false) // eslint-disable-line no-unused-vars
+    {
+        if (!this.view)
+        {
+            return;
+        }
+
+        // can be handy to know!
+        this.renderingToScreen = !renderTexture;
+
+        this.emit('prerender');
+
+        this.context = this.rootContext;
+
+        if (renderTexture)
+        {
+            if (!displayObject.renderedObject)
+            {
+                return;
+            }
+
+            if (!renderTexture._pxsceneRenderTarget)
+            {
+                renderTexture._pxsceneRenderTarget = new PXSceneRenderTarget(
+                    this.view,
+                    renderTexture.width,
+                    renderTexture.height,
+                    renderTexture.resolution
+                );
+                renderTexture.source = null; // null for render target texture
+                renderTexture.valid = true;
+            }
+            if (clear) // the 'true' clears the texture before the content is rendered
+            {
+                renderTexture._pxsceneRenderTarget.clear();
+            }
+
+            displayObject.renderedObject.drawToFBO(renderTexture._pxsceneRenderTarget.pxSceneRenderTexture);
+        }
+        else
+        {
+            this._lastObjectRendered = displayObject;
+
+            if (!skipUpdateTransform)
+            {
+                const cacheParent = displayObject.parent;
+                const tempWt = this._tempDisplayObjectParent.transform.worldTransform;
+
+                if (transform)
+                {
+                    transform.copy(tempWt);
+
+                    this._tempDisplayObjectParent.transform._worldID = -1;
+                }
+                else
+                {
+                    tempWt.identity();
+                }
+
+                displayObject.parent = this._tempDisplayObjectParent;
+
+                displayObject.updateTransform();
+                displayObject.parent = cacheParent;
+            }
+
+            displayObject.renderPXScene(this);
+        }
+
+        this.emit('postrender');
+    }
+
+    /**
+     * Same as this.rootContext.w, actual number of pixels in the view by horizontal
+     *
+     * @member {number}
+     * @readonly
+     * @default 800
+     */
+    get width()
+    {
+        return this.rootContext.w;
+    }
+
+    /**
+     * Same as this.rootContext.h, actual number of pixels in the view by vertical
+     *
+     * @member {number}
+     * @readonly
+     * @default 600
+     */
+    get height()
+    {
+        return this.rootContext.h;
+    }
+
+    /**
+     * Clear the view of renderer.
+     *
+     * @param {string} [clearColor] - Clear the view with this color, except the view is transparent.
+     */
+    clear(clearColor)
+    {
+        const context = this.context;
+
+        clearColor = clearColor || this._backgroundColorString;
+
+        if (!this.transparent && clearColor)
+        {
+            context.fillStyle = clearColor;
+            context.fillRect(0, 0, this.width, this.height);
+        }
+        else
+        {
+            context.clearRect(0, 0, this.width, this.height);
+        }
+    }
+
+    /**
+     * Removes everything from the renderer.
+     *
+     */
+    destroy()
+    {
+        this.destroyPlugins();
+
+        this.context = null;
+
+        this.refresh = true;
+
+        this.maskManager.destroy();
+        this.maskManager = null;
+
+        this.smoothProperty = null;
+    }
+
+    /**
+     * Resizes the view to the specified width and height.
+     *
+     * @extends PIXI.SystemRenderer#resize
+     *
+     * @param {number} screenWidth - the new width of the screen
+     * @param {number} screenHeight - the new height of the screen
+     */
+    resize(screenWidth, screenHeight)
+    {
+        super.resize(screenWidth, screenHeight);
+
+        // reset the scale mode.. oddly this seems to be reset when the canvas is resized.
+        // surely a browser bug?? Let pixi fix that for you..
+        if (this.smoothProperty)
+        {
+            this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR);
+        }
+    }
+
+    /**
+     * Set the render object be dirty to force
+     * it render again
+     *
+     * @param {object} obj - The object contains a rendered object.
+     * @private
+     */
+    _setRenderDirty(obj)
+    {
+        if (_.has(obj, 'renderedObject'))
+        {
+            obj.renderedObject = null;
+        }
+        if (!obj.children || obj.children.length === 0)
+        {
+            return;
+        }
+        for (let i = 0; i < obj.children.length; ++i)
+        {
+            const child = obj.children[i];
+
+            this._setRenderDirty(child);
+        }
+    }
+}
+
+pluginTarget.mixin(PXSceneRenderer);
diff --git a/src/core/renderers/pxscene/utils/PXSceneRenderTarget.js b/src/core/renderers/pxscene/utils/PXSceneRenderTarget.js
new file mode 100644
index 0000000..f121095
--- /dev/null
+++ b/src/core/renderers/pxscene/utils/PXSceneRenderTarget.js
@@ -0,0 +1,37 @@
+import settings from '../../../settings';
+import Container from '../../../display/Container';
+
+/**
+ * Creates a PXScene Render target of the given size.
+ *
+ * @class
+ * @memberof PIXI
+ */
+export default class PXSceneRenderTarget extends Container
+{
+    /**
+     * @param {Objext} view the pxScene root view
+     * @param {number} width - the width for the newly created canvas
+     * @param {number} height - the height for the newly created canvas
+     * @param {number} [resolution=1] - The resolution / device pixel ratio of the canvas
+     */
+    constructor(view, width, height, resolution)
+    {
+        super();
+
+        this.resolution = resolution || settings.RESOLUTION;
+
+        this.renderedObjectMask = null;
+
+        this.width = width;
+        this.height = height;
+
+        this.canvasWidth = width;
+        this.canvasHeight = height;
+        this.pxSceneRenderTexture = view.create({
+            t: 'renderTexture',
+            width: this.width,
+            height: this.height,
+        });
+    }
+}
diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js
index 28b0b18..017bbd2 100644
--- a/src/core/sprites/Sprite.js
+++ b/src/core/sprites/Sprite.js
@@ -1,5 +1,5 @@
 import { Point, ObservablePoint, Rectangle } from '../math';
-import { sign, TextureCache } from '../utils';
+import { sign, TextureCache, isV8 } from '../utils';
 import { BLEND_MODES } from '../const';
 import Texture from '../textures/Texture';
 import Container from '../display/Container';
@@ -102,6 +102,13 @@ export default class Sprite extends Container
         // call texture setter
         this.texture = texture || Texture.EMPTY;
 
+        this.textureDirty = false;
+
+        // Includes width, height, scale
+        this.widthDirty = false;
+        this.heightDirty = false;
+        this.scaleDirty = false;
+
         /**
          * this is used to store the vertex data of the sprite (basically a quad)
          *
@@ -143,7 +150,6 @@ export default class Sprite extends Container
     {
         this._textureID = -1;
         this._textureTrimmedID = -1;
-
         // so if _width is 0 then width was not set..
         if (this._width)
         {
@@ -154,6 +160,7 @@ export default class Sprite extends Container
         {
             this.scale.y = sign(this.scale.y) * this._height / this.texture.orig.height;
         }
+        this.textureDirty = false;
     }
 
     /**
@@ -319,6 +326,17 @@ export default class Sprite extends Container
     }
 
     /**
+     * Renders the object using the PXScene renderer
+     *
+     * @private
+     * @param {PIXI.PXSceneRenderer} renderer - The renderer
+     */
+    _renderPXScene(renderer)
+    {
+        renderer.plugins[this.pluginName].render(this);
+    }
+
+    /**
      * Updates the bounds of the sprite.
      *
      * @private
@@ -385,15 +403,33 @@ export default class Sprite extends Container
     {
         this.worldTransform.applyInverse(point, tempPoint);
 
-        const width = this._texture.orig.width;
-        const height = this._texture.orig.height;
+        let width;
+        let height;
+
+        if (isV8())
+        {
+            if (this.renderedObjectSprite)
+            {
+                width = this.renderedObjectSprite.resource.w;
+                height = this.renderedObjectSprite.resource.h;
+            }
+            else
+            {
+                return false;
+            }
+        }
+        else
+        {
+            width = this._texture.orig.width;
+            height = this._texture.orig.height;
+        }
+
         const x1 = -width * this.anchor.x;
         let y1 = 0;
 
         if (tempPoint.x > x1 && tempPoint.x < x1 + width)
         {
             y1 = -height * this.anchor.y;
-
             if (tempPoint.y > y1 && tempPoint.y < y1 + height)
             {
                 return true;
@@ -484,21 +520,112 @@ export default class Sprite extends Container
     }
 
     /**
+     * Update attribute by dirty flags
+     *
+     * @returns {boolean} Update successfully or not.
+     */
+    updateAttr()
+    {
+        const renderedObjectSprite = this.renderedObjectSprite;
+
+        if (renderedObjectSprite)
+        {
+            const spriteWidth = renderedObjectSprite.resource.w;
+            const spriteHeight = renderedObjectSprite.resource.h;
+
+            if (!spriteWidth || !spriteHeight)
+            {
+                return false;
+            }
+
+            if (!this._texture.baseTexture.hasLoaded)
+            {
+                this._texture.orig.width = spriteWidth;
+                this._texture.orig.height = spriteHeight;
+            }
+
+            if (this.widthDirty)
+            {
+                this._calcScaleFromWidth(this._width);
+                this.widthDirty = false;
+            }
+
+            if (this.heightDirty)
+            {
+                this._calcScaleFromHeight(this._height);
+                this.heightDirty = false;
+            }
+
+            if (this.scaleDirty)
+            {
+                this._calcWidthHeightFromScale(this.scale);
+                this.scaleDirty = false;
+            }
+
+            return true;
+        }
+
+        return false;
+    }
+
+    /**
+     * Calculate scale from width
+     *
+     * @param {Number} width - The width of sprite
+     * @private
+     */
+    _calcScaleFromWidth(width)
+    {
+        const s = sign(this.scale.x) || 1;
+
+        this.scale.x = s * width / this._texture.orig.width;
+    }
+
+    /**
      * The width of the sprite, setting this will actually modify the scale to achieve the value set
      *
      * @member {number}
      */
     get width()
     {
+        if (isV8())
+        {
+            return this._width;
+        }
+
         return Math.abs(this.scale.x) * this._texture.orig.width;
     }
 
     set width(value) // eslint-disable-line require-jsdoc
     {
-        const s = sign(this.scale.x) || 1;
-
-        this.scale.x = s * value / this._texture.orig.width;
         this._width = value;
+        if (!isV8())
+        {
+            this._calcScaleFromWidth(value);
+        }
+        else if (this.updateAttr())
+        {
+            this._calcScaleFromWidth(value);
+
+            this.widthDirty = false;
+        }
+        else
+        {
+            this.widthDirty = true;
+        }
+    }
+
+    /**
+     * Calculate scale from height
+     *
+     * @param {Number} height - The height of sprite
+     * @private
+     */
+    _calcScaleFromHeight(height)
+    {
+        const s = sign(this.scale.y) || 1;
+
+        this.scale.y = s * height / this._texture.orig.height;
     }
 
     /**
@@ -508,15 +635,73 @@ export default class Sprite extends Container
      */
     get height()
     {
+        if (isV8())
+        {
+            return this._height;
+        }
+
         return Math.abs(this.scale.y) * this._texture.orig.height;
     }
 
     set height(value) // eslint-disable-line require-jsdoc
     {
-        const s = sign(this.scale.y) || 1;
-
-        this.scale.y = s * value / this._texture.orig.height;
         this._height = value;
+        if (!isV8())
+        {
+            this._calcScaleFromHeight(value);
+        }
+        else if (this.updateAttr())
+        {
+            this._calcScaleFromHeight(this._height);
+
+            this.heightDirty = false;
+        }
+        else
+        {
+            this.heightDirty = true;
+        }
+    }
+
+    /**
+     * Calculate width & heigth from scale
+     *
+     * @param {Number} scale - The scale of sprite
+     * @private
+     */
+    _calcWidthHeightFromScale(scale)
+    {
+        this._width = Math.abs(scale.x) * this._texture.orig.width;
+        this._height = Math.abs(scale.y) * this._texture.orig.height;
+    }
+
+    /**
+     * The scale factor of the object.
+     * Assignment by value since pixi-v4.
+     *
+     * @member {PIXI.Point|PIXI.ObservablePoint}
+     */
+    get scale()
+    {
+        return this.transform.scale;
+    }
+
+    set scale(value) // eslint-disable-line require-jsdoc
+    {
+        this.transform.scale.copy(value);
+
+        if (isV8())
+        {
+            if (this.updateAttr())
+            {
+                this._calcWidthHeightFromScale(value);
+
+                this.scaleDirty = false;
+            }
+            else
+            {
+                this.scaleDirty = true;
+            }
+        }
     }
 
     /**
@@ -577,8 +762,9 @@ export default class Sprite extends Container
 
         this._textureID = -1;
         this._textureTrimmedID = -1;
+        this.textureDirty = true;
 
-        if (value)
+        if (!isV8() && value)
         {
             // wait for the texture to load
             if (value.baseTexture.hasLoaded)
diff --git a/src/core/sprites/pxscene/PXSceneSpriteRenderer.js b/src/core/sprites/pxscene/PXSceneSpriteRenderer.js
new file mode 100644
index 0000000..8ed32cd
--- /dev/null
+++ b/src/core/sprites/pxscene/PXSceneSpriteRenderer.js
@@ -0,0 +1,498 @@
+import PXSceneRenderer from '../../renderers/pxscene/PXSceneRenderer';
+import RenderTexture from '../../textures/RenderTexture';
+import { Point } from '../../math';
+import { hexrgb2rgba } from '../../utils';
+import { BLEND_MODES } from '../../const';
+
+/**
+ * Renderer dedicated to drawing and batching sprites for PXScene.
+ *
+ * @class
+ * @private
+ * @memberof PIXI
+ */
+export default class PXSceneSpriteRenderer
+{
+    /**
+     * @param {PIXI.PXSceneRenderer} renderer -The renderer sprite this batch works for.
+     */
+    constructor(renderer)
+    {
+        this.renderer = renderer;
+    }
+
+    /**
+     * Renders the sprite object.
+     *
+     * @param {PIXI.Sprite} sprite - the sprite to render when using this spritebatch
+     */
+    render(sprite)
+    {
+        const texture = sprite._texture;
+        let spriteWidth = 0;
+        let spriteHeight = 0;
+        // Convert local coordinates to world coordinates
+        const point = new Point(sprite.x, sprite.y);
+
+        const parentRenderedObject = (sprite.parent && sprite.parent.renderedObject) || this.renderer.context;
+
+        const defaultTint = 0xFFFFFF;
+
+        if (texture instanceof RenderTexture)
+        {
+            if (!sprite.renderedObject)  // create it first
+            {
+                sprite.renderedObject = this.renderer.view.create({
+                    t: 'rect',
+                    parent: parentRenderedObject,
+                    w: spriteWidth,
+                    h: spriteHeight,
+                    fillColor: 0x00,
+                });
+            }
+
+            if (!texture._pxsceneRenderTarget) // if didn't create pxscene renderTexture , skip it.
+            {
+                return;
+            }
+
+            const renderTargat = texture._pxsceneRenderTarget;
+
+            spriteWidth = renderTargat.width;
+            spriteHeight = renderTargat.height;
+
+            if (!sprite.renderedObjectSprite)   // create sprite from texture
+            {
+                sprite.renderedObjectSprite = this.renderer.view.create({
+                    t: 'image',
+                    parent: sprite.renderedObject,
+                    w: spriteWidth,
+                    h: spriteHeight,
+                    texture: renderTargat.pxSceneRenderTexture,
+                });
+            }
+
+            const attr = this._calcSpriteAttributes(point, spriteWidth, spriteHeight, sprite);
+            const renderedObject = sprite.renderedObject;
+
+            renderedObject.x = attr.x;
+            renderedObject.y = attr.y;
+            renderedObject.cx = attr.cx;
+            renderedObject.cy = attr.cy;
+            renderedObject.a = attr.a;
+            renderedObject.r = attr.r;
+            renderedObject.sx = attr.sx;
+            renderedObject.sy = attr.sy;
+        }
+        else if (!texture.noFrame) // frame data
+        {
+            let maskRect;
+
+            if (texture.baseTexture.hasLoaded)
+            {
+                maskRect = {
+                    x: texture.orig.x,
+                    y: texture.orig.y,
+                    w: texture.orig.width,
+                    h: texture.orig.height,
+                };
+            }
+            else if (texture.trim)
+            {
+                maskRect = {
+                    x: texture.frame.x,
+                    y: texture.frame.y,
+                    w: texture.frame.width,
+                    h: texture.frame.height,
+                };
+            }
+            else
+            {
+                maskRect = {
+                    x: texture.frame.x,
+                    y: texture.frame.y,
+                    w: texture.orig.width,
+                    h: texture.orig.height,
+                };
+            }
+            // Calculate all attributes
+            if (sprite.renderedObject)
+            {
+                innerRenderSpriteFrame.call(this, maskRect);
+            }
+            else
+            {
+                sprite.renderedObject = this.renderer.view.create({
+                    t: 'rect',
+                    parent: parentRenderedObject,
+                    fillColor: 0x00,
+                });
+
+                sprite.renderedObjectMask = this.renderer.view.create({
+                    t: 'rect',
+                    parent: sprite.renderedObject,
+                    fillColor: 0xFFFF00FF,
+                    mask: true,
+                    draw: false,
+                });
+
+                const renderedObjectSpriteArgs = {
+                    t: 'image',
+                    parent: sprite.renderedObject,
+                    url: texture.baseTexture.source.src,
+                };
+
+                if (texture._uvs && !sprite.spine)  // spine don't need use uvs
+                {
+                    const uvs = texture._uvs;
+
+                    renderedObjectSpriteArgs.uvs = [
+                        uvs.x2, uvs.y2,
+                        uvs.x3, uvs.y3,
+                        uvs.x1, uvs.y1,
+                        uvs.x0, uvs.y0,
+                    ];
+                }
+                if (texture.baseTexture.hasLoaded && texture.trim)
+                {
+                    renderedObjectSpriteArgs.w = texture.trim.width;
+                    renderedObjectSpriteArgs.h = texture.trim.height;
+                }
+
+                sprite.renderedObjectSprite = this.renderer.view.create(renderedObjectSpriteArgs);
+
+                if (sprite.tint !== defaultTint)
+                {
+                    sprite.renderedObjectSpriteContainer = this.renderer.view.create({
+                        t: 'rect',
+                        parent: sprite.renderedObject,
+                        fillColor: 0x00,
+                    });
+
+                    sprite.renderedObjectSprite.parent = sprite.renderedObjectSpriteContainer;
+                    sprite.renderedObjectSprite.mask = true;
+
+                    sprite.renderedObjectTint = this.renderer.view.create({
+                        t: 'rect',
+                        parent: sprite.renderedObjectSpriteContainer,
+                        fillColor: hexrgb2rgba(sprite.tint),
+                    });
+                }
+
+                innerRenderSpriteFrame.call(this, maskRect);
+            }
+        }
+        else if (!sprite.textureDirty && sprite.renderedObject) // noFrame
+        {
+            innerRenderSprite.call(this);
+        }
+        else
+        {
+            if (sprite.renderedObject)
+            {
+                sprite.renderedObject.removeAll();
+                sprite.renderedObject.remove();
+                sprite.renderedObject = null;
+            }
+
+            sprite.renderedObject = this.renderer.view.create({
+                t: 'rect',
+                parent: parentRenderedObject,
+                w: spriteWidth,
+                h: spriteHeight,
+                fillColor: 0x0,
+            });
+
+            if (PXSceneSpriteRenderer.resourcesMap[texture.baseTexture.source.src])
+            {
+                sprite.renderedObjectSprite = this.renderer.view.create({
+                    t: 'image',
+                    parent: sprite.renderedObject,
+                    resource: PXSceneSpriteRenderer.resourcesMap[texture.baseTexture.source.src],
+                    mask: sprite.tint !== defaultTint,
+                });
+            }
+            else
+            {
+                this.renderer.view.create({
+                    t: 'imageResource',
+                    url: texture.baseTexture.source.src,
+                }).ready.then((imgResource) =>
+                {
+                    sprite.renderedObjectSprite = this.renderer.view.create({
+                        t: 'image',
+                        parent: sprite.renderedObject,
+                        resource: imgResource,
+                        mask: sprite.tint !== defaultTint,
+                    });
+                });
+            }
+
+            if (sprite.tint !== defaultTint)
+            {
+                sprite.renderedObjectTint = this.renderer.view.create({
+                    t: 'rect',
+                    parent: sprite.renderedObject,
+                    fillColor: hexrgb2rgba(sprite.tint),
+                });
+            }
+
+            innerRenderSprite.call(this);
+        }
+
+        function innerRenderSprite()
+        {
+            if (!sprite.renderedObjectSprite)
+            {
+                return;
+            }
+
+            sprite.updateAttr();
+
+            const renderedObject = sprite.renderedObject;
+            const renderedObjectSprite = sprite.renderedObjectSprite;
+            const renderedObjectTint = sprite.renderedObjectTint;
+
+            spriteWidth = renderedObjectSprite.resource.w;
+            spriteHeight = renderedObjectSprite.resource.h;
+
+            if (spriteWidth && spriteHeight)
+            {
+                PXSceneSpriteRenderer.resourcesMap[texture.baseTexture.source.src] = renderedObjectSprite.resource;
+            }
+
+            const attr = this._calcSpriteAttributes(point, spriteWidth, spriteHeight, sprite);
+
+            renderedObject.x = attr.x;
+            renderedObject.y = attr.y;
+            renderedObject.cx = attr.cx;
+            renderedObject.cy = attr.cy;
+            renderedObject.a = attr.a;
+            renderedObject.r = attr.r;
+            renderedObject.sx = attr.sx;
+            renderedObject.sy = attr.sy;
+            renderedObject.w = spriteWidth;
+            renderedObject.h = spriteHeight;
+
+            if (sprite.tint !== defaultTint)
+            {
+                renderedObjectTint.w = spriteWidth;
+                renderedObjectTint.h = spriteHeight;
+                renderedObjectSprite.a = attr.a;
+            }
+
+            // alpha mask
+            if (sprite.mask)
+            {
+                const spriteMaskRenderedObject = sprite.mask.renderedObject;
+
+                if (spriteMaskRenderedObject)
+                {
+                    sprite.__backupMaskParent = spriteMaskRenderedObject.parent;
+                    sprite.__backupMaskAlpha = spriteMaskRenderedObject.a;
+                    sprite.__backupAlpha = renderedObject.a;
+
+                    if (!sprite.renderedObjectMaskContainer)
+                    {
+                        sprite.renderedObjectMaskContainer = this.renderer.view.create({
+                            t: 'rect',
+                            parent: renderedObject.parent,
+                            fillColor: 0x00,
+                        });
+
+                        renderedObject.parent = sprite.renderedObjectMaskContainer;
+                        spriteMaskRenderedObject.parent = sprite.renderedObjectMaskContainer;
+                    }
+
+                    const renderedObjectMaskContainer = sprite.renderedObjectMaskContainer;
+
+                    renderedObjectMaskContainer.x = 0;
+                    renderedObjectMaskContainer.y = 0;
+                    renderedObjectMaskContainer.cx = attr.cx;
+                    renderedObjectMaskContainer.cy = attr.cy;
+                    renderedObjectMaskContainer.w = this.renderer.width;
+                    renderedObjectMaskContainer.h = this.renderer.height;
+
+                    spriteMaskRenderedObject.mask = true;
+                }
+            }
+            else
+            {
+                const renderedObjectMaskContainer = sprite.renderedObjectMaskContainer;
+
+                if (renderedObjectMaskContainer)
+                {
+                    const spriteMaskRenderedObject = sprite.mask.renderedObject;
+
+                    renderedObject.parent = renderedObjectMaskContainer.parent;
+                    renderedObject.a = sprite.__backupAlpha;
+
+                    spriteMaskRenderedObject.parent = sprite.__backupMaskParent;
+                    spriteMaskRenderedObject.a = sprite.__backupMaskAlpha;
+
+                    renderedObjectMaskContainer.remove();
+
+                    sprite.__backupAlpha = undefined;
+                    sprite.__backupMaskParent = undefined;
+                    sprite.__backupMaskAlpha = undefined;
+                }
+            }
+
+            // (only support BLEND_MODES.ADD)
+            // A trick way, just set the alpha value.
+            if (sprite.blendMode === BLEND_MODES.ADD)
+            {
+                renderedObject.a = 0.5 * attr.a;
+                if (sprite.tint !== defaultTint)
+                {
+                    renderedObjectSprite.a = 0.5 * attr.a;
+                }
+            }
+        }
+
+        function innerRenderSpriteFrame(maskRect)
+        {
+            sprite.updateAttr();
+
+            const renderedObject = sprite.renderedObject;
+            const renderedObjectMask = sprite.renderedObjectMask;
+            const renderedObjectSprite = sprite.renderedObjectSprite;
+            const renderedObjectSpriteContainer = sprite.renderedObjectSpriteContainer;
+            const renderedObjectTint = sprite.renderedObjectTint;
+
+            spriteWidth = maskRect.w;
+            spriteHeight = maskRect.h;
+
+            const attr = this._calcSpriteAttributes(point, spriteWidth, spriteHeight, sprite);
+
+            renderedObject.x = attr.x;
+            renderedObject.y = attr.y;
+            renderedObject.cx = attr.cx;
+            renderedObject.cy = attr.cy;
+            renderedObject.a = attr.a;
+            renderedObject.r = attr.r;
+            renderedObject.sx = attr.sx;
+            renderedObject.sy = attr.sy;
+            renderedObject.w = spriteWidth;
+            renderedObject.h = spriteHeight;
+
+            renderedObjectMask.x = 0;
+            renderedObjectMask.y = 0;
+            renderedObjectMask.cx = attr.cx;
+            renderedObjectMask.cy = attr.cy;
+            renderedObjectMask.w = spriteWidth;
+            renderedObjectMask.h = spriteHeight;
+
+            renderedObjectSprite.x = -maskRect.x;
+            renderedObjectSprite.y = -maskRect.y;
+            renderedObjectSprite.cx = attr.cx;
+            renderedObjectSprite.cy = attr.cy;
+
+            if (texture.rotate && sprite.spine)
+            {
+                const rotateParam = this._getSpineRotationParamByRotate(texture.rotate, sprite.spine);
+
+                if (rotateParam)
+                {
+                    renderedObject.r = attr.r + rotateParam.r;
+                }
+            }
+
+            if (sprite.tint !== defaultTint)
+            {
+                renderedObjectSpriteContainer.x = 0;
+                renderedObjectSpriteContainer.y = 0;
+                renderedObjectSpriteContainer.cx = attr.cx;
+                renderedObjectSpriteContainer.cy = attr.cy;
+                renderedObjectSpriteContainer.w = spriteWidth;
+                renderedObjectSpriteContainer.h = spriteHeight;
+
+                renderedObjectTint.x = -maskRect.x;
+                renderedObjectTint.y = -maskRect.y;
+                renderedObjectTint.cx = attr.cx;
+                renderedObjectTint.cy = attr.cy;
+                renderedObjectTint.w = spriteWidth;
+                renderedObjectTint.h = spriteHeight;
+
+                renderedObjectSprite.a = attr.a;
+            }
+        }
+    }
+
+    /**
+     * Calculate spine rotation param by rotate (from texture packer)
+     *
+     * @param {Number} rotation - Rotation (from texture packer)
+     * @returns {Object|null} Rotation param
+     * @private
+     */
+    _getSpineRotationParamByRotate(rotation)
+    {
+        if (rotation % 2 !== 0)
+        {
+            // Not supported yet, don't rotate
+            return null;
+        }
+
+        let flip = false;
+
+        if (rotation >= 8)
+        {
+            rotation -= 8;
+            flip = true;
+        }
+        const degree = rotation * 45;
+
+        return {
+            r: degree,
+            sx: flip ? -1 : 1,
+            sy: 1,
+        };
+    }
+
+    /**
+     * Calculate sprite attribute.
+     *
+     * @param {Point} point - Global Point of the sprite
+     * @param {Number} spriteWidth - The width of the sprite
+     * @param {Number} spriteHeight - The height of the sprite
+     * @param {Object} sprite - The sprite object
+     * @return {Object} The calculated attributes.
+     * @private
+     */
+    _calcSpriteAttributes(point, spriteWidth, spriteHeight, sprite)
+    {
+        const cx = spriteWidth * sprite.anchor.x;
+        const cy = spriteHeight * sprite.anchor.y;
+        const x = point.x - cx;
+        const y = point.y - cy;
+        const a = sprite.alpha;
+        const r = sprite.rotation * (180 / Math.PI);
+        const sx = sprite.scale.x;
+        const sy = sprite.scale.y;
+
+        return {
+            x,
+            y,
+            cx,
+            cy,
+            a,
+            r,
+            sx,
+            sy,
+        };
+    }
+
+    /**
+     * destroy the sprite object.
+     *
+     */
+    destroy()
+    {
+        this.renderer = null;
+    }
+}
+
+PXSceneSpriteRenderer.resourcesMap = {};
+
+PXSceneRenderer.registerPlugin('sprite', PXSceneSpriteRenderer);
diff --git a/src/core/text/Text.js b/src/core/text/Text.js
index cec8c32..dcd2bfe 100644
--- a/src/core/text/Text.js
+++ b/src/core/text/Text.js
@@ -1,911 +1,14 @@
-/* eslint max-depth: [2, 8] */
-import Sprite from '../sprites/Sprite';
-import Texture from '../textures/Texture';
-import { Rectangle } from '../math';
-import { sign } from '../utils';
-import { TEXT_GRADIENT } from '../const';
-import settings from '../settings';
-import TextStyle from './TextStyle';
-import trimCanvas from '../utils/trimCanvas';
+import { isV8 } from '../utils';
 
-const defaultDestroyOptions = {
-    texture: true,
-    children: false,
-    baseTexture: true,
-};
+let Text;
 
-/**
- * A Text Object will create a line or multiple lines of text. To split a line you can use '\n' in your text string,
- * or add a wordWrap property set to true and and wordWrapWidth property with a value in the style object.
- *
- * A Text can be created directly from a string and a style object
- *
- * ```js
- * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'});
- * ```
- *
- * @class
- * @extends PIXI.Sprite
- * @memberof PIXI
- */
-export default class Text extends Sprite
+if (isV8())
 {
-    /**
-     * @param {string} text - The string that you would like the text to display
-     * @param {object|PIXI.TextStyle} [style] - The style parameters
-     * @param {HTMLCanvasElement} [canvas] - The canvas element for drawing text
-     */
-    constructor(text, style, canvas)
-    {
-        canvas = canvas || document.createElement('canvas');
-
-        canvas.width = 3;
-        canvas.height = 3;
-
-        const texture = Texture.fromCanvas(canvas);
-
-        texture.orig = new Rectangle();
-        texture.trim = new Rectangle();
-
-        super(texture);
-
-        /**
-         * The canvas element that everything is drawn to
-         *
-         * @member {HTMLCanvasElement}
-         */
-        this.canvas = canvas;
-
-        /**
-         * The canvas 2d context that everything is drawn with
-         * @member {CanvasRenderingContext2D}
-         */
-        this.context = this.canvas.getContext('2d');
-
-        /**
-         * The resolution / device pixel ratio of the canvas. This is set automatically by the renderer.
-         * @member {number}
-         * @default 1
-         */
-        this.resolution = settings.RESOLUTION;
-
-        /**
-         * Private tracker for the current text.
-         *
-         * @member {string}
-         * @private
-         */
-        this._text = null;
-
-        /**
-         * Private tracker for the current style.
-         *
-         * @member {object}
-         * @private
-         */
-        this._style = null;
-        /**
-         * Private listener to track style changes.
-         *
-         * @member {Function}
-         * @private
-         */
-        this._styleListener = null;
-
-        /**
-         * Private tracker for the current font.
-         *
-         * @member {string}
-         * @private
-         */
-        this._font = '';
-
-        this.text = text;
-        this.style = style;
-
-        this.localStyleID = -1;
-    }
-
-    /**
-     * Renders text and updates it when needed.
-     *
-     * @private
-     * @param {boolean} respectDirty - Whether to abort updating the text if the Text isn't dirty and the function is called.
-     */
-    updateText(respectDirty)
-    {
-        const style = this._style;
-
-        // check if style has changed..
-        if (this.localStyleID !== style.styleID)
-        {
-            this.dirty = true;
-            this.localStyleID = style.styleID;
-        }
-
-        if (!this.dirty && respectDirty)
-        {
-            return;
-        }
-
-        this._font = Text.getFontStyle(style);
-
-        this.context.font = this._font;
-
-        // word wrap
-        // preserve original text
-        const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text;
-
-        // split text into lines
-        const lines = outputText.split(/(?:\r\n|\r|\n)/);
-
-        // calculate text width
-        const lineWidths = new Array(lines.length);
-        let maxLineWidth = 0;
-        const fontProperties = Text.calculateFontProperties(this._font);
-
-        for (let i = 0; i < lines.length; i++)
-        {
-            const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing);
-
-            lineWidths[i] = lineWidth;
-            maxLineWidth = Math.max(maxLineWidth, lineWidth);
-        }
-
-        let width = maxLineWidth + style.strokeThickness;
-
-        if (style.dropShadow)
-        {
-            width += style.dropShadowDistance;
-        }
-
-        this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution);
-
-        // calculate text height
-        const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness;
-
-        let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness)
-            + ((lines.length - 1) * lineHeight);
-
-        if (style.dropShadow)
-        {
-            height += style.dropShadowDistance;
-        }
-
-        this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution);
-
-        this.context.scale(this.resolution, this.resolution);
-
-        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
-
-        this.context.font = this._font;
-        this.context.strokeStyle = style.stroke;
-        this.context.lineWidth = style.strokeThickness;
-        this.context.textBaseline = style.textBaseline;
-        this.context.lineJoin = style.lineJoin;
-        this.context.miterLimit = style.miterLimit;
-
-        let linePositionX;
-        let linePositionY;
-
-        if (style.dropShadow)
-        {
-            this.context.shadowBlur = style.dropShadowBlur;
-            this.context.globalAlpha = style.dropShadowAlpha;
-
-            if (style.dropShadowBlur > 0)
-            {
-                this.context.shadowColor = style.dropShadowColor;
-            }
-            else
-            {
-                this.context.fillStyle = style.dropShadowColor;
-            }
-
-            const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance;
-            const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance;
-
-            for (let i = 0; i < lines.length; i++)
-            {
-                linePositionX = style.strokeThickness / 2;
-                linePositionY = ((style.strokeThickness / 2) + (i * lineHeight)) + fontProperties.ascent;
-
-                if (style.align === 'right')
-                {
-                    linePositionX += maxLineWidth - lineWidths[i];
-                }
-                else if (style.align === 'center')
-                {
-                    linePositionX += (maxLineWidth - lineWidths[i]) / 2;
-                }
-
-                if (style.fill)
-                {
-                    this.drawLetterSpacing(
-                        lines[i],
-                        linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding
-                    );
-
-                    if (style.stroke && style.strokeThickness)
-                    {
-                        this.context.strokeStyle = style.dropShadowColor;
-                        this.drawLetterSpacing(
-                            lines[i],
-                            linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding,
-                            true
-                        );
-                        this.context.strokeStyle = style.stroke;
-                    }
-                }
-            }
-        }
-
-        // reset the shadow blur and alpha that was set by the drop shadow, for the regular text
-        this.context.shadowBlur = 0;
-        this.context.globalAlpha = 1;
-
-        // set canvas text styles
-        this.context.fillStyle = this._generateFillStyle(style, lines);
-
-        // draw lines line by line
-        for (let i = 0; i < lines.length; i++)
-        {
-            linePositionX = style.strokeThickness / 2;
-            linePositionY = ((style.strokeThickness / 2) + (i * lineHeight)) + fontProperties.ascent;
-
-            if (style.align === 'right')
-            {
-                linePositionX += maxLineWidth - lineWidths[i];
-            }
-            else if (style.align === 'center')
-            {
-                linePositionX += (maxLineWidth - lineWidths[i]) / 2;
-            }
-
-            if (style.stroke && style.strokeThickness)
-            {
-                this.drawLetterSpacing(lines[i], linePositionX + style.padding, linePositionY + style.padding, true);
-            }
-
-            if (style.fill)
-            {
-                this.drawLetterSpacing(lines[i], linePositionX + style.padding, linePositionY + style.padding);
-            }
-        }
-
-        this.updateTexture();
-    }
-
-    /**
-     * Render the text with letter-spacing.
-     * @param {string} text - The text to draw
-     * @param {number} x - Horizontal position to draw the text
-     * @param {number} y - Vertical position to draw the text
-     * @param {boolean} [isStroke=false] - Is this drawing for the outside stroke of the
-     *  text? If not, it's for the inside fill
-     * @private
-     */
-    drawLetterSpacing(text, x, y, isStroke = false)
-    {
-        const style = this._style;
-
-        // letterSpacing of 0 means normal
-        const letterSpacing = style.letterSpacing;
-
-        if (letterSpacing === 0)
-        {
-            if (isStroke)
-            {
-                this.context.strokeText(text, x, y);
-            }
-            else
-            {
-                this.context.fillText(text, x, y);
-            }
-
-            return;
-        }
-
-        const characters = String.prototype.split.call(text, '');
-        let currentPosition = x;
-        let index = 0;
-        let current = '';
-
-        while (index < text.length)
-        {
-            current = characters[index++];
-            if (isStroke)
-            {
-                this.context.strokeText(current, currentPosition, y);
-            }
-            else
-            {
-                this.context.fillText(current, currentPosition, y);
-            }
-            currentPosition += this.context.measureText(current).width + letterSpacing;
-        }
-    }
-
-    /**
-     * Updates texture size based on canvas size
-     *
-     * @private
-     */
-    updateTexture()
-    {
-        if (this._style.trim)
-        {
-            const trimmed = trimCanvas(this.canvas);
-
-            this.canvas.width = trimmed.width;
-            this.canvas.height = trimmed.height;
-            this.context.putImageData(trimmed.data, 0, 0);
-        }
-
-        const texture = this._texture;
-        const style = this._style;
-
-        texture.baseTexture.hasLoaded = true;
-        texture.baseTexture.resolution = this.resolution;
-
-        texture.baseTexture.realWidth = this.canvas.width;
-        texture.baseTexture.realHeight = this.canvas.height;
-        texture.baseTexture.width = this.canvas.width / this.resolution;
-        texture.baseTexture.height = this.canvas.height / this.resolution;
-        texture.trim.width = texture._frame.width = this.canvas.width / this.resolution;
-        texture.trim.height = texture._frame.height = this.canvas.height / this.resolution;
-
-        texture.trim.x = -style.padding;
-        texture.trim.y = -style.padding;
-
-        texture.orig.width = texture._frame.width - (style.padding * 2);
-        texture.orig.height = texture._frame.height - (style.padding * 2);
-
-        // call sprite onTextureUpdate to update scale if _width or _height were set
-        this._onTextureUpdate();
-
-        texture.baseTexture.emit('update', texture.baseTexture);
-
-        this.dirty = false;
-    }
-
-    /**
-     * Renders the object using the WebGL renderer
-     *
-     * @param {PIXI.WebGLRenderer} renderer - The renderer
-     */
-    renderWebGL(renderer)
-    {
-        if (this.resolution !== renderer.resolution)
-        {
-            this.resolution = renderer.resolution;
-            this.dirty = true;
-        }
-
-        this.updateText(true);
-
-        super.renderWebGL(renderer);
-    }
-
-    /**
-     * Renders the object using the Canvas renderer
-     *
-     * @private
-     * @param {PIXI.CanvasRenderer} renderer - The renderer
-     */
-    _renderCanvas(renderer)
-    {
-        if (this.resolution !== renderer.resolution)
-        {
-            this.resolution = renderer.resolution;
-            this.dirty = true;
-        }
-
-        this.updateText(true);
-
-        super._renderCanvas(renderer);
-    }
-
-    /**
-     * Applies newlines to a string to have it optimally fit into the horizontal
-     * bounds set by the Text object's wordWrapWidth property.
-     *
-     * @private
-     * @param {string} text - String to apply word wrapping to
-     * @return {string} New string with new lines applied where required
-     */
-    wordWrap(text)
-    {
-        // Greedy wrapping algorithm that will wrap words as the line grows longer
-        // than its horizontal bounds.
-        let result = '';
-        const style = this._style;
-        const lines = text.split('\n');
-        const wordWrapWidth = style.wordWrapWidth;
-
-        for (let i = 0; i < lines.length; i++)
-        {
-            let spaceLeft = wordWrapWidth;
-            const words = lines[i].split(' ');
-
-            for (let j = 0; j < words.length; j++)
-            {
-                const wordWidth = this.context.measureText(words[j]).width;
-
-                if (style.breakWords && wordWidth > wordWrapWidth)
-                {
-                    // Word should be split in the middle
-                    const characters = words[j].split('');
-
-                    for (let c = 0; c < characters.length; c++)
-                    {
-                        const characterWidth = this.context.measureText(characters[c]).width;
-
-                        if (characterWidth > spaceLeft)
-                        {
-                            result += `\n${characters[c]}`;
-                            spaceLeft = wordWrapWidth - characterWidth;
-                        }
-                        else
-                        {
-                            if (c === 0)
-                            {
-                                result += ' ';
-                            }
-
-                            result += characters[c];
-                            spaceLeft -= characterWidth;
-                        }
-                    }
-                }
-                else
-                {
-                    const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width;
-
-                    if (j === 0 || wordWidthWithSpace > spaceLeft)
-                    {
-                        // Skip printing the newline if it's the first word of the line that is
-                        // greater than the word wrap width.
-                        if (j > 0)
-                        {
-                            result += '\n';
-                        }
-                        result += words[j];
-                        spaceLeft = wordWrapWidth - wordWidth;
-                    }
-                    else
-                    {
-                        spaceLeft -= wordWidthWithSpace;
-                        result += ` ${words[j]}`;
-                    }
-                }
-            }
-
-            if (i < lines.length - 1)
-            {
-                result += '\n';
-            }
-        }
-
-        return result;
-    }
-
-    /**
-     * Gets the local bounds of the text object.
-     *
-     * @param {Rectangle} rect - The output rectangle.
-     * @return {Rectangle} The bounds.
-     */
-    getLocalBounds(rect)
-    {
-        this.updateText(true);
-
-        return super.getLocalBounds.call(this, rect);
-    }
-
-    /**
-     * calculates the bounds of the Text as a rectangle. The bounds calculation takes the worldTransform into account.
-     */
-    _calculateBounds()
-    {
-        this.updateText(true);
-        this.calculateVertices();
-        // if we have already done this on THIS frame.
-        this._bounds.addQuad(this.vertexData);
-    }
-
-    /**
-     * Method to be called upon a TextStyle change.
-     * @private
-     */
-    _onStyleChange()
-    {
-        this.dirty = true;
-    }
-
-    /**
-     * Generates the fill style. Can automatically generate a gradient based on the fill style being an array
-     *
-     * @private
-     * @param {object} style - The style.
-     * @param {string[]} lines - The lines of text.
-     * @return {string|number|CanvasGradient} The fill style
-     */
-    _generateFillStyle(style, lines)
-    {
-        if (!Array.isArray(style.fill))
-        {
-            return style.fill;
-        }
-
-        // cocoon on canvas+ cannot generate textures, so use the first colour instead
-        if (navigator.isCocoonJS)
-        {
-            return style.fill[0];
-        }
-
-        // the gradient will be evenly spaced out according to how large the array is.
-        // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75
-        let gradient;
-        let totalIterations;
-        let currentIteration;
-        let stop;
-
-        const width = this.canvas.width / this.resolution;
-        const height = this.canvas.height / this.resolution;
-
-        // make a copy of the style settings, so we can manipulate them later
-        const fill = style.fill.slice();
-        const fillGradientStops = style.fillGradientStops.slice();
-
-        // wanting to evenly distribute the fills. So an array of 4 colours should give fills of 0.25, 0.5 and 0.75
-        if (!fillGradientStops.length)
-        {
-            const lengthPlus1 = fill.length + 1;
-
-            for (let i = 1; i < lengthPlus1; ++i)
-            {
-                fillGradientStops.push(i / lengthPlus1);
-            }
-        }
-
-        // stop the bleeding of the last gradient on the line above to the top gradient of the this line
-        // by hard defining the first gradient colour at point 0, and last gradient colour at point 1
-        fill.unshift(style.fill[0]);
-        fillGradientStops.unshift(0);
-
-        fill.push(style.fill[style.fill.length - 1]);
-        fillGradientStops.push(1);
-
-        if (style.fillGradientType === TEXT_GRADIENT.LINEAR_VERTICAL)
-        {
-            // start the gradient at the top center of the canvas, and end at the bottom middle of the canvas
-            gradient = this.context.createLinearGradient(width / 2, 0, width / 2, height);
-
-            // we need to repeat the gradient so that each individual line of text has the same vertical gradient effect
-            // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875
-            totalIterations = (fill.length + 1) * lines.length;
-            currentIteration = 0;
-            for (let i = 0; i < lines.length; i++)
-            {
-                currentIteration += 1;
-                for (let j = 0; j < fill.length; j++)
-                {
-                    if (fillGradientStops[j])
-                    {
-                        stop = (fillGradientStops[j] / lines.length) + (i / lines.length);
-                    }
-                    else
-                    {
-                        stop = currentIteration / totalIterations;
-                    }
-                    gradient.addColorStop(stop, fill[j]);
-                    currentIteration++;
-                }
-            }
-        }
-        else
-        {
-            // start the gradient at the center left of the canvas, and end at the center right of the canvas
-            gradient = this.context.createLinearGradient(0, height / 2, width, height / 2);
-
-            // can just evenly space out the gradients in this case, as multiple lines makes no difference
-            // to an even left to right gradient
-            totalIterations = fill.length + 1;
-            currentIteration = 1;
-
-            for (let i = 0; i < fill.length; i++)
-            {
-                if (fillGradientStops[i])
-                {
-                    stop = fillGradientStops[i];
-                }
-                else
-                {
-                    stop = currentIteration / totalIterations;
-                }
-                gradient.addColorStop(stop, fill[i]);
-                currentIteration++;
-            }
-        }
-
-        return gradient;
-    }
-
-    /**
-     * Destroys this text object.
-     * Note* Unlike a Sprite, a Text object will automatically destroy its baseTexture and texture as
-     * the majority of the time the texture will not be shared with any other Sprites.
-     *
-     * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options
-     *  have been set to that value
-     * @param {boolean} [options.children=false] - if set to true, all the children will have their
-     *  destroy method called as well. 'options' will be passed on to those calls.
-     * @param {boolean} [options.texture=true] - Should it destroy the current texture of the sprite as well
-     * @param {boolean} [options.baseTexture=true] - Should it destroy the base texture of the sprite as well
-     */
-    destroy(options)
-    {
-        if (typeof options === 'boolean')
-        {
-            options = { children: options };
-        }
-
-        options = Object.assign({}, defaultDestroyOptions, options);
-
-        super.destroy(options);
-
-        // make sure to reset the the context and canvas.. dont want this hanging around in memory!
-        this.context = null;
-        this.canvas = null;
-
-        this._style = null;
-    }
-
-    /**
-     * The width of the Text, setting this will actually modify the scale to achieve the value set
-     *
-     * @member {number}
-     */
-    get width()
-    {
-        this.updateText(true);
-
-        return Math.abs(this.scale.x) * this._texture.orig.width;
-    }
-
-    set width(value) // eslint-disable-line require-jsdoc
-    {
-        this.updateText(true);
-
-        const s = sign(this.scale.x) || 1;
-
-        this.scale.x = s * value / this._texture.orig.width;
-        this._width = value;
-    }
-
-    /**
-     * The height of the Text, setting this will actually modify the scale to achieve the value set
-     *
-     * @member {number}
-     */
-    get height()
-    {
-        this.updateText(true);
-
-        return Math.abs(this.scale.y) * this._texture.orig.height;
-    }
-
-    set height(value) // eslint-disable-line require-jsdoc
-    {
-        this.updateText(true);
-
-        const s = sign(this.scale.y) || 1;
-
-        this.scale.y = s * value / this._texture.orig.height;
-        this._height = value;
-    }
-
-    /**
-     * Set the style of the text. Set up an event listener to listen for changes on the style
-     * object and mark the text as dirty.
-     *
-     * @member {object|PIXI.TextStyle}
-     */
-    get style()
-    {
-        return this._style;
-    }
-
-    set style(style) // eslint-disable-line require-jsdoc
-    {
-        style = style || {};
-
-        if (style instanceof TextStyle)
-        {
-            this._style = style;
-        }
-        else
-        {
-            this._style = new TextStyle(style);
-        }
-
-        this.localStyleID = -1;
-        this.dirty = true;
-    }
-
-    /**
-     * Set the copy for the text object. To split a line you can use '\n'.
-     *
-     * @member {string}
-     */
-    get text()
-    {
-        return this._text;
-    }
-
-    set text(text) // eslint-disable-line require-jsdoc
-    {
-        text = String(text === '' || text === null || text === undefined ? ' ' : text);
-
-        if (this._text === text)
-        {
-            return;
-        }
-        this._text = text;
-        this.dirty = true;
-    }
-
-    /**
-     * Generates a font style string to use for Text.calculateFontProperties(). Takes the same parameter
-     * as Text.style.
-     *
-     * @static
-     * @param {object|TextStyle} style - String representing the style of the font
-     * @return {string} Font style string, for passing to Text.calculateFontProperties()
-     */
-    static getFontStyle(style)
-    {
-        style = style || {};
-
-        if (!(style instanceof TextStyle))
-        {
-            style = new TextStyle(style);
-        }
-
-        // build canvas api font setting from individual components. Convert a numeric style.fontSize to px
-        const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize;
-
-        // Clean-up fontFamily property by quoting each font name
-        // this will support font names with spaces
-        let fontFamilies = style.fontFamily;
-
-        if (!Array.isArray(style.fontFamily))
-        {
-            fontFamilies = style.fontFamily.split(',');
-        }
-
-        for (let i = fontFamilies.length - 1; i >= 0; i--)
-        {
-            // Trim any extra white-space
-            let fontFamily = fontFamilies[i].trim();
-
-            // Check if font already contains strings
-            if (!(/([\"\'])[^\'\"]+\1/).test(fontFamily))
-            {
-                fontFamily = `"${fontFamily}"`;
-            }
-            fontFamilies[i] = fontFamily;
-        }
-
-        return `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${fontFamilies.join(',')}`;
-    }
-
-    /**
-     * Calculates the ascent, descent and fontSize of a given fontStyle
-     *
-     * @static
-     * @param {string} fontStyle - String representing the style of the font
-     * @return {Object} Font properties object
-     */
-    static calculateFontProperties(fontStyle)
-    {
-        // as this method is used for preparing assets, don't recalculate things if we don't need to
-        if (Text.fontPropertiesCache[fontStyle])
-        {
-            return Text.fontPropertiesCache[fontStyle];
-        }
-
-        const properties = {};
-
-        const canvas = Text.fontPropertiesCanvas;
-        const context = Text.fontPropertiesContext;
-
-        context.font = fontStyle;
-
-        const width = Math.ceil(context.measureText('|MÉq').width);
-        let baseline = Math.ceil(context.measureText('M').width);
-        const height = 2 * baseline;
-
-        baseline = baseline * 1.4 | 0;
-
-        canvas.width = width;
-        canvas.height = height;
-
-        context.fillStyle = '#f00';
-        context.fillRect(0, 0, width, height);
-
-        context.font = fontStyle;
-
-        context.textBaseline = 'alphabetic';
-        context.fillStyle = '#000';
-        context.fillText('|MÉq', 0, baseline);
-
-        const imagedata = context.getImageData(0, 0, width, height).data;
-        const pixels = imagedata.length;
-        const line = width * 4;
-
-        let i = 0;
-        let idx = 0;
-        let stop = false;
-
-        // ascent. scan from top to bottom until we find a non red pixel
-        for (i = 0; i < baseline; ++i)
-        {
-            for (let j = 0; j < line; j += 4)
-            {
-                if (imagedata[idx + j] !== 255)
-                {
-                    stop = true;
-                    break;
-                }
-            }
-            if (!stop)
-            {
-                idx += line;
-            }
-            else
-            {
-                break;
-            }
-        }
-
-        properties.ascent = baseline - i;
-
-        idx = pixels - line;
-        stop = false;
-
-        // descent. scan from bottom to top until we find a non red pixel
-        for (i = height; i > baseline; --i)
-        {
-            for (let j = 0; j < line; j += 4)
-            {
-                if (imagedata[idx + j] !== 255)
-                {
-                    stop = true;
-                    break;
-                }
-            }
-
-            if (!stop)
-            {
-                idx -= line;
-            }
-            else
-            {
-                break;
-            }
-        }
-
-        properties.descent = i - baseline;
-        properties.fontSize = properties.ascent + properties.descent;
-
-        Text.fontPropertiesCache[fontStyle] = properties;
-
-        return properties;
-    }
+    Text = require('./TextV8'); // eslint-disable-line global-require
+}
+else
+{
+    Text = require('./TextWeb'); // eslint-disable-line global-require
 }
 
-Text.fontPropertiesCache = {};
-Text.fontPropertiesCanvas = document.createElement('canvas');
-Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d');
+module.exports = Text;
diff --git a/src/core/text/TextV8.js b/src/core/text/TextV8.js
new file mode 100644
index 0000000..c3e1a78
--- /dev/null
+++ b/src/core/text/TextV8.js
@@ -0,0 +1,361 @@
+/* eslint max-depth: [2, 8] */
+import Container from '../display/Container';
+import { sign } from '../utils';
+import TextStyle from './TextStyle';
+import { Point } from '../math';
+
+const defaultDestroyOptions = {
+    texture: true,
+    children: false,
+    baseTexture: true,
+};
+
+/**
+ * A Text Object will create a line or multiple lines of text. To split a line you can use '\n' in your text string,
+ * or add a wordWrap property set to true and and wordWrapWidth property with a value in the style object.
+ *
+ * A Text can be created directly from a string and a style object
+ *
+ * ```js
+ * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'});
+ * ```
+ *
+ * @class
+ * @extends PIXI.Sprite
+ * @memberof PIXI
+ */
+export default class TextV8 extends Container
+{
+    /**
+     * @param {string} text - The string that you would like the text to display
+     * @param {object|PIXI.TextStyle} [style] - The style parameters
+     * @param {HTMLCanvasElement} [canvas] - The canvas element for drawing text
+     */
+    constructor(text, style)
+    {
+        super();
+
+        /**
+         * Private tracker for the current text.
+         *
+         * @member {string}
+         * @private
+         */
+        this._text = null;
+
+        /**
+         * The anchor sets the origin point of the texture.
+         * The default is 0,0 this means the texture's origin is the top left
+         * Setting the anchor to 0.5,0.5 means the texture's origin is centered
+         * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner
+         *
+         * @member {PIXI.Point}
+         * @private
+         */
+        this._anchor = new Point();
+
+        /**
+         * Private tracker for the current style.
+         *
+         * @member {object}
+         * @private
+         */
+        this._style = null;
+
+        /**
+         * Private tracker for the current font.
+         *
+         * @member {Object}
+         * @private
+         */
+        this._font = null;
+
+        this.text = text;
+        this.style = style;
+
+        this.localStyleID = -1;
+
+        /**
+         * Plugin that is responsible for rendering this element.
+         * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods.
+         *
+         * @member {string}
+         * @default 'TextV8'
+         */
+        this.pluginName = 'TextV8';
+    }
+
+    /**
+     * Renders text and updates it when needed.
+     *
+     * @private
+     * @param {boolean} respectDirty - Whether to abort updating the text if the Text isn't dirty and the function is called.
+     * @param {PIXI.PXSceneRenderer} renderer - The renderer
+     */
+    updateText(respectDirty, renderer)
+    {
+        const style = this._style;
+
+        // check if style has changed..
+        if (this.localStyleID !== style.styleID)
+        {
+            this.dirty = true;
+            this.localStyleID = style.styleID;
+        }
+
+        if (!this.dirty && respectDirty)
+        {
+            return;
+        }
+
+        this._font = TextV8.getFontStyle(style, renderer);
+        this.dirty = false;
+    }
+
+    /**
+     * Renders the object using the PXScene renderer
+     *
+     * @private
+     * @param {PIXI.PXSceneRenderer} renderer - The renderer
+     */
+    _renderPXScene(renderer)
+    {
+        this.updateText(false, renderer);
+        this.fontResourceCache = TextV8.fontResourceCache;
+        renderer.plugins[this.pluginName].render(this);
+    }
+
+    /**
+     * Method to be called upon a TextStyle change.
+     * @private
+     */
+    _onStyleChange()
+    {
+        this.dirty = true;
+    }
+
+    /**
+     * Destroys this text object.
+     * Note* Unlike a Sprite, a Text object will automatically destroy its baseTexture and texture as
+     * the majority of the time the texture will not be shared with any other Sprites.
+     *
+     * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options
+     *  have been set to that value
+     * @param {boolean} [options.children=false] - if set to true, all the children will have their
+     *  destroy method called as well. 'options' will be passed on to those calls.
+     * @param {boolean} [options.texture=true] - Should it destroy the current texture of the sprite as well
+     * @param {boolean} [options.baseTexture=true] - Should it destroy the base texture of the sprite as well
+     */
+    destroy(options)
+    {
+        if (typeof options === 'boolean')
+        {
+            options = { children: options };
+        }
+
+        options = Object.assign({}, defaultDestroyOptions, options);
+
+        this._anchor = null;
+
+        super.destroy(options);
+
+        // make sure to reset the the context and canvas.. dont want this hanging around in memory!
+        this.context = null;
+        this.canvas = null;
+
+        this._style = null;
+    }
+
+    /**
+     * The width of the Text, setting this will actually modify the scale to achieve the value set
+     *
+     * @member {number}
+     */
+    get width()
+    {
+        this.updateText(true);
+
+        const origWidth = this.renderedObject ? this.renderedObject.w : 1;
+
+        return origWidth * Math.abs(this.scale.x);
+    }
+
+    set width(value) // eslint-disable-line require-jsdoc
+    {
+        this.updateText(true);
+
+        const s = sign(this.scale.x) || 1;
+
+        const origWidth = this.renderedObject ? this.renderedObject.w : 1;
+
+        this.scale.x = s * value / origWidth;
+        this._width = value;
+    }
+
+    /**
+     * The height of the Text, setting this will actually modify the scale to achieve the value set
+     *
+     * @member {number}
+     */
+    get height()
+    {
+        this.updateText(true);
+
+        const origHeight = this.renderedObject ? this.renderedObject.h : 1;
+
+        return origHeight * Math.abs(this.scale.y);
+    }
+
+    set height(value) // eslint-disable-line require-jsdoc
+    {
+        this.updateText(true);
+
+        const s = sign(this.scale.y) || 1;
+
+        const origHeight = this.renderedObject ? this.renderedObject.h : 1;
+
+        this.scale.y = s * value / origHeight;
+        this._height = value;
+    }
+
+    /**
+     * Set the style of the text. Set up an event listener to listen for changes on the style
+     * object and mark the text as dirty.
+     *
+     * @member {object|PIXI.TextStyle}
+     */
+    get style()
+    {
+        return this._style;
+    }
+
+    set style(style) // eslint-disable-line require-jsdoc
+    {
+        style = style || {};
+
+        if (style instanceof TextStyle)
+        {
+            this._style = style;
+        }
+        else
+        {
+            this._style = new TextStyle(style);
+        }
+
+        this.localStyleID = -1;
+        this.dirty = true;
+    }
+
+    /**
+     * Set the copy for the text object. To split a line you can use '\n'.
+     *
+     * @member {string}
+     */
+    get text()
+    {
+        return this._text;
+    }
+
+    set text(text) // eslint-disable-line require-jsdoc
+    {
+        text = String(text === '' || text === null || text === undefined ? ' ' : text);
+
+        if (this._text === text)
+        {
+            return;
+        }
+        this._text = text;
+        this.dirty = true;
+    }
+
+    /**
+     * Generates a font style string to use for Text.calculateFontProperties(). Takes the same parameter
+     * as Text.style.
+     *
+     * @static
+     * @param {object|TextStyle} style - String representing the style of the font
+     * @param {PIXI.PXSceneRenderer} renderer - The renderer
+     * @return {string} Font style string, for passing to Text.calculateFontProperties()
+     */
+    static getFontStyle(style, renderer)
+    {
+        style = style || {};
+
+        if (!(style instanceof TextStyle))
+        {
+            style = new TextStyle(style);
+        }
+
+        const fontSize = (typeof style.fontSize === 'number') ? style.fontSize : Number.parseFloat(style.fontSize);
+
+        // Clean-up fontFamily property by quoting each font name
+        // this will support font names with spaces
+        let fontFamilies = style.fontFamily;
+
+        if (!Array.isArray(style.fontFamily))
+        {
+            fontFamilies = style.fontFamily.split(',');
+        }
+        for (let i = fontFamilies.length - 1; i >= 0; i--)
+        {
+            // Trim any extra white-space
+            const fontFamily = fontFamilies[i].trim();
+
+            fontFamilies[i] = fontFamily;
+            if (renderer && !TextV8.fontResourceCache[fontFamily])
+            {
+                const fontUrl = fontFamily;
+
+                if (fontUrl)
+                {
+                    const fontRes = renderer.view.create({
+                        t: 'fontResource',
+                        url: fontUrl,
+                    });
+
+                    fontRes.ready.then((font) =>
+                    {
+                        TextV8.fontResourceCache[fontFamily] = font;
+                    });
+                }
+            }
+        }
+
+        return {
+            fontFamilies,
+            fontSize,
+            fontWeight: style.fontWeight,
+            fontStyle: style.fontStyle,
+        };
+    }
+
+    /**
+     * Get font resource by Font family.
+     * @param {String} fontFamily - Font family name
+     * @returns {Object} FontResource
+     */
+    static getFontResourceByFamily(fontFamily)
+    {
+        return TextV8.fontResourceCache[fontFamily];
+    }
+
+    /**
+     * The anchor sets the origin point of the texture.
+     * The default is 0,0 this means the texture's origin is the top left
+     * Setting the anchor to 0.5,0.5 means the texture's origin is centered
+     * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner
+     *
+     * @member {PIXI.ObservablePoint}
+     */
+    get anchor()
+    {
+        return this._anchor;
+    }
+
+    set anchor(value) // eslint-disable-line require-jsdoc
+    {
+        this._anchor.copy(value);
+    }
+}
+
+TextV8.fontResourceCache = {};
diff --git a/src/core/text/TextWeb.js b/src/core/text/TextWeb.js
new file mode 100644
index 0000000..93d923a
--- /dev/null
+++ b/src/core/text/TextWeb.js
@@ -0,0 +1,915 @@
+/* eslint max-depth: [2, 8] */
+import Sprite from '../sprites/Sprite';
+import Texture from '../textures/Texture';
+import { Rectangle } from '../math';
+import { sign, isV8 } from '../utils';
+import { TEXT_GRADIENT } from '../const';
+import settings from '../settings';
+import TextStyle from './TextStyle';
+import trimCanvas from '../utils/trimCanvas';
+
+const defaultDestroyOptions = {
+    texture: true,
+    children: false,
+    baseTexture: true,
+};
+
+/**
+ * A Text Object will create a line or multiple lines of text. To split a line you can use '\n' in your text string,
+ * or add a wordWrap property set to true and and wordWrapWidth property with a value in the style object.
+ *
+ * A Text can be created directly from a string and a style object
+ *
+ * ```js
+ * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'});
+ * ```
+ *
+ * @class
+ * @extends PIXI.Sprite
+ * @memberof PIXI
+ */
+export default class Text extends Sprite
+{
+    /**
+     * @param {string} text - The string that you would like the text to display
+     * @param {object|PIXI.TextStyle} [style] - The style parameters
+     * @param {HTMLCanvasElement} [canvas] - The canvas element for drawing text
+     */
+    constructor(text, style, canvas)
+    {
+        canvas = canvas || document.createElement('canvas');
+
+        canvas.width = 3;
+        canvas.height = 3;
+
+        const texture = Texture.fromCanvas(canvas);
+
+        texture.orig = new Rectangle();
+        texture.trim = new Rectangle();
+
+        super(texture);
+
+        /**
+         * The canvas element that everything is drawn to
+         *
+         * @member {HTMLCanvasElement}
+         */
+        this.canvas = canvas;
+
+        /**
+         * The canvas 2d context that everything is drawn with
+         * @member {CanvasRenderingContext2D}
+         */
+        this.context = this.canvas.getContext('2d');
+
+        /**
+         * The resolution / device pixel ratio of the canvas. This is set automatically by the renderer.
+         * @member {number}
+         * @default 1
+         */
+        this.resolution = settings.RESOLUTION;
+
+        /**
+         * Private tracker for the current text.
+         *
+         * @member {string}
+         * @private
+         */
+        this._text = null;
+
+        /**
+         * Private tracker for the current style.
+         *
+         * @member {object}
+         * @private
+         */
+        this._style = null;
+        /**
+         * Private listener to track style changes.
+         *
+         * @member {Function}
+         * @private
+         */
+        this._styleListener = null;
+
+        /**
+         * Private tracker for the current font.
+         *
+         * @member {string}
+         * @private
+         */
+        this._font = '';
+
+        this.text = text;
+        this.style = style;
+
+        this.localStyleID = -1;
+    }
+
+    /**
+     * Renders text and updates it when needed.
+     *
+     * @private
+     * @param {boolean} respectDirty - Whether to abort updating the text if the Text isn't dirty and the function is called.
+     */
+    updateText(respectDirty)
+    {
+        const style = this._style;
+
+        // check if style has changed..
+        if (this.localStyleID !== style.styleID)
+        {
+            this.dirty = true;
+            this.localStyleID = style.styleID;
+        }
+
+        if (!this.dirty && respectDirty)
+        {
+            return;
+        }
+
+        this._font = Text.getFontStyle(style);
+
+        this.context.font = this._font;
+
+        // word wrap
+        // preserve original text
+        const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text;
+
+        // split text into lines
+        const lines = outputText.split(/(?:\r\n|\r|\n)/);
+
+        // calculate text width
+        const lineWidths = new Array(lines.length);
+        let maxLineWidth = 0;
+        const fontProperties = Text.calculateFontProperties(this._font);
+
+        for (let i = 0; i < lines.length; i++)
+        {
+            const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing);
+
+            lineWidths[i] = lineWidth;
+            maxLineWidth = Math.max(maxLineWidth, lineWidth);
+        }
+
+        let width = maxLineWidth + style.strokeThickness;
+
+        if (style.dropShadow)
+        {
+            width += style.dropShadowDistance;
+        }
+
+        this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution);
+
+        // calculate text height
+        const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness;
+
+        let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness)
+            + ((lines.length - 1) * lineHeight);
+
+        if (style.dropShadow)
+        {
+            height += style.dropShadowDistance;
+        }
+
+        this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution);
+
+        this.context.scale(this.resolution, this.resolution);
+
+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+
+        this.context.font = this._font;
+        this.context.strokeStyle = style.stroke;
+        this.context.lineWidth = style.strokeThickness;
+        this.context.textBaseline = style.textBaseline;
+        this.context.lineJoin = style.lineJoin;
+        this.context.miterLimit = style.miterLimit;
+
+        let linePositionX;
+        let linePositionY;
+
+        if (style.dropShadow)
+        {
+            this.context.shadowBlur = style.dropShadowBlur;
+            this.context.globalAlpha = style.dropShadowAlpha;
+
+            if (style.dropShadowBlur > 0)
+            {
+                this.context.shadowColor = style.dropShadowColor;
+            }
+            else
+            {
+                this.context.fillStyle = style.dropShadowColor;
+            }
+
+            const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance;
+            const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance;
+
+            for (let i = 0; i < lines.length; i++)
+            {
+                linePositionX = style.strokeThickness / 2;
+                linePositionY = ((style.strokeThickness / 2) + (i * lineHeight)) + fontProperties.ascent;
+
+                if (style.align === 'right')
+                {
+                    linePositionX += maxLineWidth - lineWidths[i];
+                }
+                else if (style.align === 'center')
+                {
+                    linePositionX += (maxLineWidth - lineWidths[i]) / 2;
+                }
+
+                if (style.fill)
+                {
+                    this.drawLetterSpacing(
+                        lines[i],
+                        linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding
+                    );
+
+                    if (style.stroke && style.strokeThickness)
+                    {
+                        this.context.strokeStyle = style.dropShadowColor;
+                        this.drawLetterSpacing(
+                            lines[i],
+                            linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding,
+                            true
+                        );
+                        this.context.strokeStyle = style.stroke;
+                    }
+                }
+            }
+        }
+
+        // reset the shadow blur and alpha that was set by the drop shadow, for the regular text
+        this.context.shadowBlur = 0;
+        this.context.globalAlpha = 1;
+
+        // set canvas text styles
+        this.context.fillStyle = this._generateFillStyle(style, lines);
+
+        // draw lines line by line
+        for (let i = 0; i < lines.length; i++)
+        {
+            linePositionX = style.strokeThickness / 2;
+            linePositionY = ((style.strokeThickness / 2) + (i * lineHeight)) + fontProperties.ascent;
+
+            if (style.align === 'right')
+            {
+                linePositionX += maxLineWidth - lineWidths[i];
+            }
+            else if (style.align === 'center')
+            {
+                linePositionX += (maxLineWidth - lineWidths[i]) / 2;
+            }
+
+            if (style.stroke && style.strokeThickness)
+            {
+                this.drawLetterSpacing(lines[i], linePositionX + style.padding, linePositionY + style.padding, true);
+            }
+
+            if (style.fill)
+            {
+                this.drawLetterSpacing(lines[i], linePositionX + style.padding, linePositionY + style.padding);
+            }
+        }
+
+        this.updateTexture();
+    }
+
+    /**
+     * Render the text with letter-spacing.
+     * @param {string} text - The text to draw
+     * @param {number} x - Horizontal position to draw the text
+     * @param {number} y - Vertical position to draw the text
+     * @param {boolean} [isStroke=false] - Is this drawing for the outside stroke of the
+     *  text? If not, it's for the inside fill
+     * @private
+     */
+    drawLetterSpacing(text, x, y, isStroke = false)
+    {
+        const style = this._style;
+
+        // letterSpacing of 0 means normal
+        const letterSpacing = style.letterSpacing;
+
+        if (letterSpacing === 0)
+        {
+            if (isStroke)
+            {
+                this.context.strokeText(text, x, y);
+            }
+            else
+            {
+                this.context.fillText(text, x, y);
+            }
+
+            return;
+        }
+
+        const characters = String.prototype.split.call(text, '');
+        let currentPosition = x;
+        let index = 0;
+        let current = '';
+
+        while (index < text.length)
+        {
+            current = characters[index++];
+            if (isStroke)
+            {
+                this.context.strokeText(current, currentPosition, y);
+            }
+            else
+            {
+                this.context.fillText(current, currentPosition, y);
+            }
+            currentPosition += this.context.measureText(current).width + letterSpacing;
+        }
+    }
+
+    /**
+     * Updates texture size based on canvas size
+     *
+     * @private
+     */
+    updateTexture()
+    {
+        if (this._style.trim)
+        {
+            const trimmed = trimCanvas(this.canvas);
+
+            this.canvas.width = trimmed.width;
+            this.canvas.height = trimmed.height;
+            this.context.putImageData(trimmed.data, 0, 0);
+        }
+
+        const texture = this._texture;
+        const style = this._style;
+
+        texture.baseTexture.hasLoaded = true;
+        texture.baseTexture.resolution = this.resolution;
+
+        texture.baseTexture.realWidth = this.canvas.width;
+        texture.baseTexture.realHeight = this.canvas.height;
+        texture.baseTexture.width = this.canvas.width / this.resolution;
+        texture.baseTexture.height = this.canvas.height / this.resolution;
+        texture.trim.width = texture._frame.width = this.canvas.width / this.resolution;
+        texture.trim.height = texture._frame.height = this.canvas.height / this.resolution;
+
+        texture.trim.x = -style.padding;
+        texture.trim.y = -style.padding;
+
+        texture.orig.width = texture._frame.width - (style.padding * 2);
+        texture.orig.height = texture._frame.height - (style.padding * 2);
+
+        // call sprite onTextureUpdate to update scale if _width or _height were set
+        this._onTextureUpdate();
+
+        texture.baseTexture.emit('update', texture.baseTexture);
+
+        this.dirty = false;
+    }
+
+    /**
+     * Renders the object using the WebGL renderer
+     *
+     * @param {PIXI.WebGLRenderer} renderer - The renderer
+     */
+    renderWebGL(renderer)
+    {
+        if (this.resolution !== renderer.resolution)
+        {
+            this.resolution = renderer.resolution;
+            this.dirty = true;
+        }
+
+        this.updateText(true);
+
+        super.renderWebGL(renderer);
+    }
+
+    /**
+     * Renders the object using the Canvas renderer
+     *
+     * @private
+     * @param {PIXI.CanvasRenderer} renderer - The renderer
+     */
+    _renderCanvas(renderer)
+    {
+        if (this.resolution !== renderer.resolution)
+        {
+            this.resolution = renderer.resolution;
+            this.dirty = true;
+        }
+
+        this.updateText(true);
+
+        super._renderCanvas(renderer);
+    }
+
+    /**
+     * Applies newlines to a string to have it optimally fit into the horizontal
+     * bounds set by the Text object's wordWrapWidth property.
+     *
+     * @private
+     * @param {string} text - String to apply word wrapping to
+     * @return {string} New string with new lines applied where required
+     */
+    wordWrap(text)
+    {
+        // Greedy wrapping algorithm that will wrap words as the line grows longer
+        // than its horizontal bounds.
+        let result = '';
+        const style = this._style;
+        const lines = text.split('\n');
+        const wordWrapWidth = style.wordWrapWidth;
+
+        for (let i = 0; i < lines.length; i++)
+        {
+            let spaceLeft = wordWrapWidth;
+            const words = lines[i].split(' ');
+
+            for (let j = 0; j < words.length; j++)
+            {
+                const wordWidth = this.context.measureText(words[j]).width;
+
+                if (style.breakWords && wordWidth > wordWrapWidth)
+                {
+                    // Word should be split in the middle
+                    const characters = words[j].split('');
+
+                    for (let c = 0; c < characters.length; c++)
+                    {
+                        const characterWidth = this.context.measureText(characters[c]).width;
+
+                        if (characterWidth > spaceLeft)
+                        {
+                            result += `\n${characters[c]}`;
+                            spaceLeft = wordWrapWidth - characterWidth;
+                        }
+                        else
+                        {
+                            if (c === 0)
+                            {
+                                result += ' ';
+                            }
+
+                            result += characters[c];
+                            spaceLeft -= characterWidth;
+                        }
+                    }
+                }
+                else
+                {
+                    const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width;
+
+                    if (j === 0 || wordWidthWithSpace > spaceLeft)
+                    {
+                        // Skip printing the newline if it's the first word of the line that is
+                        // greater than the word wrap width.
+                        if (j > 0)
+                        {
+                            result += '\n';
+                        }
+                        result += words[j];
+                        spaceLeft = wordWrapWidth - wordWidth;
+                    }
+                    else
+                    {
+                        spaceLeft -= wordWidthWithSpace;
+                        result += ` ${words[j]}`;
+                    }
+                }
+            }
+
+            if (i < lines.length - 1)
+            {
+                result += '\n';
+            }
+        }
+
+        return result;
+    }
+
+    /**
+     * Gets the local bounds of the text object.
+     *
+     * @param {Rectangle} rect - The output rectangle.
+     * @return {Rectangle} The bounds.
+     */
+    getLocalBounds(rect)
+    {
+        this.updateText(true);
+
+        return super.getLocalBounds.call(this, rect);
+    }
+
+    /**
+     * calculates the bounds of the Text as a rectangle. The bounds calculation takes the worldTransform into account.
+     */
+    _calculateBounds()
+    {
+        this.updateText(true);
+        this.calculateVertices();
+        // if we have already done this on THIS frame.
+        this._bounds.addQuad(this.vertexData);
+    }
+
+    /**
+     * Method to be called upon a TextStyle change.
+     * @private
+     */
+    _onStyleChange()
+    {
+        this.dirty = true;
+    }
+
+    /**
+     * Generates the fill style. Can automatically generate a gradient based on the fill style being an array
+     *
+     * @private
+     * @param {object} style - The style.
+     * @param {string[]} lines - The lines of text.
+     * @return {string|number|CanvasGradient} The fill style
+     */
+    _generateFillStyle(style, lines)
+    {
+        if (!Array.isArray(style.fill))
+        {
+            return style.fill;
+        }
+
+        // cocoon on canvas+ cannot generate textures, so use the first colour instead
+        if (navigator.isCocoonJS)
+        {
+            return style.fill[0];
+        }
+
+        // the gradient will be evenly spaced out according to how large the array is.
+        // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75
+        let gradient;
+        let totalIterations;
+        let currentIteration;
+        let stop;
+
+        const width = this.canvas.width / this.resolution;
+        const height = this.canvas.height / this.resolution;
+
+        // make a copy of the style settings, so we can manipulate them later
+        const fill = style.fill.slice();
+        const fillGradientStops = style.fillGradientStops.slice();
+
+        // wanting to evenly distribute the fills. So an array of 4 colours should give fills of 0.25, 0.5 and 0.75
+        if (!fillGradientStops.length)
+        {
+            const lengthPlus1 = fill.length + 1;
+
+            for (let i = 1; i < lengthPlus1; ++i)
+            {
+                fillGradientStops.push(i / lengthPlus1);
+            }
+        }
+
+        // stop the bleeding of the last gradient on the line above to the top gradient of the this line
+        // by hard defining the first gradient colour at point 0, and last gradient colour at point 1
+        fill.unshift(style.fill[0]);
+        fillGradientStops.unshift(0);
+
+        fill.push(style.fill[style.fill.length - 1]);
+        fillGradientStops.push(1);
+
+        if (style.fillGradientType === TEXT_GRADIENT.LINEAR_VERTICAL)
+        {
+            // start the gradient at the top center of the canvas, and end at the bottom middle of the canvas
+            gradient = this.context.createLinearGradient(width / 2, 0, width / 2, height);
+
+            // we need to repeat the gradient so that each individual line of text has the same vertical gradient effect
+            // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875
+            totalIterations = (fill.length + 1) * lines.length;
+            currentIteration = 0;
+            for (let i = 0; i < lines.length; i++)
+            {
+                currentIteration += 1;
+                for (let j = 0; j < fill.length; j++)
+                {
+                    if (fillGradientStops[j])
+                    {
+                        stop = (fillGradientStops[j] / lines.length) + (i / lines.length);
+                    }
+                    else
+                    {
+                        stop = currentIteration / totalIterations;
+                    }
+                    gradient.addColorStop(stop, fill[j]);
+                    currentIteration++;
+                }
+            }
+        }
+        else
+        {
+            // start the gradient at the center left of the canvas, and end at the center right of the canvas
+            gradient = this.context.createLinearGradient(0, height / 2, width, height / 2);
+
+            // can just evenly space out the gradients in this case, as multiple lines makes no difference
+            // to an even left to right gradient
+            totalIterations = fill.length + 1;
+            currentIteration = 1;
+
+            for (let i = 0; i < fill.length; i++)
+            {
+                if (fillGradientStops[i])
+                {
+                    stop = fillGradientStops[i];
+                }
+                else
+                {
+                    stop = currentIteration / totalIterations;
+                }
+                gradient.addColorStop(stop, fill[i]);
+                currentIteration++;
+            }
+        }
+
+        return gradient;
+    }
+
+    /**
+     * Destroys this text object.
+     * Note* Unlike a Sprite, a Text object will automatically destroy its baseTexture and texture as
+     * the majority of the time the texture will not be shared with any other Sprites.
+     *
+     * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options
+     *  have been set to that value
+     * @param {boolean} [options.children=false] - if set to true, all the children will have their
+     *  destroy method called as well. 'options' will be passed on to those calls.
+     * @param {boolean} [options.texture=true] - Should it destroy the current texture of the sprite as well
+     * @param {boolean} [options.baseTexture=true] - Should it destroy the base texture of the sprite as well
+     */
+    destroy(options)
+    {
+        if (typeof options === 'boolean')
+        {
+            options = { children: options };
+        }
+
+        options = Object.assign({}, defaultDestroyOptions, options);
+
+        super.destroy(options);
+
+        // make sure to reset the the context and canvas.. dont want this hanging around in memory!
+        this.context = null;
+        this.canvas = null;
+
+        this._style = null;
+    }
+
+    /**
+     * The width of the Text, setting this will actually modify the scale to achieve the value set
+     *
+     * @member {number}
+     */
+    get width()
+    {
+        this.updateText(true);
+
+        return Math.abs(this.scale.x) * this._texture.orig.width;
+    }
+
+    set width(value) // eslint-disable-line require-jsdoc
+    {
+        this.updateText(true);
+
+        const s = sign(this.scale.x) || 1;
+
+        this.scale.x = s * value / this._texture.orig.width;
+        this._width = value;
+    }
+
+    /**
+     * The height of the Text, setting this will actually modify the scale to achieve the value set
+     *
+     * @member {number}
+     */
+    get height()
+    {
+        this.updateText(true);
+
+        return Math.abs(this.scale.y) * this._texture.orig.height;
+    }
+
+    set height(value) // eslint-disable-line require-jsdoc
+    {
+        this.updateText(true);
+
+        const s = sign(this.scale.y) || 1;
+
+        this.scale.y = s * value / this._texture.orig.height;
+        this._height = value;
+    }
+
+    /**
+     * Set the style of the text. Set up an event listener to listen for changes on the style
+     * object and mark the text as dirty.
+     *
+     * @member {object|PIXI.TextStyle}
+     */
+    get style()
+    {
+        return this._style;
+    }
+
+    set style(style) // eslint-disable-line require-jsdoc
+    {
+        style = style || {};
+
+        if (style instanceof TextStyle)
+        {
+            this._style = style;
+        }
+        else
+        {
+            this._style = new TextStyle(style);
+        }
+
+        this.localStyleID = -1;
+        this.dirty = true;
+    }
+
+    /**
+     * Set the copy for the text object. To split a line you can use '\n'.
+     *
+     * @member {string}
+     */
+    get text()
+    {
+        return this._text;
+    }
+
+    set text(text) // eslint-disable-line require-jsdoc
+    {
+        text = String(text === '' || text === null || text === undefined ? ' ' : text);
+
+        if (this._text === text)
+        {
+            return;
+        }
+        this._text = text;
+        this.dirty = true;
+    }
+
+    /**
+     * Generates a font style string to use for Text.calculateFontProperties(). Takes the same parameter
+     * as Text.style.
+     *
+     * @static
+     * @param {object|TextStyle} style - String representing the style of the font
+     * @return {string} Font style string, for passing to Text.calculateFontProperties()
+     */
+    static getFontStyle(style)
+    {
+        style = style || {};
+
+        if (!(style instanceof TextStyle))
+        {
+            style = new TextStyle(style);
+        }
+
+        // build canvas api font setting from individual components. Convert a numeric style.fontSize to px
+        const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize;
+
+        // Clean-up fontFamily property by quoting each font name
+        // this will support font names with spaces
+        let fontFamilies = style.fontFamily;
+
+        if (!Array.isArray(style.fontFamily))
+        {
+            fontFamilies = style.fontFamily.split(',');
+        }
+
+        for (let i = fontFamilies.length - 1; i >= 0; i--)
+        {
+            // Trim any extra white-space
+            let fontFamily = fontFamilies[i].trim();
+
+            // Check if font already contains strings
+            if (!(/([\"\'])[^\'\"]+\1/).test(fontFamily))
+            {
+                fontFamily = `"${fontFamily}"`;
+            }
+            fontFamilies[i] = fontFamily;
+        }
+
+        return `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${fontFamilies.join(',')}`;
+    }
+
+    /**
+     * Calculates the ascent, descent and fontSize of a given fontStyle
+     *
+     * @static
+     * @param {string} fontStyle - String representing the style of the font
+     * @return {Object} Font properties object
+     */
+    static calculateFontProperties(fontStyle)
+    {
+        // as this method is used for preparing assets, don't recalculate things if we don't need to
+        if (Text.fontPropertiesCache[fontStyle])
+        {
+            return Text.fontPropertiesCache[fontStyle];
+        }
+
+        const properties = {};
+
+        const canvas = Text.fontPropertiesCanvas;
+        const context = Text.fontPropertiesContext;
+
+        context.font = fontStyle;
+
+        const width = Math.ceil(context.measureText('|MÉq').width);
+        let baseline = Math.ceil(context.measureText('M').width);
+        const height = 2 * baseline;
+
+        baseline = baseline * 1.4 | 0;
+
+        canvas.width = width;
+        canvas.height = height;
+
+        context.fillStyle = '#f00';
+        context.fillRect(0, 0, width, height);
+
+        context.font = fontStyle;
+
+        context.textBaseline = 'alphabetic';
+        context.fillStyle = '#000';
+        context.fillText('|MÉq', 0, baseline);
+
+        const imagedata = context.getImageData(0, 0, width, height).data;
+        const pixels = imagedata.length;
+        const line = width * 4;
+
+        let i = 0;
+        let idx = 0;
+        let stop = false;
+
+        // ascent. scan from top to bottom until we find a non red pixel
+        for (i = 0; i < baseline; ++i)
+        {
+            for (let j = 0; j < line; j += 4)
+            {
+                if (imagedata[idx + j] !== 255)
+                {
+                    stop = true;
+                    break;
+                }
+            }
+            if (!stop)
+            {
+                idx += line;
+            }
+            else
+            {
+                break;
+            }
+        }
+
+        properties.ascent = baseline - i;
+
+        idx = pixels - line;
+        stop = false;
+
+        // descent. scan from bottom to top until we find a non red pixel
+        for (i = height; i > baseline; --i)
+        {
+            for (let j = 0; j < line; j += 4)
+            {
+                if (imagedata[idx + j] !== 255)
+                {
+                    stop = true;
+                    break;
+                }
+            }
+
+            if (!stop)
+            {
+                idx -= line;
+            }
+            else
+            {
+                break;
+            }
+        }
+
+        properties.descent = i - baseline;
+        properties.fontSize = properties.ascent + properties.descent;
+
+        Text.fontPropertiesCache[fontStyle] = properties;
+
+        return properties;
+    }
+}
+
+Text.fontPropertiesCache = {};
+
+if (!isV8())
+{
+    Text.fontPropertiesCanvas = document.createElement('canvas');
+    Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d');
+}
diff --git a/src/core/text/pxscene/PXSceneTextRenderer.js b/src/core/text/pxscene/PXSceneTextRenderer.js
new file mode 100644
index 0000000..12c5407
--- /dev/null
+++ b/src/core/text/pxscene/PXSceneTextRenderer.js
@@ -0,0 +1,212 @@
+import PXSceneRenderer from '../../renderers/pxscene/PXSceneRenderer';
+import { string2hexV8 } from '../../utils';
+import { Point } from '../../math';
+
+/**
+ * Renderer dedicated to drawing and batching text for PXScene.
+ *
+ * @class
+ * @private
+ * @memberof PIXI
+ */
+export default class PXSceneTextRenderer
+{
+    /**
+     * @param {PIXI.PXSceneRenderer} renderer -The renderer sprite this batch works for.
+     */
+    constructor(renderer)
+    {
+        this.renderer = renderer;
+    }
+
+    /**
+     * Renders the text object.
+     *
+     * @param {PIXI.TextV8} text - the text to render
+     */
+    render(text)
+    {
+        const font = text._font;
+        let fontResource;
+
+        for (let i = 0; i < font.fontFamilies.length; ++i)
+        {
+            fontResource = text.fontResourceCache[font.fontFamilies[i]];
+            if (fontResource)
+            {
+                break;
+            }
+        }
+        if (!fontResource)
+        {
+            return;
+        }
+
+        const style = text.style;
+
+        // Convert local coordinates to world coordinates
+        const point = new Point(text.x, text.y);
+        const globalPoint = text.parent.toGlobal(point);
+        const textMeasure = fontResource.measureText(font.fontSize, text.text);
+
+        if (text.renderedObject)
+        {
+            const renderedObject = text.renderedObject;
+
+            // Calculate all attributes
+            const attr = this._calcTextAttributes(globalPoint, text, textMeasure);
+
+            if (text.renderedObjectText.text.trim() !== text.text.trim())
+            {
+                text.renderedObjectText.text = text.text;
+            }
+            renderedObject.x = attr.x;
+            renderedObject.y = attr.y;
+            renderedObject.cx = attr.cx;
+            renderedObject.cy = attr.cy;
+            renderedObject.a = attr.a;
+            renderedObject.r = attr.r;
+            renderedObject.sx = attr.sx;
+            renderedObject.sy = attr.sy;
+        }
+        else
+        {
+            const attr = this._calcTextAttributes(globalPoint, text, textMeasure);
+
+            const parentRenderedObject = (text.parent && text.parent.renderedObject) || this.renderer.context;
+
+            // Create a container first
+            text.renderedObject = this.renderer.view.create({
+                t: 'rect',
+                parent: parentRenderedObject,
+                x: attr.x,
+                y: attr.y,
+                cx: attr.cx,
+                cy: attr.cy,
+                a: attr.a,
+                r: attr.r,
+                sx: attr.sx,
+                sy: attr.sy,
+                fillColor: 0x0,
+            });
+
+            const createTextStyle = {
+                t: 'textBox',
+                text: text.text,
+                bold: font.fontWeight === 'bold',
+                italic: font.fontStyle === 'italic',
+                wordWrap: !!style.wordWrap,
+                w: (!!style.wordWrap && style.wordWrapWidth) || 0,
+                pixelSize: font.fontSize,
+                font: fontResource,
+                parent: text.renderedObject,
+            };
+
+            if (style.dropShadow && style.dropShadowDistance > 0)
+            {
+                const shadowOffset = this._calcShadowOffset(style.dropShadowAngle, style.dropShadowDistance);
+
+                createTextStyle.dropShadowColor = string2hexV8(style.dropShadowColor);
+                createTextStyle.dropShadow = true;
+                createTextStyle.dropShadowOffsetX = shadowOffset.xOffset;
+                createTextStyle.dropShadowOffsetY = shadowOffset.yOffset;
+                createTextStyle.dropShadowBlur = style.dropShadowBlur;
+            }
+
+            const textColor = Array.isArray(style.fill) ? style.fill[0] : style.fill;
+            let gradientColor = null;
+
+            if (Array.isArray(style.fill) && style.fill.length > 1)
+            {
+                gradientColor = style.fill[1];
+            }
+
+            createTextStyle.textColor = string2hexV8(textColor);
+            if (gradientColor)
+            {
+                createTextStyle.gradientColor = string2hexV8(gradientColor);
+            }
+            if (style.strokeThickness && style.strokeThickness > 0)
+            {
+                createTextStyle.strokeWidth = style.strokeThickness;
+                createTextStyle.strokeColor = string2hexV8(style.stroke);
+            }
+            createTextStyle.x = 0;
+            createTextStyle.y = 0;
+
+            text.renderedObjectText = this.renderer.view.create(createTextStyle);
+
+            text.renderedObject.w = textMeasure.w;
+            text.renderedObject.h = textMeasure.h;
+        }
+    }
+
+    /**
+     * Calculate Text attribute.
+     *
+     * @param {Number} angle - Shadow angle
+     * @param {Number} distance - Shadow distance
+     * @return {Object} The x, y offset of the shadow.
+     * @private
+     */
+    _calcShadowOffset(angle, distance)
+    {
+        const xOffset = Math.cos(angle) * distance;
+        const yOffset = Math.sin(angle) * distance;
+
+        return {
+            xOffset,
+            yOffset,
+        };
+    }
+
+    /**
+     * Calculate Text attribute.
+     *
+     * @param {Point} globalPoint - Global Point of the text
+     * @param {TextV8} text - TextV8 object.
+     * @param {Object} textMeasure - The measurement of the text with specific font and size.
+     * @return {Object} The calculated attributes.
+     * @private
+     */
+    _calcTextAttributes(globalPoint, text, textMeasure)
+    {
+        const cx = textMeasure.w * text.anchor.x;
+        const cy = textMeasure.h * text.anchor.y;
+        const x = globalPoint.x - cx;
+        const y = globalPoint.y - cy;
+        const a = 1;
+        const worldTransform = {
+            skew: {},
+            scale: {},
+            position: {},
+        };
+
+        text.transform.worldTransform.decompose(worldTransform);
+        const r = worldTransform.rotation * (180 / Math.PI);
+        const sx = text.scale.x;
+        const sy = text.scale.y;
+
+        return {
+            x,
+            y,
+            cx,
+            cy,
+            a,
+            r,
+            sx,
+            sy,
+        };
+    }
+
+    /**
+     * destroy the text object.
+     *
+     */
+    destroy()
+    {
+        this.renderer = null;
+    }
+}
+
+PXSceneRenderer.registerPlugin('TextV8', PXSceneTextRenderer);
diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js
index aa727f0..d6226b3 100644
--- a/src/core/textures/BaseRenderTexture.js
+++ b/src/core/textures/BaseRenderTexture.js
@@ -80,6 +80,14 @@ export default class BaseRenderTexture extends BaseTexture
         this._canvasRenderTarget = null;
 
         /**
+         * A reference to the pxscene render target (we only need one as this can be shared across renderers)
+         *
+         * @private
+         * @member {object<number, WebGLTexture>}
+         */
+        this._pxsceneRenderTarget = null;
+
+        /**
          * This will let the renderer know if the texture is valid. If it's not then it cannot be rendered.
          *
          * @member {boolean}
diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js
index 71a992b..a573be9 100644
--- a/src/core/textures/BaseTexture.js
+++ b/src/core/textures/BaseTexture.js
@@ -1,6 +1,6 @@
 import {
     uid, getUrlFileExtension, decomposeDataUri, getSvgSize,
-    getResolutionOfUrl, BaseTextureCache, TextureCache,
+    getResolutionOfUrl, BaseTextureCache, TextureCache, isV8,
 } from '../utils';
 import settings from '../settings';
 import EventEmitter from 'eventemitter3';
@@ -584,7 +584,7 @@ export default class BaseTexture extends EventEmitter
 
             this.imageUrl = null;
 
-            if (!navigator.isCocoonJS)
+            if (!isV8() && !navigator.isCocoonJS)
             {
                 this.source.src = '';
             }
@@ -643,9 +643,9 @@ export default class BaseTexture extends EventEmitter
         {
             // new Image() breaks tex loading in some versions of Chrome.
             // See https://code.google.com/p/chromium/issues/detail?id=238071
-            const image = new Image();// document.createElement('img');
+            const image = isV8() ? {} : new Image();// document.createElement('img');
 
-            if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0)
+            if (!isV8() && crossorigin === undefined && imageUrl.indexOf('data:') !== 0)
             {
                 image.crossOrigin = determineCrossOrigin(imageUrl);
             }
diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js
index d510075..2f1ccff 100644
--- a/src/core/textures/Texture.js
+++ b/src/core/textures/Texture.js
@@ -3,7 +3,7 @@ import VideoBaseTexture from './VideoBaseTexture';
 import TextureUvs from './TextureUvs';
 import EventEmitter from 'eventemitter3';
 import { Rectangle } from '../math';
-import { TextureCache, BaseTextureCache, getResolutionOfUrl } from '../utils';
+import { TextureCache, BaseTextureCache, getResolutionOfUrl, isV8 } from '../utils';
 
 /**
  * A texture stores the information that represents an image or part of an image. It cannot be added
@@ -89,7 +89,7 @@ export default class Texture extends EventEmitter
          *
          * @member {boolean}
          */
-        this.valid = false;
+        this.valid = isV8();
 
         /**
          * This will let a renderer know that a texture has been updated (used mainly for webGL uv updates)
diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js
index d98a1f0..ad7bd45 100644
--- a/src/core/ticker/Ticker.js
+++ b/src/core/ticker/Ticker.js
@@ -1,8 +1,93 @@
 import settings from '../settings';
 import EventEmitter from 'eventemitter3';
+import {
+    isV8,
+} from '../utils';
 
 // Internal event used by composed emitter
 const TICK = 'tick';
+let functionsInitlized = false;
+
+let performance;
+let requestAnimationFrame;
+let cancelAnimationFrame;
+
+/**
+ * init global functions
+ * pixi.js mainloop and pxscene mainloop is the same loop (for v8).
+ */
+const initFunctions = () =>
+{
+    // Define some global functions
+    if (isV8())
+    {
+        const PXSceneHelper = require('../utils/PXSceneHelper').default; // eslint-disable-line global-require
+        const startTime = new Date().getTime();
+        let lastTime = null;
+        let frameFunctionMap = {};
+        let tmpFrameFunctionMap = null;
+        let frameFunctionIndex = 0;
+
+        performance = {};
+
+        /**
+         *  get the time performance time
+         * @return {number} the now time - start time
+         */
+        performance.now = () => lastTime - startTime; // performance.now
+
+        /**
+         * request Animation Frame , save callback
+         * @param  {Function} callback the ticker callback
+         * @return {number}   the animation frame id
+         */
+        requestAnimationFrame = (callback) =>
+        {
+            if (typeof callback !== 'function')
+            {
+                throw new TypeError(`${callback}is not a function`);
+            }
+            const animationFrameId = frameFunctionIndex++;
+
+            frameFunctionMap[animationFrameId] = callback;
+
+            return animationFrameId;
+        };
+
+        /**
+         * cancel the animation frame callback
+         * @param  {number} id the animation frame id
+         */
+        cancelAnimationFrame = (id) =>
+        {
+            frameFunctionMap[id] = null;
+        };
+
+        // pxscene onUpdate function
+        PXSceneHelper.getInstance().getPxScene().on('onUpdate', () =>
+        {
+            lastTime = new Date().getTime();
+            tmpFrameFunctionMap = frameFunctionMap; // save functions
+            frameFunctionMap = {};  // clear map use for requestAnimationFrame
+            for (const index in tmpFrameFunctionMap)
+            {
+                if (tmpFrameFunctionMap && tmpFrameFunctionMap[index])
+                    {
+                    tmpFrameFunctionMap[index](lastTime);
+                } // ticker
+            }
+            tmpFrameFunctionMap = null; // release old map
+        });
+    }
+    else
+    {
+        performance = window.performance;
+        requestAnimationFrame = window.requestAnimationFrame;
+        cancelAnimationFrame = window.cancelAnimationFrame;
+    }
+
+    functionsInitlized = true;
+};
 
 /**
  * A Ticker class that runs an update loop that other objects listen to.
@@ -130,9 +215,11 @@ export default class Ticker
                 // Invoke listeners now
                 this.update(time);
                 // Listener side effects may have modified ticker state.
-                if (this.started && this._requestId === null && this._emitter.listeners(TICK, true))
+                if (this.started
+                    && this._requestId === null
+                    && this._emitter.listeners(TICK, true))
                 {
-                    this._requestId = requestAnimationFrame(this._tick);
+                    this._requestId = requestAnimationFrame(this._tick); // eslint-disable-line block-scoped-var
                 }
             }
         };
@@ -150,8 +237,8 @@ export default class Ticker
         if (this._requestId === null && this._emitter.listeners(TICK, true))
         {
             // ensure callbacks get correct delta
-            this.lastTime = performance.now();
-            this._requestId = requestAnimationFrame(this._tick);
+            this.lastTime = performance.now(); // eslint-disable-line block-scoped-var
+            this._requestId = requestAnimationFrame(this._tick); // eslint-disable-line block-scoped-var
         }
     }
 
@@ -164,7 +251,7 @@ export default class Ticker
     {
         if (this._requestId !== null)
         {
-            cancelAnimationFrame(this._requestId);
+            cancelAnimationFrame(this._requestId); // eslint-disable-line block-scoped-var
             this._requestId = null;
         }
     }
@@ -254,6 +341,11 @@ export default class Ticker
      */
     start()
     {
+        if (!functionsInitlized)
+        {
+            initFunctions();
+        }
+
         if (!this.started)
         {
             this.started = true;
@@ -287,7 +379,7 @@ export default class Ticker
      *
      * @param {number} [currentTime=performance.now()] - the current time of execution
      */
-    update(currentTime = performance.now())
+    update(currentTime = performance.now()) // eslint-disable-line block-scoped-var
     {
         let elapsedMS;
 
diff --git a/src/core/utils/canUploadSameBuffer.js b/src/core/utils/canUploadSameBuffer.js
index eb4ae5c..e48dff2 100644
--- a/src/core/utils/canUploadSameBuffer.js
+++ b/src/core/utils/canUploadSameBuffer.js
@@ -3,7 +3,7 @@ export default function canUploadSameBuffer()
 	// Uploading the same buffer multiple times in a single frame can cause perf issues.
 	// Apparent on IOS so only check for that at the moment
 	// this check may become more complex if this issue pops up elsewhere.
-    const ios = !!navigator.platform && (/iPad|iPhone|iPod/).test(navigator.platform);
+    const ios = typeof navigator !== 'undefined' && !!navigator.platform && (/iPad|iPhone|iPod/).test(navigator.platform);
 
     return !ios;
 }
diff --git a/src/core/utils/index.js b/src/core/utils/index.js
index 2f9c71b..9b34624 100644
--- a/src/core/utils/index.js
+++ b/src/core/utils/index.js
@@ -86,6 +86,54 @@ export function hex2string(hex)
 }
 
 /**
+ * Converts string to a hex number color
+ * For V8.
+ *
+ * @memberof PIXI.utils
+ * @function string2hexV8
+ * @param {String} str - The string color.
+ * @return {Number} Number in hex
+ */
+export function string2hexV8(str)
+{
+    if (str[0] === '#')
+    {
+        str = str.substr(1);
+        const color = Number.parseInt(str, 16);
+
+        if (color <= 0xFFFFFF)
+        {
+            return (color << 8) | 0xFF;
+        }
+
+        return color;
+    }
+    else if (str === 'black')
+    {
+        return 0x000000FF;
+    }
+    else if (str === 'red')
+    {
+        return 0xFF0000FF;
+    }
+    else if (str === 'green')
+    {
+        return 0x00FF00FF;
+    }
+    else if (str === 'blue')
+    {
+        return 0x00FF00FF;
+    }
+    else if (str === 'white')
+    {
+        return 0xFFFFFFFF;
+    }
+
+    // By default it is black.
+    return 0x000000FF;
+}
+
+/**
  * Converts a color as an [R, G, B] array to a hex number
  *
  * @memberof PIXI.utils
@@ -99,6 +147,56 @@ export function rgb2hex(rgb)
 }
 
 /**
+ * Converts a color as an [R, G, B, A] array to a hex number
+ *
+ * @memberof PIXI.utils
+ * @function rgba2hex
+ * @param {number[]} rgba - rgba array
+ * @return {number} The color number
+ */
+export function rgba2hex(rgba)
+{
+    return (((rgba[0] * 255) << 24) + ((rgba[1] * 255) << 16) + ((rgba[2] * 255) << 8) + (rgba[3] * 255) + 255);
+}
+
+/**
+ * Converts a color as an [R, G, B] array to an [R, G, B, A] array
+ *
+ * @memberof PIXI.utils
+ * @function rgb2rgba
+ * @param {number[]} rgb - rgb array
+ * @return {number} The [R, G, B, A] array
+ */
+export function rgb2rgba(rgb)
+{
+    return [rgb[0], rgb[1], rgb[2], 0];
+}
+
+/**
+ * Converts a hex color as RRGGBB to RRGGBBAA
+ *
+ * @memberof PIXI.utils
+ * @function hexrgb2rgba
+ * @param {number} rgb - a hex color in rgb
+ * @return {number} a hex color in rgba
+ */
+export function hexrgb2rgba(rgb)
+{
+    let b = rgb & 0xFF;
+    let g = (rgb >> 8) & 0xFF;
+    let r = (rgb >> 16) & 0xFF;
+
+    const min = Math.min(r, g, b);
+    const a = 255 - min;
+
+    b = (b - min) * 255 / a;
+    g = (g - min) * 255 / a;
+    r = (r - min) * 255 / a;
+
+    return (r << 24) | (g << 16) | (b << 8) | a;
+}
+
+/**
  * get the resolution / device pixel ratio of an asset by looking for the prefix
  * used by spritesheets and image urls
  *
@@ -234,7 +332,7 @@ export function sayHello(type)
         return;
     }
 
-    if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1)
+    if (!isV8() && navigator.userAgent.toLowerCase().indexOf('chrome') > -1)
     {
         const args = [
             `\n %c %c %c Pixi.js ${VERSION} - ✰ ${type} ✰  %c  %c  http://www.pixijs.com/  %c %c ♥%c♥%c♥ \n\n`,
@@ -251,7 +349,7 @@ export function sayHello(type)
 
         window.console.log.apply(console, args);
     }
-    else if (window.console)
+    else if (!isV8() && window.console)
     {
         window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`);
     }
@@ -303,6 +401,18 @@ export function isWebGLSupported()
 }
 
 /**
+ * Determines if the environment is V8
+ *
+ * @memberof PIXI.utils
+ * @function isV8
+ * @returns {boolean} true if the environment is V8, false otherwise
+ */
+export function isV8()
+{
+    return typeof window === 'undefined';
+}
+
+/**
  * Returns sign of number
  *
  * @memberof PIXI.utils
diff --git a/src/core/utils/pxSceneHelper.js b/src/core/utils/pxSceneHelper.js
new file mode 100644
index 0000000..3cb0300
--- /dev/null
+++ b/src/core/utils/pxSceneHelper.js
@@ -0,0 +1,46 @@
+/**
+ * pxscene helper class , use to store the pxscene instance
+ * this a single instance class , please use getInstance to use it
+ */
+export default class PXSceneHelper
+{
+    /**
+     * PXSceneHelper constructor
+     */
+    constructor()
+    {
+        this._pxSceneInstance = null;
+    }
+
+    /**
+     * get the PXSceneHelper instance
+     * @return {PXSceneHelper} the PXSceneHelper instance
+     */
+    static getInstance()
+    {
+        if (!PXSceneHelper.instance)
+        {
+            PXSceneHelper.instance = new PXSceneHelper();
+        }
+
+        return PXSceneHelper.instance;
+    }
+
+    /**
+     * inject pxscene instance
+     * @param {Object} pxscene the pxscene instance
+     */
+    injectPxScene(pxscene)
+    {
+        this._pxSceneInstance = pxscene;
+    }
+
+    /**
+     * get the pxscene instance
+     * @return {Object} the pxscene instance
+     */
+    getPxScene()
+    {
+        return this._pxSceneInstance;
+    }
+}
diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js
index fe82451..aa1aea3 100644
--- a/src/extras/TilingSprite.js
+++ b/src/extras/TilingSprite.js
@@ -333,6 +333,12 @@ export default class TilingSprite extends core.Sprite
 
         this.tileTransform = null;
         this.uvTransform = null;
+
+        if (this.renderParent)
+        {
+            this.renderParent.remove();
+            this.tiles = null;
+        }
     }
 
     /**
diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js
index 5dd5640..c51d423 100644
--- a/src/extras/cacheAsBitmap.js
+++ b/src/extras/cacheAsBitmap.js
@@ -1,4 +1,6 @@
 import * as core from '../core';
+import { isV8 } from '../core/utils';
+import * as _ from 'lodash';
 
 const DisplayObject = core.DisplayObject;
 const _tempMatrix = new core.Matrix();
@@ -22,6 +24,7 @@ class CacheData
     {
         this.originalRenderWebGL = null;
         this.originalRenderCanvas = null;
+        this.originalRenderPXScene = null;
         this.originalCalculateBounds = null;
         this.originalGetLocalBounds = null;
 
@@ -74,6 +77,7 @@ Object.defineProperties(DisplayObject.prototype, {
 
                 data.originalRenderWebGL = this.renderWebGL;
                 data.originalRenderCanvas = this.renderCanvas;
+                data.originalRenderPXScene = this.renderPXScene;
 
                 data.originalUpdateTransform = this.updateTransform;
                 data.originalCalculateBounds = this._calculateBounds;
@@ -88,6 +92,7 @@ Object.defineProperties(DisplayObject.prototype, {
 
                 this.renderWebGL = this._renderCachedWebGL;
                 this.renderCanvas = this._renderCachedCanvas;
+                this.renderPXScene = this._renderCachedPXScene;
 
                 this.destroy = this._cacheAsBitmapDestroy;
             }
@@ -97,11 +102,19 @@ Object.defineProperties(DisplayObject.prototype, {
 
                 if (data.sprite)
                 {
-                    this._destroyCachedDisplayObject();
+                    if (isV8())
+                    {
+                        data.sprite = null;
+                    }
+                    else
+                    {
+                        this._destroyCachedDisplayObject();
+                    }
                 }
 
                 this.renderWebGL = data.originalRenderWebGL;
                 this.renderCanvas = data.originalRenderCanvas;
+                this.renderPXScene = data.originalRenderPXScene;
                 this._calculateBounds = data.originalCalculateBounds;
                 this.getLocalBounds = data.originalGetLocalBounds;
 
@@ -112,6 +125,11 @@ Object.defineProperties(DisplayObject.prototype, {
 
                 this._mask = data.originalMask;
                 this.filterArea = data.originalFilterArea;
+
+                if (isV8())
+                {
+                    this.enablePaintingForChildren(true);
+                }
             }
         },
     },
@@ -323,6 +341,59 @@ DisplayObject.prototype._initCachedDisplayObjectCanvas = function _initCachedDis
 };
 
 /**
+ * Renders a cached version of the sprite with PXScene
+ *
+ * @private
+ * @memberof PIXI.DisplayObject#
+ * @param {PIXI.WebGLRenderer} renderer - the WebGL renderer
+ */
+DisplayObject.prototype._renderCachedPXScene = function _renderCachedPXScene(renderer)
+{
+    if (!this.visible || this.worldAlpha <= 0 || !this.renderable)
+    {
+        return;
+    }
+
+    // No need to create a new render texture for now, just
+    // stop painting for each child
+    this._cacheData.sprite = this;
+
+    this.enablePaintingForChildren.call(this._cacheData.sprite, false);
+
+    this._cacheData.originalRenderPXScene.call(this._cacheData.sprite, renderer);
+};
+
+DisplayObject.prototype.enablePaintingForChildren = function enablePaintingForChildren(enabled)
+{
+    for (let i = 0, j = this.children.length; i < j; ++i)
+    {
+        const child = this.children[i];
+
+        if (!enabled)
+        {
+            if (!child.__hasBackup)
+            {
+                child.__backupScale = _.cloneDeep(child.scale);
+                child.__backupPosition = _.cloneDeep(child.position);
+                child.__backupRotation = child.rotation;
+                child.__backupAlpha = child.alpha;
+
+                child.__hasBackup = true;
+            }
+
+            child.scale = child.__backupScale;
+            child.position = child.__backupPosition;
+            child.rotation = child.__backupRotation;
+            child.alpha = child.__backupAlpha;
+        }
+        else
+        {
+            child.__hasBackup = false;
+        }
+    }
+};
+
+/**
  * Calculates the bounds of the cached sprite
  *
  * @private
diff --git a/src/extras/index.js b/src/extras/index.js
index bbd8bbf..3ca7a92 100644
--- a/src/extras/index.js
+++ b/src/extras/index.js
@@ -4,6 +4,7 @@
 export { default as TextureTransform } from './TextureTransform';
 export { default as AnimatedSprite } from './AnimatedSprite';
 export { default as TilingSprite } from './TilingSprite';
+export { default as PXSceneTilingSpriteRenderer } from './pxscene/PXSceneTilingSpriteRenderer';
 export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer';
 export { default as BitmapText } from './BitmapText';
 
diff --git a/src/extras/pxscene/PXSceneTilingSpriteRenderer.js b/src/extras/pxscene/PXSceneTilingSpriteRenderer.js
new file mode 100644
index 0000000..ae70bea
--- /dev/null
+++ b/src/extras/pxscene/PXSceneTilingSpriteRenderer.js
@@ -0,0 +1,192 @@
+import PXSceneRenderer from '../../core/renderers/pxscene/PXSceneRenderer';
+
+import { Point } from '../../core/math';
+
+/**
+ * Renderer dedicated to drawing and batching sprites for PXScene.
+ *
+ * @class
+ * @private
+ * @memberof PIXI
+ */
+export default class PXSceneTilingSpriteRenderer
+{
+    /**
+     * @param {PIXI.PXSceneRenderer} renderer -The renderer sprite this batch works for.
+     */
+    constructor(renderer)
+    {
+        this.renderer = renderer;
+    }
+
+    /**
+     * Renders the sprite object.
+     *
+     * @param {PIXI.Sprite} sprite - the sprite to render when using this spritebatch
+     */
+    render(sprite)
+    {
+        const texture = sprite._texture;
+        const parentRenderedObject = (sprite.parent && sprite.parent.renderedObject) || this.renderer.context;
+        // Convert local coordinates to world coordinates
+        const point = new Point(sprite.x, sprite.y);
+        const globalPoint = sprite.parent.toGlobal(point);
+
+        if (!sprite.renderParent)
+        {
+            sprite.renderParent = this.renderer.view.create({
+                t: 'rect',
+                parent: parentRenderedObject,
+                w: sprite.width,
+                h: sprite.height,
+                fillColor: 0x00,
+            });
+        }
+
+        // Calculate all attributes
+        if (sprite.imgResource && sprite.tiles && sprite.tiles.length > 0 && sprite.renderParent)
+        {
+            const attr = this._calcSpriteAttributes(globalPoint, sprite.width, sprite.height, sprite);
+            const renderedObject = sprite.renderParent;
+
+            renderedObject.x = attr.x;
+            renderedObject.y = attr.y;
+            renderedObject.cx = attr.cx;
+            renderedObject.cy = attr.cy;
+            renderedObject.a = attr.a;
+            renderedObject.r = attr.r;
+            renderedObject.sx = attr.sx;
+            renderedObject.sy = attr.sy;
+            const tp = this._getTilePropeties(sprite, texture);
+
+            sprite.tiles.forEach((tr) => (tr.a = 0));
+            for (let i = 0; i < tp.x; i++)
+            {
+                for (let j = 0; j < tp.y; j++)
+                {
+                    const index = (i * tp.y) + j;
+                    let tileRenderObject = sprite.tiles[index];
+
+                    if (!tileRenderObject)
+                    {
+                        tileRenderObject = this.renderer.view.create({ // if didn't create before , create it
+                            t: 'image',
+                            parent: sprite.renderParent,
+                            resource: sprite.imgResource,
+                        });
+                        sprite.tiles.push(tileRenderObject);
+                    }
+                    tileRenderObject.x = (tp.tw * i) + tp.offsetX;
+                    tileRenderObject.y = (tp.th * j) + tp.offsetY;
+                    tileRenderObject.sx = tp.tileScaleX + 0.01; // to fix the gap
+                    tileRenderObject.sy = tp.tileScaleY + 0.01;
+                    tileRenderObject.a = 1;
+                }
+            }
+        }
+        else if (!sprite.imgResource)
+        {
+            sprite.imgResource = this.renderer.view.create({
+                t: 'imageResource',
+                url: texture.baseTexture.source.src,
+            });
+
+            sprite.imgResource.ready.then((imgResource) =>
+            {
+                texture.trim = { x: 0, y: 0, width: imgResource.w, height: imgResource.h, type: 1 };
+                texture.orig = texture.trim;
+                sprite.tiles = [];  // cache tile
+                const tp = this._getTilePropeties(sprite, texture);
+
+                for (let i = 0; i < tp.x; i++)
+                {
+                    for (let j = 0; j < tp.y; j++)
+                    {
+                        const tileRenderObject = this.renderer.view.create({
+                            t: 'image',
+                            parent: sprite.renderParent,
+                            x: (tp.tw * i) + tp.offsetX,
+                            y: (tp.th * j) + tp.offsetY,
+                            sx: tp.tileScaleX,
+                            sy: tp.tileScaleY,
+                            resource: imgResource,
+                        });
+
+                        sprite.tiles.push(tileRenderObject);
+                    }
+                }
+            });
+        }
+    }
+
+    /**
+     * get the tile properties
+     *
+     * @param {PIXI.Sprite} ts the tile sprite
+     * @param {PIXI.Texure} texture the tile sprite texture
+     * @returns {Object} the tile properties
+     * @private
+     */
+    _getTilePropeties(ts, texture)
+    {
+        const tileScaleX = ts.tileScale.x;
+        const tileScaleY = ts.tileScale.y;
+
+        const w = ts.width;
+        const h = ts.height;
+
+        const tw = texture.trim.width * tileScaleX; // ts tile width
+        const th = texture.trim.height * tileScaleY; // ts tile height
+
+        const offsetX = ((ts.tilePosition.x % tw) - tw) % tw;
+        const offsetY = ((ts.tilePosition.y % th) - th) % th;
+
+        const x = Math.ceil((w - offsetX) / (texture.trim.width * tileScaleX)); // tile row number
+        const y = Math.ceil((h - offsetY) / (texture.trim.height * tileScaleY)); // tile column number
+
+        return { tileScaleX, tileScaleY, w, h, tw, th, offsetX, offsetY, x, y };
+    }
+    /**
+     * Calculate sprite attribute.
+     *
+     * @param {Point} globalPoint - Global Point of the sprite
+     * @param {Number} spriteWidth - The width of the sprite
+     * @param {Number} spriteHeight - The height of the sprite
+     * @param {Object} sprite - The sprite object
+     * @return {Object} The calculated attributes.
+     * @private
+     */
+    _calcSpriteAttributes(globalPoint, spriteWidth, spriteHeight, sprite)
+    {
+        const cx = spriteWidth * sprite.anchor.x;
+        const cy = spriteHeight * sprite.anchor.y;
+        const x = globalPoint.x - cx;
+        const y = globalPoint.y - cy;
+        const a = sprite.alpha;
+        const r = sprite.rotation * (180 / Math.PI);
+        const sx = sprite.scale.x;
+        const sy = sprite.scale.y;
+
+        return {
+            x,
+            y,
+            cx,
+            cy,
+            a,
+            r,
+            sx,
+            sy,
+        };
+    }
+
+    /**
+     * destroy the sprite object.
+     *
+     */
+    destroy()
+    {
+        this.renderer = null;
+    }
+}
+
+PXSceneRenderer.registerPlugin('tilingSprite', PXSceneTilingSpriteRenderer);
diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js
index ac74225..331dc83 100644
--- a/src/interaction/InteractionManager.js
+++ b/src/interaction/InteractionManager.js
@@ -4,6 +4,7 @@ import InteractionEvent from './InteractionEvent';
 import InteractionTrackingData from './InteractionTrackingData';
 import EventEmitter from 'eventemitter3';
 import interactiveTarget from './interactiveTarget';
+import { isV8 } from '../core/utils';
 
 // Mix interactiveTarget into core.DisplayObject.prototype, after deprecation has been handled
 core.utils.mixins.delayMixin(
@@ -144,7 +145,7 @@ export default class InteractionManager extends EventEmitter
          * @readonly
          * @member {boolean}
          */
-        this.supportsTouchEvents = 'ontouchstart' in window;
+        this.supportsTouchEvents = (!isV8() && ('ontouchstart' in window));
 
         /**
          * Does the device support pointer events
@@ -153,7 +154,7 @@ export default class InteractionManager extends EventEmitter
          * @readonly
          * @member {boolean}
          */
-        this.supportsPointerEvents = !!window.PointerEvent;
+        this.supportsPointerEvents = (!isV8() && !!window.PointerEvent);
 
         // this will make it so that you don't have to call bind all the time
 
@@ -489,44 +490,55 @@ export default class InteractionManager extends EventEmitter
 
         core.ticker.shared.add(this.update, this);
 
-        if (window.navigator.msPointerEnabled)
+        if (isV8())
         {
-            this.interactionDOMElement.style['-ms-content-zooming'] = 'none';
-            this.interactionDOMElement.style['-ms-touch-action'] = 'none';
+            this.interactionDOMElement.on('onMouseMove', this.onPointerMove);
+            this.interactionDOMElement.on('onMouseDown', this.onPointerDown);
+            this.interactionDOMElement.on('onMouseEnter', this.onPointerOut);
+            this.interactionDOMElement.on('onMouseLeave', this.onPointerOver);
+            this.interactionDOMElement.on('onMouseUp', this.onPointerUp);
         }
-        else if (this.supportsPointerEvents)
-        {
-            this.interactionDOMElement.style['touch-action'] = 'none';
-        }
-
-        /**
-         * These events are added first, so that if pointer events are normalised, they are fired
-         * in the same order as non-normalised events. ie. pointer event 1st, mouse / touch 2nd
-         */
-        if (this.supportsPointerEvents)
-        {
-            window.document.addEventListener('pointermove', this.onPointerMove, true);
-            this.interactionDOMElement.addEventListener('pointerdown', this.onPointerDown, true);
-            this.interactionDOMElement.addEventListener('pointerout', this.onPointerOut, true);
-            this.interactionDOMElement.addEventListener('pointerover', this.onPointerOver, true);
-            window.addEventListener('pointercancel', this.onPointerCancel, true);
-            window.addEventListener('pointerup', this.onPointerUp, true);
-        }
-
         else
         {
-            window.document.addEventListener('mousemove', this.onPointerMove, true);
-            this.interactionDOMElement.addEventListener('mousedown', this.onPointerDown, true);
-            this.interactionDOMElement.addEventListener('mouseout', this.onPointerOut, true);
-            this.interactionDOMElement.addEventListener('mouseover', this.onPointerOver, true);
-            window.addEventListener('mouseup', this.onPointerUp, true);
+            if (window.navigator.msPointerEnabled)
+            {
+                this.interactionDOMElement.style['-ms-content-zooming'] = 'none';
+                this.interactionDOMElement.style['-ms-touch-action'] = 'none';
+            }
+            else if (this.supportsPointerEvents)
+            {
+                this.interactionDOMElement.style['touch-action'] = 'none';
+            }
 
-            if (this.supportsTouchEvents)
+            /**
+             * These events are added first, so that if pointer events are normalised, they are fired
+             * in the same order as non-normalised events. ie. pointer event 1st, mouse / touch 2nd
+             */
+            if (this.supportsPointerEvents)
+            {
+                window.document.addEventListener('pointermove', this.onPointerMove, true);
+                this.interactionDOMElement.addEventListener('pointerdown', this.onPointerDown, true);
+                this.interactionDOMElement.addEventListener('pointerout', this.onPointerOut, true);
+                this.interactionDOMElement.addEventListener('pointerover', this.onPointerOver, true);
+                window.addEventListener('pointercancel', this.onPointerCancel, true);
+                window.addEventListener('pointerup', this.onPointerUp, true);
+            }
+
+            else
             {
-                this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true);
-                this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true);
-                this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true);
-                this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true);
+                window.document.addEventListener('mousemove', this.onPointerMove, true);
+                this.interactionDOMElement.addEventListener('mousedown', this.onPointerDown, true);
+                this.interactionDOMElement.addEventListener('mouseout', this.onPointerOut, true);
+                this.interactionDOMElement.addEventListener('mouseover', this.onPointerOver, true);
+                window.addEventListener('mouseup', this.onPointerUp, true);
+
+                if (this.supportsTouchEvents)
+                {
+                    this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true);
+                    this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true);
+                    this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true);
+                    this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true);
+                }
             }
         }
 
@@ -547,38 +559,49 @@ export default class InteractionManager extends EventEmitter
 
         core.ticker.shared.remove(this.update, this);
 
-        if (window.navigator.msPointerEnabled)
+        if (isV8())
         {
-            this.interactionDOMElement.style['-ms-content-zooming'] = '';
-            this.interactionDOMElement.style['-ms-touch-action'] = '';
+            this.interactionDOMElement.delListener('onMouseMove', this.onPointerMove);
+            this.interactionDOMElement.delListener('onMouseDown', this.onPointerDown);
+            this.interactionDOMElement.delListener('onMouseEnter', this.onPointerOut);
+            this.interactionDOMElement.delListener('onMouseLeave', this.onPointerOver);
+            this.interactionDOMElement.delListener('onMouseUp', this.onPointerUp);
         }
-        else if (this.supportsPointerEvents)
+        else
         {
-            this.interactionDOMElement.style['touch-action'] = '';
-        }
+            if (window.navigator.msPointerEnabled)
+            {
+                this.interactionDOMElement.style['-ms-content-zooming'] = '';
+                this.interactionDOMElement.style['-ms-touch-action'] = '';
+            }
+            else if (this.supportsPointerEvents)
+            {
+                this.interactionDOMElement.style['touch-action'] = '';
+            }
 
-        if (this.supportsPointerEvents)
-        {
-            window.document.removeEventListener('pointermove', this.onPointerMove, true);
-            this.interactionDOMElement.removeEventListener('pointerdown', this.onPointerDown, true);
-            this.interactionDOMElement.removeEventListener('pointerout', this.onPointerOut, true);
-            this.interactionDOMElement.removeEventListener('pointerover', this.onPointerOver, true);
-            window.removeEventListener('pointercancel', this.onPointerCancel, true);
-            window.removeEventListener('pointerup', this.onPointerUp, true);
-        }
+            if (this.supportsPointerEvents)
+            {
+                window.document.removeEventListener('pointermove', this.onPointerMove, true);
+                this.interactionDOMElement.removeEventListener('pointerdown', this.onPointerDown, true);
+                this.interactionDOMElement.removeEventListener('pointerout', this.onPointerOut, true);
+                this.interactionDOMElement.removeEventListener('pointerover', this.onPointerOver, true);
+                window.removeEventListener('pointercancel', this.onPointerCancel, true);
+                window.removeEventListener('pointerup', this.onPointerUp, true);
+            }
 
-        window.document.removeEventListener('mousemove', this.onPointerMove, true);
-        this.interactionDOMElement.removeEventListener('mousedown', this.onPointerDown, true);
-        this.interactionDOMElement.removeEventListener('mouseout', this.onPointerOut, true);
-        this.interactionDOMElement.removeEventListener('mouseover', this.onPointerOver, true);
-        window.removeEventListener('mouseup', this.onPointerUp, true);
+            window.document.removeEventListener('mousemove', this.onPointerMove, true);
+            this.interactionDOMElement.removeEventListener('mousedown', this.onPointerDown, true);
+            this.interactionDOMElement.removeEventListener('mouseout', this.onPointerOut, true);
+            this.interactionDOMElement.removeEventListener('mouseover', this.onPointerOver, true);
+            window.removeEventListener('mouseup', this.onPointerUp, true);
 
-        if (this.supportsTouchEvents)
-        {
-            this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true);
-            this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true);
-            this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true);
-            this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true);
+            if (this.supportsTouchEvents)
+            {
+                this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true);
+                this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true);
+                this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true);
+                this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true);
+            }
         }
 
         this.interactionDOMElement = null;
@@ -668,21 +691,29 @@ export default class InteractionManager extends EventEmitter
         // only do things if there is a cursor style for it
         if (style)
         {
-            switch (typeof style)
+            if (isV8())
+            {
+                // TODO cursor, see browser.js
+                // console.log('==setCursorMode=');
+            }
+            else
             {
-                case 'string':
-                    // string styles are handled as cursor CSS
-                    this.interactionDOMElement.style.cursor = style;
-                    break;
-                case 'function':
-                    // functions are just called, and passed the cursor mode
-                    style(mode);
-                    break;
-                case 'object':
-                    // if it is an object, assume that it is a dictionary of CSS styles,
-                    // apply it to the interactionDOMElement
-                    Object.assign(this.interactionDOMElement.style, style);
-                    break;
+                switch (typeof style)
+                {
+                    case 'string':
+                        // string styles are handled as cursor CSS
+                        this.interactionDOMElement.style.cursor = style;
+                        break;
+                    case 'function':
+                        // functions are just called, and passed the cursor mode
+                        style(mode);
+                        break;
+                    case 'object':
+                        // if it is an object, assume that it is a dictionary of CSS styles,
+                        // apply it to the interactionDOMElement
+                        Object.assign(this.interactionDOMElement.style, style);
+                        break;
+                }
             }
         }
     }
@@ -722,22 +753,32 @@ export default class InteractionManager extends EventEmitter
      */
     mapPositionToPoint(point, x, y)
     {
-        let rect;
-
-        // IE 11 fix
-        if (!this.interactionDOMElement.parentElement)
+        if (isV8())
         {
-            rect = { x: 0, y: 0, width: 0, height: 0 };
+            const resolutionMultiplier = (1.0 / this.resolution);
+
+            point.x = x * resolutionMultiplier;
+            point.y = y * resolutionMultiplier;
         }
         else
         {
-            rect = this.interactionDOMElement.getBoundingClientRect();
-        }
+            let rect;
+
+            // IE 11 fix
+            if (!this.interactionDOMElement.parentElement)
+            {
+                rect = { x: 0, y: 0, width: 0, height: 0 };
+            }
+            else
+            {
+                rect = this.interactionDOMElement.getBoundingClientRect();
+            }
 
-        const resolutionMultiplier = navigator.isCocoonJS ? this.resolution : (1.0 / this.resolution);
+            const resolutionMultiplier = navigator.isCocoonJS ? this.resolution : (1.0 / this.resolution);
 
-        point.x = ((x - rect.left) * (this.interactionDOMElement.width / rect.width)) * resolutionMultiplier;
-        point.y = ((y - rect.top) * (this.interactionDOMElement.height / rect.height)) * resolutionMultiplier;
+            point.x = ((x - rect.left) * (this.interactionDOMElement.width / rect.width)) * resolutionMultiplier;
+            point.y = ((y - rect.top) * (this.interactionDOMElement.height / rect.height)) * resolutionMultiplier;
+        }
     }
 
     /**
@@ -889,7 +930,7 @@ export default class InteractionManager extends EventEmitter
 
         // Guaranteed that there will be at least one event in events, and all events must have the same pointer type
 
-        if (this.autoPreventDefault && events[0].isNormalized)
+        if (!isV8() && this.autoPreventDefault && events[0].isNormalized)
         {
             originalEvent.preventDefault();
         }
@@ -904,7 +945,7 @@ export default class InteractionManager extends EventEmitter
 
             const interactionEvent = this.configureInteractionEventForDOMEvent(this.eventData, event, interactionData);
 
-            interactionEvent.data.originalEvent = originalEvent;
+            interactionEvent.data.originalEvent = isV8() ? this.normalizeEventToPointerDataV8(originalEvent) : originalEvent;
 
             this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerDown, true);
 
@@ -988,7 +1029,7 @@ export default class InteractionManager extends EventEmitter
 
             const interactionEvent = this.configureInteractionEventForDOMEvent(this.eventData, event, interactionData);
 
-            interactionEvent.data.originalEvent = originalEvent;
+            interactionEvent.data.originalEvent = isV8() ? this.normalizeEventToPointerDataV8(originalEvent) : originalEvent;
 
             this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, true);
 
@@ -1170,7 +1211,7 @@ export default class InteractionManager extends EventEmitter
 
             const interactionEvent = this.configureInteractionEventForDOMEvent(this.eventData, event, interactionData);
 
-            interactionEvent.data.originalEvent = originalEvent;
+            interactionEvent.data.originalEvent = isV8() ? this.normalizeEventToPointerDataV8(originalEvent) : originalEvent;
 
             const interactive = event.pointerType === 'touch' ? this.moveWhenInside : true;
 
@@ -1285,7 +1326,7 @@ export default class InteractionManager extends EventEmitter
 
         if (trackingData === undefined) return;
 
-        if (hit && this.mouseOverRenderer)
+        if (hit && (isV8() || this.mouseOverRenderer))
         {
             if (!trackingData.over)
             {
@@ -1410,7 +1451,7 @@ export default class InteractionManager extends EventEmitter
         // This is the way InteractionManager processed touch events before the refactoring, so I've kept
         // it here. But it doesn't make that much sense to me, since mapPositionToPoint already factors
         // in this.resolution, so this just divides by this.resolution twice for touch events...
-        if (navigator.isCocoonJS && event.pointerType === 'touch')
+        if (!isV8() && navigator.isCocoonJS && event.pointerType === 'touch')
         {
             interactionData.global.x = interactionData.global.x / this.resolution;
             interactionData.global.y = interactionData.global.y / this.resolution;
@@ -1430,6 +1471,34 @@ export default class InteractionManager extends EventEmitter
     }
 
     /**
+     * Normalize event to a normal format.
+     * Only for V8.
+     *
+     * @param {PointerEvent} event - The DOM event of a pointer button being moved into the renderer view
+     * @returns {Object} - Normalized data.
+     */
+    normalizeEventToPointerDataV8(event)
+    {
+        return {
+            clientX: event.x,
+            clientY: event.y,
+            x: event.x,
+            y: event.y,
+            isPrimary: true,
+            width: 1,
+            height: 1,
+            tiltX: 0,
+            tiltY: 0,
+            pointerType: 'mouse',
+            type: 'mouse',
+            pointerId: MOUSE_POINTER_ID,
+            pressure: 0.5,
+            rotation: 0,
+            isNormalized: true,
+        };
+    }
+
+    /**
      * Ensures that the original event object contains all data that a regular pointer event would have
      *
      * @private
@@ -1441,7 +1510,15 @@ export default class InteractionManager extends EventEmitter
     {
         const normalizedEvents = [];
 
-        if (this.supportsTouchEvents && event instanceof TouchEvent)
+        if (isV8())
+        {
+            const normalizedEvent = this.normalizeEventToPointerDataV8(event);
+
+            // mark the touch as normalized, just so that we know we did it
+            normalizedEvent.isNormalized = true;
+            normalizedEvents.push(normalizedEvent);
+        }
+        else if (this.supportsTouchEvents && event instanceof TouchEvent)
         {
             for (let i = 0, li = event.changedTouches.length; i < li; i++)
             {
@@ -1535,3 +1612,4 @@ export default class InteractionManager extends EventEmitter
 
 core.WebGLRenderer.registerPlugin('interaction', InteractionManager);
 core.CanvasRenderer.registerPlugin('interaction', InteractionManager);
+core.PXSceneRenderer.registerPlugin('interaction', InteractionManager);
diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/browser/bitmapFontParser.js
similarity index 97%
rename from src/loaders/bitmapFontParser.js
rename to src/loaders/browser/bitmapFontParser.js
index f4cf996..8199c48 100644
--- a/src/loaders/bitmapFontParser.js
+++ b/src/loaders/browser/bitmapFontParser.js
@@ -1,7 +1,7 @@
 import * as path from 'path';
-import { utils } from '../core';
+import { utils } from '../../core';
 import { Resource } from 'resource-loader';
-import { BitmapText } from '../extras';
+import { BitmapText } from '../../extras';
 
 /**
  * Register a BitmapText font from loader resource.
diff --git a/src/loaders/loader.js b/src/loaders/browser/loader.js
similarity index 95%
rename from src/loaders/loader.js
rename to src/loaders/browser/loader.js
index 0a670cb..807a4c7 100644
--- a/src/loaders/loader.js
+++ b/src/loaders/browser/loader.js
@@ -1,8 +1,8 @@
 import ResourceLoader from 'resource-loader';
 import { blobMiddlewareFactory } from 'resource-loader/lib/middlewares/parsing/blob';
 import EventEmitter from 'eventemitter3';
-import textureParser from './textureParser';
-import spritesheetParser from './spritesheetParser';
+import textureParser from '../utils/textureParser';
+import spritesheetParser from '../utils/spritesheetParser';
 import bitmapFontParser from './bitmapFontParser';
 
 /**
diff --git a/src/loaders/index.js b/src/loaders/index.js
index 5189793..d13c8d6 100644
--- a/src/loaders/index.js
+++ b/src/loaders/index.js
@@ -1,15 +1,43 @@
 /**
- * @namespace PIXI.loaders
- */
-export { default as Loader } from './loader';
-export { default as bitmapFontParser, parse as parseBitmapFontData } from './bitmapFontParser';
-export { default as spritesheetParser } from './spritesheetParser';
-export { default as textureParser } from './textureParser';
-
-/**
  * Reference to **resource-loader**'s Resource class.
  * See https://github.com/englercj/resource-loader
  * @class Resource
  * @memberof PIXI.loaders
  */
-export { Resource } from 'resource-loader';
+import { isV8 } from '../core/utils';
+
+/**
+ * @namespace PIXI.loaders
+ */
+
+const spritesheetParser = require('./utils/spritesheetParser'); // eslint-disable-line global-require
+const textureParser = require('./utils/textureParser'); // eslint-disable-line global-require
+
+if (isV8())
+{
+    const Resource = require('./pxscene/resource').default; // eslint-disable-line global-require
+    const Loader = require('./pxscene/loader').default; // eslint-disable-line global-require
+
+    module.exports = {
+        Resource,
+        Loader,
+        // spritesheetParser,
+        // textureParser,
+    };
+}
+else
+{
+    const Resource = require('resource-loader'); // eslint-disable-line global-require
+    const Loader = require('./browser/loader').default; // eslint-disable-line global-require
+    const bitmapFontParser = require('./browser/bitmapFontParser').default; // eslint-disable-line global-require
+    const parseBitmapFontData = require('./browser/bitmapFontParser').parse; // eslint-disable-line global-require
+
+    module.exports = {
+        Resource,
+        Loader,
+        bitmapFontParser,
+        parseBitmapFontData,
+        spritesheetParser,
+        textureParser,
+    };
+}
diff --git a/src/loaders/pxscene/loader.js b/src/loaders/pxscene/loader.js
new file mode 100644
index 0000000..1125a57
--- /dev/null
+++ b/src/loaders/pxscene/loader.js
@@ -0,0 +1,661 @@
+// Remove document dependencies for resource-loader/src/Loader.js
+import Signal from 'mini-signals';
+import parseUri from 'parse-uri';
+import * as async from 'resource-loader/lib/async';
+import Resource from './resource';
+
+import EventEmitter from 'eventemitter3';
+import textureParser from '../utils/textureParser';
+import spritesheetParser from '../utils/spritesheetParser';
+
+// some constants
+const MAX_PROGRESS = 100;
+const rgxExtractUrlHash = /(#[\w-]+)?$/;
+
+/**
+ *
+ * The new loader, extends Resource Loader by Chad Engler : https://github.com/englercj/resource-loader
+ *
+ * ```js
+ * let loader = PIXI.loader; // pixi exposes a premade instance for you to use.
+ * //or
+ * let loader = new PIXI.loaders.Loader(); // you can also create your own if you want
+ *
+ * loader.add('bunny', 'data/bunny.png');
+ * loader.add('spaceship', 'assets/spritesheet.json');
+ * loader.add('scoreFont', 'assets/score.fnt');
+ *
+ * loader.once('complete',onAssetsLoaded);
+ *
+ * loader.load();
+ * ```
+ *
+ * @class
+ * @memberof PIXI.loaders
+ */
+export default class Loader
+{
+    /**
+     * Initialize the object.
+     *
+     * @param {object} [appSceneContext] - The app scene context of the pxscene
+     * @param {string} [baseUrl=''] - The base url for all resources loaded by this loader.
+     * @param {number} [concurrency=10] - The number of resources to load concurrently.
+     */
+    constructor(appSceneContext, baseUrl = '', concurrency = 10)
+    {
+        /**
+         * The app scene context of pxscene
+         *
+         * @type {Object}
+         */
+        this.appSceneContext = appSceneContext;
+
+        /**
+         * The base url for all resources loaded by this loader.
+         *
+         * @member {string}
+         */
+        this.baseUrl = baseUrl;
+
+        /**
+         * The progress percent of the loader going through the queue.
+         *
+         * @member {number}
+         */
+        this.progress = 0;
+
+        /**
+         * Loading state of the loader, true if it is currently loading resources.
+         *
+         * @member {boolean}
+         */
+        this.loading = false;
+
+        /**
+         * A querystring to append to every URL added to the loader.
+         *
+         * This should be a valid query string *without* the question-mark (`?`). The loader will
+         * also *not* escape values for you. Make sure to escape your parameters with
+         * [`encodeURIComponent`](https://mdn.io/encodeURIComponent) before assigning this property.
+         *
+         * @example
+         *
+         * ```js
+         * const loader = new Loader();
+         *
+         * loader.defaultQueryString = 'user=me&password=secret';
+         *
+         * // This will request 'image.png?user=me&password=secret'
+         * loader.add('image.png').load();
+         *
+         * loader.reset();
+         *
+         * // This will request 'image.png?v=1&user=me&password=secret'
+         * loader.add('iamge.png?v=1').load();
+         * ```
+         */
+        this.defaultQueryString = '';
+
+        /**
+         * The middleware to run before loading each resource.
+         *
+         * @member {function[]}
+         */
+        this._beforeMiddleware = [];
+
+        /**
+         * The middleware to run after loading each resource.
+         *
+         * @member {function[]}
+         */
+        this._afterMiddleware = [];
+
+        /**
+         * The tracks the resources we are currently completing parsing for.
+         *
+         * @member {Resource[]}
+         */
+        this._resourcesParsing = [];
+
+        /**
+         * The `_loadResource` function bound with this object context.
+         *
+         * @private
+         * @member {function}
+         * @param {Resource} r - The resource to load
+         * @param {Function} d - The dequeue function
+         * @return {undefined}
+         */
+        this._boundLoadResource = (r, d) => this._loadResource(r, d);
+
+        /**
+         * The resources waiting to be loaded.
+         *
+         * @private
+         * @member {Resource[]}
+         */
+        this._queue = async.queue(this._boundLoadResource, concurrency);
+
+        this._queue.pause();
+
+        /**
+         * All the resources for this loader keyed by name.
+         *
+         * @member {object<string, Resource>}
+         */
+        this.resources = {};
+
+        /**
+         * Dispatched once per loaded or errored resource.
+         *
+         * The callback looks like {@link Loader.OnProgressSignal}.
+         *
+         * @member {Signal}
+         */
+        this.onProgress = new Signal();
+
+        /**
+         * Dispatched once per errored resource.
+         *
+         * The callback looks like {@link Loader.OnErrorSignal}.
+         *
+         * @member {Signal}
+         */
+        this.onError = new Signal();
+
+        /**
+         * Dispatched once per loaded resource.
+         *
+         * The callback looks like {@link Loader.OnLoadSignal}.
+         *
+         * @member {Signal}
+         */
+        this.onLoad = new Signal();
+
+        /**
+         * Dispatched when the loader begins to process the queue.
+         *
+         * The callback looks like {@link Loader.OnStartSignal}.
+         *
+         * @member {Signal}
+         */
+        this.onStart = new Signal();
+
+        /**
+         * Dispatched when the queued resources all load.
+         *
+         * The callback looks like {@link Loader.OnCompleteSignal}.
+         *
+         * @member {Signal}
+         */
+        this.onComplete = new Signal();
+
+        // The following code is from browser/loader.js
+        EventEmitter.call(this);
+
+        for (let i = 0; i < Loader._pixiMiddleware.length; ++i)
+        {
+            this.use(Loader._pixiMiddleware[i]());
+        }
+
+        // Compat layer, translate the new v2 signals into old v1 events.
+        this.onStart.add((l) => this.emit('start', l));
+        this.onProgress.add((l, r) => this.emit('progress', l, r));
+        this.onError.add((e, l, r) => this.emit('error', e, l, r));
+        this.onLoad.add((l, r) => this.emit('load', l, r));
+        this.onComplete.add((l, r) => this.emit('complete', l, r));
+    }
+
+    /**
+     * Initialize the app scene context.
+     *
+     * @param {object} [appSceneContext] - The app scene context of the pxscene
+     * @return {Loader} Returns itself.
+     */
+    initAppSceneContext(appSceneContext)
+    {
+        this.appSceneContext = appSceneContext;
+
+        return this;
+    }
+
+    /**
+     * Adds a resource (or multiple resources) to the loader queue.
+     *
+     * This function can take a wide variety of different parameters. The only thing that is always
+     * required the url to load. All the following will work:
+     *
+     * ```js
+     * loader
+     *     // normal param syntax
+     *     .add('key', 'http://...', function () {})
+     *     .add('http://...', function () {})
+     *     .add('http://...')
+     *
+     *     // object syntax
+     *     .add({
+     *         name: 'key2',
+     *         url: 'http://...'
+     *     }, function () {})
+     *     .add({
+     *         url: 'http://...'
+     *     }, function () {})
+     *     .add({
+     *         name: 'key3',
+     *         url: 'http://...'
+     *         onComplete: function () {}
+     *     })
+     *     .add({
+     *         url: 'https://...',
+     *         onComplete: function () {},
+     *         crossOrigin: true
+     *     })
+     *
+     *     // you can also pass an array of objects or urls or both
+     *     .add([
+     *         { name: 'key4', url: 'http://...', onComplete: function () {} },
+     *         { url: 'http://...', onComplete: function () {} },
+     *         'http://...'
+     *     ])
+     *
+     *     // and you can use both params and options
+     *     .add('key', 'http://...', { crossOrigin: true }, function () {})
+     *     .add('http://...', { crossOrigin: true }, function () {});
+     * ```
+     *
+     * @param {string} [name] - The name of the resource to load, if not passed the url is used.
+     * @param {string} [url] - The url for this resource, relative to the baseUrl of this loader.
+     * @param {object} [options] - The options for the load.
+     * @param {boolean} [options.crossOrigin] - Is this request cross-origin? Default is to determine automatically.
+     * @param {Resource.LOAD_TYPE} [options.loadType=Resource.LOAD_TYPE.XHR] - How should this resource be loaded?
+     * @param {Resource.XHR_RESPONSE_TYPE} [options.xhrType=Resource.XHR_RESPONSE_TYPE.DEFAULT] - How should
+     *      the data being loaded be interpreted when using XHR?
+     * @param {object} [options.metadata] - Extra configuration for middleware and the Resource object.
+     * @param {HTMLImageElement|HTMLAudioElement|HTMLVideoElement} [options.metadata.loadElement=null] - The
+     *      element to use for loading, instead of creating one.
+     * @param {boolean} [options.metadata.skipSource=false] - Skips adding source(s) to the load element. This
+     *      is useful if you want to pass in a `loadElement` that you already added load sources to.
+     * @param {function} [cb] - Function to call when this specific resource completes loading.
+     * @return {Loader} Returns itself.
+     */
+    add(name, url, options, cb)
+    {
+        // special case of an array of objects or urls
+        if (Array.isArray(name))
+        {
+            for (let i = 0; i < name.length; ++i)
+            {
+                this.add(name[i]);
+            }
+
+            return this;
+        }
+
+        // if an object is passed instead of params
+        if (typeof name === 'object')
+        {
+            cb = url || name.callback || name.onComplete;
+            options = name;
+            url = name.url;
+            name = name.name || name.key || name.url;
+        }
+
+        // case where no name is passed shift all args over by one.
+        if (typeof url !== 'string')
+        {
+            cb = options;
+            options = url;
+            url = name;
+        }
+
+        // now that we shifted make sure we have a proper url.
+        if (typeof url !== 'string')
+        {
+            throw new Error('No url passed to add resource to loader.');
+        }
+
+        // options are optional so people might pass a function and no options
+        if (typeof options === 'function')
+        {
+            cb = options;
+            options = null;
+        }
+
+        // if loading already you can only add resources that have a parent.
+        if (this.loading && (!options || !options.parentResource))
+        {
+            throw new Error('Cannot add resources while the loader is running.');
+        }
+
+        // check if resource already exists.
+        if (this.resources[name])
+        {
+            throw new Error(`Resource named "${name}" already exists.`);
+        }
+
+        // add base url if this isn't an absolute url
+        url = this._prepareUrl(url);
+
+        // create the store the resource
+        this.resources[name] = new Resource(this.appSceneContext, name, url, options);
+
+        if (typeof cb === 'function')
+        {
+            this.resources[name].onAfterMiddleware.once(cb);
+        }
+
+        // if actively loading, make sure to adjust progress chunks for that parent and its children
+        if (this.loading)
+        {
+            const parent = options.parentResource;
+            const incompleteChildren = [];
+
+            for (let i = 0; i < parent.children.length; ++i)
+            {
+                if (!parent.children[i].isComplete)
+                {
+                    incompleteChildren.push(parent.children[i]);
+                }
+            }
+
+            const fullChunk = parent.progressChunk * (incompleteChildren.length + 1); // +1 for parent
+            const eachChunk = fullChunk / (incompleteChildren.length + 2); // +2 for parent & new child
+
+            parent.children.push(this.resources[name]);
+            parent.progressChunk = eachChunk;
+
+            for (let i = 0; i < incompleteChildren.length; ++i)
+            {
+                incompleteChildren[i].progressChunk = eachChunk;
+            }
+
+            this.resources[name].progressChunk = eachChunk;
+        }
+
+        // add the resource to the queue
+        this._queue.push(this.resources[name]);
+
+        return this;
+    }
+
+    /**
+     * Sets up a middleware function that will run *before* the
+     * resource is loaded.
+     *
+     * @method before
+     * @param {function} fn - The middleware function to register.
+     * @return {Loader} Returns itself.
+     */
+    pre(fn)
+    {
+        this._beforeMiddleware.push(fn);
+
+        return this;
+    }
+
+    /**
+     * Sets up a middleware function that will run *after* the
+     * resource is loaded.
+     *
+     * @alias use
+     * @method after
+     * @param {function} fn - The middleware function to register.
+     * @return {Loader} Returns itself.
+     */
+    use(fn)
+    {
+        this._afterMiddleware.push(fn);
+
+        return this;
+    }
+
+    /**
+     * Resets the queue of the loader to prepare for a new load.
+     *
+     * @return {Loader} Returns itself.
+     */
+    reset()
+    {
+        this.progress = 0;
+        this.loading = false;
+
+        this._queue.kill();
+        this._queue.pause();
+
+        // abort all resource loads
+        for (const k in this.resources)
+        {
+            const res = this.resources[k];
+
+            if (res.onLoadBinding)
+            {
+                res.onLoadBinding.detach();
+            }
+
+            if (res.isLoading)
+            {
+                res.abort();
+            }
+        }
+
+        this.resources = {};
+
+        return this;
+    }
+
+    /**
+     * Starts loading the queued resources.
+     *
+     * @param {function} [cb] - Optional callback that will be bound to the `complete` event.
+     * @return {Loader} Returns itself.
+     */
+    load(cb)
+    {
+        // register complete callback if they pass one
+        if (typeof cb === 'function')
+        {
+            this.onComplete.once(cb);
+        }
+
+        // if the queue has already started we are done here
+        if (this.loading)
+        {
+            return this;
+        }
+
+        // distribute progress chunks
+        const chunk = 100 / this._queue._tasks.length;
+
+        for (let i = 0; i < this._queue._tasks.length; ++i)
+        {
+            this._queue._tasks[i].data.progressChunk = chunk;
+        }
+
+        // update loading state
+        this.loading = true;
+
+        // notify of start
+        this.onStart.dispatch(this);
+
+        // start loading
+        this._queue.resume();
+
+        return this;
+    }
+
+    /**
+     * Prepares a url for usage based on the configuration of this object
+     *
+     * @private
+     * @param {string} url - The url to prepare.
+     * @return {string} The prepared url.
+     */
+    _prepareUrl(url)
+    {
+        const parsedUrl = parseUri(url, { strictMode: true });
+        let result;
+
+        // absolute url, just use it as is.
+        if (parsedUrl.protocol || !parsedUrl.path || url.indexOf('//') === 0)
+        {
+            result = url;
+        }
+        // if baseUrl doesn't end in slash and url doesn't start with slash, then add a slash inbetween
+        else if (this.baseUrl.length
+            && this.baseUrl.lastIndexOf('/') !== this.baseUrl.length - 1
+            && url.charAt(0) !== '/'
+        )
+        {
+            result = `${this.baseUrl}/${url}`;
+        }
+        else
+        {
+            result = this.baseUrl + url;
+        }
+
+        // if we need to add a default querystring, there is a bit more work
+        if (this.defaultQueryString)
+        {
+            const hash = rgxExtractUrlHash.exec(result)[0];
+
+            result = result.substr(0, result.length - hash.length);
+
+            if (result.indexOf('?') !== -1)
+            {
+                result += `&${this.defaultQueryString}`;
+            }
+            else
+            {
+                result += `?${this.defaultQueryString}`;
+            }
+
+            result += hash;
+        }
+
+        return result;
+    }
+
+    /**
+     * Loads a single resource.
+     *
+     * @private
+     * @param {Resource} resource - The resource to load.
+     * @param {function} dequeue - The function to call when we need to dequeue this item.
+     */
+    _loadResource(resource, dequeue)
+    {
+        resource._dequeue = dequeue;
+
+        // run before middleware
+        async.eachSeries(
+            this._beforeMiddleware,
+            (fn, next) =>
+            {
+                fn.call(this, resource, () =>
+                {
+                    // if the before middleware marks the resource as complete,
+                    // break and don't process any more before middleware
+                    next(resource.isComplete ? {} : null);
+                });
+            },
+            () =>
+            {
+                if (resource.isComplete)
+                {
+                    this._onLoad(resource);
+                }
+                else
+                {
+                    resource.onLoadBinding = resource.onComplete.once(this._onLoad, this);
+                    resource.load();
+                }
+            }
+        );
+    }
+
+    /**
+     * Called once each resource has loaded.
+     *
+     * @private
+     */
+    _onComplete()
+    {
+        this.loading = false;
+
+        this.onComplete.dispatch(this, this.resources);
+    }
+
+    /**
+     * Called each time a resources is loaded.
+     *
+     * @private
+     * @param {Resource} resource - The resource that was loaded
+     */
+    _onLoad(resource)
+    {
+        resource.onLoadBinding = null;
+
+        // remove this resource from the async queue, and add it to our list of resources that are being parsed
+        resource._dequeue();
+        this._resourcesParsing.push(resource);
+
+        // run middleware, this *must* happen before dequeue so sub-assets get added properly
+        async.eachSeries(
+            this._afterMiddleware,
+            (fn, next) =>
+            {
+                fn.call(this, resource, next);
+            },
+            () =>
+            {
+                resource.onAfterMiddleware.dispatch(resource);
+
+                this.progress += resource.progressChunk;
+                this.onProgress.dispatch(this, resource);
+
+                if (resource.error)
+                {
+                    this.onError.dispatch(resource.error, this, resource);
+                }
+                else
+                {
+                    this.onLoad.dispatch(this, resource);
+                }
+
+                this._resourcesParsing.splice(this._resourcesParsing.indexOf(resource), 1);
+
+                // do completion check
+                if (this._queue.idle() && this._resourcesParsing.length === 0)
+                {
+                    this.progress = MAX_PROGRESS;
+                    this._onComplete();
+                }
+            }
+        );
+    }
+
+    /**
+     * Adds a default middleware to the pixi loader.
+     *
+     * @static
+     * @param {Function} fn - The middleware to add.
+     */
+    static addPixiMiddleware(fn)
+    {
+        Loader._pixiMiddleware.push(fn);
+    }
+}
+
+// Copy EE3 prototype (mixin)
+for (const k in EventEmitter.prototype)
+{
+    Loader.prototype[k] = EventEmitter.prototype[k];
+}
+
+Loader._pixiMiddleware = [
+    // parse any Image objects into textures
+    textureParser,
+    // parse any spritesheet data into multiple textures
+    spritesheetParser,
+];
diff --git a/src/loaders/pxscene/resource.js b/src/loaders/pxscene/resource.js
new file mode 100644
index 0000000..605c09a
--- /dev/null
+++ b/src/loaders/pxscene/resource.js
@@ -0,0 +1,748 @@
+import Signal from 'mini-signals';
+
+// noop
+function _noop() { /* empty */ }
+
+/**
+ * Manages the state and loading of a resource and all child resources.
+ *
+ * @class
+ */
+export default class Resource
+{
+    /**
+     * Sets the load type to be used for a specific extension.
+     *
+     * @static
+     * @param {string} extname - The extension to set the type for, e.g. "png" or "fnt"
+     * @param {Resource.LOAD_TYPE} loadType - The load type to set it to.
+     */
+    static setExtensionLoadType(extname, loadType)
+    {
+        setExtMap(Resource._loadTypeMap, extname, loadType);
+    }
+
+    /**
+     * Sets the load type to be used for a specific extension.
+     *
+     * @static
+     * @param {string} extname - The extension to set the type for, e.g. "png" or "fnt"
+     * @param {Resource.XHR_RESPONSE_TYPE} xhrType - The xhr type to set it to.
+     */
+    static setExtensionXhrType(extname, xhrType)
+    {
+        setExtMap(Resource._xhrTypeMap, extname, xhrType);
+    }
+
+    /**
+     * @param {object} [appSceneContext] - The app scene context of the pxscene
+     * @param {string} name - The name of the resource to load.
+     * @param {string|string[]} url - The url for this resource, for audio/video loads you can pass
+     *      an array of sources.
+     * @param {object} [options] - The options for the load.
+     * @param {Resource.LOAD_TYPE} [options.loadType=Resource.LOAD_TYPE.XHR] - How should this resource
+     *      be loaded?
+     * @param {Resource.XHR_RESPONSE_TYPE} [options.xhrType=Resource.XHR_RESPONSE_TYPE.DEFAULT] - How
+     *      should the data being loaded be interpreted when using XHR?
+     * @param {object} [options.metadata] - Extra configuration for middleware and the Resource object.
+     * @param {HTMLImageElement|HTMLAudioElement|HTMLVideoElement} [options.metadata.loadElement=null] - The
+     *      element to use for loading, instead of creating one.
+     * @param {boolean} [options.metadata.skipSource=false] - Skips adding source(s) to the load element. This
+     *      is useful if you want to pass in a `loadElement` that you already added load sources to.
+     */
+    constructor(appSceneContext, name, url, options)
+    {
+        if (typeof name !== 'string' || typeof url !== 'string')
+        {
+            throw new Error('Both name and url are required for constructing a resource.');
+        }
+
+        options = options || {};
+
+        /**
+         * The app scene context of pxscene
+         *
+         * @type {Object}
+         */
+        this.appSceneContext = appSceneContext;
+
+        /**
+         * The state flags of this resource.
+         *
+         * @member {number}
+         */
+        this._flags = 0;
+
+        // set data url flag, needs to be set early for some _determineX checks to work.
+        this._setFlag(Resource.STATUS_FLAGS.DATA_URL, url.indexOf('data:') === 0);
+
+        /**
+         * The name of this resource.
+         *
+         * @member {string}
+         * @readonly
+         */
+        this.name = name;
+
+        /**
+         * The url used to load this resource.
+         *
+         * @member {string}
+         * @readonly
+         */
+        this.url = url;
+
+        /**
+         * The extension used to load this resource.
+         *
+         * @member {string}
+         * @readonly
+         */
+        this.extension = this._getExtension();
+
+        /**
+         * The data that was loaded by the resource.
+         *
+         * @member {any}
+         */
+        this.data = null;
+
+        /**
+         * Response text from getting file.
+         * @type {undefined}
+         */
+        this.responseText = undefined;
+
+        /**
+         * The method of loading to use for this resource.
+         *
+         * @member {Resource.LOAD_TYPE}
+         */
+        this.loadType = options.loadType || this._determineLoadType();
+
+        /**
+         * The type used to load the resource via XHR. If unset, determined automatically.
+         *
+         * @member {string}
+         */
+        this.xhrType = options.xhrType;
+
+        /**
+         * Extra info for middleware, and controlling specifics about how the resource loads.
+         *
+         * Note that if you pass in a `loadElement`, the Resource class takes ownership of it.
+         * Meaning it will modify it as it sees fit.
+         *
+         * @member {object}
+         * @property {HTMLImageElement|HTMLAudioElement|HTMLVideoElement} [loadElement=null] - The
+         *  element to use for loading, instead of creating one.
+         * @property {boolean} [skipSource=false] - Skips adding source(s) to the load element. This
+         *  is useful if you want to pass in a `loadElement` that you already added load sources
+         *  to.
+         */
+        this.metadata = options.metadata || {};
+
+        /**
+         * The error that occurred while loading (if any).
+         *
+         * @member {Error}
+         * @readonly
+         */
+        this.error = null;
+
+        /**
+         * The XHR object that was used to load this resource. This is only set
+         * when `loadType` is `Resource.LOAD_TYPE.XHR`.
+         *
+         * @member {XMLHttpRequest}
+         * @readonly
+         */
+        this.xhr = null;
+
+        /**
+         * The child resources this resource owns.
+         *
+         * @member {Resource[]}
+         * @readonly
+         */
+        this.children = [];
+
+        /**
+         * The resource type.
+         *
+         * @member {Resource.TYPE}
+         * @readonly
+         */
+        this.type = Resource.TYPE.UNKNOWN;
+
+        /**
+         * The progress chunk owned by this resource.
+         *
+         * @member {number}
+         * @readonly
+         */
+        this.progressChunk = 0;
+
+        /**
+         * The `dequeue` method that will be used a storage place for the async queue dequeue method
+         * used privately by the loader.
+         *
+         * @private
+         * @member {function}
+         */
+        this._dequeue = _noop;
+
+        /**
+         * Used a storage place for the on load binding used privately by the loader.
+         *
+         * @private
+         * @member {function}
+         */
+        this.onLoadBinding = null;
+
+        /**
+         * Dispatched when the resource beings to load.
+         *
+         * The callback looks like {@link Resource.OnStartSignal}.
+         *
+         * @member {Signal}
+         */
+        this.onStart = new Signal();
+
+        /**
+         * Dispatched each time progress of this resource load updates.
+         * Not all resources types and loader systems can support this event
+         * so sometimes it may not be available. If the resource
+         * is being loaded on a modern browser, using XHR, and the remote server
+         * properly sets Content-Length headers, then this will be available.
+         *
+         * The callback looks like {@link Resource.OnProgressSignal}.
+         *
+         * @member {Signal}
+         */
+        this.onProgress = new Signal();
+
+        /**
+         * Dispatched once this resource has loaded, if there was an error it will
+         * be in the `error` property.
+         *
+         * The callback looks like {@link Resource.OnCompleteSignal}.
+         *
+         * @member {Signal}
+         */
+        this.onComplete = new Signal();
+
+        /**
+         * Dispatched after this resource has had all the *after* middleware run on it.
+         *
+         * The callback looks like {@link Resource.OnCompleteSignal}.
+         *
+         * @member {Signal}
+         */
+        this.onAfterMiddleware = new Signal();
+    }
+
+    /**
+     * Stores whether or not this url is a data url.
+     *
+     * @member {boolean}
+     * @readonly
+     */
+    get isDataUrl()
+    {
+        return this._hasFlag(Resource.STATUS_FLAGS.DATA_URL);
+    }
+
+    /**
+     * Describes if this resource has finished loading. Is true when the resource has completely
+     * loaded.
+     *
+     * @member {boolean}
+     * @readonly
+     */
+    get isComplete()
+    {
+        return this._hasFlag(Resource.STATUS_FLAGS.COMPLETE);
+    }
+
+    /**
+     * Describes if this resource is currently loading. Is true when the resource starts loading,
+     * and is false again when complete.
+     *
+     * @member {boolean}
+     * @readonly
+     */
+    get isLoading()
+    {
+        return this._hasFlag(Resource.STATUS_FLAGS.LOADING);
+    }
+
+    /**
+     * Marks the resource as complete.
+     *
+     */
+    complete()
+    {
+        if (this.isComplete)
+        {
+            throw new Error('Complete called again for an already completed resource.');
+        }
+
+        this._setFlag(Resource.STATUS_FLAGS.COMPLETE, true);
+        this._setFlag(Resource.STATUS_FLAGS.LOADING, false);
+
+        this.onComplete.dispatch(this);
+    }
+
+    /**
+     * Aborts the loading of this resource, with an optional message.
+     *
+     * @param {string} message - The message to use for the error
+     */
+    abort(message)
+    {
+        // abort can be called multiple times, ignore subsequent calls.
+        if (this.error)
+        {
+            return;
+        }
+
+        // store error
+        this.error = new Error(message);
+
+        // abort the actual loading
+        if (this.xhr)
+        {
+            this.xhr.abort();
+        }
+        else if (this.xdr)
+        {
+            this.xdr.abort();
+        }
+        else if (this.data)
+        {
+            // single source
+            if (this.data.src)
+            {
+                this.data.src = Resource.EMPTY_GIF;
+            }
+            // multi-source
+            else
+            {
+                while (this.data.firstChild)
+                {
+                    this.data.removeChild(this.data.firstChild);
+                }
+            }
+        }
+
+        // done now.
+        this.complete();
+    }
+
+    /**
+     * Kicks off loading of this resource. This method is asynchronous.
+     *
+     * @param {function} [cb] - Optional callback to call once the resource is loaded.
+     */
+    load(cb)
+    {
+        if (this.isLoading)
+        {
+            return;
+        }
+
+        if (this.isComplete)
+        {
+            if (cb)
+            {
+                setTimeout(() => cb(this), 1);
+            }
+
+            return;
+        }
+        else if (cb)
+        {
+            this.onComplete.once(cb);
+        }
+
+        this._setFlag(Resource.STATUS_FLAGS.LOADING, true);
+
+        this.onStart.dispatch(this);
+
+        // if unset, determine the value
+
+        switch (this.loadType)
+        {
+            case Resource.LOAD_TYPE.IMAGE:
+                this.type = Resource.TYPE.IMAGE;
+                this._loadElement();
+                break;
+
+            case Resource.LOAD_TYPE.AUDIO:
+                this.type = Resource.TYPE.AUDIO;
+                this._loadSourceElement('audio');
+                break;
+
+            case Resource.LOAD_TYPE.VIDEO:
+                this.type = Resource.TYPE.VIDEO;
+                this._loadSourceElement('video');
+                break;
+
+            case Resource.LOAD_TYPE.XHR:
+            /* falls through */
+            default:
+                this._loadFile();
+                break;
+        }
+    }
+
+    /**
+     * Checks if the flag is set.
+     *
+     * @private
+     * @param {number} flag - The flag to check.
+     * @return {boolean} True if the flag is set.
+     */
+    _hasFlag(flag)
+    {
+        return !!(this._flags & flag);
+    }
+
+    /**
+     * (Un)Sets the flag.
+     *
+     * @private
+     * @param {number} flag - The flag to (un)set.
+     * @param {boolean} value - Whether to set or (un)set the flag.
+     */
+    _setFlag(flag, value)
+    {
+        this._flags = value ? (this._flags | flag) : (this._flags & ~flag);
+    }
+
+    /**
+     * Loads this resources using an element that has a single source,
+     * Currently, it is an image.
+     *
+     * @private
+     */
+    _loadElement()
+    {
+        if (this.metadata.loadElement)
+        {
+            this.data = this.metadata.loadElement;
+        }
+
+        this.data = {};
+
+        if (!this.metadata.skipSource)
+        {
+            this.data.src = this.url;
+        }
+
+        this.complete();
+    }
+
+    /**
+     * Loads this resources using an element that has multiple sources,
+     * like an HTMLAudioElement or HTMLVideoElement.
+     *
+     * @private
+     * @param {string} type - The type of element to use.
+     */
+    _loadSourceElement(type)
+    {
+        // TODO
+        this.abort(`Unsupported element: ${type}`);
+    }
+
+    /**
+     * Load the file from the URL and get the response text.
+     *
+     * @private
+     */
+    _loadFile()
+    {
+        // if unset, determine the value
+        if (typeof this.xhrType !== 'string')
+        {
+            this.xhrType = this._determineXhrType();
+        }
+
+        this.appSceneContext
+            .getFile(this.url)
+            .then((data) =>
+            {
+                this.responseText = data;
+                this._xhrOnLoad();
+            })
+            .catch((err) =>
+            {
+                this._onError(err);
+            });
+    }
+
+    /**
+     * Called if a load errors out.
+     *
+     * @param {Event} event - The error event from the element that emits it.
+     * @private
+     */
+    _onError(event)
+    {
+        this.abort(`Failed to load element using: ${event.target.nodeName}`);
+    }
+
+    /**
+     * Called when data successfully loads from an xhr/xdr request.
+     *
+     * @private
+     * @param {XMLHttpRequestLoadEvent|Event} event - Load event
+     */
+    _xhrOnLoad()
+    {
+        if (this.xhrType === Resource.XHR_RESPONSE_TYPE.TEXT)
+        {
+            this.data = this.responseText;
+            this.type = Resource.TYPE.TEXT;
+        }
+        // if json, parse into json object
+        else if (this.xhrType === Resource.XHR_RESPONSE_TYPE.JSON)
+        {
+            try
+            {
+                this.data = JSON.parse(this.responseText);
+                this.type = Resource.TYPE.JSON;
+            }
+            catch (e)
+            {
+                this.abort(`Error trying to parse loaded json: ${e}`);
+
+                return;
+            }
+        }
+        else
+        {
+            // other types just return the response
+            this.data = this.responseText;
+        }
+
+        this.complete();
+    }
+
+    /**
+     * Determines the responseType of an XHR request based on the extension of the
+     * resource being loaded.
+     *
+     * @private
+     * @return {Resource.XHR_RESPONSE_TYPE} The responseType to use.
+     */
+    _determineXhrType()
+    {
+        return Resource._xhrTypeMap[this.extension] || Resource.XHR_RESPONSE_TYPE.TEXT;
+    }
+
+    /**
+     * Determines the loadType of a resource based on the extension of the
+     * resource being loaded.
+     *
+     * @private
+     * @return {Resource.LOAD_TYPE} The loadType to use.
+     */
+    _determineLoadType()
+    {
+        return Resource._loadTypeMap[this.extension] || Resource.LOAD_TYPE.XHR;
+    }
+
+    /**
+     * Extracts the extension (sans '.') of the file being loaded by the resource.
+     *
+     * @private
+     * @return {string} The extension.
+     */
+    _getExtension()
+    {
+        let url = this.url;
+        let ext = '';
+
+        if (this.isDataUrl)
+        {
+            const slashIndex = url.indexOf('/');
+
+            ext = url.substring(slashIndex + 1, url.indexOf(';', slashIndex));
+        }
+        else
+        {
+            const queryStart = url.indexOf('?');
+
+            if (queryStart !== -1)
+            {
+                url = url.substring(0, queryStart);
+            }
+
+            ext = url.substring(url.lastIndexOf('.') + 1);
+        }
+
+        return ext.toLowerCase();
+    }
+}
+
+/**
+ * The types of resources a resource could represent.
+ *
+ * @static
+ * @readonly
+ * @enum {number}
+ */
+Resource.STATUS_FLAGS = {
+    NONE:       0,
+    DATA_URL:   (1 << 0),
+    COMPLETE:   (1 << 1),
+    LOADING:    (1 << 2),
+};
+
+/**
+ * The types of resources a resource could represent.
+ *
+ * @static
+ * @readonly
+ * @enum {number}
+ */
+Resource.TYPE = {
+    UNKNOWN:    0,
+    JSON:       1,
+    XML:        2,
+    IMAGE:      3,
+    AUDIO:      4,
+    VIDEO:      5,
+    TEXT:       6,
+};
+
+/**
+ * The types of loading a resource can use.
+ *
+ * @static
+ * @readonly
+ * @enum {number}
+ */
+Resource.LOAD_TYPE = {
+    /** Uses XMLHttpRequest to load the resource. */
+    XHR:    1,
+    /** Uses an `Image` object to load the resource. */
+    IMAGE:  2,
+    /** Uses an `Audio` object to load the resource. */
+    AUDIO:  3,
+    /** Uses a `Video` object to load the resource. */
+    VIDEO:  4,
+};
+
+/**
+ * The XHR ready states, used internally.
+ *
+ * @static
+ * @readonly
+ * @enum {string}
+ */
+Resource.XHR_RESPONSE_TYPE = {
+    /** string */
+    DEFAULT:    'text',
+    /** ArrayBuffer */
+    BUFFER:     'arraybuffer',
+    /** Blob */
+    BLOB:       'blob',
+    /** Document */
+    DOCUMENT:   'document',
+    /** Object */
+    JSON:       'json',
+    /** String */
+    TEXT:       'text',
+};
+
+Resource._loadTypeMap = {
+    // images
+    gif:        Resource.LOAD_TYPE.IMAGE,
+    png:        Resource.LOAD_TYPE.IMAGE,
+    bmp:        Resource.LOAD_TYPE.IMAGE,
+    jpg:        Resource.LOAD_TYPE.IMAGE,
+    jpeg:       Resource.LOAD_TYPE.IMAGE,
+    tif:        Resource.LOAD_TYPE.IMAGE,
+    tiff:       Resource.LOAD_TYPE.IMAGE,
+    webp:       Resource.LOAD_TYPE.IMAGE,
+    tga:        Resource.LOAD_TYPE.IMAGE,
+    svg:        Resource.LOAD_TYPE.IMAGE,
+    'svg+xml':  Resource.LOAD_TYPE.IMAGE, // for SVG data urls
+
+    // audio
+    mp3:        Resource.LOAD_TYPE.AUDIO,
+    ogg:        Resource.LOAD_TYPE.AUDIO,
+    wav:        Resource.LOAD_TYPE.AUDIO,
+
+    // videos
+    mp4:        Resource.LOAD_TYPE.VIDEO,
+    webm:       Resource.LOAD_TYPE.VIDEO,
+};
+
+Resource._xhrTypeMap = {
+    // xml
+    xhtml:      Resource.XHR_RESPONSE_TYPE.DOCUMENT,
+    html:       Resource.XHR_RESPONSE_TYPE.DOCUMENT,
+    htm:        Resource.XHR_RESPONSE_TYPE.DOCUMENT,
+    xml:        Resource.XHR_RESPONSE_TYPE.DOCUMENT,
+    tmx:        Resource.XHR_RESPONSE_TYPE.DOCUMENT,
+    svg:        Resource.XHR_RESPONSE_TYPE.DOCUMENT,
+
+    // This was added to handle Tiled Tileset XML, but .tsx is also a TypeScript React Component.
+    // Since it is way less likely for people to be loading TypeScript files instead of Tiled files,
+    // this should probably be fine.
+    tsx:        Resource.XHR_RESPONSE_TYPE.DOCUMENT,
+
+    // images
+    gif:        Resource.XHR_RESPONSE_TYPE.BLOB,
+    png:        Resource.XHR_RESPONSE_TYPE.BLOB,
+    bmp:        Resource.XHR_RESPONSE_TYPE.BLOB,
+    jpg:        Resource.XHR_RESPONSE_TYPE.BLOB,
+    jpeg:       Resource.XHR_RESPONSE_TYPE.BLOB,
+    tif:        Resource.XHR_RESPONSE_TYPE.BLOB,
+    tiff:       Resource.XHR_RESPONSE_TYPE.BLOB,
+    webp:       Resource.XHR_RESPONSE_TYPE.BLOB,
+    tga:        Resource.XHR_RESPONSE_TYPE.BLOB,
+
+    // json
+    json:       Resource.XHR_RESPONSE_TYPE.JSON,
+
+    // text
+    text:       Resource.XHR_RESPONSE_TYPE.TEXT,
+    txt:        Resource.XHR_RESPONSE_TYPE.TEXT,
+
+    // fonts
+    ttf:        Resource.XHR_RESPONSE_TYPE.BUFFER,
+    otf:        Resource.XHR_RESPONSE_TYPE.BUFFER,
+};
+
+// We can't set the `src` attribute to empty string, so on abort we set it to this 1px transparent gif
+Resource.EMPTY_GIF = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
+
+/**
+ * Quick helper to set a value on one of the extension maps. Ensures there is no
+ * dot at the start of the extension.
+ *
+ * @ignore
+ * @param {object} map - The map to set on.
+ * @param {string} extname - The extension (or key) to set.
+ * @param {number} val - The value to set.
+ */
+function setExtMap(map, extname, val)
+{
+    if (extname && extname.indexOf('.') === 0)
+    {
+        extname = extname.substring(1);
+    }
+
+    if (!extname)
+    {
+        return;
+    }
+
+    map[extname] = val;
+}
diff --git a/src/loaders/spritesheetParser.js b/src/loaders/utils/spritesheetParser.js
similarity index 84%
rename from src/loaders/spritesheetParser.js
rename to src/loaders/utils/spritesheetParser.js
index e57dfb2..51cecdf 100644
--- a/src/loaders/spritesheetParser.js
+++ b/src/loaders/utils/spritesheetParser.js
@@ -1,6 +1,17 @@
-import { Resource } from 'resource-loader';
+import { isV8 } from '../../core/utils';
 import path from 'path';
-import { Spritesheet } from '../core';
+import { Spritesheet } from '../../core';
+
+let Resource;
+
+if (isV8())
+{
+    Resource = require('../pxscene/resource').default; // eslint-disable-line global-require
+}
+else
+{
+    Resource = require('resource-loader'); // eslint-disable-line global-require
+}
 
 export default function ()
 {
diff --git a/src/loaders/textureParser.js b/src/loaders/utils/textureParser.js
similarity index 57%
rename from src/loaders/textureParser.js
rename to src/loaders/utils/textureParser.js
index 480edc1..b84b5a1 100644
--- a/src/loaders/textureParser.js
+++ b/src/loaders/utils/textureParser.js
@@ -1,5 +1,17 @@
-import { Resource } from 'resource-loader';
-import Texture from '../core/textures/Texture';
+import { isV8 } from '../../core/utils';
+
+let Resource;
+
+if (isV8())
+{
+    Resource = require('../pxscene/resource').default; // eslint-disable-line global-require
+}
+else
+{
+    Resource = require('resource-loader'); // eslint-disable-line global-require
+}
+
+import Texture from '../../core/textures/Texture';
 
 export default function ()
 {
diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js
index 02c04a0..46f81ba 100644
--- a/src/mesh/Mesh.js
+++ b/src/mesh/Mesh.js
@@ -158,6 +158,17 @@ export default class Mesh extends core.Container
     }
 
     /**
+     * Renders the object using the PXScene renderer
+     *
+     * @private
+     * @param {PIXI.PXSceneRenderer} renderer - The renderer
+     */
+    _renderPXScene(renderer)
+    {
+        renderer.plugins[this.pluginName].render(this);
+    }
+
+    /**
      * When the texture is updated, this event will fire to update the scale and frame
      *
      * @private
diff --git a/src/mesh/index.js b/src/mesh/index.js
index 4d1cad6..5847f95 100644
--- a/src/mesh/index.js
+++ b/src/mesh/index.js
@@ -4,6 +4,7 @@
 export { default as Mesh } from './Mesh';
 export { default as MeshRenderer } from './webgl/MeshRenderer';
 export { default as CanvasMeshRenderer } from './canvas/CanvasMeshRenderer';
+export { default as PXSceneMeshRenderer } from './pxscene/PXSceneMeshRenderer';
 export { default as Plane } from './Plane';
 export { default as NineSlicePlane } from './NineSlicePlane';
 export { default as Rope } from './Rope';
diff --git a/src/mesh/pxscene/PXSceneMeshRenderer.js b/src/mesh/pxscene/PXSceneMeshRenderer.js
new file mode 100644
index 0000000..65ea540
--- /dev/null
+++ b/src/mesh/pxscene/PXSceneMeshRenderer.js
@@ -0,0 +1,146 @@
+import * as core from '../../core';
+import { Point } from '../../core/math';
+
+/**
+ * PXScene renderer plugin for mesh
+ *
+ * @class
+ * @memberof PIXI
+ * @extends PIXI.ObjectRenderer
+ */
+export default class PXSceneMeshRenderer extends core.ObjectRenderer
+{
+
+    /**
+     * constructor for renderer
+     *
+     * @param {PXSceneRenderer} renderer The renderer this mesh awesomeness works for.
+     */
+    constructor(renderer)
+    {
+        super(renderer);
+        this._resourceLoaded = false;
+    }
+
+    /**
+     * clone array
+     *
+     * @param {Array} arr the js array
+     * @return {Array} the new array
+     */
+    cloneArray(arr)
+    {
+        if (!arr || arr.length <= 0)
+        {
+            return null;
+        }
+
+        const retArray = [];
+
+        for (const i in arr)
+        {
+            retArray.push(arr[i]);
+        }
+
+        return retArray;
+    }
+
+    /**
+     * renders mesh
+     *
+     * @param {PIXI.mesh.Mesh} mesh mesh instance
+     */
+    render(mesh)
+    {
+        const texture = mesh._texture;
+        const parentRenderedObject = (mesh.parent && mesh.parent.renderedObject) || this.renderer.context;
+        const point = new Point(mesh.x, mesh.y);
+        const globalPoint = mesh.parent.toGlobal(point);
+
+        if (!mesh.renderedObject)
+        {
+            mesh.renderedObject = this.renderer.view.create({
+                t: 'image',
+                type: 'mesh',
+                parent: parentRenderedObject,
+                a: 0,
+            });
+        }
+
+        if (mesh.imageResource && mesh.renderedObject && this._resourceLoaded)
+        {
+            innerRenderMesh.call(this);
+        }
+        else if (!mesh.imageResource)
+        {
+            const imageUrl = texture.baseTexture.source.src;
+
+            mesh.imageResource = this.renderer.view.create({
+                t: 'imageResource',
+                url: imageUrl,
+            });
+
+            mesh.imageResource.ready.then((imgResource) =>
+            {
+                texture.baseTexture.source = {
+                    width: imgResource.w,
+                    height: imgResource.h,
+                    src: imageUrl,
+                };
+                texture.baseTexture._sourceLoaded();
+                texture.baseTexture.emit('loaded', texture.baseTexture);
+                mesh._onTextureUpdate();
+                mesh.renderedObject.resource = imgResource;
+                this._resourceLoaded = true;
+                innerRenderMesh.call(this);
+            });
+        }
+
+        function innerRenderMesh()
+        {
+            const renderedObject = mesh.renderedObject;
+            const attributes = this._calcMeshAttributes(globalPoint, mesh.width, mesh.height, mesh);
+
+            renderedObject.uvs = this.cloneArray(mesh.uvs);
+            renderedObject.vertices = this.cloneArray(mesh.vertices);
+
+            renderedObject.x = attributes.x;
+            renderedObject.y = attributes.y;
+            renderedObject.a = attributes.a;
+            renderedObject.r = attributes.r;
+            renderedObject.sx = attributes.sx;
+            renderedObject.sy = attributes.sy;
+        }
+    }
+
+    /**
+     * Calculate mesh attribute.
+     *
+     * @param {Point} globalPoint - Global Point of the mesh
+     * @param {Number} w - The width of the mesh
+     * @param {Number} h - The height of the mesh
+     * @param {Object} mesh - The mesh object
+     * @return {Object} The calculated attributes.
+     * @private
+     */
+    _calcMeshAttributes(globalPoint, w, h, mesh)
+    {
+        const x = globalPoint.x;
+        const y = globalPoint.y;
+        const a = mesh.alpha;
+        const r = mesh.rotation * (180 / Math.PI);
+        const sx = mesh.scale.x;
+        const sy = mesh.scale.y;
+
+        return {
+            x,
+            y,
+            a,
+            r,
+            sx,
+            sy,
+        };
+    }
+}
+
+core.PXSceneRenderer.registerPlugin('mesh', PXSceneMeshRenderer);
diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js
index 67796cf..071db1c 100644
--- a/src/particles/ParticleContainer.js
+++ b/src/particles/ParticleContainer.js
@@ -1,4 +1,5 @@
 import * as core from '../core';
+import * as _ from 'lodash';
 
 /**
  * The ParticleContainer class is a really fast version of the Container built solely for speed,
@@ -179,6 +180,114 @@ export default class ParticleContainer extends core.Container
     }
 
     /**
+     * Adds one or more children to the container.
+     *
+     * Multiple items can be added like so: `myContainer.addChild(thingOne, thingTwo, thingThree)`
+     *
+     * @param {...PIXI.DisplayObject} child - The DisplayObject(s) to add to the container
+     * @return {PIXI.DisplayObject} The first child that was added.
+     */
+    addChild(child)
+    {
+        const addedChild = super.addChild(child);
+
+        // Remember the initial x, y when it adds to the particle container.
+        addedChild.__initPosition = _.cloneDeep(addedChild.position);
+
+        return addedChild;
+    }
+
+    /**
+     * Renders the object using the PXScene renderer
+     *
+     * @param {PIXI.PXSceneRenderer} renderer - The renderer
+     */
+    renderPXScene(renderer)
+    {
+        // if not visible or the alpha is 0 then no need to render this
+        if (!this.visible || this.worldAlpha <= 0 || !this.renderable)
+        {
+            return;
+        }
+
+        this._renderPXScene(renderer);
+
+        // Set children's properties based on the properties
+        for (let i = 0, j = this.children.length; i < j; ++i)
+        {
+            const child = this.children[i];
+
+            // 1. Backup original properties
+            // Reset tint color, it seems tint doesn't work
+            child.__backupTint = child.tint;
+            child.tint = 0xFFFFFF;
+
+            // scale
+            if (!this._properties[0])
+            {
+                child.__backupScale = _.cloneDeep(child.scale);
+                child.scale.set(1);
+            }
+
+            // position
+            if (!this._properties[1])
+            {
+                child.__backupPosition = _.cloneDeep(child.position);
+                child.position = child.__initPosition;
+            }
+
+            // rotation
+            if (!this._properties[2])
+            {
+                child.__backupRotation = child.rotation;
+                child.rotation = 0;
+            }
+
+            // uvs (pxscene doesn't support it, ignore)
+
+            // alpha
+            if (!this._properties[4])
+            {
+                child.__backupAlpha = child.alpha;
+                child.alpha = 1;
+            }
+
+            // 2. Render
+            child.renderPXScene(renderer);
+
+            // 3. Restore
+            // Restore tint color
+            child.tint = child.__backupTint;
+
+            // scale
+            if (!this._properties[0])
+            {
+                child.scale = child.__backupScale;
+            }
+
+            // position
+            if (!this._properties[1])
+            {
+                child.position = child.__backupPosition;
+            }
+
+            // rotation
+            if (!this._properties[2])
+            {
+                child.rotation = child.__backupRotation;
+            }
+
+            // uvs (pxscene doesn't support it, ignore)
+
+            // alpha
+            if (!this._properties[4])
+            {
+                child.alpha = child.__backupAlpha;
+            }
+        }
+    }
+
+    /**
      * Set the flag that static data should be updated to true
      *
      * @private
diff --git a/src/polyfill/index.js b/src/polyfill/index.js
index d963dee..f54d570 100644
--- a/src/polyfill/index.js
+++ b/src/polyfill/index.js
@@ -1,23 +1,29 @@
 import './Object.assign';
 import './requestAnimationFrame';
 import './Math.sign';
+import {
+    isV8,
+} from '../core/utils';
 
-if (!window.ArrayBuffer)
+if (!isV8())
 {
-    window.ArrayBuffer = Array;
-}
+    if (!window.ArrayBuffer)
+    {
+        window.ArrayBuffer = Array;
+    }
 
-if (!window.Float32Array)
-{
-    window.Float32Array = Array;
-}
+    if (!window.Float32Array)
+    {
+        window.Float32Array = Array;
+    }
 
-if (!window.Uint32Array)
-{
-    window.Uint32Array = Array;
-}
+    if (!window.Uint32Array)
+    {
+        window.Uint32Array = Array;
+    }
 
-if (!window.Uint16Array)
-{
-    window.Uint16Array = Array;
+    if (!window.Uint16Array)
+    {
+        window.Uint16Array = Array;
+    }
 }