Babylon does not work in Safari Browser

Hi All

Im sure you must hate Safari for this. No issues on Windows , no issue using another browser like chrome on the mac … but try safari … boom , a wall of red in the console. It was falling back to WebGL 1 - I tried to enable WebGL 2 under their “experimental options” - that just resulted in a different wall of red.

This mac has the latest mac catalina OS , it a 2018 mac mini.

Sorry to have to say this , but their is proof that this can be worked around by engine developers because the sketchfab viewer works in the very same browser on the very same machine. I tested several models on their domain. So they have obviously done some work arounds to get everything functional.

Im not sure how much you guys care about this? I need to implement some page to inform a user of broken safari and instruct them that the only solution for now is to use another browser.

Im not a mac user , I hate it with a passion , but I have to use it for clients who love it sigh…

The wall of errors is way beyond posting here… it is terrible. I wish somehow the entire populations eyes could be opened to just how shit Apple is.

Hi @shaderbytes,

Could you provide more details about what is broken on safari? Maybe a playground?

I am using a mac with catalina right now and at least the base playground seems to be working ok.

Thanks for the reply,

I sent you a link in a PM as I cant share the link of this in public just yet and it is far to big to replicate in the playground. Have a look and see the console errors… There are so many It almost brought tears to my eyes.

thanks

pinging @sebavan as well as he has a mac :slight_smile:

Could you share a small repro in the pkayground and your link in pm ?

Actually most if babylon works in webgl1 aside of a couple features where there are no workarounds. But we might definitely have a broken bit in webgl 1 which i d like to address ASAP.

Thanks Gents , I sent the link to you as well so you can see , im not joking when I say it is a wall of red in the console. You will see. Of coarse any info to work around it if possible will be appreciated .

cheers

You are using ssao2 which is exclusive to webgl2, you could try to switch to ssao without the 2 or disable it in webgl1 mode. I am pretty sure that would do it :slight_smile:

Also you could try to update to latest to prevent some of the pbr fallbacks issues you might have.

strange I used code I found in your demos/docs and is has this wrapped up in a IsSupported conditional , So it should not be getting into here if it is not supported right? here is the code :

 if (BABYLON.SSAO2RenderingPipeline.IsSupported) {
       
            // Create SSAO and configure all properties (for the example)
            var ssaoRatio = {
                ssaoRatio: 0.5, // Ratio of the SSAO post-process, in a lower resolution
                blurRatio: 0.5// Ratio of the combine post-process (combines the SSAO and the scene)
            };       
            var ssao = new BABYLON.SSAO2RenderingPipeline("ssao", this.scene, ssaoRatio);
            ssao.radius = 2;
            ssao.totalStrength = 1;
            ssao.expensiveBlur = true;
            ssao.samples = 32;
            ssao.maxZ = 250;         
            // Attach camera to the SSAO render pipeline
            this.scene.postProcessRenderPipelineManager.attachCamerasToRenderPipeline("ssao", camera);
            this.scene.postProcessRenderPipelineManager.enableEffectInPipeline("ssao", ssao.SSAOCombineRenderEffect, camera);  
       
       }

directly below this code I am adding a defaultpipeline for some imageprocessing :

var pipeline = new BABYLON.DefaultRenderingPipeline("defaultPipeline",false);
        pipeline.imageProcessingEnabled = true;
        // pipeline.fxaaEnabled = true;
        pipeline.samples = 4;
        pipeline.fxaaEnabled = true;
        pipeline.imageProcessing.colorCurvesEnabled = false;
        pipeline.imageProcessing.vignetteEnabled = false;
        pipeline.imageProcessing.colorGradingEnabled= false;
        pipeline.imageProcessing.contrast = 1.4;
        pipeline.imageProcessing.toneMappingEnabled = true;
        pipeline.imageProcessing.toneMappingType = BABYLON.ImageProcessingPostProcess.TONEMAPPING_STANDARD;

This is interesting and I ll replace the content of the IsSupported method as it can not work in WebGL1 and is currently not checking for it.

Fix SSAO 2 detection. by sebavan · Pull Request #8215 · BabylonJS/Babylon.js · GitHub will be in the next nightly

4 Likes

ok thanks a million , I was gonna go dig into the docs to see for a data point to get the running WebGL version myself now to bypass the issue manually. Thanks for the response and planned fix.

cheers

1 Like

@sebavan is the new code available yet? I went to git hub and grabbed babylon.js and babylonjs.loaders.min.js fresh, although I not exactly sure where to grab them.

I went here :

is that right?, It looked the most correct to me due to the last update time. I tried earlier today and a tried again right now ( which says updated an hour ago )

Still doesnt work on safari , here is a copy of the logs in my safari console :

Console2.zip (3.9 KB)

let me know your thoughts.

I can not see from your logs, you took the lib from the right folder.

You should try to isolate issues in the playground so that we can easily repro. it is impossible to help just from the logs :frowning:

i deleted the previous post , thoughts it was point lights , then thought another but it is this one line :

scene.enableGeometryBufferRenderer().renderTransparentMeshes = false;

this causes the errors

I removed it and now all is working on safari , if i put it back I get heaps of errors , they all seem to be related to bump mapping shader just quickly looking over the logs

@sebavan , sorry forgot a playground simple test for you to see :
https://playground.babylonjs.com/#2A19U8#15

1 Like

Ohhh I see :slight_smile: @julien-moreau could you look into this one ? it looks like a wrong construct of geometryFragment shader for bump map in gl 1 ?

@shaderbytes anyway your line scene.enableGeometryBufferRenderer().renderTransparentMeshes = false; should be enclosed in your isSupported clause has it is only usefull with the SSAO2 pipeline. It will else decrease perf for no actual good reasons.

thanks for the help , im learning everyday :wink:

1 Like

@julien-moreau no worries I added the missing bit :wink:

2 Likes

Discovered the message but you already fixed ^^
Thanks for reporting !!