@next2d/webgl 1.15.0 → 1.16.0

package/dist/CanvasToWebGLContextBlend.d.ts

@@ -1,5 +1,6 @@
 import type { CanvasToWebGLContext } from "./CanvasToWebGLContext";
-import { BlendModeImpl } from "@next2d/interface";
+import type { BlendModeImpl } from "./interface/BlendModeImpl";
+import type { CachePositionImpl } from "./interface/CachePositionImpl";
 /**
  * @class
  */
@@ -8,6 +9,11 @@ export declare class CanvasToWebGLContextBlend {
     private readonly _$gl;
     private _$enabled;
     private _$funcCode;
+    private _$currentOperation;
+    private _$currentIndex;
+    private _$currentSmoothing;
+    private _$variants;
+    private _$instanceShader;
     /**
      * @param {CanvasToWebGLContext} context
      * @param {WebGL2RenderingContext} gl
@@ -93,5 +99,77 @@ export declare class CanvasToWebGLContextBlend {
      * @method
      * @public
      */
+    clearInstacedArray(): void;
+    /**
+     * @return {void}
+     * @method
+     * @public
+     */
+    drawInstacedArray(): void;
+    /**
+     * @param  {object} position
+     * @param  {number} ct0
+     * @param  {number} ct1
+     * @param  {number} ct2
+     * @param  {number} ct3
+     * @param  {number} ct4
+     * @param  {number} ct5
+     * @param  {number} ct6
+     * @param  {number} ct7
+     * @param  {string} operation
+     * @param  {number} render_width
+     * @param  {number} render_height
+     * @param  {Float32Array} matrix
+     * @param  {boolean} smoothing
+     * @return {void}
+     * @method
+     * @public
+     */
+    drawInstance(position: CachePositionImpl, ct0: number, ct1: number, ct2: number, ct3: number, ct4: number, ct5: number, ct6: number, ct7: number, operation: BlendModeImpl, render_width: number, render_height: number, matrix: Float32Array, smoothing: boolean): void;
+    /**
+     * @param {WebGLTexture} atlas_texture
+     * @param {number} x_min
+     * @param {number} y_min
+     * @param {number} x_max
+     * @param {number} y_max
+     * @param {number} ct0
+     * @param {number} ct1
+     * @param {number} ct2
+     * @param {number} ct3
+     * @param {number} ct4
+     * @param {number} ct5
+     * @param {number} ct6
+     * @param {number} ct7
+     * @param {object} cache_position
+     * @param {string} operation
+     * @param {number} render_width
+     * @param {number} render_height
+     * @param {Float32Array} matrix
+     * @param {boolean} smoothing
+     */
+    drawInstanceBlend(atlas_texture: WebGLTexture, x_min: number, y_min: number, x_max: number, y_max: number, ct0: number, ct1: number, ct2: number, ct3: number, ct4: number, ct5: number, ct6: number, ct7: number, cache_position: CachePositionImpl, operation: BlendModeImpl, render_width: number, render_height: number, matrix: Float32Array, smoothing: boolean): void;
+    /**
+     * @param  {WebGLTexture} image
+     * @param  {number} x
+     * @param  {number} y
+     * @param  {number} w
+     * @param  {number} h
+     * @param  {number} ct0
+     * @param  {number} ct1
+     * @param  {number} ct2
+     * @param  {number} ct3
+     * @param  {number} ct4
+     * @param  {number} ct5
+     * @param  {number} ct6
+     * @param  {number} ct7
+     * @param  {string} operation
+     * @param  {number} renderWidth
+     * @param  {number} renderHeight
+     * @param  {Float32Array} matrix
+     * @param  {boolean} imageSmoothingEnabled
+     * @return {void}
+     * @method
+     * @public
+     */
     drawImage(image: WebGLTexture, x: number, y: number, w: number, h: number, ct0: number, ct1: number, ct2: number, ct3: number, ct4: number, ct5: number, ct6: number, ct7: number, operation: BlendModeImpl, renderWidth: number, renderHeight: number, matrix: Float32Array, imageSmoothingEnabled: boolean): void;
 }

package/dist/CanvasToWebGLContextBlend.js

@@ -32,6 +32,33 @@ export class CanvasToWebGLContextBlend {
          * @private
          */
         this._$funcCode = 600;
+        /**
+         * @type {string}
+         * @private
+         */
+        this._$currentOperation = "normal";
+        /**
+         * @type {number}
+         * @default -1
+         * @private
+         */
+        this._$currentIndex = -1;
+        /**
+         * @type {boolean}
+         * @default null
+         * @private
+         */
+        this._$currentSmoothing = null;
+        /**
+         * @type {BlendShaderVariantCollection}
+         * @private
+         */
+        this._$variants = context.shaderList.blendShaderVariants;
+        /**
+         * @type {CanvasToWebGLShader}
+         * @private
+         */
+        this._$instanceShader = this._$variants.getInstanceShader();
         // start
         this.enable();
     }
@@ -190,12 +217,168 @@ export class CanvasToWebGLContextBlend {
      * @method
      * @public
      */
+    clearInstacedArray() {
+        const instance = this._$instanceShader.instance;
+        if (!instance.count) {
+            return;
+        }
+        instance.clear();
+    }
+    /**
+     * @return {void}
+     * @method
+     * @public
+     */
+    drawInstacedArray() {
+        const instance = this._$instanceShader.instance;
+        if (!instance.count) {
+            return;
+        }
+        const manager = this._$context.frameBuffer;
+        const texture = manager
+            .textureManager
+            .getAtlasTexture(this._$currentIndex);
+        manager
+            .textureManager
+            .bind0(texture, this._$currentSmoothing);
+        this.toOperation(this._$currentOperation);
+        this
+            ._$instanceShader
+            .drawArraysInstanced(instance);
+        instance.clear();
+    }
+    /**
+     * @param  {object} position
+     * @param  {number} ct0
+     * @param  {number} ct1
+     * @param  {number} ct2
+     * @param  {number} ct3
+     * @param  {number} ct4
+     * @param  {number} ct5
+     * @param  {number} ct6
+     * @param  {number} ct7
+     * @param  {string} operation
+     * @param  {number} render_width
+     * @param  {number} render_height
+     * @param  {Float32Array} matrix
+     * @param  {boolean} smoothing
+     * @return {void}
+     * @method
+     * @public
+     */
+    drawInstance(position, ct0, ct1, ct2, ct3, ct4, ct5, ct6, ct7, operation, render_width, render_height, matrix, smoothing) {
+        if (!this._$currentOperation) {
+            this._$currentOperation = operation;
+        }
+        if (this._$currentIndex === -1) {
+            this._$currentIndex = position.index;
+        }
+        if (this._$currentSmoothing === null) {
+            this._$currentSmoothing = smoothing;
+        }
+        if (this._$currentOperation !== operation
+            || this._$currentIndex !== position.index
+            || this._$currentSmoothing !== smoothing) {
+            // execute
+            this.drawInstacedArray();
+            // update
+            this._$currentOperation = operation;
+            this._$currentIndex = position.index;
+            this._$currentSmoothing = smoothing;
+        }
+        this._$variants.pushNormalBlend(this._$instanceShader.instance, position.x, position.y, position.w, position.h, matrix, render_width, render_height, ct0, ct1, ct2, ct3, ct4, ct5, ct6, ct7);
+    }
+    /**
+     * @param {WebGLTexture} atlas_texture
+     * @param {number} x_min
+     * @param {number} y_min
+     * @param {number} x_max
+     * @param {number} y_max
+     * @param {number} ct0
+     * @param {number} ct1
+     * @param {number} ct2
+     * @param {number} ct3
+     * @param {number} ct4
+     * @param {number} ct5
+     * @param {number} ct6
+     * @param {number} ct7
+     * @param {object} cache_position
+     * @param {string} operation
+     * @param {number} render_width
+     * @param {number} render_height
+     * @param {Float32Array} matrix
+     * @param {boolean} smoothing
+     */
+    drawInstanceBlend(atlas_texture, x_min, y_min, x_max, y_max, ct0, ct1, ct2, ct3, ct4, ct5, ct6, ct7, cache_position, operation, render_width, render_height, matrix, smoothing) {
+        this.drawInstacedArray();
+        const manager = this._$context.frameBuffer;
+        const currentAttachment = manager.currentAttachment;
+        const withCT = ct0 !== 1 || ct1 !== 1 || ct2 !== 1 || ct3 !== 1 ||
+            ct4 !== 0 || ct5 !== 0 || ct6 !== 0 || ct7 !== 0;
+        const texture = manager
+            .getTextureFromCurrentAttachment();
+        const backTextureAttachment = this
+            ._$context
+            .frameBuffer
+            .createTextureAttachment(cache_position.w, cache_position.h);
+        this
+            ._$context
+            ._$bind(backTextureAttachment);
+        manager
+            .textureManager
+            .bind0(texture);
+        const clipShader = this._$variants.getClipShader();
+        const clipUniform = clipShader.uniform;
+        this._$variants.setClipUniform(clipUniform, 0, 0, cache_position.w, cache_position.h, $inverseMatrix(matrix), render_width, render_height);
+        this.reset();
+        clipShader._$drawImage();
+        const backTexture = manager
+            .getTextureFromCurrentAttachment();
+        this._$context._$bind(currentAttachment);
+        manager
+            .textureManager
+            .bind01(backTexture, atlas_texture, smoothing);
+        const shader = this
+            ._$variants
+            .getInstanceBlendShader(operation, withCT);
+        this._$variants.setInstanceBlendUniform(shader.uniform, cache_position.x / atlas_texture.width, cache_position.y / atlas_texture.height, cache_position.w / atlas_texture.width, cache_position.h / atlas_texture.height, cache_position.w, cache_position.h, matrix, render_width, render_height, withCT, ct0, ct1, ct2, ct3, ct4, ct5, ct6, ct7);
+        const width = $Math.abs(x_max - x_min);
+        const height = $Math.abs(y_max - y_min);
+        this._$gl.enable(this._$gl.SCISSOR_TEST);
+        this._$gl.scissor(x_min, render_height - (y_min + height), width, height);
+        this.toOneZero();
+        shader._$drawImage();
+        this._$gl.disable(this._$gl.SCISSOR_TEST);
+        manager.releaseAttachment(backTextureAttachment, true);
+    }
+    /**
+     * @param  {WebGLTexture} image
+     * @param  {number} x
+     * @param  {number} y
+     * @param  {number} w
+     * @param  {number} h
+     * @param  {number} ct0
+     * @param  {number} ct1
+     * @param  {number} ct2
+     * @param  {number} ct3
+     * @param  {number} ct4
+     * @param  {number} ct5
+     * @param  {number} ct6
+     * @param  {number} ct7
+     * @param  {string} operation
+     * @param  {number} renderWidth
+     * @param  {number} renderHeight
+     * @param  {Float32Array} matrix
+     * @param  {boolean} imageSmoothingEnabled
+     * @return {void}
+     * @method
+     * @public
+     */
     drawImage(image, x, y, w, h, ct0, ct1, ct2, ct3, ct4, ct5, ct6, ct7, operation, renderWidth, renderHeight, matrix, imageSmoothingEnabled) {
         const manager = this._$context.frameBuffer;
         const currentBuffer = manager.currentAttachment;
         const withCT = ct0 !== 1 || ct1 !== 1 || ct2 !== 1 || ct3 !== 1 ||
             ct4 !== 0 || ct5 !== 0 || ct6 !== 0 || ct7 !== 0;
-        const variants = this._$context.shaderList.blendShaderVariants;
         switch (operation) {
             case "normal":
             case "layer":
@@ -206,8 +389,8 @@ export class CanvasToWebGLContextBlend {
             case "copy":
                 {
                     manager.textureManager.bind0(image, imageSmoothingEnabled);
-                    const shader = variants.getNormalBlendShader(withCT);
-                    variants.setNormalBlendUniform(shader.uniform, x, y, w, h, matrix, renderWidth, renderHeight, withCT, ct0, ct1, ct2, ct3, ct4, ct5, ct6, ct7);
+                    const shader = this._$variants.getNormalBlendShader(withCT);
+                    this._$variants.setNormalBlendUniform(shader.uniform, x, y, w, h, matrix, renderWidth, renderHeight, withCT, ct0, ct1, ct2, ct3, ct4, ct5, ct6, ct7);
                     const a = matrix[0];
                     const b = matrix[1];
                     const c = matrix[3];
@@ -251,7 +434,7 @@ export class CanvasToWebGLContextBlend {
                             return;
                         }
                         this._$gl.enable(this._$gl.SCISSOR_TEST);
-                        this._$gl.scissor(sx, Math.max(0, renderHeight - (sy + sh)), sw + 1, sh + 1);
+                        this._$gl.scissor(sx, $Math.max(0, renderHeight - (sy + sh)), sw + 1, sh + 1);
                     }
                     this.toOperation(operation);
                     shader._$drawImage();
@@ -260,10 +443,10 @@ export class CanvasToWebGLContextBlend {
                 break;
             default:
                 {
-                    const sx = Math.max(0, x + matrix[6]);
-                    const sy = Math.max(0, y + matrix[7]);
-                    const sw = Math.min(Math.max(0, renderWidth - sx), w);
-                    const sh = Math.min(Math.max(0, renderHeight - sy), h);
+                    const sx = $Math.max(0, x + matrix[6]);
+                    const sy = $Math.max(0, y + matrix[7]);
+                    const sw = $Math.min($Math.max(0, renderWidth - sx), w);
+                    const sh = $Math.min($Math.max(0, renderHeight - sy), h);
                     if (!sw || !sh) {
                         return;
                     }
@@ -274,20 +457,21 @@ export class CanvasToWebGLContextBlend {
                         .createTextureAttachment(w, h);
                     this._$context._$bind(backTextureAttachment);
                     manager.textureManager.bind0(texture);
-                    const clipShader = variants.getClipShader();
+                    const clipShader = this._$variants.getClipShader();
                     const clipUniform = clipShader.uniform;
-                    variants.setClipUniform(clipUniform, x, y, w, h, $inverseMatrix(matrix), renderWidth, renderHeight);
+                    this._$variants.setClipUniform(clipUniform, x, y, w, h, $inverseMatrix(matrix), renderWidth, renderHeight);
                     this.reset();
                     clipShader._$drawImage();
                     const backTexture = manager
                         .getTextureFromCurrentAttachment();
                     this._$context._$bind(currentBuffer);
                     manager.textureManager.bind01(backTexture, image, imageSmoothingEnabled);
-                    const shader = variants
+                    const shader = this
+                        ._$variants
                         .getBlendShader(operation, withCT);
-                    variants.setBlendUniform(shader.uniform, x, y, w, h, matrix, renderWidth, renderHeight, withCT, ct0, ct1, ct2, ct3, ct4, ct5, ct6, ct7);
+                    this._$variants.setBlendUniform(shader.uniform, x, y, w, h, matrix, renderWidth, renderHeight, withCT, ct0, ct1, ct2, ct3, ct4, ct5, ct6, ct7);
                     this._$gl.enable(this._$gl.SCISSOR_TEST);
-                    this._$gl.scissor(sx, Math.max(0, renderHeight - (sy + sh)), sw, sh);
+                    this._$gl.scissor(sx, $Math.max(0, renderHeight - (sy + sh)), sw, sh);
                     this.toOneZero();
                     shader._$drawImage();
                     this._$gl.disable(this._$gl.SCISSOR_TEST);

package/dist/CanvasToWebGLContextMask.d.ts

@@ -43,12 +43,6 @@ export declare class CanvasToWebGLContextMask {
      * @private
      */
     _$onClearRect(): void;
-    /**
-     * @return {void}
-     * @method
-     * @private
-     */
-    _$endClip(): void;
     /**
      * @return {void}
      * @method

package/dist/CanvasToWebGLContextMask.js

@@ -100,28 +100,6 @@ export class CanvasToWebGLContextMask {
         this._$gl.disable(this._$gl.STENCIL_TEST);
         this._$currentClip = false;
     }
-    /**
-     * @return {void}
-     * @method
-     * @private
-     */
-    _$endClip() {
-        const manager = this._$context.frameBuffer;
-        const currentAttachment = manager.currentAttachment;
-        const texture = manager.getTextureFromCurrentAttachment();
-        this._$context._$bind(this._$context.cacheAttachment);
-        this._$context.cacheAttachment = null;
-        // blend off
-        this._$context.blend.disable();
-        const cacheBounds = this._$context.cacheBounds;
-        this._$context.reset();
-        this._$context.setTransform(1, 0, 0, 1, 0, 0);
-        this._$context.drawImage(texture, cacheBounds.xMin, cacheBounds.yMin, texture.width, texture.height);
-        // blend restart
-        this._$context.blend.enable();
-        // pool
-        manager.releaseAttachment(currentAttachment, true);
-    }
     /**
      * @return {void}
      * @method
@@ -203,10 +181,7 @@ export class CanvasToWebGLContextMask {
         currentAttachment.mask = !!currentAttachment.clipLevel;
         // end clip
         if (!currentAttachment.clipLevel) {
-            this._$context._$clearRectStencil(0, 0, currentAttachment.width, currentAttachment.height);
-            if (this._$context.cacheAttachment) {
-                this._$endClip();
-            }
+            this._$context._$clearRectStencil();
             return;
         }
         // replace

package/dist/CanvasToWebGLContextStyle.js

@@ -112,7 +112,6 @@ export class CanvasToWebGLContextStyle {
             return;
         }
         if (this._$fillStyle instanceof CanvasPatternToWebGL) {
-            this._$fillStyle.dispose();
             this._$fillStyle = $getFloat32Array4(1, 1, 1, 1);
             return;
         }
@@ -130,7 +129,6 @@ export class CanvasToWebGLContextStyle {
             return;
         }
         if (this._$strokeStyle instanceof CanvasPatternToWebGL) {
-            this._$strokeStyle.dispose();
             this._$strokeStyle = $getFloat32Array4(1, 1, 1, 1);
             return;
         }

package/dist/Const.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @type {number}
+ * @public
+ */
+export declare let $RENDER_SIZE: number;
+/**
+ * @param  {number} size
+ * @return {void}
+ * @method
+ * @public
+ */
+export declare const $setRenderSize: (size: number) => void;

package/dist/Const.js

@@ -0,0 +1,14 @@
+/**
+ * @type {number}
+ * @public
+ */
+export let $RENDER_SIZE = 2048;
+/**
+ * @param  {number} size
+ * @return {void}
+ * @method
+ * @public
+ */
+export const $setRenderSize = (size) => {
+    $RENDER_SIZE = Math.min(4096, size / 2);
+};

package/dist/FrameBufferManager.d.ts

@@ -1,24 +1,36 @@
 import { TextureManager } from "./TextureManager";
-import { AttachmentImpl } from "./interface/AttachmentImpl";
+import type { AttachmentImpl } from "./interface/AttachmentImpl";
+import type { CachePositionImpl } from "./interface/CachePositionImpl";
 /**
  * @class
  */
 export declare class FrameBufferManager {
     private _$gl;
     private _$objectPool;
-    private readonly _$frameBuffer;
-    private readonly _$frameBufferTexture;
     private _$currentAttachment;
     private _$isBinding;
+    private _$isRenderBinding;
+    private readonly _$frameBuffer;
+    private readonly _$frameBufferTexture;
     private readonly _$textureManager;
     private readonly _$stencilBufferPool;
     private readonly _$colorBufferPool;
+    private readonly _$stencilBuffer;
+    private readonly _$colorBuffer;
     /**
      * @param {WebGL2RenderingContext} gl
      * @param {number} samples
      * @constructor
      */
     constructor(gl: WebGL2RenderingContext, samples: number);
+    /**
+     * @description 描画用のbufferをbind
+     *
+     * @return {void}
+     * @method
+     * @public
+     */
+    bindRenderBuffer(): void;
     /**
      * @member {AttachmentImpl|null}
      * @readonly
@@ -41,6 +53,12 @@ export declare class FrameBufferManager {
      * @public
      */
     createCacheAttachment(width: number, height: number, multisample?: boolean, samples?: number): AttachmentImpl;
+    /**
+     * @return {void}
+     * @method
+     * @public
+     */
+    clearCache(): void;
     /**
      * @param  {number} width
      * @param  {number} height
@@ -85,6 +103,27 @@ export declare class FrameBufferManager {
      * @public
      */
     unbind(): void;
+    /**
+     * @return {void}
+     * @method
+     * @public
+     */
+    transferToMainTexture(): void;
+    /**
+     * @param  {number} width
+     * @param  {number} height
+     * @return {object}
+     * @method
+     * @public
+     */
+    createCachePosition(width: number, height: number): CachePositionImpl;
+    /**
+     * @param  {object} position
+     * @return {void}
+     * @method
+     * @public
+     */
+    transferTexture(position: CachePositionImpl): void;
     /**
      * @return {WebGLTexture}
      * @method

package/dist/FrameBufferManager.js

@@ -1,6 +1,8 @@
 import { TextureManager } from "./TextureManager";
 import { StencilBufferPool } from "./StencilBufferPool";
 import { ColorBufferPool } from "./ColorBufferPool";
+import { $Math } from "@next2d/share";
+import { $RENDER_SIZE } from "./Const";
 /**
  * @class
  */
@@ -59,6 +61,46 @@ export class FrameBufferManager {
          * @private
          */
         this._$colorBufferPool = new ColorBufferPool(gl, samples);
+        /**
+         * @type {boolean}
+         * @default false
+         * @private
+         */
+        this._$isRenderBinding = false;
+        /**
+         * @type {WebGLRenderbuffer}
+         * @private
+         */
+        this._$colorBuffer = this._$gl.createRenderbuffer();
+        this._$gl.bindRenderbuffer(this._$gl.RENDERBUFFER, this._$colorBuffer);
+        this._$gl.renderbufferStorageMultisample(this._$gl.RENDERBUFFER, samples, this._$gl.RGBA8, $RENDER_SIZE, $RENDER_SIZE);
+        /**
+         * @type {WebGLRenderbuffer}
+         * @private
+         */
+        this._$stencilBuffer = this._$gl.createRenderbuffer();
+        this._$gl.bindRenderbuffer(this._$gl.RENDERBUFFER, this._$stencilBuffer);
+        this._$gl.renderbufferStorageMultisample(this._$gl.RENDERBUFFER, samples, this._$gl.STENCIL_INDEX8, $RENDER_SIZE, $RENDER_SIZE);
+    }
+    /**
+     * @description 描画用のbufferをbind
+     *
+     * @return {void}
+     * @method
+     * @public
+     */
+    bindRenderBuffer() {
+        if (!this._$isBinding) {
+            this._$isBinding = true;
+            this._$gl.bindFramebuffer(this._$gl.FRAMEBUFFER, this._$frameBuffer);
+        }
+        if (!this._$isRenderBinding) {
+            this._$isRenderBinding = true;
+            this._$gl.bindRenderbuffer(this._$gl.RENDERBUFFER, this._$colorBuffer);
+            this._$gl.framebufferRenderbuffer(this._$gl.FRAMEBUFFER, this._$gl.COLOR_ATTACHMENT0, this._$gl.RENDERBUFFER, this._$colorBuffer);
+            this._$gl.bindRenderbuffer(this._$gl.RENDERBUFFER, this._$stencilBuffer);
+            this._$gl.framebufferRenderbuffer(this._$gl.FRAMEBUFFER, this._$gl.STENCIL_ATTACHMENT, this._$gl.RENDERBUFFER, this._$stencilBuffer);
+        }
     }
     /**
      * @member {AttachmentImpl|null}
@@ -117,6 +159,14 @@ export class FrameBufferManager {
         attachment.isActive = true;
         return attachment;
     }
+    /**
+     * @return {void}
+     * @method
+     * @public
+     */
+    clearCache() {
+        this._$textureManager.clearCache();
+    }
     /**
      * @param  {number} width
      * @param  {number} height
@@ -246,6 +296,7 @@ export class FrameBufferManager {
         }
         this._$gl.bindRenderbuffer(this._$gl.RENDERBUFFER, attachment.stencil);
         this._$gl.framebufferRenderbuffer(this._$gl.FRAMEBUFFER, this._$gl.STENCIL_ATTACHMENT, this._$gl.RENDERBUFFER, attachment.stencil);
+        this._$isRenderBinding = false;
     }
     /**
      * @return void
@@ -259,6 +310,64 @@ export class FrameBufferManager {
             this._$gl.bindFramebuffer(this._$gl.FRAMEBUFFER, null);
         }
     }
+    /**
+     * @return {void}
+     * @method
+     * @public
+     */
+    transferToMainTexture() {
+        if (!this._$currentAttachment) {
+            throw new Error("the current attachment is null.");
+        }
+        const width = this._$currentAttachment.width;
+        const height = this._$currentAttachment.height;
+        const texture = this._$currentAttachment.texture;
+        if (!texture) {
+            throw new Error("the texture is null.");
+        }
+        this._$gl.bindFramebuffer(this._$gl.DRAW_FRAMEBUFFER, this._$frameBufferTexture);
+        this._$textureManager.bind0(texture);
+        this._$gl.framebufferTexture2D(this._$gl.FRAMEBUFFER, this._$gl.COLOR_ATTACHMENT0, this._$gl.TEXTURE_2D, texture, 0);
+        // use main Framebuffer
+        this._$gl.bindFramebuffer(this._$gl.DRAW_FRAMEBUFFER, null);
+        // execute
+        this._$gl.blitFramebuffer(0, 0, width, height, 0, 0, width, height, this._$gl.COLOR_BUFFER_BIT, this._$gl.NEAREST);
+        // reset
+        this._$gl.bindFramebuffer(this._$gl.DRAW_FRAMEBUFFER, this._$frameBuffer);
+    }
+    /**
+     * @param  {number} width
+     * @param  {number} height
+     * @return {object}
+     * @method
+     * @public
+     */
+    createCachePosition(width, height) {
+        return this
+            ._$textureManager
+            .createCachePosition(width, height);
+    }
+    /**
+     * @param  {object} position
+     * @return {void}
+     * @method
+     * @public
+     */
+    transferTexture(position) {
+        this._$gl.disable(this._$gl.SCISSOR_TEST);
+        this._$gl.bindFramebuffer(this._$gl.DRAW_FRAMEBUFFER, this._$frameBufferTexture);
+        const texture = this
+            ._$textureManager
+            .getAtlasTexture(position.index);
+        this._$textureManager.bind0(texture);
+        this._$gl.framebufferTexture2D(this._$gl.FRAMEBUFFER, this._$gl.COLOR_ATTACHMENT0, this._$gl.TEXTURE_2D, texture, 0);
+        const x0 = $Math.max(0, position.x - 1);
+        const y0 = $Math.max(0, position.y - 1);
+        const x1 = $Math.min($RENDER_SIZE, position.x + position.w + 1);
+        const y1 = $Math.min($RENDER_SIZE, position.y + position.h + 1);
+        this._$gl.blitFramebuffer(x0, y0, x1, y1, x0, y0, x1, y1, this._$gl.COLOR_BUFFER_BIT, this._$gl.NEAREST);
+        this._$gl.bindFramebuffer(this._$gl.FRAMEBUFFER, this._$frameBuffer);
+    }
     /**
      * @return {WebGLTexture}
      * @method