@galacean/effects-core 2.2.0-alpha.0 → 2.2.1-alpha.0

package/dist/asset-manager.d.ts

@@ -22,10 +22,6 @@ export declare class AssetManager implements Disposable {
      * TextureSource 来源
      */
     private sourceFrom;
-    /**
-     * Texture 选项，用于创建 ImageBitmap
-     */
-    private imageBitmapOptions;
     /**
      * 自定义文本缓存，随页面销毁而销毁
      */
@@ -68,7 +64,6 @@ export declare class AssetManager implements Disposable {
     private loadJSON;
     private loadBins;
     private assignImagesToAssets;
-    private assignImageBitmapOptions;
     private removeTimer;
     /**
      * 销毁方法

package/dist/config.d.ts

@@ -2,6 +2,5 @@ export declare const RUNTIME_ENV = "runtime_env";
 export declare const RENDER_PREFER_LOOKUP_TEXTURE = "lookup_texture";
 export declare const TEMPLATE_USE_OFFSCREEN_CANVAS = "offscreen_canvas";
 export declare const POST_PROCESS_SETTINGS = "post_process_settings";
-export declare const LOAD_PREFER_IMAGE_BITMAP = "load_image_bitmap";
 export declare function getConfig<T extends number | boolean | string | Record<string, any>>(name: string): T;
 export declare function setConfig<T extends number | boolean | string | Record<string, any>>(name: string, value: T): string | number | boolean | Record<string, any>;

package/dist/downloader.d.ts

@@ -46,8 +46,8 @@ export declare class Downloader {
  * @param png - PNG 图片文件的 URL
  * @param webp - WebP 图片文件的 URL
  */
-export declare function loadWebPOptional(png: string, webp?: string, options?: ImageBitmapOptions): Promise<{
-    image: HTMLImageElement | ImageBitmap;
+export declare function loadWebPOptional(png: string, webp?: string): Promise<{
+    image: HTMLImageElement;
     url: string;
 }>;
 /**
@@ -55,8 +55,8 @@ export declare function loadWebPOptional(png: string, webp?: string, options?: I
  * @param png - PNG 图片文件的 URL
  * @param avif - AVIF 图片文件的 URL
  */
-export declare function loadAVIFOptional(png: string, avif?: string, options?: ImageBitmapOptions): Promise<{
-    image: HTMLImageElement | ImageBitmap;
+export declare function loadAVIFOptional(png: string, avif?: string): Promise<{
+    image: HTMLImageElement;
     url: string;
 }>;
 /**
@@ -80,16 +80,4 @@ export declare function loadBlob(url: string): Promise<Blob>;
  */
 export declare function loadVideo(url: string | MediaProvider): Promise<HTMLVideoElement>;
 export declare function loadMedia(url: string | string[], loadFn: (url: string) => Promise<HTMLImageElement | HTMLVideoElement>): Promise<HTMLImageElement | HTMLVideoElement>;
-/**
- * 异步加载一个图片文件，如果支持 ImageBitmap 则返回 ImageBitmap 对象
- * @param source
- * @param options
- * @returns
- */
-export declare function loadImageBitmap(source: string | Blob | HTMLImageElement, options?: ImageBitmapOptions): Promise<ImageBitmap | HTMLImageElement>;
-/**
- * 关闭 ImageBitMap，释放内存
- * @param imgs
- */
-export declare function closeImageBitMap(imgs: any): void;
 export {};

package/dist/index.js

@@ -3,7 +3,7 @@
  * Description: Galacean Effects runtime core for the web
  * Author: Ant Group CO., Ltd.
  * Contributors: 燃然,飂兮,十弦,云垣,茂安,意绮
- * Version: v2.2.0-alpha.0
+ * Version: v2.2.1-alpha.0
  */
 
 'use strict';
@@ -5721,22 +5721,6 @@ exports.TextureSourceType = void 0;
     TextureSourceType[TextureSourceType["mipmaps"] = 7] = "mipmaps";
 })(exports.TextureSourceType || (exports.TextureSourceType = {}));
 
-var RUNTIME_ENV = "runtime_env";
-var RENDER_PREFER_LOOKUP_TEXTURE = "lookup_texture";
-// 文本元素使用 offscreen canvas 绘制
-var TEMPLATE_USE_OFFSCREEN_CANVAS = "offscreen_canvas";
-// 后处理配置相关
-var POST_PROCESS_SETTINGS = "post_process_settings";
-// 加载图片时是否使用 ImageBitmap
-var LOAD_PREFER_IMAGE_BITMAP = "load_image_bitmap";
-var config = {};
-function getConfig(name) {
-    return config[name];
-}
-function setConfig(name, value) {
-    return config[name] = value;
-}
-
 /**
  * 负责下载各种资源，并提供了一些异步加载和缓存管理的功能
  */ var Downloader = /*#__PURE__*/ function() {
@@ -5825,11 +5809,11 @@ var avifFailed = false;
  * 异步加载一个 WebP 图片文件，如果不支持 WebP，则加载 PNG 图片文件
  * @param png - PNG 图片文件的 URL
  * @param webp - WebP 图片文件的 URL
- */ function loadWebPOptional(png, webp, options) {
+ */ function loadWebPOptional(png, webp) {
     return _loadWebPOptional.apply(this, arguments);
 }
 function _loadWebPOptional() {
-    _loadWebPOptional = _async_to_generator(function(png, webp, options) {
+    _loadWebPOptional = _async_to_generator(function(png, webp) {
         var image, image1, image2;
         return __generator(this, function(_state) {
             switch(_state.label){
@@ -5840,7 +5824,7 @@ function _loadWebPOptional() {
                     ];
                     return [
                         4,
-                        loadImageBitmap(png, options)
+                        loadImage(png)
                     ];
                 case 1:
                     image = _state.sent();
@@ -5860,7 +5844,7 @@ function _loadWebPOptional() {
                     ]);
                     return [
                         4,
-                        loadImageBitmap(webp, options)
+                        loadImage(webp)
                     ];
                 case 3:
                     image1 = _state.sent();
@@ -5876,7 +5860,7 @@ function _loadWebPOptional() {
                     webPFailed = true;
                     return [
                         4,
-                        loadImageBitmap(png, options)
+                        loadImage(png)
                     ];
                 case 5:
                     image2 = _state.sent();
@@ -5900,11 +5884,11 @@ function _loadWebPOptional() {
  * 异步加载一个 AVIF 图片文件，如果不支持 AVIF，则加载 PNG 图片文件
  * @param png - PNG 图片文件的 URL
  * @param avif - AVIF 图片文件的 URL
- */ function loadAVIFOptional(png, avif, options) {
+ */ function loadAVIFOptional(png, avif) {
     return _loadAVIFOptional.apply(this, arguments);
 }
 function _loadAVIFOptional() {
-    _loadAVIFOptional = _async_to_generator(function(png, avif, options) {
+    _loadAVIFOptional = _async_to_generator(function(png, avif) {
         var image, image1, image2;
         return __generator(this, function(_state) {
             switch(_state.label){
@@ -5915,7 +5899,7 @@ function _loadAVIFOptional() {
                     ];
                     return [
                         4,
-                        loadImageBitmap(png, options)
+                        loadImage(png)
                     ];
                 case 1:
                     image = _state.sent();
@@ -5935,7 +5919,7 @@ function _loadAVIFOptional() {
                     ]);
                     return [
                         4,
-                        loadImageBitmap(avif, options)
+                        loadImage(avif)
                     ];
                 case 3:
                     image1 = _state.sent();
@@ -5951,7 +5935,7 @@ function _loadAVIFOptional() {
                     avifFailed = true;
                     return [
                         4,
-                        loadImageBitmap(png, options)
+                        loadImage(png)
                     ];
                 case 5:
                     image2 = _state.sent();
@@ -6166,80 +6150,6 @@ function _loadMedia() {
     });
     return _loadMedia.apply(this, arguments);
 }
-var imageBitMapAvailable = typeof createImageBitmap === "function";
-/**
- * 异步加载一个图片文件，如果支持 ImageBitmap 则返回 ImageBitmap 对象
- * @param source
- * @param options
- * @returns
- */ function loadImageBitmap(source, options) {
-    return _loadImageBitmap.apply(this, arguments);
-}
-function _loadImageBitmap() {
-    _loadImageBitmap = _async_to_generator(function(source, options) {
-        var blob;
-        return __generator(this, function(_state) {
-            switch(_state.label){
-                case 0:
-                    if (!(imageBitMapAvailable && getConfig(LOAD_PREFER_IMAGE_BITMAP))) return [
-                        3,
-                        4
-                    ];
-                    if (!(typeof source === "string")) return [
-                        3,
-                        2
-                    ];
-                    return [
-                        4,
-                        loadBlob(source)
-                    ];
-                case 1:
-                    blob = _state.sent();
-                    return [
-                        3,
-                        3
-                    ];
-                case 2:
-                    if (_instanceof1(source, Blob)) {
-                        blob = source;
-                    } else {
-                        return [
-                            2,
-                            loadImage(source)
-                        ];
-                    }
-                    _state.label = 3;
-                case 3:
-                    return [
-                        2,
-                        createImageBitmap(blob, options)
-                    ];
-                case 4:
-                    return [
-                        2,
-                        loadImage(source)
-                    ];
-                case 5:
-                    return [
-                        2
-                    ];
-            }
-        });
-    });
-    return _loadImageBitmap.apply(this, arguments);
-}
-/**
- * 关闭 ImageBitMap，释放内存
- * @param imgs
- */ function closeImageBitMap(imgs) {
-    if (imageBitMapAvailable) {
-        if (_instanceof1(imgs, ImageBitmap)) {
-            imgs.close();
-        } else if (_instanceof1(imgs, Array)) {
-            imgs.forEach(closeImageBitMap);
-        }
-    }
-}
 
 function deserializeMipmapTexture(textureOptions, bins, assets) {
     return _deserializeMipmapTexture.apply(this, arguments);
@@ -16903,9 +16813,11 @@ function shouldIgnoreBouncing(arg, mul) {
  */ var MeshCollider = /*#__PURE__*/ function() {
     function MeshCollider() {
         this.triangles = [];
+        this.worldMatrix = new Matrix4();
     }
     var _proto = MeshCollider.prototype;
     _proto.getBoundingBoxData = function getBoundingBoxData() {
+        this.applyWorldMatrix(this.boundingBoxData.area);
         return this.boundingBoxData;
     };
     _proto.getBoundingBox = function getBoundingBox() {
@@ -16935,6 +16847,7 @@ function shouldIgnoreBouncing(arg, mul) {
             p1: point2,
             p2: point3
         });
+        this.applyWorldMatrix(area);
         return {
             type: exports.HitTestType.triangle,
             area: area
@@ -16955,11 +16868,7 @@ function shouldIgnoreBouncing(arg, mul) {
             });
         }
         if (worldMatrix) {
-            area.forEach(function(triangle) {
-                triangle.p0 = worldMatrix.transformPoint(triangle.p0, new Vector3());
-                triangle.p1 = worldMatrix.transformPoint(triangle.p1, new Vector3());
-                triangle.p2 = worldMatrix.transformPoint(triangle.p2, new Vector3());
-            });
+            this.worldMatrix.copyFrom(worldMatrix);
         }
         this.boundingBoxData = {
             type: exports.HitTestType.triangle,
@@ -16999,6 +16908,15 @@ function shouldIgnoreBouncing(arg, mul) {
         }
         return res;
     };
+    _proto.applyWorldMatrix = function applyWorldMatrix(area) {
+        var _this = this;
+        area.forEach(function(triangle) {
+            triangle.p0 = _this.worldMatrix.transformPoint(triangle.p0, new Vector3());
+            triangle.p1 = _this.worldMatrix.transformPoint(triangle.p1, new Vector3());
+            triangle.p2 = _this.worldMatrix.transformPoint(triangle.p2, new Vector3());
+        });
+        return area;
+    };
     return MeshCollider;
 }();
 
@@ -17894,7 +17812,7 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
     };
     /**
    * 添加组件
-   * @param classConstructor - 要添加的组件类型
+   * @param classConstructor - 要添加的组件
    */ _proto.addComponent = function addComponent(classConstructor) {
         var newComponent = new classConstructor(this.engine);
         this.components.push(newComponent);
@@ -18137,7 +18055,7 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
     };
     _proto.fromData = function fromData(data) {
         EffectsObject.prototype.fromData.call(this, data);
-        var id = data.id, name = data.name, delay = data.delay, parentId = data.parentId, endBehavior = data.endBehavior, transform = data.transform, _data_listIndex = data.listIndex, listIndex = _data_listIndex === void 0 ? 0 : _data_listIndex, _data_duration = data.duration, duration = _data_duration === void 0 ? 0 : _data_duration;
+        var id = data.id, name = data.name, delay = data.delay, parentId = data.parentId, endBehavior = data.endBehavior, transform = data.transform, _data_duration = data.duration, duration = _data_duration === void 0 ? 0 : _data_duration;
         this.props = data;
         //@ts-expect-error
         this.type = data.type;
@@ -18199,8 +18117,6 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
                 this.rendererComponents.push(component.renderer);
             }
         }
-        // renderOrder 在 component 初始化后设置。确保能拿到 rendererComponent。
-        this.renderOrder = listIndex;
     };
     _proto.toData = function toData() {
         var _this_parent;
@@ -18808,6 +18724,20 @@ exports.SpriteComponent = __decorate([
     effectsClass(DataType.SpriteComponent)
 ], exports.SpriteComponent);
 
+var RUNTIME_ENV = "runtime_env";
+var RENDER_PREFER_LOOKUP_TEXTURE = "lookup_texture";
+// 文本元素使用 offscreen canvas 绘制
+var TEMPLATE_USE_OFFSCREEN_CANVAS = "offscreen_canvas";
+// 后处理配置相关
+var POST_PROCESS_SETTINGS = "post_process_settings";
+var config = {};
+function getConfig(name) {
+    return config[name];
+}
+function setConfig(name, value) {
+    return config[name] = value;
+}
+
 var Cone = /*#__PURE__*/ function() {
     function Cone(props) {
         var _this = this;
@@ -23879,6 +23809,20 @@ var SerializationHelper = /*#__PURE__*/ function() {
         }
         return regions;
     };
+    /**
+   * 设置当前合成子元素的渲染顺序
+   * @internal
+   */ _proto.setChildrenRenderOrder = function setChildrenRenderOrder(startOrder) {
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.items), _step; !(_step = _iterator()).done;){
+            var item = _step.value;
+            item.renderOrder = startOrder++;
+            var subCompositionComponent = item.getComponent(CompositionComponent);
+            if (subCompositionComponent) {
+                startOrder = subCompositionComponent.setChildrenRenderOrder(startOrder);
+            }
+        }
+        return startOrder;
+    };
     _proto.fromData = function fromData(data) {
         Behaviour.prototype.fromData.call(this, data);
         this.items = data.items;
@@ -24693,7 +24637,7 @@ var TextLayout = /*#__PURE__*/ function() {
     function TextLayout(options) {
         this.width = 0;
         this.height = 0;
-        var _options_textHeight = options.textHeight, textHeight = _options_textHeight === void 0 ? 100 : _options_textHeight, _options_textWidth = options.textWidth, textWidth = _options_textWidth === void 0 ? 100 : _options_textWidth, _options_textOverflow = options.textOverflow, textOverflow = _options_textOverflow === void 0 ? TextOverflow.display : _options_textOverflow, _options_textBaseline = options.textBaseline, textBaseline = _options_textBaseline === void 0 ? TextBaseline.top : _options_textBaseline, _options_textAlign = options.textAlign, textAlign = _options_textAlign === void 0 ? TextAlignment.left : _options_textAlign, _options_text = options.text, text = _options_text === void 0 ? " " : _options_text, _options_letterSpace = options.letterSpace, letterSpace = _options_letterSpace === void 0 ? 0 : _options_letterSpace, _options_autoWidth = options.autoWidth, autoWidth = _options_autoWidth === void 0 ? false : _options_autoWidth, fontSize = options.fontSize, _options_lineHeight = options.lineHeight, lineHeight = _options_lineHeight === void 0 ? fontSize : _options_lineHeight;
+        var _options_textHeight = options.textHeight, textHeight = _options_textHeight === void 0 ? 100 : _options_textHeight, _options_textWidth = options.textWidth, textWidth = _options_textWidth === void 0 ? 100 : _options_textWidth, _options_textOverflow = options.textOverflow, textOverflow = _options_textOverflow === void 0 ? TextOverflow.clip : _options_textOverflow, _options_textBaseline = options.textBaseline, textBaseline = _options_textBaseline === void 0 ? TextBaseline.top : _options_textBaseline, _options_textAlign = options.textAlign, textAlign = _options_textAlign === void 0 ? TextAlignment.left : _options_textAlign, _options_text = options.text, text = _options_text === void 0 ? " " : _options_text, _options_letterSpace = options.letterSpace, letterSpace = _options_letterSpace === void 0 ? 0 : _options_letterSpace, _options_autoWidth = options.autoWidth, autoWidth = _options_autoWidth === void 0 ? false : _options_autoWidth, fontSize = options.fontSize, _options_lineHeight = options.lineHeight, lineHeight = _options_lineHeight === void 0 ? fontSize : _options_lineHeight;
         var tempWidth = fontSize + letterSpace;
         this.autoWidth = autoWidth;
         this.maxTextWidth = text.length * tempWidth;
@@ -27315,7 +27259,6 @@ var seed = 1;
         this.downloader = downloader;
         this.assets = {};
         this.sourceFrom = {};
-        this.imageBitmapOptions = {};
         this.id = seed++;
         this.timers = [];
         this.updateOptions(options);
@@ -27573,12 +27516,12 @@ var seed = 1;
     _proto.processJSON = function processJSON(json) {
         var _this = this;
         return _async_to_generator(function() {
-            var jsonScene, _jsonScene_plugins, plugins, textures, pluginSystem;
+            var jsonScene, _jsonScene_plugins, plugins, pluginSystem;
             return __generator(this, function(_state) {
                 switch(_state.label){
                     case 0:
                         jsonScene = getStandardJSON(json);
-                        _jsonScene_plugins = jsonScene.plugins, plugins = _jsonScene_plugins === void 0 ? [] : _jsonScene_plugins, textures = jsonScene.textures;
+                        _jsonScene_plugins = jsonScene.plugins, plugins = _jsonScene_plugins === void 0 ? [] : _jsonScene_plugins;
                         pluginSystem = new PluginSystem(plugins);
                         return [
                             4,
@@ -27586,7 +27529,6 @@ var seed = 1;
                         ];
                     case 1:
                         _state.sent();
-                        _this.assignImageBitmapOptions(textures);
                         return [
                             2,
                             {
@@ -27818,7 +27760,7 @@ var seed = 1;
                                         ];
                                         return [
                                             4,
-                                            loadAVIFOptional(imageURL, avifURL, _this.imageBitmapOptions[id])
+                                            loadAVIFOptional(imageURL, avifURL)
                                         ];
                                     case 10:
                                         _tmp = _state.sent();
@@ -27829,7 +27771,7 @@ var seed = 1;
                                     case 11:
                                         return [
                                             4,
-                                            loadWebPOptional(imageURL, webpURL, _this.imageBitmapOptions[id])
+                                            loadWebPOptional(imageURL, webpURL)
                                         ];
                                     case 12:
                                         _tmp = _state.sent();
@@ -28041,21 +27983,6 @@ var seed = 1;
             this.assets[images[i].id] = loadedImages[i];
         }
     };
-    _proto.assignImageBitmapOptions = function assignImageBitmapOptions(textures) {
-        var _this = this;
-        if (textures === void 0) textures = [];
-        textures.forEach(function(texture) {
-            if (!(_instanceof1(texture, Texture) || "mipmaps" in texture)) {
-                var source = texture.source;
-                if (isObject(source)) {
-                    _this.imageBitmapOptions[source.id] = {
-                        imageOrientation: texture.flipY ? "flipY" : "none",
-                        premultiplyAlpha: texture.premultiplyAlpha ? "premultiply" : "none"
-                    };
-                }
-            }
-        });
-    };
     _proto.removeTimer = function removeTimer(id) {
         var index = this.timers.indexOf(id);
         if (index !== -1) {
@@ -28065,15 +27992,11 @@ var seed = 1;
     /**
    * 销毁方法
    */ _proto.dispose = function dispose() {
-        var _this = this;
         if (this.timers.length) {
             this.timers.map(function(id) {
                 return window.clearTimeout(id);
             });
         }
-        closeImageBitMap(Object.keys(this.assets).map(function(key) {
-            return _this.assets[key];
-        }));
         this.assets = {};
         this.sourceFrom = {};
         this.timers = [];
@@ -28090,7 +28013,7 @@ function createTextureOptionsBySource(image, sourceFrom, id) {
     };
     if (_instanceof1(image, Texture)) {
         return _extends({}, image.source, options);
-    } else if (_instanceof1(image, HTMLImageElement) || _instanceof1(image, ImageBitmap) || isCanvas(image)) {
+    } else if (_instanceof1(image, HTMLImageElement) || isCanvas(image)) {
         return _extends({
             image: image,
             sourceType: exports.TextureSourceType.image,
@@ -28417,7 +28340,6 @@ var tmpScale = new Vector3(1, 1, 1);
     return Camera;
 }();
 
-var listOrder = 0;
 /**
  * 合成资源管理
  */ var CompositionSourceManager = /*#__PURE__*/ function() {
@@ -28450,7 +28372,6 @@ var listOrder = 0;
         this.pluginSystem = pluginSystem;
         this.totalTime = totalTime != null ? totalTime : 0;
         this.textures = cachedTextures;
-        listOrder = 0;
         this.sourceContent = this.getContent(this.composition);
     }
     var _proto = CompositionSourceManager.prototype;
@@ -28481,7 +28402,6 @@ var listOrder = 0;
             var sourceItemData = this.engine.jsonSceneData[itemDataPath.id];
             var itemProps = sourceItemData;
             if (passRenderLevel(sourceItemData.renderLevel, this.renderLevel)) {
-                itemProps.listIndex = listOrder++;
                 if (itemProps.type === ItemType.sprite || itemProps.type === ItemType.particle || itemProps.type === ItemType.spine || //@ts-expect-error
                 itemProps.type === ItemType.shape) {
                     for(var _iterator2 = _create_for_of_iterator_helper_loose(itemProps.components), _step2; !(_step2 = _iterator2()).done;){
@@ -28784,6 +28704,7 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
         SerializationHelper.deserialize(sourceContent, _this.rootComposition);
         _this.rootComposition.createContent();
         _this.buildItemTree(_this.rootItem);
+        _this.rootComposition.setChildrenRenderOrder(0);
         _this.pluginSystem.resetComposition(_assert_this_initialized(_this), _this.renderFrame);
         return _this;
     }
@@ -31423,7 +31344,7 @@ registerPlugin("sprite", SpriteLoader, exports.VFXItem, true);
 registerPlugin("particle", ParticleLoader, exports.VFXItem, true);
 registerPlugin("cal", CalculateLoader, exports.VFXItem, true);
 registerPlugin("interact", InteractLoader, exports.VFXItem, true);
-var version = "2.2.0-alpha.0";
+var version = "2.2.1-alpha.0";
 logger.info("Core version: " + version + ".");
 
 exports.AbstractPlugin = AbstractPlugin;
@@ -31473,7 +31394,6 @@ exports.HELP_LINK = HELP_LINK;
 exports.InteractLoader = InteractLoader;
 exports.InteractMesh = InteractMesh;
 exports.KTXTexture = KTXTexture;
-exports.LOAD_PREFER_IMAGE_BITMAP = LOAD_PREFER_IMAGE_BITMAP;
 exports.LineSegments = LineSegments;
 exports.LinearValue = LinearValue;
 exports.Material = Material;
@@ -31544,7 +31464,6 @@ exports.base64ToFile = base64ToFile;
 exports.blend = blend;
 exports.calculateTranslation = calculateTranslation;
 exports.canvasPool = canvasPool;
-exports.closeImageBitMap = closeImageBitMap;
 exports.colorGradingFrag = colorGradingFrag;
 exports.colorStopsFromGradient = colorStopsFromGradient;
 exports.colorToArr = colorToArr$1;
@@ -31623,7 +31542,6 @@ exports.loadAVIFOptional = loadAVIFOptional;
 exports.loadBinary = loadBinary;
 exports.loadBlob = loadBlob;
 exports.loadImage = loadImage;
-exports.loadImageBitmap = loadImageBitmap;
 exports.loadMedia = loadMedia;
 exports.loadVideo = loadVideo;
 exports.loadWebPOptional = loadWebPOptional;