iOS 15.4 broke the post processing effects

iXperiential · March 16, 2022, 4:30pm

Hello,

We are using post process effects (brightness-contrast and hue-saturation) in a project and it looks like the latest Safari update that came with iOS 15.4 broke them:
https://developer.playcanvas.com/en/user-manual/graphics/posteffects/

Do you need a test project to debug?

Best,

Ben Z.

Leonidas · March 16, 2022, 4:33pm

Hi @iXperiential,

I can test right now (I will), but are you able to see if there are any errors in the console?

Also can you post a screenshot of what artifacts you are seeing?

iXperiential · March 16, 2022, 4:43pm

For this project:
https://developer.playcanvas.com/en/tutorials/custom-posteffect/

This is what we get:

Also happens on macOS. Safari 15.4. No errors

Leonidas · March 16, 2022, 4:45pm

Hmm, interesting. @mvaligursky any idea?

iXperiential · March 16, 2022, 4:47pm

It might be linked to this:
https://bugs.webkit.org/show_bug.cgi?id=237230

mvaligursky · March 16, 2022, 4:51pm

I see this on macOS 15.3 (17612.4.9.1.8) as well … Chrome and Safari. I guess it needs to be investigated, nothing obvious stands out. Can you please create a ticket Issues · playcanvas/engine · GitHub to keep track of it.

iXperiential · March 16, 2022, 4:55pm

Done. Thanks for looking at it!

github.com/playcanvas/engine

Post-processing effects are creating rendering artifacts on Safari 15.4

opened 04:54PM - 16 Mar 22 UTC

iXperiential

This issue tracker is **only** for bug reports and feature requests. For general… support/help, visit https://forum.playcanvas.com For bug reports, include: ### Description On Safari 15.4 (iOS or macOS), using post processing effects causes rendering artifacts. Sample project: https://developer.playcanvas.com/en/tutorials/custom-posteffect/ ### Steps to Reproduce 1. Open the project with Safari 15.4 Potential cause: https://bugs.webkit.org/show_bug.cgi?id=237230 ![MicrosoftTeams-image](https://user-images.githubusercontent.com/60481587/158644738-44d823c0-c58b-4517-8098-7e6609dbd58f.png)

mvaligursky · March 16, 2022, 4:57pm

Interestingly, this seems to work fine: PlayCanvas Examples

Change2 · March 28, 2022, 3:28pm

Hi @mvaligursky, @Leonidas

We just wanted to add some info on this, we noticed that with Safari 15.4 a lot of our PC projects suddenly stopped working

Eg. On this configurator, the object is rendered correctly only for the first frame, then if the user moves the object as it would normally do, nothing happens in the scene, the object doesn’t move or anything.
No embossing writing (we create it trough scripts once the scene is already rendered, when the end user picks some letters).

No errors related to PC in the console

We tought of an error processing input at first, but playing around with the inspector, we noticed that manually resizing the window, causes weird stuff to appear:

A pink background scene
The embossing writing magically pops out
Moving the object (orbit cam), only moves the writing but not the object

We then tried to open some of the demos from PC Home Page, we found out that a lot of them have rendering problems too

After The Flood

AirStream

Star Lord

This happens on both, Safari mobile and Desktop with rel 15.4

While testing why some of our models were working and some weren’t at all, independently from the PC release used, we found out that on non-working scenes we used the FXAA.js script

github.com

playcanvas/engine/blob/2330eda6451be94b5c53c53e56b45daff2e0aaf1/extras/posteffects/posteffect_fxaa.js

//--------------- POST EFFECT DEFINITION------------------------//
pc.extend(pc, function () {

    /**
     * @name pc.FxaaEffect
     * @class Implements the FXAA post effect by NVIDIA
     * @constructor Creates new instance of the post effect.
     * @extends pc.PostEffect
     * @param {pc.GraphicsDevice} graphicsDevice The graphics device of the application
     */
    var FxaaEffect = function (graphicsDevice) {
        // Shaders
        var attributes = {
            aPosition: pc.SEMANTIC_POSITION
        };

        var passThroughVert = [
            "attribute vec2 aPosition;",
            "",
            "void main(void)",

This file has been truncated. show original

Turning the script off, the projects started working again

Is there a work around for this? A part of us turning off FXAA on every project and re-publish it?
Do you think there will be a PC engine release fixing this soon?

Many thanks in advance!

mvaligursky · March 28, 2022, 3:43pm

@Change2 - we have this workaround at the moment and are hoping to release the engine with it this week: https://github.com/playcanvas/engine/pull/4141

In the meantime, you can just turn off antialiasing for your project - this seems to solve it for us but also other webgl based engines. That’s what the workaround does as well, but only when when it detects browser 15.4

Change2 · March 28, 2022, 3:46pm

Wow, that was fast!

Thank you!