完善demo

assets/effects/sprite-gaussian-blur.effect

@@ -14,14 +14,18 @@ CCEffect %{
       properties:
         texture: { value: white }
         alphaThreshold: { value: 0.5 }
-        # # 灰化程度
+        # # 标准方差值
-        # grayLevel: {
+        # stDev: {
-        #   value: 1.0,
+        #   value: 0.84089642,
         #   inspector: {
-        #     tooltip: "灰化程度",
+        #     tooltip: "标准方差值"
-        #     range: [0.0, 1.0]
         #   }
         # }
+
+        # # 纹理尺寸
+        # textureSize: { 
+        #   value: []
+        # }
 }%
 
 
@@ -78,16 +82,20 @@ CCProgram fs %{
   #define e 2.718281828459045
 
   // 定义标准方差值
-  #define stdDev 0.84089642
+  #define stDev 0.84089642
-  // #define stdDev 1.5
+  // #define stDev 10.0
 
   // 定义π
   #define pi 3.141592653589793
 
-  // // 接收外部变量
+  // 接收外部变量
-  // uniform GaussianBlur {
+  uniform GaussianBlur {
-  // }
+    // // 纹理尺寸（宽 x 高）（px）
+    // vec2 size;
 
+    // // 标准方差值
+    // float stDev;
+  }
 
   /**
    * 获取权重(对应二维高斯函数公式)
@@ -96,7 +104,7 @@ CCProgram fs %{
    * @param y
    */
   float getWeight(float x, float y) {
-    return (1.0 / (2.0 * pi * pow(stdDev, 2.0))) * pow(1.0 / e, (pow(x, 2.0) + pow(y, 2.0)) / (2.0 * pow(stdDev, 2.0)));
+    return (1.0 / (2.0 * pi * pow(stDev, 2.0))) * pow(1.0 / e, (pow(x, 2.0) + pow(y, 2.0)) / (2.0 * pow(stDev, 2.0)));
   }
 
   /**
@@ -124,19 +132,26 @@ CCProgram fs %{
 
     gl_FragColor = o;
     #if ENABLE_GAUSSIAN_BLUR
-      const float size = ceil(stdDev * 6.0);
+
-      float divider = 0.01; 
+      // 先计算所有权重的和
+      const float size = ceil(stDev * 6.0);
+      const float halfSize = floor(size / 2.0);
       float totalWeight = 0.0; 
-      for(float x = -floor(size / 2.0); x<= floor(size/ 2.0); x++) {
+      for(float x = -halfSize; x<= halfSize; x++) {
-        for (float y = -floor(size / 2.0); y<= floor(size/ 2.0); y++) {
+        for (float y = -halfSize; y<= halfSize; y++) {
           totalWeight += getWeight(x, y);
         }
       }
 
+      // 加权平均值
       vec4 finalColor = vec4(0.0, 0.0, 0.0, 0.0);
-      for(float x = -floor(size / 2.0); x<= floor(size/ 2.0); x++) {
+      float divider = 0.01; 
-        for (float y = -floor(size / 2.0); y<= floor(size/ 2.0); y++) {
+      for(float x = -halfSize; x<= halfSize; x++) {
+        for (float y = -halfSize; y<= halfSize; y++) {
+          // 求出对应坐标的真正权重（对应权重矩阵）
           float weight = getAverageWeight(x, y, totalWeight);
+
+          // 求出对应坐标像素颜色值的加权值
           finalColor += texture(texture, v_uv0 + vec2(divider * x, divider * y)) * weight;
         }
       }

assets/effects/sprite-gaussian-blur.effect.meta

@@ -5,11 +5,11 @@
     {
       "glsl1": {
         "vert": "\nprecision highp float;\nuniform mat4 cc_matViewProj;\nuniform mat4 cc_matWorld;\n\nattribute vec3 a_position;\nattribute vec4 a_color;\nvarying vec4 v_color;\n\n#if USE_TEXTURE\nattribute vec2 a_uv0;\nvarying vec2 v_uv0;\n#endif\n\nvoid main () {\n  vec4 pos = vec4(a_position, 1);\n\n  #if CC_USE_MODEL\n  pos = cc_matViewProj * cc_matWorld * pos;\n  #else\n  pos = cc_matViewProj * pos;\n  #endif\n\n  #if USE_TEXTURE\n  v_uv0 = a_uv0;\n  #endif\n\n  v_color = a_color;\n\n  gl_Position = pos;\n}\n",
-        "frag": "\nprecision highp float;\n\n#if USE_ALPHA_TEST\n  \n  uniform float alphaThreshold;\n#endif\n\nvoid ALPHA_TEST (in vec4 color) {\n  #if USE_ALPHA_TEST\n      if (color.a < alphaThreshold) discard;\n  #endif\n}\n\nvoid ALPHA_TEST (in float alpha) {\n  #if USE_ALPHA_TEST\n      if (alpha < alphaThreshold) discard;\n  #endif\n}\n\nvarying vec4 v_color;\n\n#if USE_TEXTURE\nvarying vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n\n#if ENABLE_GAUSSIAN_BLUR\n\n/**\n * 获取权重(对应二维高斯函数公式)\n * \n * @param x   \n * @param y\n */\nfloat getWeight(float x, float y) {\n  return (1.0 / (2.0 * 3.141592653589793 * pow(0.84089642, 2.0))) * pow(1.0 / 2.718281828459045, (pow(x, 2.0) + pow(y, 2.0)) / (2.0 * pow(0.84089642, 2.0)));\n}\n\n/**\n * 获取权重的加权平均值\n */\nfloat getAverageWeight(float x, float y, float totalWeight) {\n  return getWeight(x, y) / totalWeight;\n}\n\n#endif\n\nvoid main () {\n  vec4 o = vec4(1, 1, 1, 1);\n\n  #if USE_TEXTURE\n  o *= texture2D(texture, v_uv0);\n    #if CC_USE_ALPHA_ATLAS_TEXTURE\n    o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;\n    #endif\n  #endif\n\n  o *= v_color;\n\n  ALPHA_TEST(o);\n\n  gl_FragColor = o;\n  #if ENABLE_GAUSSIAN_BLUR\n    const float size = ceil(0.84089642 * 6.0);\n    float divider = 0.01; \n    float totalWeight = 0.0; \n    for(float x = -floor(size / 2.0); x<= floor(size/ 2.0); x++) {\n      for (float y = -floor(size / 2.0); y<= floor(size/ 2.0); y++) {\n        totalWeight += getWeight(x, y);\n      }\n    }\n\n    vec4 finalColor = vec4(0.0, 0.0, 0.0, 0.0);\n    for(float x = -floor(size / 2.0); x<= floor(size/ 2.0); x++) {\n      for (float y = -floor(size / 2.0); y<= floor(size/ 2.0); y++) {\n        float weight = getAverageWeight(x, y, totalWeight);\n        finalColor += texture2D(texture, v_uv0 + vec2(divider * x, divider * y)) * weight;\n      }\n    }\n    gl_FragColor = finalColor;\n  #endif\n}\n"
+        "frag": "\nprecision highp float;\n\n#if USE_ALPHA_TEST\n  \n  uniform float alphaThreshold;\n#endif\n\nvoid ALPHA_TEST (in vec4 color) {\n  #if USE_ALPHA_TEST\n      if (color.a < alphaThreshold) discard;\n  #endif\n}\n\nvoid ALPHA_TEST (in float alpha) {\n  #if USE_ALPHA_TEST\n      if (alpha < alphaThreshold) discard;\n  #endif\n}\n\nvarying vec4 v_color;\n\n#if USE_TEXTURE\nvarying vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n\n#if ENABLE_GAUSSIAN_BLUR\n\n/**\n * 获取权重(对应二维高斯函数公式)\n * \n * @param x   \n * @param y\n */\nfloat getWeight(float x, float y) {\n  return (1.0 / (2.0 * 3.141592653589793 * pow(0.84089642, 2.0))) * pow(1.0 / 2.718281828459045, (pow(x, 2.0) + pow(y, 2.0)) / (2.0 * pow(0.84089642, 2.0)));\n}\n\n/**\n * 获取权重的加权平均值\n */\nfloat getAverageWeight(float x, float y, float totalWeight) {\n  return getWeight(x, y) / totalWeight;\n}\n\n#endif\n\nvoid main () {\n  vec4 o = vec4(1, 1, 1, 1);\n\n  #if USE_TEXTURE\n  o *= texture2D(texture, v_uv0);\n    #if CC_USE_ALPHA_ATLAS_TEXTURE\n    o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;\n    #endif\n  #endif\n\n  o *= v_color;\n\n  ALPHA_TEST(o);\n\n  gl_FragColor = o;\n  #if ENABLE_GAUSSIAN_BLUR\n\n    const float size = ceil(0.84089642 * 6.0);\n    const float halfSize = floor(size / 2.0);\n    float totalWeight = 0.0; \n    for(float x = -halfSize; x<= halfSize; x++) {\n      for (float y = -halfSize; y<= halfSize; y++) {\n        totalWeight += getWeight(x, y);\n      }\n    }\n\n    vec4 finalColor = vec4(0.0, 0.0, 0.0, 0.0);\n    float divider = 0.01; \n    for(float x = -halfSize; x<= halfSize; x++) {\n      for (float y = -halfSize; y<= halfSize; y++) {\n\n        float weight = getAverageWeight(x, y, totalWeight);\n\n        finalColor += texture2D(texture, v_uv0 + vec2(divider * x, divider * y)) * weight;\n      }\n    }\n    gl_FragColor = finalColor;\n  #endif\n}\n"
       },
       "glsl3": {
         "vert": "\nprecision highp float;\nuniform CCGlobal {\n  vec4 cc_time;\n\n  vec4 cc_screenSize;\n\n  vec4 cc_screenScale;\n\n  vec4 cc_nativeSize;\n\n  mat4 cc_matView;\n  mat4 cc_matViewInv;\n  mat4 cc_matProj;\n  mat4 cc_matProjInv;\n  mat4 cc_matViewProj;\n  mat4 cc_matViewProjInv;\n  vec4 cc_cameraPos;\n\n  vec4 cc_exposure;\n\n  vec4 cc_mainLitDir;\n\n  vec4 cc_mainLitColor;\n\n  vec4 cc_ambientSky;\n  vec4 cc_ambientGround;\n};\nuniform CCLocal {\n  mat4 cc_matWorld;\n  mat4 cc_matWorldIT;\n};\n\nin vec3 a_position;\nin vec4 a_color;\nout vec4 v_color;\n\n#if USE_TEXTURE\nin vec2 a_uv0;\nout vec2 v_uv0;\n#endif\n\nvoid main () {\n  vec4 pos = vec4(a_position, 1);\n\n  #if CC_USE_MODEL\n  pos = cc_matViewProj * cc_matWorld * pos;\n  #else\n  pos = cc_matViewProj * pos;\n  #endif\n\n  #if USE_TEXTURE\n  v_uv0 = a_uv0;\n  #endif\n\n  v_color = a_color;\n\n  gl_Position = pos;\n}\n",
-        "frag": "\nprecision highp float;\n\n#if USE_ALPHA_TEST\n  \n  uniform ALPHA_TEST {\n    float alphaThreshold;\n  }\n#endif\n\nvoid ALPHA_TEST (in vec4 color) {\n  #if USE_ALPHA_TEST\n      if (color.a < alphaThreshold) discard;\n  #endif\n}\n\nvoid ALPHA_TEST (in float alpha) {\n  #if USE_ALPHA_TEST\n      if (alpha < alphaThreshold) discard;\n  #endif\n}\n\nin vec4 v_color;\n\n#if USE_TEXTURE\nin vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n\n#if ENABLE_GAUSSIAN_BLUR\n\n/**\n * 获取权重(对应二维高斯函数公式)\n * \n * @param x   \n * @param y\n */\nfloat getWeight(float x, float y) {\n  return (1.0 / (2.0 * 3.141592653589793 * pow(0.84089642, 2.0))) * pow(1.0 / 2.718281828459045, (pow(x, 2.0) + pow(y, 2.0)) / (2.0 * pow(0.84089642, 2.0)));\n}\n\n/**\n * 获取权重的加权平均值\n */\nfloat getAverageWeight(float x, float y, float totalWeight) {\n  return getWeight(x, y) / totalWeight;\n}\n\n#endif\n\nvoid main () {\n  vec4 o = vec4(1, 1, 1, 1);\n\n  #if USE_TEXTURE\n  o *= texture(texture, v_uv0);\n    #if CC_USE_ALPHA_ATLAS_TEXTURE\n    o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;\n    #endif\n  #endif\n\n  o *= v_color;\n\n  ALPHA_TEST(o);\n\n  gl_FragColor = o;\n  #if ENABLE_GAUSSIAN_BLUR\n    const float size = ceil(0.84089642 * 6.0);\n    float divider = 0.01; \n    float totalWeight = 0.0; \n    for(float x = -floor(size / 2.0); x<= floor(size/ 2.0); x++) {\n      for (float y = -floor(size / 2.0); y<= floor(size/ 2.0); y++) {\n        totalWeight += getWeight(x, y);\n      }\n    }\n\n    vec4 finalColor = vec4(0.0, 0.0, 0.0, 0.0);\n    for(float x = -floor(size / 2.0); x<= floor(size/ 2.0); x++) {\n      for (float y = -floor(size / 2.0); y<= floor(size/ 2.0); y++) {\n        float weight = getAverageWeight(x, y, totalWeight);\n        finalColor += texture(texture, v_uv0 + vec2(divider * x, divider * y)) * weight;\n      }\n    }\n    gl_FragColor = finalColor;\n  #endif\n}\n"
+        "frag": "\nprecision highp float;\n\n#if USE_ALPHA_TEST\n  \n  uniform ALPHA_TEST {\n    float alphaThreshold;\n  }\n#endif\n\nvoid ALPHA_TEST (in vec4 color) {\n  #if USE_ALPHA_TEST\n      if (color.a < alphaThreshold) discard;\n  #endif\n}\n\nvoid ALPHA_TEST (in float alpha) {\n  #if USE_ALPHA_TEST\n      if (alpha < alphaThreshold) discard;\n  #endif\n}\n\nin vec4 v_color;\n\n#if USE_TEXTURE\nin vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n\n#if ENABLE_GAUSSIAN_BLUR\n\nuniform GaussianBlur {\n\n}\n\n/**\n * 获取权重(对应二维高斯函数公式)\n * \n * @param x   \n * @param y\n */\nfloat getWeight(float x, float y) {\n  return (1.0 / (2.0 * 3.141592653589793 * pow(0.84089642, 2.0))) * pow(1.0 / 2.718281828459045, (pow(x, 2.0) + pow(y, 2.0)) / (2.0 * pow(0.84089642, 2.0)));\n}\n\n/**\n * 获取权重的加权平均值\n */\nfloat getAverageWeight(float x, float y, float totalWeight) {\n  return getWeight(x, y) / totalWeight;\n}\n\n#endif\n\nvoid main () {\n  vec4 o = vec4(1, 1, 1, 1);\n\n  #if USE_TEXTURE\n  o *= texture(texture, v_uv0);\n    #if CC_USE_ALPHA_ATLAS_TEXTURE\n    o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;\n    #endif\n  #endif\n\n  o *= v_color;\n\n  ALPHA_TEST(o);\n\n  gl_FragColor = o;\n  #if ENABLE_GAUSSIAN_BLUR\n\n    const float size = ceil(0.84089642 * 6.0);\n    const float halfSize = floor(size / 2.0);\n    float totalWeight = 0.0; \n    for(float x = -halfSize; x<= halfSize; x++) {\n      for (float y = -halfSize; y<= halfSize; y++) {\n        totalWeight += getWeight(x, y);\n      }\n    }\n\n    vec4 finalColor = vec4(0.0, 0.0, 0.0, 0.0);\n    float divider = 0.01; \n    for(float x = -halfSize; x<= halfSize; x++) {\n      for (float y = -halfSize; y<= halfSize; y++) {\n\n        float weight = getAverageWeight(x, y, totalWeight);\n\n        finalColor += texture(texture, v_uv0 + vec2(divider * x, divider * y)) * weight;\n      }\n    }\n    gl_FragColor = finalColor;\n  #endif\n}\n"
       }
     }
   ],

assets/scenes/GaussianBlurEffectScene.fire

@@ -78,10 +78,10 @@
     "_active": true,
     "_components": [
       {
-        "__id__": 45
+        "__id__": 47
       },
       {
-        "__id__": 46
+        "__id__": 48
       }
     ],
     "_prefab": null,
@@ -171,7 +171,7 @@
       "array": [
         0,
         0,
-        393.1755333181352,
+        351.60631393648214,
         0,
         0,
         0,
@@ -251,7 +251,7 @@
     "_active": true,
     "_components": [
       {
-        "__id__": 44
+        "__id__": 46
       }
     ],
     "_prefab": null,
@@ -1341,15 +1341,18 @@
       },
       {
         "__id__": 40
+      },
+      {
+        "__id__": 42
       }
     ],
     "_active": true,
     "_components": [
       {
-        "__id__": 42
+        "__id__": 44
       },
       {
-        "__id__": 43
+        "__id__": 45
       }
     ],
     "_prefab": null,
@@ -1364,7 +1367,7 @@
     "_contentSize": {
       "__type__": "cc.Size",
       "width": 384,
-      "height": 583.73
+      "height": 805.73
     },
     "_anchorPoint": {
       "__type__": "cc.Vec2",
@@ -1496,7 +1499,7 @@
   },
   {
     "__type__": "cc.Node",
-    "_name": "cocos_logo",
+    "_name": "gaussian_blur",
     "_objFlags": 0,
     "_parent": {
       "__id__": 29
@@ -1517,6 +1520,100 @@
       "b": 255,
       "a": 255
     },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 316,
+      "height": 210
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_trs": {
+      "__type__": "TypedArray",
+      "ctor": "Float64Array",
+      "array": [
+        0,
+        -177,
+        0,
+        0,
+        0,
+        0,
+        1,
+        1,
+        1,
+        1
+      ]
+    },
+    "_eulerAngles": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "_is3DNode": false,
+    "_groupIndex": 0,
+    "groupIndex": 0,
+    "_id": "0c1gWopWlLwLl+GiSUizBJ"
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 32
+    },
+    "_enabled": true,
+    "_materials": [
+      {
+        "__uuid__": "dd3d8f78-9b79-4ca7-9bf7-7a09f7b34108"
+      }
+    ],
+    "_srcBlendFactor": 770,
+    "_dstBlendFactor": 771,
+    "_spriteFrame": {
+      "__uuid__": "91f28953-0d5f-4379-9ae6-f3f6afb3241c"
+    },
+    "_type": 0,
+    "_sizeMode": 1,
+    "_fillType": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_atlas": null,
+    "_id": "eckV5v4lpDULdq2uKByFTd"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "cocos_logo",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 29
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 35
+      }
+    ],
+    "_prefab": null,
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
     "_contentSize": {
       "__type__": "cc.Size",
       "width": 195,
@@ -1532,7 +1629,7 @@
       "ctor": "Float64Array",
       "array": [
         0,
-        -207,
+        -429,
         0,
         0,
         0,
@@ -1561,7 +1658,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 32
+      "__id__": 34
     },
     "_enabled": true,
     "_materials": [
@@ -1599,7 +1696,7 @@
     "_active": true,
     "_components": [
       {
-        "__id__": 35
+        "__id__": 37
       }
     ],
     "_prefab": null,
@@ -1626,7 +1723,7 @@
       "ctor": "Float64Array",
       "array": [
         0,
-        -384,
+        -606,
         0,
         0,
         0,
@@ -1655,7 +1752,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 34
+      "__id__": 36
     },
     "_enabled": true,
     "_materials": [
@@ -1693,7 +1790,7 @@
     "_active": true,
     "_components": [
       {
-        "__id__": 37
+        "__id__": 39
       }
     ],
     "_prefab": null,
@@ -1720,7 +1817,7 @@
       "ctor": "Float64Array",
       "array": [
         0,
-        -451,
+        -673,
         0,
         0,
         0,
@@ -1749,7 +1846,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 36
+      "__id__": 38
     },
     "_enabled": true,
     "_materials": [
@@ -1787,7 +1884,7 @@
     "_active": true,
     "_components": [
       {
-        "__id__": 39
+        "__id__": 41
       }
     ],
     "_prefab": null,
@@ -1814,7 +1911,7 @@
       "ctor": "Float64Array",
       "array": [
         0,
-        -513.2,
+        -735.2,
         0,
         0,
         0,
@@ -1843,7 +1940,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 38
+      "__id__": 40
     },
     "_enabled": true,
     "_materials": [
@@ -1879,7 +1976,7 @@
     "_active": true,
     "_components": [
       {
-        "__id__": 41
+        "__id__": 43
       }
     ],
     "_prefab": null,
@@ -1906,7 +2003,7 @@
       "ctor": "Float64Array",
       "array": [
         0,
-        -567.065,
+        -789.065,
         0,
         0,
         0,
@@ -1935,7 +2032,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 40
+      "__id__": 42
     },
     "_enabled": true,
     "_materials": [
@@ -2000,7 +2097,7 @@
     "_layoutSize": {
       "__type__": "cc.Size",
       "width": 384,
-      "height": 583.73
+      "height": 805.73
     },
     "_resize": 1,
     "_N$layoutType": 2,

assets/scripts/GaussianBlurEffectScene.ts

@@ -8,6 +8,8 @@ export default class GaussianBlurEffectScene extends cc.Component {
     private _examplesParentNode: cc.Node = null;
 
     onLoad() {
+        cc.dynamicAtlasManager.enabled = false;
+        
         this._grayLevelSlider = cc.find("Canvas/Content/Controller/GrayLevelSlider/Slider").getComponent(cc.Slider);
         this._grayLevelSliderLabel = cc.find("Canvas/Content/Controller/GrayLevelSlider/ValueLabel").getComponent(cc.Label);
 

assets/textures/gaussian_blur.png.meta

@@ -0,0 +1,34 @@
+{
+  "ver": "2.3.3",
+  "uuid": "c879710d-0419-46be-bf96-92ee1ca52324",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "premultiplyAlpha": false,
+  "genMipmaps": false,
+  "packable": true,
+  "platformSettings": {},
+  "subMetas": {
+    "gaussian_blur": {
+      "ver": "1.0.4",
+      "uuid": "91f28953-0d5f-4379-9ae6-f3f6afb3241c",
+      "rawTextureUuid": "c879710d-0419-46be-bf96-92ee1ca52324",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": 0,
+      "offsetY": 0,
+      "trimX": 0,
+      "trimY": 0,
+      "width": 317,
+      "height": 178,
+      "rawWidth": 317,
+      "rawHeight": 178,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}