Simplify and Improve code which uses CanvasTexture

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

The existing code is the following:

Which generates the following quality texture:

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

The additional code was from this reference:

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; = width + 'px'; = 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.

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

Thank you for the suggestion. We’re going to stick with Sprites to reduce the dependency on two renderers. See this discussion for background:

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

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.

This example also uses the CSS2DRenderer: