How can i optimize the resolution of image and text?

Hi,
I believe the below lines of code should do the trick.

engine.setHardwareScalingLevel(1 / window.devicePixelRatio);

window.addEventListener(“resize”, () => {
advancedTexture.scaleTo(engine.getRenderWidth(), engine.getRenderHeight());
});

Else, there are a number of posts around with this subject.

1 Like

Thank u much. I have saw above.
I made the AdvancedDynamicTexture’size bigger that it appeared less blurry in PC, not in VR Device. Why? I hope your reply, thank u very much guy.

    const WIDTH = 1280;
    const HEIGHT = 720;
    const plane = createPlane('plane1', { width: WIDTH / 1000, height: HEIGHT / 1000, sideOrientation: BABYLON.Mesh.DOUBLESIDE }, scene);
    plane.position = new Vector3(0, 1, 1.2);
    const ratio = 3;

    const advancedTexture = createAdvancedTexture(plane, WIDTH * ratio, HEIGHT * ratio, 'rgba(0, 0, 0, 0)', rectBG)
    const grid = new GUI.Grid('grid_wrap');
    grid.width = '100%';
    advancedTexture.addControl(grid);


OK, I didn’t realize you are not using it in FS mode.
And then, sadly, I have no experience with VR.
I believe one of the links I gave you is around something similar for AR.

Else, All I can do here is to try call-in somebody who might now better.
@RaananW , if you are not on vacation, could you kindly have a look at this. Else may be @sebavan or @carolhmj ? Thanks,

1 Like

Apart from hardware scaling that works a little different in VR (my recommendation - i wouldn’t play with it too much), all of the other suggestions are valid for VR as well. Thanks @mawa !

As I don’t see a scene, i can’t tell you what the issue is or how to solve it. Sharing a working playground, providing a bit of text and explaining what the actual issue is would be very helpful.

1 Like


thank u, example like above, first image is in immersive, text and image are blurry, second image is not in immersive, text and image are less blurry. this is code

  const WIDTH = 1280;
    const HEIGHT = 720;
    const plane = createPlane('plane1', { width: WIDTH / 1000, height: HEIGHT / 1000, sideOrientation: BABYLON.Mesh.DOUBLESIDE }, scene);
    plane.position = new Vector3(0, 1, 1.2);
    const ratio = 3;

    const advancedTexture = createAdvancedTexture(plane, WIDTH * ratio, HEIGHT * ratio, 'rgba(0, 0, 0, 0)', rectBG)
    const grid = new GUI.Grid('grid_wrap');
    grid.width = '100%';
    advancedTexture.addControl(grid);

We don’t require only the code but also a Playground reproduction too.

1 Like

it’s comming. https://playground.babylonjs.com/#TSFRU8#1
I just want to optimize the resolution like this in immersive.

This depends very much on your headset resolution and your desktop resolution

This doesn’t look blurry, when the device supports higher resolution.

Also don’t forget that in VR you usually see elements a bit further away, because of the nature of the scene. You wouldn’t want to be too “close” to an item. this will influence quality as well.

What device are you testing with?

Sorry, are you asking about the texture changing size, or the quality of the texture?

Just an update - when you add an event listener you also need to remove it, otherwise exceptions will be thrown (because yo uare running callbacks on objects that are already disposed).

Removing the event listener for resize, this is the result:

image&text are blurry in immersive | Babylon.js Playground (babylonjs.com)

1 Like

I use pico neo3 and oculus quest2, all look blurry. And elements will be more blurry when futher. which device you are using.

I’m asking the quality of the textblock and Image

I update the code, please check the demo’code again, and compare inmmersive with uninmmersive. it’s blurry in inmmersive really. and check my code, i don’t know if it is best code.or tell me how to promote the texture’s resolution ratio to make the image and text less blurry. I really have no method after I read the document.
thank u very very much!


Hello! Just checking in if you’d still like any help. I checked your playground using the XR emulator on my browser and it looks pretty nice :slight_smile: