Photo dome on mobile phones has a visible seam when useDirectMapping-option is false

Panuchka · October 1, 2019, 11:55am

The seam can be seen in playground example:
https://www.babylonjs-playground.com/#14KRGG#4

Happens on Android and iPhone devices. Please help !

EDIT: Here’s a screenshot. You can see the seam almost in the middle of the picture. Taken on a physical mobile device (Android, Huawei Mate 20 Pro)
Screenshot_20191001_160407|270x500

Panuchka · October 7, 2019, 7:42am

Any takers on this? Should I make a Github issue instead?

Deltakosh · October 7, 2019, 2:03pm

Hey sorry somehow I missed your post.

I do not repro on my iphone unfortunately. It seems driver related.
Can you tell me which phone precisely are you using? Like OS version, etc…

Gijs · October 7, 2019, 5:33pm

The seam shows on my desktop pc as well, but it’s smaller. I looked for the cause but couldn’t find it .

I have Intel HD Graphics 630.

What I’ve looked at:

github.com

BabylonJS/Babylon.js/blob/5a8887660c28975a31408214bd37b24e0b030d89/src/Helpers/photoDome.ts#L52


 */

public get photoTexture(): Texture {

    return this._photoTexture;

}



public set photoTexture(value: Texture) {

    if (this._photoTexture === value) {

        return;

    }

    this._photoTexture = value;

    if (this._useDirectMapping) {

        this._photoTexture.wrapU = Texture.CLAMP_ADDRESSMODE;

        this._photoTexture.wrapV = Texture.CLAMP_ADDRESSMODE;

        this._material.diffuseTexture = this._photoTexture;

    } else {

        this._photoTexture.coordinatesMode = Texture.FIXED_EQUIRECTANGULAR_MIRRORED_MODE; // matches orientation

        this._photoTexture.wrapV = Texture.CLAMP_ADDRESSMODE;

        this._material.reflectionTexture = this._photoTexture;

    }

}

So without directMapping, it sets a reflection texture instead of a diffuse texture. It sets the wrapV to clamp, but not the wrapU, but setting that manually in the PG doesn’t solve it.

github.com

BabylonJS/Babylon.js/blob/5fcdaa505d863d5f94ecd25f90925e86c851c03b/src/Shaders/ShadersInclude/reflectionFunction.fx#L28


{

	float lon = atan(direction.z, direction.x);

	float lat = acos(direction.y);

	vec2 sphereCoords = vec2(lon, lat) * RECIPROCAL_PI2 * 2.0;

	float s = sphereCoords.x * 0.5 + 0.5;

	float t = sphereCoords.y;



	return vec3(s, t, 0);	

}



vec3 computeMirroredFixedEquirectangularCoords(vec4 worldPos, vec3 worldNormal, vec3 direction)

{

	float lon = atan(direction.z, direction.x);

	float lat = acos(direction.y);

	vec2 sphereCoords = vec2(lon, lat) * RECIPROCAL_PI2 * 2.0;

	float s = sphereCoords.x * 0.5 + 0.5;

	float t = sphereCoords.y;



	return vec3(1.0 - s, t, 0);	

}

I guess this is where it gets the uv coordinates for the reflection?

The seam is right on the outer ends of the texture, so I thought maybe there’s some floating randomness of from which end of the texture to grab a pixel. Could that be?

Deltakosh · October 7, 2019, 9:00pm

The really weird thing is that I cannot repro on any of my devices
Does anyone else can see it on their computer?
Pinging @PirateJC @sebavan @bghgary @syntheticmagus @Drigax @PolygonalSun @thomlucc @Cedric

Drigax · October 7, 2019, 9:04pm

Tested on my desktop on Firefox and LG V20 phone using Firefox Mobile, but I don’t see the seam either

Cedric · October 7, 2019, 9:13pm

Tested on GalaxyS8 Edge and Chrome, my pc using Edge, Chrome and Firefox and I didn’t see the seam

sebavan · October 7, 2019, 9:15pm

Works for me as well

PirateJC · October 7, 2019, 9:16pm

Just tested on an iPhone 8 Plus and I can repro. I see the seam.

Deltakosh · October 7, 2019, 9:23pm

Ok I tried:

with better precision (reducing maxZ): nope
with and without wrapping: nope

Deltakosh · October 7, 2019, 9:58pm

I’m afraid yes.

Deltakosh · October 7, 2019, 10:03pm

Can you try with a smaller file? just in case the texture is too big and was scaled down

PolygonalSun · October 8, 2019, 6:03pm

@Deltakosh, I know that I’m a bit late to the party but I was unable to repro on both my PC and my phone (Pixel 3)

Panuchka · October 9, 2019, 8:59am

Hi everyone and thank you for trying to figure this out!
So far I’ve managed to reproduce this with at least:

Huawei Mate20 Pro (tested with Chrome and Firefox)
iPhone SE (tested with Safari)
iPhone XS (tested with Safari)
Samsung Galaxy S10+ (tested with Chrome and Firefox)

Would be nice to have a fix for this, trying to push Babylonjs into our project since I personally love it

sebavan · October 9, 2019, 4:40pm

Found the issue lying inside some drivers

https://www.babylonjs-playground.com/#14KRGG#166

The fix will be in the next build shortly

jamessimo · November 3, 2023, 10:04am

Hello, sorry for necro bumping a resolved topic, but I found the seam again but only when changing the photo domes texture

I was looking at a playground for changing texture on a photo dome and I noticed that a seam appears on the sphere when changing texture.

To reproduce. First, have a look around and you’ll notice there’s no seam/issue. Then tap on the little green circle which changes the photo texture and you’ll notice that there is now a seam on the new texture. Click the same button again and it will take you back to the original texture but the scene persists (move the camera if you dont see it.)

I found this thread when making a new bug thread on this issue so I update this topic. I tried using direct mapping which does remove the problem but then everything gets messed up as the photos are upside down facing the wrong direction.

My GPU is
AMD Radeon Pro 5300M 4 GB
Intel UHD Graphics 630 1536 MB

(this is on a MacBook pro 16’ from 2019 running OSX 12.6) .

I assume a work around is to destroy and rebuild the dome on image change but wanted to see if there is a simple fix I am missing.

sebavan · November 3, 2023, 2:27pm

You need to create the texture the same way the photodome does https://www.babylonjs-playground.com/#14KRGG#958

jamessimo · November 4, 2023, 2:19pm

So this fixes it not happening on the next scene, but the seam still appears if I click the button again going to the original texture… Which is strange as its not there when its originally loaded in…

jamessimo · November 4, 2023, 2:23pm

a fix I found was setting the textures sampling to 2 or above will remedy this https://www.babylonjs-playground.com/#14KRGG#959

Topic		Replies	Views
Photodome become like a ball in mobile Questions	7	959	May 31, 2019
DynamicTexture.wrapU=WRAP_ADDRESSMODE does not work Bugs material	2	538	January 20, 2022
DeviceOrientationCamera + skybox + mobile = unexpected results Questions	11	652	March 25, 2020
Disappearing meshes on mobile device Questions	5	680	October 11, 2019
VideoTexture mobile shows tons of lines, no real video Questions material	11	305	May 9, 2023

Photo dome on mobile phones has a visible seam when useDirectMapping-option is false

Related topics