Hi, we’re trying to understand why our text boxes do not render correctly on Samsung devices. Have tried with two different Galaxy models, and the browser called Samsung Internet. The odd thing here, is that I’ve tried on a third Galaxy, same browser, same version (latest) and there - the problem is not present.
This is how the text appears. as you see, I’ve tried two different fonts and they do come off slightly different but still unreadable.
I don’t know enough playcanvas to give you a complete answer but I hope my try could be helpful to you. As I see, and as I suppose what I see, your elements are not canvas draw but HTML and CSS elements. If yes, that problem could be a Cross Browser compatibility of css rules. The problem it seems to be the width of your text-stroke. Hope you find the solution
Yes, I was actually thinking it might not be css-related since when I read up on the text elements here: Text Elements | PlayCanvas Developer Site it sounds as if they are converted to a Quad mesh per character. And fonts are
…converted the uploaded font to a multi-channel signed distance field.
This seems to be the breakdown according to some quick googling:
Not working: brand new Galaxy S24 seems to be using ExynoS 2400
Not working: 4 years old Galaxy S20 seems to be using Exynos 990
Working: 2 year old Galaxy M32 seems to be using ARM Mali-G52 MC2
No workaround that we’re aware of, as this is the first time this has been reported.
Are you about to create an issue with some simple repro here? Issues · playcanvas/engine · GitHub
Okay thanks for the update - thats sad and a real problem.
When adjusting the font intensity in the propperties section the font thikness can be adjusted so it looks okay in our case but the question is, if thats basically possible, because you would need to check if the app is running on an samsung galaxy s24 device and then somehow access the font and its “intensity” property.
nice thank you very much, ill try it out - i think i will have to dublicate the fonts and set the font with increased intensity especially for the samsung devices running the determined gpu.
I dont think you can access the font intensity property during runtime right, so i would have to set dublicated fonts with increased intensity instead for the text elements?
checking for the model seems not to work, because this information isnt acsessable
I tried:
SupportedDevice.prototype.initialize = function() {
// check if the user is on Android
if (/Android/i.test(navigator.userAgent)) {
_controllerUI = this.entity.parent.script.controllerUI;
_fontSwitchUI = this.entity.script.fontSwitch;
// check for specific model and hardware
const gl = createWebGLContext();
const ext = gl.getExtension('WEBGL_debug_renderer_info');
this.unmaskedRenderer = ext ? gl.getParameter(ext.UNMASKED_RENDERER_WEBGL) : '';
this.unmaskedVendor = ext ? gl.getParameter(ext.UNMASKED_VENDOR_WEBGL) : '';
this.supportsGpu = supportsGpuFeatures(this.unmaskedVendor, this.unmaskedRenderer, navigator.userAgent);
// check for specific model
//_controllerUI.debugText.element.text = navigator.userAgent + " " + /Samsung/i.test(navigator.userAgent);
if (!this.supportsGpu) {
console.warn('GPU or font rendering workaround applied for this device.');
_fontSwitchUI.changeFonts(); // apply font switch workaround
}
}
};
// check for specific model and hardware
function createWebGLContext() {
const canvas = document.createElement('canvas');
return canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
}
function supportsGpuFeatures(unmaskedVendor, unmaskedRenderer, userAgent) {
if (!unmaskedVendor || !unmaskedRenderer) {
console.warn('Unmasked Vendor or Renderer is undefined. Assuming device is supported.');
return true;
}
const samsungModelRegex = /SM-S23[0-9]{1,2}|SM-S24[0-9]{1,2}/;
const problematicGpuRegex = /(Qualcomm|Exynos)/i;
const isSamsungDevice = samsungModelRegex.test(userAgent);
const isProblematicGpu = problematicGpuRegex.test(unmaskedRenderer);
return !(unmaskedVendor.includes('ARM') && isSamsungDevice) && !isProblematicGpu;
}
the only information i can acess is the gpu, so i check for Qualcomm and Exynos, because my samsung s24 ultra has Qualcomm…
the problem: im not sure if its really the gpu or something else - i cant tell if other mobile distributors using the same gpu’s will have the same problem but because its the only indicator, the fonts will also be changed
Note: ive created a second font set and increased the intensity of them. Visually it would solve the font problem… but in my opinion its a “dirty” solution for the moment…
