When using the Text element as a title over a 3D model, at an angle the text becomes terrible.
I use Font Helvetika (ttf).
Is there any solution?
How about trying something like:
this.entity.element.font.textures.forEach(function (texture) {
texture.anisotropy = 4;
});
Where am I wrong?
dest[] - is a list of all Text elements with a ‘text’ tag.
dest= pc.app.root.findByTag('text');
for(var t=0;t<dest.length;t++) {
dest[t].element.text = val;
dest[t].element.fontSize = nsz;
dest[t].element.font.textures.forEach(function (texture) {
texture.anisotropy = 4;
});
alert('anisotropy = 4');
}
Uncaught TypeError: Cannot read property ‘textures’ of null
That means dest[t].element.font is null. Try breaking on exceptions in the Chrome debugger to see why. Maybe you assigned the text tag to the wrong entity.
- Why does the texture picture (GIF) with text applied on the Plain look much sharper than the Text element?
*No, changes to other text properties work:
dest[t].element.text = val;
dest[t].element.fontSize = nsz;
I just tried this and it was fine:
var Anisotropy = pc.createScript('anisotropy');
Anisotropy.attributes.add('anisotropy', { type: 'number', default: 1 });
// initialize code called once per entity
Anisotropy.prototype.initialize = function() {
this.setAnisotropy(this.anisotropy);
this.on('attr:anisotropy', function (value, prev) {
this.setAnisotropy(value);
});
};
Anisotropy.prototype.setAnisotropy = function(anisotropy) {
if (!this.entity.element) {
console.error('Element component expected on entity: ' + this.entity.name);
return;
}
if (!this.entity.element.font) {
console.error('Element component has no font on entity: ' + this.entity.name);
return;
}
this.entity.element.font.textures.forEach(function (texture) {
texture.anisotropy = anisotropy;
}, this);
};
Changing the anisotropy doesn’t seem to have as much of an effect as I expected though. It could be because of the way text characters are generated on the GPU.
By the way, does enabling ‘Device Pixel Ratio’ in your Scene Settings help?
No, the activation of the Pixel Ratio is not suitable for us - the image looks a bit more grainy on the desktop.
And no, it doesn’t help 
What solution can you offer?
Why in the cool engine PlayCanvas test at an angle to render so buggy?
I’m not personally an expert on the implementation details of the MSDF algorithm used by PlayCanvas to render text. There may be some limitations to its ability to render text clearly at an oblique angle. Did you try my script?
Yes, I tried by binding your script to a text element.
The result is the same.
I have a recommendation for you how to fix it in the engine.
If the text in the engine is converted to a raster, then maybe it makes sense for you to render it into a higher resolution raster (texture)?
For now, I’ll try according to your standard example, implement this through rendering the text into canvas, and use it as a texture for the material that I will overlay on our banner model.
https://playcanvas.com/editor/scene/390139
But this is a clumsy solution to the question, of course. It turns out that the Text element is not working correctly, if necessary using it in a 3D scene.
Wow, just tried again - it worked.
At least, without obvious glitches displayed, but still more blurry than the texture applied to the banner panel.
and this is with a texture resolution of 512x128 pixels.
As an intermediate tip: is it possible in the next engine update to at least make the anisotropy setting, as for textures? Use it in editor panel settings, not in a script?
There is still a new problem.
If the Entity with Text element was disabled on start (Enabled checkbox is turned off), and then it was turn on in the other script, then the anisotropy script is not run, it gives an error:
“Element component has no font on entity”
If Entity with the Text element is enabled at the start - there is no problem.
Somehow, when you turn on (Enabled checkbox turned on) the Text element, how can I automatically run the anisotropy script that is attached to it?
A few things:
- In your screenshot of the Inspector, your anisotropy script isn’t displaying the anisotropy attribute leading me to believe you haven’t parsed the script. This will mean
this.anisotropyin the script will beundefined. - Well, there kind of is anisotropy exposed in the Inspector:
But this is only available for texture assets, and a font’s texture assets are not visible in the Editor. So, in the case of fonts, you can currently only access the font textures via script. We could add an anisotropy property on a font, I guess.
3. Do you still have a problem if you rename Anisotropy.prototype.initialize to Anisotropy.prototype.postInitialize?
Thank you so much - it helped me! 
…Nevertheless, I would like to wait for an increase in the quality of text output in the 3D scene (at an angle, so that it compares with the quality of the text output in texture), as well as adding anisotropy settings in the editor, in the Text element.
1 Like
I suspect the MSDF algorithm that PlayCanvas uses is more susceptible to texture sampling artifacts than regular 2D texture sampling. I doubt there’s a good/easy solution for that. So for now, I’ll just mark this thread as solved.