Potential issue with sprite rendering and planes?


#1

I am having a weird graphical issue when using sprites in combination with textured planes

I have a sprite which is a crosshair graphic, which draws in front of everything else, when it overlaps a duck the crosshair goes kind of fuzzy, but only on the portion overlapping the duck image

here is an image of the issue
ducksprite

is there something weird about the interaction between the sprite and the plane?


#2

Hiya Shurp.

PG: https://www.babylonjs-playground.com/#15WPCT#2

Move camera in circles a bit… see reticle have overlap issues.

Now set the sprite’s z-value in line 23… to -10 or -20… closer to our camera, which is z = -30. Conflicts go away, to some degree.

Try moving your sprite closer to cam or move duck further away.

Also perhaps goof around with camera.minZ.

And, perhaps… if you have set any rotation values… to things like 3.14 or 1.57 or .707… change those to Math.PI, and Math.PI/2, etc… making the rotations more precise.

Just some ideas, and a testing playground. Perhaps use a plane, parented to camera… for the crosshairs/reticle? Sprites do billboarding (always turn to face camera)… sometimes trouble. A parented plane turns with camera, too… but differently.

A BJS GUI imageControl right in the center of a fullscreen advancedDynamicTexture… might be the best way. https://www.babylonjs-playground.com/#XCPP9Y#1017


#3

Thanks for the response Wingnut

I don’t believe it is overlap issues, as my cross hair is well in front of the planes, and I am not rotating my camera at all.

I have modified your first PG to show the issue - https://www.babylonjs-playground.com/index.html#15WPCT#3

if you rotate the camera around, you can see where the edges of the reticle go fuzzy when there is some of the palm tree texture behind it, but it is not going through the plane mesh, it is especially noticeable on the tree trunk.


#4

Ahh yeah, I see it. The black lines sort-of go bumpy along their edges. Weird.

Ok, stay tuned for more comments. Thx for the playground fix/clarification, Shurpski… well done.


#5

No problems, I even have some more info based on some more playing around I have done this morning.

The culprit appears to be the useAlphaFromDiffuseTexture property of the material, if that is set to false then the fuzziness isnt there anymore, but while it is true, the sprites go fuzzy.


#6

Can you elaborate on “fuzziness” ? :slight_smile: not sure to see an issue on my side

Unless you meant that the reticle is going behind the tree?


#7

if you have a look at the PG I linked, rotate the camera so that part of the reticle is lined up with the tree trunk, you will be able to see the edges of the lines in the reticle look odd where they meet the tree, its not clipping through as the rest of the line looks fine in front of the tree


#8

Can you do a screenshot?


#9

here is a shot of the issue

and here is a shot of the same scene with useAlphaFromDiffuseTexture set to false


#10

Oh ok…so this is because when using opacity texture you are using alpha blending (and not alpha testing).
Does it make sense?


#11

I’m still fairly new to this kind of thing, so it doesn’t really make that much sense. Thanks for the explanation though.


#12

No worries.
Does that work: https://www.babylonjs-playground.com/index.html#15WPCT#4 ?


#13

It looks the same as my PG


#14

Sorry worng PG :slight_smile:
https://www.babylonjs-playground.com/index.html#15WPCT#5


#15

That looks better, am I right in saying that instead of using hasAlpha, you are setting the opacity texture to the same texture as diffuse?


#16

Yes it would have worked the same setting hasAlpha: https://www.babylonjs-playground.com/index.html#15WPCT#6