refactor: rename gap to trim

Author: WoodNeck

demo/examples/panoviewer/projection-type/cubemap_image.html

@@ -66,7 +66,7 @@ <h2>Support variety cubemap format</h2>
         projectionType: "cubemap",
         image: "../../img/test_cube_3x2_RLUDFB.jpg",
         cubemapConfig: {
-          gap: 3
+          trim: 3
         }
     });
 

demo/examples/panoviewer/projection-type/cubestrip_3x2_image.html

@@ -65,7 +65,7 @@ <h2>Support variety cubestrip format</h2>
         projectionType: "cubestrip",
         image: "../../img/test_cube_3x2_RLUDFB.jpg",
         cubemapConfig: {
-          gap: 3
+          trim: 3
         }
     });
 

demo/examples/panoviewer/projection-type/youtube.html

@@ -75,7 +75,7 @@ <h2>EAC Format(Youtube) is supported also.</h2>
             cubemapConfig: {
                 order: "BLFDRU",
                 tileConfig: [{rotation: 0}, {rotation: 0}, {rotation: 0}, {rotation: 0}, {rotation: -90}, {rotation: 180}],
-                gap: 3
+                trim: 3
             }
         });
 

src/PanoImageRenderer/PanoImageRenderer.ts

@@ -213,7 +213,7 @@ class PanoImageRenderer extends Component<{
           flipHorizontal: false,
           rotation: 0
         },
-        gap: 0
+        trim: 0
       },
       ...cubemapConfig
     };

src/PanoImageRenderer/renderer/CubeRenderer.ts

@@ -88,7 +88,7 @@ class CubeRenderer extends Renderer {
     const tileConfig = this._extractTileConfig(imageConfig);
     const elemSize = 3;
     const vertexPerTile = 4;
-    const { gap } = imageConfig;
+    const { trim } = imageConfig;
 
     const texCoords = vertexOrder.split("")
       .map(face => tileConfig[order.indexOf(face)])
@@ -114,7 +114,7 @@ class CubeRenderer extends Renderer {
         }
         return tileTemp;
       })
-      .map(coord => this._shrinkCoord({ image, faceCoords: coord, gap }))
+      .map(coord => this._shrinkCoord({ image, faceCoords: coord, trim }))
       .reduce((acc: number[], val: number[][]) => [
         ...acc,
         ...val.reduce((coords, coord) => [...coords, ...coord], [])
@@ -258,16 +258,16 @@ void main(void) {
   private _shrinkCoord(coordData: {
     image: HTMLImageElement | HTMLVideoElement;
     faceCoords: number[][];
-    gap: number
+    trim: number
   }) {
-    const { image, faceCoords, gap } = coordData;
+    const { image, faceCoords, trim } = coordData;
 
     const inputTextureSize = Array.isArray(image)
       ? this.getDimension(image[0]).width
       : this.getSourceTileSize(image);
 
-    // Shrink by "gap" px
-    const SHRINK_MULTIPLIER = 1 - gap * (2 / inputTextureSize);
+    // Shrink by "trim" px
+    const SHRINK_MULTIPLIER = 1 - trim * (2 / inputTextureSize);
 
     const axisMultipliers = [0, 1, 2].map(axisIndex => {
       const axisDir = Math.sign(faceCoords[0][axisIndex]);

src/PanoImageRenderer/renderer/CubeStripRenderer.ts

@@ -153,7 +153,7 @@ void main(void) {
     const rows = 2;
 
     const textureSize = this.getDimension(image);
-    const { gap } = imageConfig;
+    const { trim } = imageConfig;
 
     const order = imageConfig.order || "RLUDFB";
     let coords: number[][] = [];
@@ -177,7 +177,7 @@ void main(void) {
     // Transform Coord By Flip & Rotation
     coords = coords
     // shrink coord to avoid pixel bleeding
-      .map(coord => this._shrinkCoord(coord, textureSize, gap))
+      .map(coord => this._shrinkCoord(coord, textureSize, trim))
       .map((coord, i) => this._transformCoord(coord, tileConfigs[i]));
 
     // vertices 에서 지정된 순서대로 그대로 그리기 위해 vertex 의 순서를 BFUDRL 로 재배치
@@ -226,12 +226,12 @@ void main(void) {
     return newCoord;
   }
 
-  private _shrinkCoord(coord: number[], textureSize: { width: number; height: number }, gap: number) {
+  private _shrinkCoord(coord: number[], textureSize: { width: number; height: number }, trim: number) {
     const { width, height } = textureSize;
 
-    // Shrink by "gap" px
-    const SHRINK_Y = gap * (1 / height);
-    const SHRINK_X = gap * (1 / width);
+    // Shrink by "trim" px
+    const SHRINK_Y = trim * (1 / height);
+    const SHRINK_X = trim * (1 / width);
 
     return [
       coord[0] + SHRINK_X, coord[1] + SHRINK_Y,

src/PanoViewer/PanoViewer.ts

@@ -225,10 +225,10 @@ class PanoViewer extends Component<PanoViewerEvent> {
    * @param {Object} options.cubemapConfig Config cubemap projection layout. It is applied when projectionType is {@link eg.view360.PanoViewer.PROJECTION_TYPE.CUBEMAP} or {@link eg.view360.PanoViewer.PROJECTION_TYPE.CUBESTRIP}<ko>cubemap projection type 의 레이아웃을 설정한다. 이 설정은 ProjectionType이 {@link eg.view360.PanoViewer.PROJECTION_TYPE.CUBEMAP} 혹은 {@link eg.view360.PanoViewer.PROJECTION_TYPE.CUBESTRIP} 인 경우에만 적용된다.</ko>
    * @param {Object} [options.cubemapConfig.order = "RLUDBF"(ProjectionType === CUBEMAP) | "RLUDFB" (ProjectionType === CUBESTRIP)] Order of cubemap faces <ko>Cubemap 형태의 이미지가 배치된 순서</ko>
    * @param {Object} [options.cubemapConfig.tileConfig = { flipHorizontal:false, rotation: 0 }] Setting about rotation angle(degree) and whether to flip horizontal for each cubemap faces, if you put this object as a array, you can set each faces with different setting. For example, [{flipHorizontal:false, rotation:90}, {flipHorizontal: true, rotation: 180}, ...]<ko>각 Cubemap 면에 대한 회전 각도/좌우반전 여부 설정, 객체를 배열 형태로 지정하여 각 면에 대한 설정을 다르게 지정할 수도 있다. 예를 들어 [{flipHorizontal:false, rotation:90}, {flipHorizontal: true, rotation: 180}, ...]과 같이 지정할 수 있다.</ko>
+   * @param {Number} [options.cubemapConfig.trim=0] A px distance to discard from each tile side. You can use this value to avoid graphical glitch at where tiles are connected. This option is available when there's only one texture.<ko>각 타일의 끝으로부터 폐기할 px 거리. 이 옵션을 사용하여 타일의 접합부에서 나타나는 그래픽 결함을 완화할 수 있습니다. 이 옵션은 한 개의 텍스쳐만 사용할 때 적용 가능합니다.</ko>
    * @param {String} [options.stereoFormat="3dv"] Contents format of the stereoscopic equirectangular projection.<br/>See {@link eg.view360.PanoViewer.STEREO_FORMAT}.<ko>Stereoscopic equirectangular projection type의 콘텐츠 포맷을 설정한다.<br/>{@link eg.view360.PanoViewer.STEREO_FORMAT} 참조.</ko>
    * @param {Number} [options.width=width of container] the viewer's width. (in px) <ko>뷰어의 너비 (px 단위)</ko>
    * @param {Number} [options.height=height of container] the viewer's height.(in px) <ko>뷰어의 높이 (px 단위)</ko>
-   *
    * @param {Number} [options.yaw=0] Initial Yaw of camera (in degree) <ko>카메라의 초기 Yaw (degree 단위)</ko>
    * @param {Number} [options.pitch=0] Initial Pitch of camera (in degree) <ko>카메라의 초기 Pitch (degree 단위)</ko>
    * @param {Number} [options.fov=65] Initial vertical field of view of camera (in degree) <ko>카메라의 초기 수직 field of view (degree 단위)</ko>
@@ -336,7 +336,7 @@ class PanoViewer extends Component<PanoViewerEvent> {
           flipHorizontal: false,
           rotation: 0
         },
-        gap: 0
+        trim: 0
       }, ...options.cubemapConfig
     };
     this._stereoFormat = options.stereoFormat || STEREO_FORMAT.TOP_BOTTOM;
@@ -551,7 +551,7 @@ class PanoViewer extends Component<PanoViewerEvent> {
           flipHorizontal: false,
           rotation: 0
         },
-        gap: 0
+        trim: 0
       }, ...param.cubemapConfig
     };
     const stereoFormat = param.stereoFormat || STEREO_FORMAT.TOP_BOTTOM;

src/types.ts

@@ -8,7 +8,7 @@ export type TileConfig = {
 export interface CubemapConfig {
   order: string;
   tileConfig: TileConfig | TileConfig[];
-  gap: number;
+  trim: number;
 }
 
 export type TypedArray = Int8Array | Uint8Array | Int16Array | Uint16Array | Int32Array | Uint32Array | Uint8ClampedArray | Float32Array | Float64Array;