Picture Taper Effect

Questions
,
1

I am making a sphere dome through 360image
const imageUrl = “/textures/church360.jpg”; // replace with your 360 image URL
let dome = new PhotoDome(
“sphere”,
imageUrl,
{
resolution: 32, // Increase resolution
size: 500, // Adjust size as needed
useDirectMapping: false
},
scene
);
and added a character to this dome with some basicc movement
const loadModel = async () => {
const model = await SceneLoader.ImportMeshAsync(null, “https://assets.babylonjs.com/meshes/”, “HVGirl.glb”, scene);
const player = model.meshes[0];
player.scaling.setAll(0.1);

camera.lockedTarget = player; // target the player

let animating = false;

const walkAnim = scene.getAnimationGroupByName(“Walking”);
const walkBackAnim = scene.getAnimationGroupByName(“WalkingBack”);
const idleAnim = scene.getAnimationGroupByName(“Idle”);
const sambaAnim = scene.getAnimationGroupByName(“Samba”);

const playerWalkSpeed = 0.1;
const playerSpeedBackwards = 0.05;
const playerRotationSpeed = 0.03;

scene.onBeforeRenderObservable.add(() => {
var keydown = false;
// Manage the movements of the character (e.g. position, direction)
if (inputMap[“w”]) {
player.moveWithCollisions(player.forward.scaleInPlace(playerWalkSpeed));
keydown = true;
}
if (inputMap[“s”]) {
player.moveWithCollisions(player.forward.scaleInPlace(-playerSpeedBackwards));
keydown = true;
}
if (inputMap[“a”]) {
player.rotate(Vector3.Up(), -playerRotationSpeed);
keydown = true;
}
if (inputMap[“d”]) {
player.rotate(Vector3.Up(), playerRotationSpeed);
keydown = true;
}
if (inputMap[“b”]) {
keydown = true;
}

// Manage animations to be played
if (keydown) {
  if (!animating) {
    animating = true;
    if (inputMap["s"]) {
      // Walk backwards
      walkBackAnim.start(true, 1.0, walkBackAnim.from, walkBackAnim.to, false);
    } else if (inputMap["b"]) {
      // Samba!
      sambaAnim.start(true, 1.0, sambaAnim.from, sambaAnim.to, false);
    } else {
      // Walk
      walkAnim.start(true, 1.0, walkAnim.from, walkAnim.to, false);
    }
  }
} else {
  if (animating) {
    // Default animation is idle when no key is down
    idleAnim.start(true, 1.0, idleAnim.from, idleAnim.to, false);

    // Stop all animations besides Idle Anim when no key is down
    sambaAnim.stop();
    walkAnim.stop();
    walkBackAnim.stop();

    // Ensure animations are played only once per rendering loop
    animating = false;
  }
}

});
}
so in this when we start moving character in the dome the image start looking curved from the edges you can also see the code from

here
can any one suggest the solution to this problem

2

Hi and welcome to the Community,
To be honest I’m not 100% sure to understand …:

Do you mean that you can see the rounded mesh of the photodome (which is basically a sphere) when you move your character (along with its follow camera) from the center towards the edge of the photodome? Is that it? In case, what I can say - what do you expect? The photodome is essentially a projection on a sphere (generally equirectangular). When you move your camera from the center towards the side, the only way you could (attempt to) eliminate this distorsion is by modifying the uv (through a node material or a shader). But honestly, so far, I would not know of any that really works well and for all use cases. May be I missed it. May be someone else would know about it? Meanwhile, I would suggest to consider why you are actually using a photodome? If the goal is to move your char in an env and with the camera following the char…may be you actually don’t want a photodome. May be, you want a skybox? May be you want to add some meshes, planes or cylinders to project textures on.

Frankly, I didn’t attempt to run your code from GH. For faster and more accurate replies, I would suggest you set-up just a quick PG (playground). Usually, people in this forum (including myself :wink:) don’t wanna spend all too much time going through code or downloading code to answer a simple question :face_with_hand_over_mouth: This is where the PG is becoming a ‘must-have’ to get fast and accurate feedback. May be you could do just that?…Meanwhile, have a great sunday :sunglasses:

1 Like
3

Hello @vipul45 and welcome :slight_smile:

Yes as @mawa said, best would be that you share a playground, it will be easier to help. Also, you can post a screenshot of the result, explaining the behavior you want to avoid :slight_smile:

++
Tricotou

4

here is the link of sandbox code with describing the problem in image

image
image1920×1080 78.4 KB

360Photo Dome | Babylon.js Playground (babylonjs.com)

5

Probably you need Skybox instead of Photodome? - Babylon.js docs