Image get inverted after loading url

🌵 Needle Engine
1

I have a image on canvas. When I add a sprite it seems okay, but if I load an image through url it’s either upside down or inverted.

2

Hello Saad Baig! When dealing with images in Three.js or with Needle Engine and loading them via URL, sometimes the default behavior can lead to images appearing inverted or upside down. This can be due to texture orientation differences or how the browser processes image data.

Here’s a general approach to resolving this:

  1. Texture Flipping:
    Three.js textures are often upside-down because WebGL has a different coordinate system. You can solve this by setting the flipY property.

    texture.flipY = false;

  2. Check Material Settings:
    Ensure the material you apply is configured correctly. For sprites, handling orientation might depend on how the sprite orients to the camera.

  3. Correct Rotation:
    If your application involves dynamic textures or canvas textures, applying rotation transformations can correct orientation issues.

  4. Sprite Orientation:
    When working with sprites in Three.js or Needle Engine, they might need specific orientation setup depending on the scene’s camera or lighting settings.

To help you further, I recommend:

  • Checking if the flipY property solves the issue.
  • Double-checking any custom shaders or transformations applied.
  • Examining the texture loading or URL handling code snippet.

If you have any specific code or need targeted assistance, feel free to provide additional details or snippets.

Next Steps

  1. Verify if the flipY setting addresses your issue.
  2. Share any relevant code snippets so I can provide more precise advice.

Let me know if you’d like more help on specific implementations!

22 replies left
thread_xn5TNGVBI5LyLkx48lyBxcaN
Reply to this message to continue the conversation

3 
 async downloadAndApply() {

        if (this.targetRenderer == null) {
            this.targetRenderer = this.gameObject.getComponent(Renderer) || undefined;
        }
        const image = await ImageReference.getOrCreate(this.logoUrl!);
        const texture = await image.createTexture();

        texture!.flipY = false;

        this.logoImage!.image = texture;


    }

this is how I’m using. The image that i have set as a default from the unity editor looks find in the build, but if I replace it with URL it’s upside down.

4

Hello Saad Baig! Your code for downloading and applying the texture seems quite solid. However, the flipping issue you are encountering with the URL-loaded image likely relates to how the texture is being processed or applied.

Here’s a revised approach to help you troubleshoot and potentially fix the issue:

  1. Ensure Flip Property:
    Since you already attempted texture.flipY = false;, revert that to true to see if it corrects the image orientation when loaded from the URL:

    texture!.flipY = true; // Try setting this to true

  2. Loading Time:
    Check if the image from the URL is fully loaded before applying it. Sometimes an image might not be ready at the moment it’s being applied. You can use an event listener on the image to confirm it’s loaded:

    const image = await ImageReference.getOrCreate(this.logoUrl!);
await image.load(); // Ensure the image is fully loaded
const texture = await image.createTexture();
texture!.flipY = true; // Adjust flip
this.logoImage!.image = texture;

  3. Debugging:
    To debug further, you could log the texture details before applying it:

    console.log("Texture Loaded:", texture);

  4. Texture Params:
    Double-check any parameters or configurations applied to the texture itself. Depending on how the image is processed, additional settings might need adjustments.

Try the suggestions above and let me know how it goes or if you encounter further issues. If the problem persists, any console output or additional code context would be helpful.

21 replies left
thread_xn5TNGVBI5LyLkx48lyBxcaN
Reply to this message to continue the conversation

5

it didnt work even with flipY = true.
i can see the texture object with console.log

6

it didnt work even with flipY = true.
i can see the texture object with console.log

7

Hello Saad Baig! Since the flipY property adjustment did not resolve the issue, let’s explore some other possibilities:

  1. Texture Coordinate Transformations:
    Check if any transformations are being applied to the material or mesh that could affect how the texture is displayed. This could be specific to your sprite configuration.

  2. Renderer Settings:
    Ensure that the renderer settings are not influencing the texture rendering. Sometimes, certain renderer settings can distort how images are displayed.

  3. Check the Image Aspect Ratio:
    If the loaded image has a different aspect ratio, ensure that the sprite or mesh scaling is properly aligned to avoid distortion.

  4. ImageFormat Handling:
    Investigate the formats of images being loaded from the URL versus those set in the Unity editor. Ensure that the format and settings align (e.g. PNG, JPG).

  5. Texture Loading Event:
    If ImageReference.getOrCreate allows providing a callback for load completion, use that to ensure the texture is ready when applied. This may also involve adjusting for asynchronous loading.

  6. Alternative Testing:
    Test with different images from a variety of sources or formats to discover if the problem is specific to the URL you’re using.

If you have the ability, review the image’s orientation using external viewers or tools to ensure it’s not an external issue with the image itself.

Please provide any specific console output or errors if they arise, as that will help diagnose the issue further.

24 replies left
thread_xn5TNGVBI5LyLkx48lyBxcaN
Reply to this message to continue the conversation

8

This topic was automatically closed 13 days after the last reply. New replies are no longer allowed.