@galacean/effects-threejs 2.8.2 → 2.8.3

package/dist/index.js

@@ -3,7 +3,7 @@
  * Description: Galacean Effects runtime threejs plugin for the web
  * Author: Ant Group CO., Ltd.
  * Contributors: 燃然,飂兮,十弦,云垣,茂安,意绮
- * Version: v2.8.2
+ * Version: v2.8.3
  */
 
 'use strict';
@@ -18392,6 +18392,15 @@ exports.PostProcessVolume = __decorate([
             });
         })();
     };
+    _proto.onUpdate = function onUpdate(dt) {
+        for(var i = 0; i < this.materials.length; i++){
+            var material = this.materials[i];
+            material.setVector2("_Size", this.transform.size);
+            if (this.renderer.renderMode === RenderMode.BILLBOARD || this.renderer.renderMode === RenderMode.VERTICAL_BILLBOARD || this.renderer.renderMode === RenderMode.HORIZONTAL_BILLBOARD) {
+                material.setVector3("_Scale", this.transform.scale);
+            }
+        }
+    };
     _proto.render = function render(renderer) {
         if (!this.getVisible()) {
             return;
@@ -18453,12 +18462,7 @@ exports.PostProcessVolume = __decorate([
     };
     _proto.draw = function draw(renderer) {
         for(var i = 0; i < this.materials.length; i++){
-            var material = this.materials[i];
-            material.setVector2("_Size", this.transform.size);
-            if (this.renderer.renderMode === RenderMode.BILLBOARD || this.renderer.renderMode === RenderMode.VERTICAL_BILLBOARD || this.renderer.renderMode === RenderMode.HORIZONTAL_BILLBOARD) {
-                material.setVector3("_Scale", this.transform.scale);
-            }
-            renderer.drawGeometry(this.geometry, this.transform.getWorldMatrix(), material, i);
+            renderer.drawGeometry(this.geometry, this.transform.getWorldMatrix(), this.materials[i], i);
         }
     };
     _proto.fromData = function fromData(data) {
@@ -25716,6 +25720,7 @@ exports.SpriteComponent = /*#__PURE__*/ function(MaskableGraphic) {
     var _proto = SpriteComponent.prototype;
     _proto.onUpdate = function onUpdate(dt) {
         var _this = this;
+        MaskableGraphic.prototype.onUpdate.call(this, dt);
         var time = this.time;
         var duration = this.duration;
         var textureAnimation = this.textureSheetAnimation;
@@ -28709,11 +28714,11 @@ var TextLayout = /*#__PURE__*/ function() {
    * @param totalLineHeight - 可选的实际总行高，用于替代默认计算
    * @returns - 行高偏移值
    */ _proto.getOffsetY = function getOffsetY(style, lineCount, lineHeight, fontSize, totalLineHeight) {
-        var outlineWidth = style.outlineWidth, fontScale = style.fontScale;
+        var fontScale = style.fontScale;
         // /3 计算Y轴偏移量，以匹配编辑器行为
         var offsetY = (lineHeight - fontSize) / 3;
         // 计算基础偏移量
-        var baseOffset = fontSize + outlineWidth * fontScale;
+        var baseOffset = fontSize;
         var commonCalculation = totalLineHeight !== undefined ? totalLineHeight : lineHeight * (lineCount - 1);
         var offsetResult = 0;
         switch(this.textVerticalAlign){
@@ -28729,11 +28734,16 @@ var TextLayout = /*#__PURE__*/ function() {
         }
         return offsetResult;
     };
-    _proto.getOffsetX = function getOffsetX(style, maxWidth) {
+    /**
+   * 获取初始的水平偏移值
+   * @param style - 字体基础数据
+   * @param maxWidth - 最大行宽
+   * @returns - 水平偏移值
+   */ _proto.getOffsetX = function getOffsetX(style, maxWidth) {
         var offsetX = 0;
         switch(this.textAlign){
             case TextAlignment.left:
-                offsetX = style.outlineWidth * style.fontScale;
+                offsetX = 0;
                 break;
             case TextAlignment.middle:
                 offsetX = (this.width * style.fontScale - maxWidth) / 2;
@@ -28809,7 +28819,8 @@ var TextStyle = /*#__PURE__*/ function() {
             1
         ];
         this.outlineWidth = 0;
-        if (outline) {
+        var _outline_outlineWidth;
+        if (outline && ((_outline_outlineWidth = outline.outlineWidth) != null ? _outline_outlineWidth : 0) > 0) {
             this.isOutlined = true;
             var _outline_outlineColor;
             this.outlineColor = [].concat((_outline_outlineColor = outline.outlineColor) != null ? _outline_outlineColor : [
@@ -28818,8 +28829,8 @@ var TextStyle = /*#__PURE__*/ function() {
                 1,
                 1
             ]);
-            var _outline_outlineWidth;
-            this.outlineWidth = (_outline_outlineWidth = outline.outlineWidth) != null ? _outline_outlineWidth : 1;
+            var _outline_outlineWidth1;
+            this.outlineWidth = (_outline_outlineWidth1 = outline.outlineWidth) != null ? _outline_outlineWidth1 : 0;
         }
         // 重置阴影状态
         this.hasShadow = false;
@@ -29080,6 +29091,10 @@ exports.TextComponent = /*#__PURE__*/ function(MaskableGraphic) {
    * 文本行数
    */ _this.lineCount = 0;
         /**
+   * 描边/阴影等特效导致的纹理扩容比例 X/Y
+   */ _this.effectScaleX = 1;
+        _this.effectScaleY = 1;
+        /**
    * 每一行文本的最大宽度
    */ _this.maxLineWidth = 0;
         /**
@@ -29141,6 +29156,16 @@ exports.TextComponent = /*#__PURE__*/ function(MaskableGraphic) {
     _proto.onUpdate = function onUpdate(dt) {
         MaskableGraphic.prototype.onUpdate.call(this, dt);
         this.updateTexture();
+        // 覆盖基类每帧更新 size 行为，应用扩容比例
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.materials), _step; !(_step = _iterator()).done;){
+            var material = _step.value;
+            var sizeX = this.transform.size.x;
+            var sizeY = this.transform.size.y;
+            var _this_getTextureExpandScale = this.getTextureExpandScale(), scalex = _this_getTextureExpandScale[0], scaley = _this_getTextureExpandScale[1];
+            sizeX *= scalex;
+            sizeY *= scaley;
+            material.setVector2("_Size", new Vector2(sizeX, sizeY));
+        }
     };
     _proto.onDestroy = function onDestroy() {
         MaskableGraphic.prototype.onDestroy.call(this);
@@ -29330,23 +29355,32 @@ exports.TextComponent = /*#__PURE__*/ function(MaskableGraphic) {
         var style = this.textStyle;
         var layout = this.textLayout;
         var fontScale = style.fontScale;
-        var width = (layout.width + style.fontOffset) * fontScale;
+        var baseWidth = (layout.width + style.fontOffset) * fontScale;
         var finalHeight = layout.lineHeight * this.lineCount;
         var fontSize = style.fontSize * fontScale;
         var lineHeight = layout.lineHeight * fontScale;
         style.fontDesc = this.getFontDesc(fontSize);
         var char = (this.text || "").split("");
+        var baseHeight = 0;
         if (layout.autoWidth) {
-            this.canvas.height = finalHeight * fontScale;
+            baseHeight = finalHeight * fontScale;
             this.item.transform.size.set(1, finalHeight / layout.height);
         } else {
-            this.canvas.height = layout.height * fontScale;
-        }
-        var height = this.canvas.height;
-        this.renderToTexture(width, height, flipY, function(context) {
+            baseHeight = layout.height * fontScale;
+        }
+        var _this_getEffectPadding = this.getEffectPadding(), padL = _this_getEffectPadding.padL, padR = _this_getEffectPadding.padR, padT = _this_getEffectPadding.padT, padB = _this_getEffectPadding.padB;
+        var hasEffect = (padL | padR | padT | padB) !== 0;
+        var texWidth = hasEffect ? Math.ceil(baseWidth + padL + padR) : baseWidth;
+        var texHeight = hasEffect ? Math.ceil(baseHeight + padT + padB) : baseHeight;
+        var shiftX = hasEffect ? padL : 0;
+        var shiftY = hasEffect ? flipY ? padT : padB : 0;
+        // 给渲染层用：扩容比例
+        this.effectScaleX = baseWidth > 0 ? texWidth / baseWidth : 1;
+        this.effectScaleY = baseHeight > 0 ? texHeight / baseHeight : 1;
+        this.renderToTexture(texWidth, texHeight, flipY, function(context) {
             // canvas size 变化后重新刷新 context
-            if (_this.maxLineWidth > width && layout.overflow === TextOverflow.display) {
-                context.font = _this.getFontDesc(fontSize * width / _this.maxLineWidth);
+            if (_this.maxLineWidth > baseWidth && layout.overflow === TextOverflow.display) {
+                context.font = _this.getFontDesc(fontSize * baseWidth / _this.maxLineWidth);
             } else {
                 context.font = style.fontDesc;
             }
@@ -29369,7 +29403,7 @@ exports.TextComponent = /*#__PURE__*/ function(MaskableGraphic) {
                 var textMetrics = context.measureText(str);
                 // 和浏览器行为保持一致
                 x += layout.letterSpace * fontScale;
-                if (x + textMetrics.width > width && i > 0 || str === "\n") {
+                if (x + textMetrics.width > baseWidth && i > 0 || str === "\n") {
                     charsInfo.push({
                         y: y,
                         width: x,
@@ -29393,14 +29427,27 @@ exports.TextComponent = /*#__PURE__*/ function(MaskableGraphic) {
                 chars: charsArray,
                 charOffsetX: charOffsetX
             });
-            charsInfo.forEach(function(charInfo) {
-                var x = layout.getOffsetX(style, charInfo.width);
-                charInfo.chars.forEach(function(str, i) {
-                    if (style.isOutlined) {
-                        context.strokeText(str, x + charInfo.charOffsetX[i], charInfo.y);
+            // 先描边
+            if (style.isOutlined) {
+                charsInfo.forEach(function(charInfo) {
+                    var ox = layout.getOffsetX(style, charInfo.width);
+                    for(var i = 0; i < charInfo.chars.length; i++){
+                        var str = charInfo.chars[i];
+                        var drawX = shiftX + ox + charInfo.charOffsetX[i];
+                        var drawY = shiftY + charInfo.y;
+                        context.strokeText(str, drawX, drawY);
                     }
-                    context.fillText(str, x + charInfo.charOffsetX[i], charInfo.y);
                 });
+            }
+            // 再填充
+            charsInfo.forEach(function(charInfo) {
+                var ox = layout.getOffsetX(style, charInfo.width);
+                for(var i = 0; i < charInfo.chars.length; i++){
+                    var str = charInfo.chars[i];
+                    var drawX = shiftX + ox + charInfo.charOffsetX[i];
+                    var drawY = shiftY + charInfo.y;
+                    context.fillText(str, drawX, drawY);
+                }
             });
             if (style.hasShadow) {
                 context.shadowColor = "transparent";
@@ -29411,6 +29458,32 @@ exports.TextComponent = /*#__PURE__*/ function(MaskableGraphic) {
     _proto.renderText = function renderText(options) {
         this.updateTexture();
     };
+    /**
+   * 给渲染层用：获取特效扩容比例（描边/阴影导致的纹理扩容）
+   * @returns
+   */ _proto.getTextureExpandScale = function getTextureExpandScale() {
+        return [
+            this.effectScaleX,
+            this.effectScaleY
+        ];
+    };
+    /**
+   * 获取描边和阴影的 padding 值（单位：px）
+   * @returns
+   */ _proto.getEffectPadding = function getEffectPadding() {
+        var style = this.textStyle;
+        var hasDrawOutline = style.isOutlined && style.outlineWidth > 0;
+        var outlinePad = hasDrawOutline ? Math.ceil(style.outlineWidth * 2 * style.fontScale) : 0;
+        var hasShadow = style.hasShadow && (style.shadowBlur > 0 || style.shadowOffsetX !== 0 || style.shadowOffsetY !== 0);
+        var shadowPad = hasShadow ? Math.ceil((Math.abs(style.shadowOffsetX) + Math.abs(style.shadowOffsetY) + style.shadowBlur) * style.fontScale) : 0;
+        var pad = outlinePad + shadowPad;
+        return {
+            padL: pad,
+            padR: pad,
+            padT: pad,
+            padB: pad
+        };
+    };
     _proto.setAutoWidth = function setAutoWidth(value) {
         var layout = this.textLayout;
         var normalizedValue = !!value;
@@ -31559,7 +31632,7 @@ function getStandardSpriteContent(sprite, transform) {
     return ret;
 }
 
-var version$2 = "2.8.2";
+var version$2 = "2.8.3";
 var v0 = /^(\d+)\.(\d+)\.(\d+)(-(\w+)\.\d+)?$/;
 var standardVersion = /^(\d+)\.(\d+)$/;
 var reverseParticle = false;
@@ -35259,7 +35332,7 @@ registerPlugin("text", TextLoader);
 registerPlugin("sprite", SpriteLoader);
 registerPlugin("particle", ParticleLoader);
 registerPlugin("interact", InteractLoader);
-var version$1 = "2.8.2";
+var version$1 = "2.8.3";
 logger.info("Core version: " + version$1 + ".");
 
 var _obj;
@@ -36836,7 +36909,7 @@ applyMixins(exports.ThreeTextComponent, [
  */ Mesh.create = function(engine, props) {
     return new ThreeMesh(engine, props);
 };
-var version = "2.8.2";
+var version = "2.8.3";
 logger.info("THREEJS plugin version: " + version + ".");
 
 exports.ActivationMixerPlayable = ActivationMixerPlayable;