Simplify and Improve code which uses CanvasTexture

Questions
,
1

Hello!
In the 3DMLoader I use a Sprite with a CanvasTexture to display a Rhino “text dot”:

image
image918×690 74.5 KB

The existing code is the following:

Which generates the following quality texture:

Screenshot 2020-09-09 at 11.28.57
Screenshot 2020-09-09 at 11.28.57846×820 39 KB

Adding additional code to take into account the device pixel ratio I get slightly better results:

Screenshot 2020-09-09 at 11.27.57
Screenshot 2020-09-09 at 11.27.571030×826 30.4 KB

The additional code was from this reference: https://bl.ocks.org/duhaime/60c7083009bbd49ce50a58c371d8c818

So lines 512, etc are now:

var dpr = window.devicePixelRatio || 1;
var bsr = ctx.webkitBackingStorePixelRatio ||
    ctx.mozBackingStorePixelRatio ||
    ctx.msBackingStorePixelRatio ||
    ctx.oBackingStorePixelRatio ||
    ctx.backingStorePixelRatio || 1;

var r = dpr / bsr;

ctx.canvas.width = width * r;
ctx.canvas.height = height * r;
ctx.canvas.style.width = width + 'px';
ctx.canvas.style.height = height + 'px';
ctx.setTransform( r, 0, 0, r, 0, 0 );
...

These don’t need to be super high resolution, but since they are displaying text, they should be legible. In general, I am ok with the quality of the second image with the code changes. That being said, the code seems overly complicated probably because I am missing some basic understanding of what eventually controls how this texture is rendered.

Any tips to simplifying the code and achieving a legible result are appreciated.

2

I would recommend using CSS overlay for labels instead if you don’t have any further special requirements, like in this example:

https://threejs.org/examples/?q=labe#css2d_label

3

Thank you for the suggestion. We’re going to stick with Sprites to reduce the dependency on two renderers. See this discussion for background: https://github.com/mrdoob/three.js/pull/20047#discussion_r475483250

4

You don’t need 2 renderers for that, just the dom element labels on top you can unproject the positions yourself from the objects. I use that for player labels, chat bubbles etc too.

1 Like
5

I know this doesn’t answer your question, but you can use three-mesh-ui to add texts and html-like elements in your scene. The text is not rendered from canvas texture, if you zoom in this example you will see that it’s very sharp.

6

This example also uses the CSS2DRenderer: https://github.com/mrdoob/three.js/blob/696d7836d1fc56c4702a475e6991c4adef7357f4/examples/css2d_label.html#L101