SpriteMaterial without sizeAttenuation got artifacts

Questions
, , ,
1

Hi, iam new at three.js. So i saw nameplates/sprites in an mmorpg game like this:

htF6j

Thats exactly what i want to realize. Its a simple small (bitmap?) text, without any blurring or other artifacts. The text size is the same as u can see in the image above. But it is behind other 3d objects like npcs or players in the game. So how they do that??
I tried to realize this in three.js with a spriteMaterial and sizeAttenuation:false

var spriteMap = new THREE.TextureLoader().load("tex/plates/mytest.png");
var spriteMat = new THREE.SpriteMaterial({map:spriteMap, transparent:true, sizeAttenuation:false});
var sprite = new THREE.Sprite(spriteMat);
spriteMat.map.minFilter = THREE.NearestFilter;

This is the result:
JiR95
As u can see, i got some artifacts in the text. If i set minFilter to Linear, then its not clear and very blurry:

0WAI8

So i got this problem also in ue4 widgets - i really dont know how to render this (first image) in a 3d world behind other objects with keep the same size and without any blurring or artifacts.
I also dont know - is it a scaling problem or filter problem…?

I hope anyone can help me with this, cause i was searching a long time for this problem. Is that so hard to realize what i need?

EDIT: Iam sorry, here is the image what i used: mytest

2

Can you please share mytest.png in this thread?

3

I added mytest.png to my post. I believe, that they use a technique to re-scale or re-positioning the sprite, after the camera stop to rotate or zoom in the game. Or is there a way to re-map the sprite if the camera do nothing. I also think about multiple scenes to render first the background. After that, show a html text above and over that a new canvas for the rest of 3d models. But that also dont work, because sometimes i need the text over all 3d objects… :sweat:

4

This is the best sprite quality I can come up with:

https://jsfiddle.net/wue8dzbx/

However, this requires a separate render pass with an orthographic camera.

Notice that not all games implement their HUD elements like so. The gaming industry often uses Flash based solutions like Audodesks’s Scaleform. Consider to implement such UI elements with HTML/CSS/JS like CSS2DRenderer does.

https://threejs.org/examples/css2d_label

There are of course some conceptual issues like depth testing (you can’t hide HTML elements behind 3D stuff rendered on a canvas). But in general this approach works quite well.

5

Thanks for your answer. As I can see in your jsfiddle, you used OrthographicCamera there. Well if this require a separate render pass - why i should do that, if i could use simple html elements? Or i dont understand it right. With an orthographic camera my sprite would everytime above other 3d objects like “screenspace” or iam wrong?

I have more questions:
1.) Is it possible to update the texture after the perspectiveCamera has stopped to re-render the sprite with correct dimensions?
2.) I see only artifacts if i move/rotate/zoom the camera. Seems like the sprite will be stretched arround 1 pixel. Could be re-positioning of the sprite a solution for that problem?

6

I have another idea. Is it possible in three.js to render only the visible areas of my sprites in a seperate pass and merge this with html text in a canvas? Or would that be a performance problem?
In this way i could use the black/white mask for the html text to cut them, someone know if and how this works?

7

Well, i made some tests and after i readed this article, i think thats exactly the problem what i have. If the sprite would move/rotate/scale in screenspace pixel or a pixel grid, then this would solve this problem. But i dont know, if that is possible with shaders or other ways. For a custom shader i would need a shaderMaterial, right?

8

Correct. Alternatively you can also use RawShaderMaterial. When using this material, built-in uniforms and attributes are not automatically prepended to the GLSL shader code.