Jump to content

My texture shows upside down


chaotive
 Share

Recommended Posts

As you can see on the attached image, the texture for some of my sprites shows up upside down.

Even though I can rotate the sprites after they gets created, this is being something as a general problem for all textures. I have tried playing with the wAng, vAng and invertY settings but those haven't make any difference.

Any ideas?

de backwards.png

Link to comment
Share on other sites

@chaotive - There are literally many, many methods to manipulate textures and mapping - so if you simply spend a couple of minutes creating or modifying a quick playground scene, we can all respond and/or demonstrate the best method for your specific scene.  wAng, vAng, invertX invertY, etc. will all provide you with dramatically different results - depending on many factors. And depending on the type and topography of the mesh(s) (as well as whether the mesh's UVs were generated in a seperate app) - all play a role in how the above attribute values affect the display of textures on the mesh(s). As an example, on a planar object I often use:

 Material.diffuseTexture.uScale = 1;     and/or the following for vScale:
 Material.diffuseTexture.vScale = -1;     (-1.0 or some other value)

But as mentioned, this may not provide you with the solution you require whatsoever. A PG scene will do it, and you can then quickly put this behind you and come out a level up on your texturing skills in BJS. At least you've posted your first topic. Welcome to the best Dev forum on the web. No kidding.:D

Cheers,

DB

Link to comment
Share on other sites

@Pryme8 and @chaotive - Prior to versions 2.3 and v2.4, it wasn't necessary to reset scaling on videoTextures (or other textures from my testing), however, I've not been able to use a version past 2.2, as scaling has been an issue. So @Pryme8, your comment to reset scaling might be the bug fix I've been looking for, as my UV scaling has been incorrect since v2.3, and I haven't yet found the solution. However, I will try your suggestions which might just be the answer and provide me (us) with the reason there has been a bug in using videoTextures since v2.3. And this "bug" is by far the most inconsistant and difficult to solve that I've yet encountered. However, this is definately a good parameter to continue testing which otherwise I would not have considered. 

I'll post any progress once I test resetting scale on videoTextures; since as of today, this is still a serious bug which I have yet to solve.

Thanks,

DB

Link to comment
Share on other sites

Thanks guys. I'm trying to create a PG example now. It's hard though, as I'm using async components to load my textures on SpriteManagers and then starting the game. What I basically is:

  1. Create an AssetsManager for my scene
  2. Start an addTextureTask function from it
  3. When addTextureTask onSuccess happens, I create my SpriteManagers based on the task result texture, such as:
    1. function createSpriteManager(taskResult) {
        sm = new BABYLON.SpriteManager("anSpriteManager", "", 3, 142, scene)
        sm.texture = taskResult.texture
      }

       

  4. When AssetsManager onFinish happens, I resume scene execution

This is only to ilustrate the components I'm using and to give more feedback on specifics of the issue, it's not the code exactly (for example, sm is saved to a global variable for quick access on the following elements of the scene).

Link to comment
Share on other sites

17 hours ago, dbawel said:

@chaotive - There are literally many, many methods to manipulate textures and mapping - so if you simply spend a couple of minutes creating or modifying a quick playground scene, we can all respond and/or demonstrate the best method for your specific scene.  wAng, vAng, invertX invertY, etc. will all provide you with dramatically different results - depending on many factors. And depending on the type and topography of the mesh(s) (as well as whether the mesh's UVs were generated in a seperate app) - all play a role in how the above attribute values affect the display of textures on the mesh(s). As an example, on a planar object I often use:

 Material.diffuseTexture.uScale = 1;     and/or the following for vScale:
 Material.diffuseTexture.vScale = -1;     (-1.0 or some other value)

But as mentioned, this may not provide you with the solution you require whatsoever. A PG scene will do it, and you can then quickly put this behind you and come out a level up on your texturing skills in BJS. At least you've posted your first topic. Welcome to the best Dev forum on the web. No kidding.:D

Cheers,

DB

Ok, here is the PG. I'm looking to fix the texture loading but for some reason the URL is failing to load my image, any ideas what can be the problem? The rest of it seems to work fine, but until the image can be loaded there is no telling about the texture issue:

http://www.babylonjs-playground.com/#21EEOR#7

 

Link to comment
Share on other sites

Hello @chaotive -

I'm receiving a few console erors - so I would first try a different image and source - perhaps an image from another playground scene which in a quick serch of the playground, you'll find tons of images with valid sources. The specific error I'm most concerned about is the "Cross-Origin Resource Sharing policy" error, which is generally a permissions problem. So try adifferent image and source location first, then if that doesn't work make certain you're image is a power of 2 image file such as 64X64 or 128X128 etc. I don't believe this is causing you problems, but it is always good to remove all potential issues from the scene.

However, I'm almost certain it's a source permissions issue with your specific file and location, as there's no other way to diagnose what I'm reading in the console. I assume you are aware, but always hit Cntrl + Shift + 'J' key simultaniously to ring up your JS console - as long as you have a keyboard and not only a touch device.

If you can't solve this soon, I'll source an image from dropbox or our server, and I'm certain your PG scene will work just fine.

DB

Link to comment
Share on other sites

23 minutes ago, dbawel said:

Hello @chaotive -

I'm receiving a few console erors - so I would first try a different image and source - perhaps an image from another playground scene which in a quick serch of the playground, you'll find tons of images with valid sources. The specific error I'm most concerned about is the "Cross-Origin Resource Sharing policy" error, which is generally a permissions problem. So try adifferent image and source location first, then if that doesn't work make certain you're image is a power of 2 image file such as 64X64 or 128X128 etc. I don't believe this is causing you problems, but it is always good to remove all potential issues from the scene.

However, I'm almost certain it's a source permissions issue with your specific file and location, as there's no other way to diagnose what I'm reading in the console. I assume you are aware, but always hit Cntrl + Shift + 'J' key simultaniously to ring up your JS console - as long as you have a keyboard and not only a touch device.

If you can't solve this soon, I'll source an image from dropbox or our server, and I'm certain your PG scene will work just fine.

DB

Probably the issue was related to Cross-Origin security policy. In the end I just used the texture that was for the original PG sprite example, which on this PG exhibits the same behaviour I have: upside down texture (and sprites). I think this is actually very good example, because you can see the specific differences from the original Sprite, with issues also extending to weird animation behaviour (which I would think is a side-effect of the upside down situation).

So, here is the working PG with the issue:

http://www.babylonjs-playground.com/#21EEOR#9

 

Link to comment
Share on other sites

Another update about the texture issue from the animation usage: I played around looking for the missing animation frames, and it turned out that they match the missing 21 frames, when you put the origin point on the bottom right corner of the texture and the end point of it on the top left one.

The PG for this is here, and it definitely seems that the texture is being read from the inverted corner:

http://www.babylonjs-playground.com/#21EEOR#10

Link to comment
Share on other sites

Hello,

With sprite, use the invert from the sprite itself:

http://www.babylonjs-playground.com/#21EEOR#14

You'll probably now wonder why you need it here and not on the default sprite playground? This is actually a good question. It all relies upon the way you create your texture. By default the sprite manager creates it with no mipmap and not invert on y, but using the asset manager you forgot to set the same parameters in the texture task. I put it for you in the following pg (line 15):

http://www.babylonjs-playground.com/#21EEOR#29

CU,

Link to comment
Share on other sites

5 hours ago, Sebavan said:

Hello,

With sprite, use the invert from the sprite itself:

http://www.babylonjs-playground.com/#21EEOR#14

You'll probably now wonder why you need it here and not on the default sprite playground? This is actually a good question. It all relies upon the way you create your texture. By default the sprite manager creates it with no mipmap and not invert on y, but using the asset manager you forgot to set the same parameters in the texture task. I put it for you in the following pg (line 15):

http://www.babylonjs-playground.com/#21EEOR#29

CU,

It works perfectly! Thank very much @Sebavan, @dbawel and everyone else who helped contributing on understanding the issue and how to fix it. Great to see the forum working in helping make Babylon usage effective :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...