@next2d/media 1.15.0 → 1.17.0

package/dist/Video.d.ts

@@ -27,6 +27,8 @@ export declare class Video extends DisplayObject {
     private _$volume;
     private _$ready;
     private _$context;
+    private _$cacheKeys;
+    private _$cacheParams;
     /**
      * @param {number} [width = 0]
      * @param {number} [height = 0]

package/dist/Video.js

@@ -2,7 +2,7 @@ import { SoundMixer } from "./SoundMixer";
 import { DisplayObject } from "@next2d/display";
 import { VideoEvent } from "@next2d/events";
 import { $document, $audioContext, $currentPlayer, $isTouch, $rendererWorker } from "@next2d/util";
-import { $Math, $cancelAnimationFrame, $requestAnimationFrame, $getBoundsObject, $boundsMatrix, $clamp, $multiplicationMatrix, $poolFloat32Array6, $MATRIX_ARRAY_IDENTITY, $OffscreenCanvas, $multiplicationColor, $poolFloat32Array8, $Infinity, $poolBoundsObject, $getFloat32Array6, $getArray, $poolArray } from "@next2d/share";
+import { $Math, $cancelAnimationFrame, $requestAnimationFrame, $getBoundsObject, $boundsMatrix, $clamp, $multiplicationMatrix, $poolFloat32Array6, $MATRIX_ARRAY_IDENTITY, $OffscreenCanvas, $multiplicationColor, $poolFloat32Array8, $Infinity, $poolBoundsObject, $getArray, $Number, $poolArray, $cacheStore, $getFloat32Array6 } from "@next2d/share";
 /**
  * サーバーまたはローカルに保存された録画済みビデオファイルを再生する Video オブジェクトです。
  * ビデオストリームを再生するには、attachNetStream() を使用して、ビデオを Video オブジェクトに関連付けます。
@@ -97,6 +97,16 @@ export class Video extends DisplayObject {
          * @private
          */
         this._$context = null;
+        /**
+         * @type {array}
+         * @private
+         */
+        this._$cacheKeys = $getArray();
+        /**
+         * @type {array}
+         * @private
+         */
+        this._$cacheParams = $getArray(0, 0, 0);
     }
     /**
      * @description 指定されたクラスのストリングを返します。
@@ -453,6 +463,8 @@ export class Video extends DisplayObject {
      * @private
      */
     _$initializeVideo() {
+        // clear cache key
+        this._$cacheKeys.length = 0;
         const video = $document.createElement("video");
         video.autoplay = false;
         video.crossOrigin = "anonymous";
@@ -625,93 +637,118 @@ export class Video extends DisplayObject {
             default:
                 break;
         }
+        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);
+        }
+        const filters = this._$filters || this.filters;
+        const canApply = filters && filters.length > 0 && this._$canApply(filters);
+        let filterBounds = $getBoundsObject(0, width, 0, height);
+        if (canApply) {
+            for (let idx = 0; idx < filters.length; ++idx) {
+                filterBounds = filters[idx]
+                    ._$generateFilterRect(filterBounds, xScale, yScale);
+            }
+        }
         // cache current buffer
         const manager = context.frameBuffer;
         const currentAttachment = manager.currentAttachment;
         if (!currentAttachment
-            || xMin > currentAttachment.width
-            || yMin > currentAttachment.height) {
+            || xMin - filterBounds.xMin > currentAttachment.width
+            || yMin - filterBounds.yMin > currentAttachment.height) {
+            $poolBoundsObject(filterBounds);
             return;
         }
-        const filters = this._$filters || this.filters;
-        if (0 > xMin + width || 0 > yMin + height) {
-            if (filters && filters.length && this._$canApply(filters)) {
-                const xScale = +$Math.sqrt(multiMatrix[0] * multiMatrix[0]
-                    + multiMatrix[1] * multiMatrix[1]);
-                const yScale = +$Math.sqrt(multiMatrix[2] * multiMatrix[2]
-                    + multiMatrix[3] * multiMatrix[3]);
-                let filterBounds = $getBoundsObject(0, width, 0, height);
-                for (let idx = 0; idx < filters.length; ++idx) {
-                    filterBounds = filters[idx]
-                        ._$generateFilterRect(filterBounds, xScale, yScale);
-                }
-                if (0 > filterBounds.xMin + filterBounds.xMax
-                    || 0 > filterBounds.yMin + filterBounds.yMax) {
-                    $poolBoundsObject(filterBounds);
-                    return;
-                }
-                $poolBoundsObject(filterBounds);
-            }
-            else {
-                return;
-            }
+        if (0 > xMin + filterBounds.xMax || 0 > yMin + filterBounds.yMax) {
+            $poolBoundsObject(filterBounds);
+            return;
+        }
+        $poolBoundsObject(filterBounds);
+        if (!this._$cacheKeys.length
+            || this._$cacheParams[0] !== xScale
+            || this._$cacheParams[1] !== yScale
+            || this._$cacheParams[2] !== color_transform[7]) {
+            const keys = $getArray();
+            keys[0] = xScale;
+            keys[1] = yScale;
+            this._$cacheKeys = $cacheStore.generateKeys(this._$instanceId, keys, color_transform);
+            $poolArray(keys);
+            this._$cacheParams[0] = xScale;
+            this._$cacheParams[1] = yScale;
+            this._$cacheParams[2] = color_transform[7];
         }
         const blendMode = this._$blendMode || this.blendMode;
-        let texture = manager.createTextureFromVideo(this._$video, this._$smoothing);
-        if (filters && filters.length
-            && this._$canApply(filters)) {
-            const xScale = +$Math.sqrt(multiMatrix[0] * multiMatrix[0]
-                + multiMatrix[1] * multiMatrix[1]);
-            const yScale = +$Math.sqrt(multiMatrix[2] * multiMatrix[2]
-                + multiMatrix[3] * multiMatrix[3]);
-            if (xScale !== 1 || yScale !== 1) {
-                const currentAttachment = manager.currentAttachment;
-                // create cache buffer
-                const attachment = manager
-                    .createCacheAttachment(width, height, false);
-                context._$bind(attachment);
-                const parentMatrix = $getFloat32Array6(xScale, 0, 0, yScale, width / 2, height / 2);
-                const baseMatrix = $getFloat32Array6(1, 0, 0, 1, -texture.width / 2, -texture.height / 2);
-                const scaleMatrix = $multiplicationMatrix(parentMatrix, baseMatrix);
-                $poolFloat32Array6(parentMatrix);
-                $poolFloat32Array6(baseMatrix);
-                context.reset();
-                context.setTransform(scaleMatrix[0], scaleMatrix[1], scaleMatrix[2], scaleMatrix[3], scaleMatrix[4], scaleMatrix[5]);
-                context.drawImage(texture, 0, 0, texture.width, texture.height);
-                manager.releaseTexture(texture);
-                $poolFloat32Array6(scaleMatrix);
-                texture = manager.getTextureFromCurrentAttachment();
-                // release buffer
-                manager.releaseAttachment(attachment, false);
-                // end draw and reset current buffer
-                context._$bind(currentAttachment);
-            }
-            // draw filter
-            texture = this._$drawFilter(context, texture, multiMatrix, filters, width, height);
-            // reset
+        context.cachePosition = $cacheStore.get(this._$cacheKeys);
+        if (!context.cachePosition) {
+            const width = $Math.ceil($Math.abs(this._$bounds.xMax - this._$bounds.xMin));
+            const height = $Math.ceil($Math.abs(this._$bounds.yMax - this._$bounds.yMin));
+            const position = manager
+                .createCachePosition(width, height);
+            context.cachePosition = position;
+            $cacheStore.set(this._$cacheKeys, position);
+        }
+        const texture = manager.createTextureFromVideo(this._$video, this._$smoothing);
+        let offsetX = 0;
+        let offsetY = 0;
+        if (canApply) {
+            const currentAttachment = manager.currentAttachment;
+            const attachment = manager
+                .createCacheAttachment(width, height);
+            context._$bind(attachment);
             context.reset();
-            // draw
-            context.globalAlpha = alpha;
-            context.imageSmoothingEnabled = this._$smoothing;
-            context.globalCompositeOperation = blendMode;
-            // size
-            const bounds = $boundsMatrix(this._$bounds, multiMatrix);
-            context.setTransform(1, 0, 0, 1, bounds.xMin - texture._$offsetX, bounds.yMin - texture._$offsetY);
-            context.drawImage(texture, 0, 0, texture.width, texture.height, multiColor);
-            // pool
-            $poolBoundsObject(bounds);
+            const parentMatrix = $getFloat32Array6(xScale, 0, 0, yScale, width / 2, height / 2);
+            const baseMatrix = $getFloat32Array6(1, 0, 0, 1, -texture.width / 2, -texture.height / 2);
+            const scaleMatrix = $multiplicationMatrix(parentMatrix, baseMatrix);
+            $poolFloat32Array6(parentMatrix);
+            $poolFloat32Array6(baseMatrix);
+            context.setTransform(scaleMatrix[0], scaleMatrix[1], scaleMatrix[2], scaleMatrix[3], scaleMatrix[4], scaleMatrix[5]);
+            context.drawImage(texture, 0, 0, texture.width, texture.height);
+            const videoTexture = manager.getTextureFromCurrentAttachment();
+            context._$bind(currentAttachment);
+            manager.releaseAttachment(attachment);
+            // release
+            context.drawTextureFromRect(texture, context.cachePosition);
+            const position = this._$drawFilter(context, multiMatrix, filters, width, height, videoTexture);
+            if (position.offsetX) {
+                offsetX = position.offsetX;
+            }
+            if (position.offsetY) {
+                offsetY = position.offsetY;
+            }
+            // update
+            context.cachePosition = position;
+            context.setTransform(1, 0, 0, 1, xMin - offsetX, yMin - offsetY);
         }
         else {
-            // reset
-            context.reset();
+            context.drawTextureFromRect(texture, context.cachePosition);
             context.setTransform(multiMatrix[0], multiMatrix[1], multiMatrix[2], multiMatrix[3], multiMatrix[4], multiMatrix[5]);
-            // draw
+        }
+        // draw
+        if (context.cachePosition) {
             context.globalAlpha = alpha;
-            context.imageSmoothingEnabled = this._$smoothing;
+            context.imageSmoothingEnabled = true;
             context.globalCompositeOperation = blendMode;
-            context.drawImage(texture, 0, 0, texture.width, texture.height, multiColor);
-            manager.releaseTexture(texture);
+            context.drawInstance(xMin - offsetX, yMin - offsetY, xMax, yMax, color_transform);
+            // cache position clear
+            context.cachePosition = null;
         }
+        // pool
         if (multiMatrix !== matrix) {
             $poolFloat32Array6(multiMatrix);
         }
@@ -779,7 +816,9 @@ export class Video extends DisplayObject {
         if (matrix) {
             let multiMatrix = matrix;
             const rawMatrix = this._$transform._$rawMatrix();
-            if (rawMatrix !== $MATRIX_ARRAY_IDENTITY) {
+            if (rawMatrix[0] !== 1 || rawMatrix[1] !== 0
+                || rawMatrix[2] !== 0 || rawMatrix[3] !== 1
+                || rawMatrix[4] !== 0 || rawMatrix[5] !== 0) {
                 multiMatrix = $multiplicationMatrix(matrix, rawMatrix);
             }
             const bounds = $boundsMatrix(this._$bounds, multiMatrix);
@@ -802,6 +841,7 @@ export class Video extends DisplayObject {
         this._$created = true;
         const message = {
             "command": "createVideo",
+            "buffer": new Float32Array(),
             "instanceId": this._$instanceId,
             "parentId": this._$parent ? this._$parent._$instanceId : -1,
             "smoothing": this._$smoothing,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next2d/media",
-  "version": "1.15.0",
+  "version": "1.17.0",
   "description": "Next2D Media Packages",
   "author": "Toshiyuki Ienaga<ienaga@tvon.jp> (https://github.com/ienaga/)",
   "license": "MIT",
@@ -32,14 +32,14 @@
     "url": "git+https://github.com/Next2D/Player.git"
   },
   "peerDependencies": {
-    "@next2d/events": "1.15.0",
-    "@next2d/net": "1.15.0",
-    "@next2d/display": "1.15.0",
-    "@next2d/interface": "1.15.0",
-    "@next2d/core": "1.15.0",
-    "@next2d/share": "1.15.0",
-    "@next2d/util": "1.15.0",
-    "@next2d/geom": "1.15.0",
-    "@next2d/webgl": "1.15.0"
+    "@next2d/events": "1.17.0",
+    "@next2d/net": "1.17.0",
+    "@next2d/display": "1.17.0",
+    "@next2d/interface": "1.17.0",
+    "@next2d/core": "1.17.0",
+    "@next2d/share": "1.17.0",
+    "@next2d/util": "1.17.0",
+    "@next2d/geom": "1.17.0",
+    "@next2d/webgl": "1.17.0"
   }
 }