@next2d/display 1.15.0 → 1.17.0

package/dist/DisplayObjectContainer.js

@@ -1,7 +1,7 @@
 import { InteractiveObject } from "./InteractiveObject";
 import { Event as Next2DEvent } from "@next2d/events";
-import { $createInstance, $currentPlayer, $hitContext, $isTouch, $MATRIX_HIT_ARRAY_IDENTITY, $rendererWorker } from "@next2d/util";
-import { $doUpdated, $boundsMatrix, $clamp, $getArray, $getBoundsObject, $getFloat32Array6, $getFloat32Array8, $getMap, $getPreObject, $Math, $COLOR_ARRAY_IDENTITY, $MATRIX_ARRAY_IDENTITY, $multiplicationColor, $multiplicationMatrix, $Number, $poolArray, $poolBoundsObject, $poolFloat32Array6, $poolFloat32Array8, $poolMap, $poolPreObject } from "@next2d/share";
+import { $createInstance, $currentPlayer, $getRenderBufferArray, $getRenderMessageObject, $hitContext, $isTouch, $MATRIX_HIT_ARRAY_IDENTITY, $poolRenderMessageObject, $rendererWorker } from "@next2d/util";
+import { $cacheStore, $doUpdated, $boundsMatrix, $clamp, $getArray, $getBoundsObject, $getFloat32Array6, $getFloat32Array8, $getMap, $getPreObject, $Math, $COLOR_ARRAY_IDENTITY, $MATRIX_ARRAY_IDENTITY, $multiplicationColor, $multiplicationMatrix, $Number, $poolArray, $poolBoundsObject, $poolFloat32Array6, $poolFloat32Array8, $poolMap, $poolPreObject, $devicePixelRatio } from "@next2d/share";
 /**
  * DisplayObjectContainer クラスは、表示リストで表示オブジェクトコンテナとして機能するすべてのオブジェクトの基本クラスです。
  * このクラス自体は、画面上でのコンテンツの描画のための API を含みません。
@@ -384,14 +384,11 @@ export class DisplayObjectContainer extends InteractiveObject {
                 multiMatrix = $multiplicationMatrix(matrix, rawMatrix);
             }
         }
-        const graphics = "_$graphics" in this
-            ? this._$graphics
-            : null;
         const children = this._$needsChildren
             ? this._$getChildren()
             : this._$children;
         // size zero
-        if (!children.length && !graphics) {
+        if (!children.length) {
             const bounds = $getBoundsObject(multiMatrix[4], -multiMatrix[4], multiMatrix[5], -multiMatrix[5]);
             if (matrix && multiMatrix !== matrix) {
                 $poolFloat32Array6(multiMatrix);
@@ -404,16 +401,6 @@ export class DisplayObjectContainer extends InteractiveObject {
         let xMax = -no;
         let yMin = no;
         let yMax = -no;
-        if (graphics) {
-            const baseBounds = graphics._$getBounds();
-            const bounds = $boundsMatrix(baseBounds, multiMatrix);
-            $poolBoundsObject(baseBounds);
-            xMin = bounds.xMin;
-            xMax = bounds.xMax;
-            yMin = bounds.yMin;
-            yMax = bounds.yMax;
-            $poolBoundsObject(bounds);
-        }
         for (let idx = 0; idx < children.length; ++idx) {
             const bounds = children[idx]._$getBounds(multiMatrix);
             xMin = $Math.min(xMin, bounds.xMin);
@@ -429,32 +416,17 @@ export class DisplayObjectContainer extends InteractiveObject {
         return $getBoundsObject(xMin, xMax, yMin, yMax);
     }
     /**
-     * @param  {array} [matrix=null]
+     * @param  {Float32Array} multi_matrix
      * @return {object}
      * @private
      */
-    _$getLayerBounds(matrix = null) {
-        let multiMatrix = $MATRIX_ARRAY_IDENTITY;
-        if (matrix) {
-            multiMatrix = matrix;
-            const rawMatrix = this._$transform._$rawMatrix();
-            if (rawMatrix !== $MATRIX_ARRAY_IDENTITY) {
-                multiMatrix = $multiplicationMatrix(matrix, rawMatrix);
-            }
-        }
-        const graphics = "_$graphics" in this
-            ? this._$graphics
-            : null;
+    _$getLayerBounds(multi_matrix) {
         const children = this._$needsChildren
             ? this._$getChildren()
             : this._$children;
         // size zero
-        if (!children.length && !graphics) {
-            const bounds = $getBoundsObject(multiMatrix[4], -multiMatrix[4], multiMatrix[5], -multiMatrix[5]);
-            if (matrix && multiMatrix !== matrix) {
-                $poolFloat32Array6(multiMatrix);
-            }
-            return bounds;
+        if (!children.length) {
+            return $getBoundsObject(0, 0, 0, 0);
         }
         // data init
         const no = $Number.MAX_VALUE;
@@ -462,45 +434,46 @@ export class DisplayObjectContainer extends InteractiveObject {
         let xMax = -no;
         let yMin = no;
         let yMax = -no;
-        if (graphics) {
-            const baseBounds = graphics._$getBounds();
-            const bounds = $boundsMatrix(baseBounds, multiMatrix);
-            $poolBoundsObject(baseBounds);
-            xMin = +bounds.xMin;
-            xMax = +bounds.xMax;
-            yMin = +bounds.yMin;
-            yMax = +bounds.yMax;
-            $poolBoundsObject(bounds);
-        }
         for (let idx = 0; idx < children.length; ++idx) {
-            const bounds = children[idx]
-                ._$getLayerBounds(multiMatrix);
+            const instance = children[idx];
+            let multiMatrix = multi_matrix;
+            const rawMatrix = instance._$transform._$rawMatrix();
+            if (rawMatrix[0] !== 1 || rawMatrix[1] !== 0
+                || rawMatrix[2] !== 0 || rawMatrix[3] !== 1
+                || rawMatrix[4] !== 0 || rawMatrix[5] !== 0) {
+                multiMatrix = $multiplicationMatrix(multi_matrix, rawMatrix);
+            }
+            const bounds = instance._$getLayerBounds(multiMatrix);
             xMin = $Math.min(xMin, bounds.xMin);
             xMax = $Math.max(xMax, bounds.xMax);
             yMin = $Math.min(yMin, bounds.yMin);
             yMax = $Math.max(yMax, bounds.yMax);
             $poolBoundsObject(bounds);
-        }
-        if (matrix && multiMatrix !== matrix) {
-            $poolFloat32Array6(multiMatrix);
-        }
-        // end
-        if (!matrix) {
-            return $getBoundsObject(xMin, xMax, yMin, yMax);
+            if (multiMatrix !== multi_matrix) {
+                $poolFloat32Array6(multiMatrix);
+            }
         }
         const filters = this._$filters || this.filters;
         if (!filters.length) {
             return $getBoundsObject(xMin, xMax, yMin, yMax);
         }
-        let filterBounds = $getBoundsObject(xMin, xMax - xMin, yMin, yMax - yMin);
+        let filterBounds = $getBoundsObject(0, xMax - xMin, 0, yMax - yMin);
+        let xScale = +$Math.sqrt(multi_matrix[0] * multi_matrix[0]
+            + multi_matrix[1] * multi_matrix[1]);
+        let yScale = +$Math.sqrt(multi_matrix[2] * multi_matrix[2]
+            + multi_matrix[3] * multi_matrix[3]);
+        xScale /= $devicePixelRatio;
+        yScale /= $devicePixelRatio;
+        xScale *= 2;
+        yScale *= 2;
         for (let idx = 0; idx < filters.length; ++idx) {
             filterBounds = filters[idx]
-                ._$generateFilterRect(filterBounds, 0, 0);
+                ._$generateFilterRect(filterBounds, xScale, yScale);
         }
-        xMin = filterBounds.xMin;
-        xMax = filterBounds.xMin + filterBounds.xMax;
-        yMin = filterBounds.yMin;
-        yMax = filterBounds.yMin + filterBounds.yMax;
+        xMax += filterBounds.xMax - (xMax - xMin);
+        yMax += filterBounds.yMax - (yMax - yMin);
+        xMin += filterBounds.xMin;
+        yMin += filterBounds.yMin;
         $poolBoundsObject(filterBounds);
         return $getBoundsObject(xMin, xMax, yMin, yMax);
     }
@@ -537,8 +510,6 @@ export class DisplayObjectContainer extends InteractiveObject {
                 }
                 return currentChildren;
             }
-            const player = $currentPlayer();
-            const cacheStore = player.cacheStore;
             const useWorker = !!$rendererWorker && !!this._$stage;
             const skipIds = $getMap();
             const poolInstances = $getMap();
@@ -590,9 +561,12 @@ export class DisplayObjectContainer extends InteractiveObject {
                 if (useWorker) {
                     instance._$removeWorkerInstance();
                 }
-                cacheStore.setRemoveTimer(instanceId);
+                $cacheStore.setRemoveTimer(instanceId);
                 if (instance._$loaderInfo && instance._$characterId) {
-                    cacheStore.setRemoveTimer(`${instance._$loaderInfo._$id}@${instance._$characterId}`);
+                    $cacheStore.setRemoveTimer(`${instance._$loaderInfo._$id}@${instance._$characterId}`);
+                }
+                if (instance._$graphics) {
+                    $cacheStore.setRemoveTimer(instance._$graphics._$uniqueKey);
                 }
                 // remove event
                 if (instance.willTrigger(Next2DEvent.REMOVED)) {
@@ -695,7 +669,6 @@ export class DisplayObjectContainer extends InteractiveObject {
             }
             if ($rendererWorker) {
                 child._$createWorkerInstance();
-                child._$postProperty();
                 this._$postChildrenIds();
             }
         }
@@ -743,7 +716,6 @@ export class DisplayObjectContainer extends InteractiveObject {
             if (!instance._$addedStage) {
                 if ($rendererWorker) {
                     instance._$createWorkerInstance();
-                    instance._$postProperty();
                 }
                 if (instance.willTrigger(Next2DEvent.ADDED_TO_STAGE)) {
                     instance.dispatchEvent(new Next2DEvent(Next2DEvent.ADDED_TO_STAGE));
@@ -818,11 +790,12 @@ export class DisplayObjectContainer extends InteractiveObject {
                     child._$executeRemovedFromStage();
                 }
             }
-            const player = $currentPlayer();
-            const cacheStore = player.cacheStore;
-            cacheStore.setRemoveTimer(child._$instanceId);
+            $cacheStore.setRemoveTimer(child._$instanceId);
             if (child._$loaderInfo && child._$characterId) {
-                cacheStore.setRemoveTimer(`${child._$loaderInfo._$id}@${child._$characterId}`);
+                $cacheStore.setRemoveTimer(`${child._$loaderInfo._$id}@${child._$characterId}`);
+            }
+            if (child._$graphics) {
+                $cacheStore.setRemoveTimer(child._$graphics._$uniqueKey);
             }
             // reset params
             if (child instanceof DisplayObjectContainer) {
@@ -881,13 +854,14 @@ export class DisplayObjectContainer extends InteractiveObject {
         const children = this._$needsChildren
             ? this._$getChildren()
             : this._$children;
-        const player = $currentPlayer();
-        const cacheStore = player.cacheStore;
         for (let idx = 0; idx < children.length; ++idx) {
             const instance = children[idx];
-            cacheStore.setRemoveTimer(instance._$instanceId);
+            $cacheStore.setRemoveTimer(instance._$instanceId);
             if (instance._$loaderInfo && instance._$characterId) {
-                cacheStore.setRemoveTimer(`${instance._$loaderInfo._$id}@${instance._$characterId}`);
+                $cacheStore.setRemoveTimer(`${instance._$loaderInfo._$id}@${instance._$characterId}`);
+            }
+            if (instance._$graphics) {
+                $cacheStore.setRemoveTimer(instance._$graphics._$uniqueKey);
             }
             if (instance instanceof DisplayObjectContainer) {
                 instance._$removeParentAndStage();
@@ -967,12 +941,6 @@ export class DisplayObjectContainer extends InteractiveObject {
             || rawMatrix[4] !== 0 || rawMatrix[5] !== 0) {
             multiMatrix = $multiplicationMatrix(matrix, rawMatrix);
         }
-        const graphics = "_$graphics" in this
-            ? this._$graphics
-            : null;
-        if (graphics && graphics._$canDraw) {
-            graphics._$clip(context, multiMatrix);
-        }
         const children = this._$getChildren();
         for (let idx = 0; idx < children.length; ++idx) {
             const instance = children[idx];
@@ -1005,6 +973,9 @@ export class DisplayObjectContainer extends InteractiveObject {
         // size zero
         if (!multiMatrix[0] && !multiMatrix[1]
             || !multiMatrix[2] && !multiMatrix[3]) {
+            if (multiMatrix !== matrix) {
+                $poolFloat32Array6(multiMatrix);
+            }
             return null;
         }
         // return object
@@ -1024,101 +995,96 @@ export class DisplayObjectContainer extends InteractiveObject {
             const yMax = +bounds.yMax;
             const yMin = +bounds.yMin;
             $poolBoundsObject(bounds);
-            const width = $Math.abs(xMax - xMin);
-            const height = $Math.abs(yMax - yMin);
+            const width = $Math.ceil($Math.abs(xMax - xMin));
+            const height = $Math.ceil($Math.abs(yMax - yMin));
             if (0 >= width || 0 >= height) {
                 $poolPreObject(object);
+                if (multiMatrix !== matrix) {
+                    $poolFloat32Array6(multiMatrix);
+                }
                 return null;
             }
-            if (0 > xMin + width || 0 > yMin + height) {
-                $poolPreObject(object);
-                return null;
+            let xScale = +$Math.sqrt(multiMatrix[0] * multiMatrix[0]
+                + multiMatrix[1] * multiMatrix[1]);
+            if (!$Number.isInteger(xScale)) {
+                const value = xScale.toString();
+                const index = value.indexOf("e");
+                if (index !== -1) {
+                    xScale = +value.slice(0, index);
+                }
+                xScale = +xScale.toFixed(4);
+            }
+            let yScale = +$Math.sqrt(multiMatrix[2] * multiMatrix[2]
+                + multiMatrix[3] * multiMatrix[3]);
+            if (!$Number.isInteger(yScale)) {
+                const value = yScale.toString();
+                const index = value.indexOf("e");
+                if (index !== -1) {
+                    yScale = +value.slice(0, index);
+                }
+                yScale = +yScale.toFixed(4);
+            }
+            object.canApply = this._$canApply(filters);
+            let filterBounds = $getBoundsObject(0, width, 0, height);
+            if (object.canApply && filters) {
+                for (let idx = 0; idx < filters.length; ++idx) {
+                    filterBounds = filters[idx]
+                        ._$generateFilterRect(filterBounds, xScale, yScale);
+                }
             }
             const currentAttachment = context
                 .frameBuffer
                 .currentAttachment;
             if (!currentAttachment
                 || !currentAttachment.texture
-                || xMin > currentAttachment.width
-                || yMin > currentAttachment.height) {
+                || xMin - filterBounds.xMin > currentAttachment.width
+                || yMin - filterBounds.yMin > currentAttachment.height) {
+                $poolBoundsObject(filterBounds);
                 $poolPreObject(object);
+                if (multiMatrix !== matrix) {
+                    $poolFloat32Array6(multiMatrix);
+                }
                 return null;
             }
-            // set origin position
-            object.basePosition.x = rawMatrix[4];
-            object.basePosition.y = rawMatrix[5];
-            // check after size
-            const baseLayerBounds = this._$getLayerBounds(null);
-            const layerBounds = $boundsMatrix(baseLayerBounds, multiMatrix);
-            // filter size
-            let layerWidth = $Math.abs(layerBounds.xMax - layerBounds.xMin);
-            let layerHeight = $Math.abs(layerBounds.yMax - layerBounds.yMin);
-            $poolBoundsObject(layerBounds);
-            // move size
-            let tx = multiMatrix[4] - $Math.floor(xMin);
-            let ty = multiMatrix[5] - $Math.floor(yMin);
-            let dx = $Math.floor(xMin);
-            let dy = $Math.floor(yMin);
-            let originX = xMin;
-            let originY = yMin;
-            if (layerWidth !== width || layerHeight !== height) {
-                const layerMatrix = $getFloat32Array6(multiMatrix[0], multiMatrix[1], multiMatrix[2], multiMatrix[3], 0, 0);
-                const moveBounds = $boundsMatrix(baseLayerBounds, layerMatrix);
-                // pool
-                $poolFloat32Array6(layerMatrix);
-                tx += -$Math.floor(moveBounds.xMin) - tx;
-                ty += -$Math.floor(moveBounds.yMin) - ty;
-                dx -= -$Math.floor(moveBounds.xMin) - (multiMatrix[4] - dx);
-                dy -= -$Math.floor(moveBounds.yMin) - (multiMatrix[5] - dy);
-                originX -= -moveBounds.xMin - (multiMatrix[4] - originX);
-                originY -= -moveBounds.yMin - (multiMatrix[5] - originY);
-                $poolBoundsObject(moveBounds);
-            }
-            $poolBoundsObject(baseLayerBounds);
-            // set position
-            object.position.dx = dx > 0 ? dx : 0;
-            object.position.dy = dy > 0 ? dy : 0;
-            // resize
-            if (layerWidth + originX > currentAttachment.texture.width) {
-                layerWidth -= layerWidth - currentAttachment.texture.width + originX;
-            }
-            if (layerHeight + originY > currentAttachment.texture.height) {
-                layerHeight -= layerHeight - currentAttachment.texture.height + originY;
-            }
-            if (0 > dx) {
-                tx += dx;
-                layerWidth += originX;
-            }
-            if (0 > dy) {
-                ty += dy;
-                layerHeight += originY;
-            }
-            if (0 >= layerWidth || 0 >= layerHeight // size (-)
-                || !layerWidth || !layerHeight // NaN or Infinity
-            ) {
+            if (0 > xMin + filterBounds.xMax || 0 > yMin + filterBounds.yMax) {
+                $poolBoundsObject(filterBounds);
                 $poolPreObject(object);
+                if (multiMatrix !== matrix) {
+                    $poolFloat32Array6(multiMatrix);
+                }
                 return null;
             }
+            // move size
+            let tx = multiMatrix[4] - xMin;
+            let ty = multiMatrix[5] - yMin;
             // start layer
-            context._$startLayer($getBoundsObject(originX, 0, originY, 0));
+            context._$startLayer($getBoundsObject(xMin, xMax, yMin, yMax));
             // check cache
-            object.canApply = this._$canApply(filters);
-            const updated = this._$isFilterUpdated(layerWidth, layerHeight, multiMatrix, filters, object.canApply, object.basePosition.x, object.basePosition.y);
-            // current mask cache
-            context._$saveCurrentMask();
+            const updated = this._$isFilterUpdated(multiMatrix, filters, object.canApply);
+            const layerBounds = this._$getLayerBounds(multiMatrix);
+            const layerWidth = $Math.ceil($Math.abs(layerBounds.xMax - layerBounds.xMin));
+            const layerHeight = $Math.ceil($Math.abs(layerBounds.yMax - layerBounds.yMin));
+            $poolBoundsObject(layerBounds);
+            const sw = layerWidth - filterBounds.xMax + filterBounds.xMin;
+            const sh = layerHeight - filterBounds.yMax + filterBounds.yMin;
+            tx += sw;
+            ty += sh;
+            object.sw = sw;
+            object.sh = sh;
             if (updated) {
-                context._$saveAttachment($Math.ceil(layerWidth), $Math.ceil(layerHeight), false);
+                context._$saveAttachment($Math.ceil(width + sw), $Math.ceil(height + sh), true);
             }
             // setup
-            object.isFilter = true;
+            object.isLayer = true;
             object.isUpdated = updated;
-            object.color = $getFloat32Array8();
-            object.baseMatrix = multiMatrix;
             object.filters = filters;
             object.blendMode = blendMode;
-            object.layerWidth = layerWidth;
-            object.layerHeight = layerHeight;
+            object.color = $getFloat32Array8();
             object.matrix = $getFloat32Array6(multiMatrix[0], multiMatrix[1], multiMatrix[2], multiMatrix[3], tx, ty);
+            if (multiMatrix !== matrix) {
+                $poolFloat32Array6(multiMatrix);
+            }
+            $poolBoundsObject(filterBounds);
         }
         return object;
     }
@@ -1132,105 +1098,66 @@ export class DisplayObjectContainer extends InteractiveObject {
      * @private
      */
     _$postDraw(context, matrix, color_transform, object) {
+        context.drawInstacedArray();
         // cache
         const cacheKeys = $getArray(this._$instanceId, "f");
-        const player = $currentPlayer();
-        const cacheStore = player.cacheStore;
         const manager = context.frameBuffer;
-        // cache or new texture
-        let texture = null;
-        if (object.isUpdated) {
+        const multiMatrix = object.matrix;
+        let offsetX = 0;
+        let offsetY = 0;
+        let texture = $cacheStore.get(cacheKeys);
+        if (!texture || object.isUpdated) {
+            // remove
+            if (texture) {
+                $cacheStore.set(cacheKeys, null);
+            }
             texture = manager
                 .getTextureFromCurrentAttachment();
-            const cacheTexture = cacheStore.get(cacheKeys);
-            if (cacheTexture) {
-                cacheStore.set(cacheKeys, null);
-                manager.releaseTexture(cacheTexture);
-            }
-        }
-        else {
-            texture = cacheStore.get(cacheKeys);
-            if (!texture) {
-                throw new Error("the texture is null.");
-            }
-        }
-        // blend only
-        if (!object.canApply) {
-            texture._$offsetX = 0;
-            texture._$offsetY = 0;
-        }
-        // set cache offset
-        let offsetX = texture._$offsetX;
-        let offsetY = texture._$offsetY;
-        // execute filter
-        if (object.isUpdated && object.canApply) {
-            // cache clear
-            const cache = cacheStore.get(cacheKeys);
-            if (cache) {
-                // reset cache params
-                cacheStore.set(cacheKeys, null);
-                cache.layerWidth = 0;
-                cache.layerHeight = 0;
-                cache._$offsetX = 0;
-                cache._$offsetY = 0;
-                cache.matrix = null;
-                cache.colorTransform = null;
-                manager.releaseTexture(cache);
-            }
-            // apply filter
             const filters = object.filters;
+            let filterState = false;
             if (filters && filters.length) {
-                // init
-                context._$offsetX = 0;
-                context._$offsetY = 0;
                 for (let idx = 0; idx < filters.length; ++idx) {
                     texture = filters[idx]
                         ._$applyFilter(context, matrix);
                 }
+                // update
+                filterState = true;
                 offsetX = context._$offsetX;
                 offsetY = context._$offsetY;
                 // reset
                 context._$offsetX = 0;
                 context._$offsetY = 0;
-                // set offset
-                texture._$offsetX = offsetX;
-                texture._$offsetY = offsetY;
-            }
-        }
-        // update cache params
-        if (object.isUpdated) {
-            texture.filterState = object.canApply;
-            // cache texture
-            const matrix = object.baseMatrix;
-            if (matrix) {
-                texture.matrix = `${matrix[0]}_${matrix[1]}_${matrix[2]}_${matrix[3]}`;
-            }
-            texture.layerWidth = object.layerWidth;
-            texture.layerHeight = object.layerHeight;
-        }
-        // cache texture
-        cacheStore.set(cacheKeys, texture);
-        $poolArray(cacheKeys);
-        // set current buffer
-        if (object.isUpdated) {
+            }
+            texture.filterState = filterState;
+            texture.matrix = `${multiMatrix[0]}_`
+                + `${multiMatrix[1]}_`
+                + `${multiMatrix[2]}_`
+                + `${multiMatrix[3]}`;
+            texture.offsetX = offsetX;
+            texture.offsetY = offsetY;
+            $cacheStore.set(cacheKeys, texture);
             context._$restoreAttachment();
         }
+        if (texture.offsetX) {
+            offsetX = texture.offsetX;
+        }
+        if (texture.offsetY) {
+            offsetY = texture.offsetY;
+        }
         // set
         context.reset();
         context.globalAlpha = $clamp(color_transform[3] + color_transform[7] / 255, 0, 1);
         context.globalCompositeOperation = object.blendMode;
-        context.setTransform(1, 0, 0, 1, 0, 0);
-        context.drawImage(texture, -offsetX + object.position.dx, -offsetY + object.position.dy, texture.width, texture.height, color_transform);
+        const bounds = context.getCurrentPosition();
+        context.setTransform(1, 0, 0, 1, bounds.xMin - offsetX - object.sw, bounds.yMin - offsetY - object.sh);
+        context.drawImage(texture, 0, 0, texture.width, texture.height, color_transform);
         // end blend
         context._$endLayer();
-        // reset
-        context._$restoreCurrentMask();
         // object pool
-        if (object.baseMatrix !== matrix) {
-            $poolFloat32Array6(object.baseMatrix);
-        }
         $poolFloat32Array6(object.matrix);
         $poolPreObject(object);
+        // reset
+        context.cachePosition = null;
     }
     /**
      * @param  {CanvasToWebGLContext} context
@@ -1263,10 +1190,7 @@ export class DisplayObjectContainer extends InteractiveObject {
         // not draw
         const children = this._$getChildren();
         const length = children.length;
-        const graphics = "_$graphics" in this
-            ? this._$graphics
-            : null;
-        if (!length && (!graphics || !graphics._$canDraw)) {
+        if (!length) {
             return;
         }
         // pre data
@@ -1275,25 +1199,17 @@ export class DisplayObjectContainer extends InteractiveObject {
             return;
         }
         // use cache
-        if (preObject.isFilter && !preObject.isUpdated) {
+        if (preObject.isLayer && !preObject.isUpdated) {
             this._$postDraw(context, matrix, multiColor, preObject);
             return;
         }
-        let preMatrix = preObject.matrix;
-        const preColorTransform = preObject.isFilter && preObject.color
+        const preMatrix = preObject.matrix;
+        const preColorTransform = preObject.isLayer && preObject.color
             ? preObject.color
             : multiColor;
-        // if graphics draw
-        if (graphics && graphics._$canDraw) {
-            graphics._$draw(context, preMatrix, preColorTransform);
-        }
         // init clip params
         let shouldClip = true;
         let clipDepth = 0;
-        const clipMatrix = $getArray();
-        const instanceMatrix = $getArray();
-        const clipStack = $getArray();
-        const shouldClips = $getArray();
         const player = $currentPlayer();
         // draw children
         const isLayer = context.isLayer;
@@ -1319,17 +1235,10 @@ export class DisplayObjectContainer extends InteractiveObject {
                 context.restore();
                 if (shouldClip) {
                     context._$leaveClip();
-                    if (clipMatrix.length) {
-                        const matrix = clipMatrix.pop();
-                        if (matrix) {
-                            $poolFloat32Array6(preMatrix);
-                            preMatrix = matrix;
-                        }
-                    }
                 }
                 // clear
-                clipDepth = clipStack.length ? clipStack.pop() || 0 : 0;
-                shouldClip = !!shouldClips.pop();
+                clipDepth = 0;
+                shouldClip = true;
             }
             // mask size 0
             if (!shouldClip) {
@@ -1337,23 +1246,11 @@ export class DisplayObjectContainer extends InteractiveObject {
             }
             // mask start
             if (instance._$clipDepth > 0) {
-                context.save();
-                if (clipDepth) {
-                    clipStack.push(clipDepth);
-                }
-                shouldClips.push(shouldClip);
                 clipDepth = instance._$clipDepth;
                 shouldClip = instance._$shouldClip(preMatrix);
                 if (shouldClip) {
-                    const adjMatrix = instance._$startClip(context, preMatrix);
-                    if (adjMatrix === false) { // fixed
-                        shouldClip = false;
-                        continue;
-                    }
-                    if (adjMatrix instanceof Float32Array) {
-                        clipMatrix.push(preMatrix);
-                        preMatrix = adjMatrix;
-                    }
+                    context.save();
+                    shouldClip = instance._$startClip(context, preMatrix);
                 }
                 continue;
             }
@@ -1381,33 +1278,16 @@ export class DisplayObjectContainer extends InteractiveObject {
                         maskMatrix[4] -= currentPosition.xMin;
                         maskMatrix[5] -= currentPosition.yMin;
                     }
-                    if (context.cacheBounds) {
-                        maskMatrix[4] -= context.cacheBounds.xMin;
-                        maskMatrix[5] -= context.cacheBounds.yMin;
-                    }
                 }
                 if (!maskInstance._$shouldClip(maskMatrix)) {
                     continue;
                 }
-                const adjMatrix = maskInstance._$startClip(context, maskMatrix);
+                const result = maskInstance._$startClip(context, maskMatrix);
                 context.save();
-                if (adjMatrix === false) { // fixed
+                if (!result) { // fixed
                     context.restore();
                     continue;
                 }
-                if (adjMatrix instanceof Float32Array) {
-                    instanceMatrix.push(preMatrix);
-                    if (this !== maskInstance._$parent) {
-                        const rawMatrix = transform._$rawMatrix();
-                        adjMatrix[0] = $Math.abs(preMatrix[0]) * $Math.sign(rawMatrix[0]);
-                        adjMatrix[1] = $Math.abs(preMatrix[1]) * $Math.sign(rawMatrix[1]);
-                        adjMatrix[2] = $Math.abs(preMatrix[2]) * $Math.sign(rawMatrix[2]);
-                        adjMatrix[3] = $Math.abs(preMatrix[3]) * $Math.sign(rawMatrix[3]);
-                        adjMatrix[4] = preMatrix[4] - context.cacheBounds.xMin;
-                        adjMatrix[5] = preMatrix[5] - context.cacheBounds.yMin;
-                    }
-                    preMatrix = adjMatrix;
-                }
             }
             instance._$draw(context, preMatrix, preColorTransform);
             instance._$updated = false;
@@ -1415,29 +1295,17 @@ export class DisplayObjectContainer extends InteractiveObject {
             if (maskInstance) {
                 context.restore();
                 context._$leaveClip();
-                if (instanceMatrix.length) {
-                    const matrix = instanceMatrix.pop();
-                    if (matrix) {
-                        $poolFloat32Array6(preMatrix);
-                        preMatrix = matrix;
-                    }
-                }
             }
         }
         // end mask
         if (clipDepth) {
             context.restore();
-            if (shouldClips.pop()) {
+            if (shouldClip) {
                 context._$leaveClip();
             }
         }
-        // object pool
-        $poolArray(clipMatrix);
-        $poolArray(instanceMatrix);
-        $poolArray(clipStack);
-        $poolArray(shouldClips);
         // filter and blend
-        if (preObject.isFilter) {
+        if (preObject.isLayer) {
             return this._$postDraw(context, matrix, multiColor, preObject);
         }
         if (preObject.matrix !== matrix) {
@@ -1577,15 +1445,6 @@ export class DisplayObjectContainer extends InteractiveObject {
         $poolArray(clips);
         $poolArray(targets);
         $poolMap(clipIndexes);
-        // graphics
-        if (!hit) {
-            const graphics = "_$graphics" in this
-                ? this._$graphics
-                : null;
-            if (graphics) {
-                hit = graphics._$hit(context, multiMatrix, options);
-            }
-        }
         if (multiMatrix !== matrix) {
             $poolFloat32Array6(multiMatrix);
         }
@@ -1617,17 +1476,10 @@ export class DisplayObjectContainer extends InteractiveObject {
                 return true;
             }
         }
-        let hit = false;
-        const graphics = "_$graphics" in this
-            ? this._$graphics
-            : null;
-        if (graphics) {
-            hit = graphics._$hit(context, multiMatrix, options);
-        }
         if (multiMatrix !== matrix) {
             $poolFloat32Array6(multiMatrix);
         }
-        return hit;
+        return false;
     }
     /**
      * @param  {number} index
@@ -1686,30 +1538,24 @@ export class DisplayObjectContainer extends InteractiveObject {
             return;
         }
         this._$created = true;
-        const options = $getArray();
-        const message = {
-            "command": "createDisplayObjectContainer",
-            "instanceId": this._$instanceId,
-            "parentId": this._$parent ? this._$parent._$instanceId : -1
-        };
-        const graphics = "_$graphics" in this
-            ? this._$graphics
-            : null;
-        if (graphics) {
-            const recodes = graphics._$getRecodes();
-            options.push(recodes.buffer);
-            message.recodes = recodes;
-            message.maxAlpha = graphics._$maxAlpha;
-            message.canDraw = graphics._$canDraw;
-            message.xMin = graphics._$xMin;
-            message.yMin = graphics._$yMin;
-            message.xMax = graphics._$xMax;
-            message.yMax = graphics._$yMax;
-        }
+        this._$posted = true;
+        this._$updated = false;
+        let index = 0;
+        const buffer = $getRenderBufferArray();
+        buffer[index++] = this._$instanceId;
+        buffer[index++] = this._$parent ? this._$parent._$instanceId : -1;
+        this._$registerProperty(buffer, index);
+        const message = $getRenderMessageObject();
+        message.command = "createDisplayObjectContainer";
+        message.buffer = buffer;
+        const options = $getArray(buffer.buffer);
         $rendererWorker.postMessage(message, options);
+        $poolRenderMessageObject(message);
+        $poolArray(options);
+        this._$postChildrenIds();
     }
     /**
-     * @return {object}
+     * @return {void}
      * @method
      * @private
      */
@@ -1720,21 +1566,6 @@ export class DisplayObjectContainer extends InteractiveObject {
         this._$postChildrenIds();
         const options = $getArray();
         const message = this._$createMessage();
-        const graphics = "_$graphics" in this
-            ? this._$graphics
-            : null;
-        if (graphics && !graphics._$buffer) {
-            message.maxAlpha = graphics._$maxAlpha;
-            message.canDraw = graphics._$canDraw;
-            const recodes = graphics._$getRecodes();
-            message.recodes = recodes;
-            options.push(recodes.buffer);
-            const bounds = this._$getBounds();
-            message.xMin = bounds.xMin;
-            message.yMin = bounds.yMin;
-            message.xMax = bounds.xMax;
-            message.yMax = bounds.yMax;
-        }
         $rendererWorker
             .postMessage(message, options);
         $poolArray(options);
@@ -1748,28 +1579,30 @@ export class DisplayObjectContainer extends InteractiveObject {
      * @private
      */
     _$postChildrenIds(childrenIds = null) {
-        if (!$rendererWorker) {
+        if (!$rendererWorker || !this._$created) {
             return;
         }
+        let poolIds = false;
         if (!childrenIds) {
             const children = this._$getChildren();
             childrenIds = $getArray();
             for (let idx = 0; idx < children.length; ++idx) {
                 childrenIds.push(children[idx]._$instanceId);
             }
-            $rendererWorker.postMessage({
-                "command": "setChildren",
-                "instanceId": this._$instanceId,
-                "children": childrenIds
-            });
-            $poolArray(childrenIds);
+            poolIds = true;
         }
-        else {
-            $rendererWorker.postMessage({
-                "command": "setChildren",
-                "instanceId": this._$instanceId,
-                "children": childrenIds
-            });
+        const buffer = new Int32Array(childrenIds.length + 1);
+        buffer[0] = this._$instanceId;
+        buffer.set(childrenIds, 1);
+        const message = $getRenderMessageObject();
+        message.command = "setChildren";
+        message.buffer = buffer;
+        const options = $getArray(buffer.buffer);
+        $rendererWorker.postMessage(message, options);
+        $poolRenderMessageObject(message);
+        $poolArray(options);
+        if (poolIds) {
+            $poolArray(childrenIds);
         }
     }
 }