Hi devs/ @Deltakosh ,
We recently observed antialiasing issues on iOS devices since this week.
Works fine on desktop and Android.
Refer to screenshots below.
Is there a specific flag we need to enable/disable to fix this?
It is broken in the new metal backend only on IOS
I’ve been having this problem too and I have several iOS devices to test with.
iOS 16.4.0 and 16.4.1(a) have this issue. 15.7 doesn’t.
@sebavan Looking at other Three.js projects they don’t have this issue, and I think it’s because the codepen you posted above didn’t call:
renderer.setPixelRatio(window.devicePixelRatio);
For BabylonJS, if I use the Safari Inspector and double the resolution of the canvas, it aliases properly. If I try:
engine.adaptToDeviceRatio = true;
that didn’t make a difference but if I force this:
engine.setHardwareScalingLevel(0.5);
It looks good. Yet doing that without any catch for it being iOS means I’ll be doubling the pixel rendering of the canvas for all devices so I can code that in, yet I’m guessing that BabylonJS will update their own system so it does compensate for ‘retina’/@2x screens correctly by default in the longer run?
1 Like
I confirm it
In my case I had to try different alternatives to get it to look correct, finally this has been my choice:
1- Activate DeviceAspectRatio (in my case it works with version 16.4.1)
var engine = new BABYLON.Engine(canvas, true, { stencil: false }, true);
2- Add Rendering Pipeline with FXAA activated using 1 sample.
var pipeline = new BABYLON.DefaultRenderingPipeline(
"defaultPipeline",
right,
scene,
[scene.activeCamera]
);
pipeline.fxaaEnabled = true;
pipeline.samples = 1;
This is the main Setup i´m using in this demo:
1 Like
I don’t want to get into conspiracies (ironic), but so many errors and so many complications in Safari (WebGL, Audio, WASM…) make me think that the Big Apple doesn’t really like this WebApp world
And honestly, in my professional experience, for a long time I verified how more and more customers want their apps outside of Stores and avoid unnecessary downloads, which in many cases are a wall of entry for their clients.
Finally I want to add that without a doubt the BabylonJS team is taking the best development direction using generic code, easy, intuitive and focused on performance.
My experience with other tools such as Unity or Unreal for the development of WebGL apps has been crazy, they still don’t offer a good support and the compilations are very inefficient, especially on mobile.
If we also take into account that web traffic has become more than 80% from mobile devices, it’s more absurd.
2 Likes
I’ve found a simple trick to get the anti aliasing working again
It should be something with Metal and WebGL
Go to Settings — Safari — Advanced — Experimental Features
And disable WebGL via Metal
The second capture is disabling Metal WeGL
1 Like
@DRLeria Thanks for looking into this more, your solutions helped. And yeah, it does seem like Apple has a lot of reasons to not want WebApps to be successful.
Ooof… just ran into this too… is there an official apple bug tracking this issue anywhere?
Can not find it but I am pretty sure there was one 
Every Apple update on WebGL support
2 Likes