Skip to content

Commit

Permalink
refactor: rename gap to trim
Browse files Browse the repository at this point in the history
  • Loading branch information
WoodNeck committed Apr 27, 2021
1 parent 5d22a11 commit edf9453
Show file tree
Hide file tree
Showing 13 changed files with 46 additions and 46 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ <h2>Support variety cubemap format</h2>
projectionType: "cubemap",
image: "../../img/test_cube_3x2_RLUDFB.jpg",
cubemapConfig: {
gap: 3
trim: 3
}
});

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ <h2>Support variety cubestrip format</h2>
projectionType: "cubestrip",
image: "../../img/test_cube_3x2_RLUDFB.jpg",
cubemapConfig: {
gap: 3
trim: 3
}
});

Expand Down
2 changes: 1 addition & 1 deletion demo/examples/panoviewer/projection-type/youtube.html
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
});

Expand Down
2 changes: 1 addition & 1 deletion src/PanoImageRenderer/PanoImageRenderer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,7 @@ class PanoImageRenderer extends Component<{
flipHorizontal: false,
rotation: 0
},
gap: 0
trim: 0
},
...cubemapConfig
};
Expand Down
12 changes: 6 additions & 6 deletions src/PanoImageRenderer/renderer/CubeRenderer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)])
Expand All @@ -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], [])
Expand Down Expand Up @@ -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]);
Expand Down
12 changes: 6 additions & 6 deletions src/PanoImageRenderer/renderer/CubeStripRenderer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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[][] = [];
Expand All @@ -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 로 재배치
Expand Down Expand Up @@ -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,
Expand Down
6 changes: 3 additions & 3 deletions src/PanoViewer/PanoViewer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
52 changes: 26 additions & 26 deletions test/unit/PanoImageRenderer/PanoImageRenderer.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -676,67 +676,67 @@ describe("PanoImageRenderer", () => {
expect(result.success).to.be.equal(true);
});

IT("cubemap 3x2 - gap", async () => {
IT("cubemap 3x2 - trim", async () => {
// Given
const sourceImg = new Image();

sourceImg.src = "./images/test_cube_3x2_small.png";

const inst_gap0 = createPanoImageRenderer(sourceImg, false, "cubemap", { gap: 0, order: "RLUDFB" });
const inst_gap2 = createPanoImageRenderer(sourceImg, false, "cubemap", { gap: 2, order: "RLUDFB" });
const inst_trim0 = createPanoImageRenderer(sourceImg, false, "cubemap", { trim: 0, order: "RLUDFB" });
const inst_trim2 = createPanoImageRenderer(sourceImg, false, "cubemap", { trim: 2, order: "RLUDFB" });

await Promise.all([
new Promise(res => inst_gap0.on("imageLoaded", res)),
new Promise(res => inst_gap2.on("imageLoaded", res))
new Promise(res => inst_trim0.on("imageLoaded", res)),
new Promise(res => inst_trim2.on("imageLoaded", res))
]);

// When
await inst_gap0.bindTexture();
await inst_gap2.bindTexture();
await inst_trim0.bindTexture();
await inst_trim2.bindTexture();

// Then
const result_gap0 = await renderAndCompareSequentially(
inst_gap0, [[135, -45, 30, `./images/PanoViewer/test_cube_gap_0${suffix}`, threshold]]
const result_trim0 = await renderAndCompareSequentially(
inst_trim0, [[135, -45, 30, `./images/PanoViewer/test_cube_trim_0${suffix}`, threshold]]
);

const result_gap2 = await renderAndCompareSequentially(
inst_gap2, [[135, -45, 30, `./images/PanoViewer/test_cube_gap_2${suffix}`, threshold]]
const result_trim2 = await renderAndCompareSequentially(
inst_trim2, [[135, -45, 30, `./images/PanoViewer/test_cube_trim_2${suffix}`, threshold]]
);

expect(result_gap0.success).to.be.equal(true);
expect(result_gap2.success).to.be.equal(true);
expect(result_trim0.success).to.be.equal(true);
expect(result_trim2.success).to.be.equal(true);
});

IT("cubestrip 3x2 - gap", async () => {
IT("cubestrip 3x2 - trim", async () => {
// Given
const sourceImg = new Image();

sourceImg.src = "./images/test_cube_3x2_small.png";
"RLUDFB"

const inst_gap0 = createPanoImageRenderer(sourceImg, false, "cubestrip", { gap: 0 });
const inst_gap2 = createPanoImageRenderer(sourceImg, false, "cubestrip", { gap: 2 });
const inst_trim0 = createPanoImageRenderer(sourceImg, false, "cubestrip", { trim: 0 });
const inst_trim2 = createPanoImageRenderer(sourceImg, false, "cubestrip", { trim: 2 });

await Promise.all([
new Promise(res => inst_gap0.on("imageLoaded", res)),
new Promise(res => inst_gap2.on("imageLoaded", res))
new Promise(res => inst_trim0.on("imageLoaded", res)),
new Promise(res => inst_trim2.on("imageLoaded", res))
]);

// When
await inst_gap0.bindTexture();
await inst_gap2.bindTexture();
await inst_trim0.bindTexture();
await inst_trim2.bindTexture();

// Then
const result_gap0 = await renderAndCompareSequentially(
inst_gap0, [[135, -45, 30, `./images/PanoViewer/test_cube_gap_0${suffix}`, threshold]]
const result_trim0 = await renderAndCompareSequentially(
inst_trim0, [[135, -45, 30, `./images/PanoViewer/test_cube_trim_0${suffix}`, threshold]]
);

const result_gap2 = await renderAndCompareSequentially(
inst_gap2, [[135, -45, 30, `./images/PanoViewer/test_cube_gap_2${suffix}`, threshold]]
const result_trim2 = await renderAndCompareSequentially(
inst_trim2, [[135, -45, 30, `./images/PanoViewer/test_cube_trim_2${suffix}`, threshold]]
);

expect(result_gap0.success).to.be.equal(true);
expect(result_gap2.success).to.be.equal(true);
expect(result_trim0.success).to.be.equal(true);
expect(result_trim2.success).to.be.equal(true);
});

// This test will fail on iOS safari, because video will not start load without use interaction.
Expand Down

0 comments on commit edf9453

Please sign in to comment.