in IOS - Videoplayer causes dark edge in png transparency

  • I've checked android and it works fine there. It seems to be more to do with iOS generally because Chrome and Firefox also have a problem on iOS. I have an older iPad mini which doesn't do this so it's probably been introduced to the operating system recently.

  • Sorry to go on about this, but this is not a problem I can fix and my client might sue me if it isn't fixed.

    This issue is only on iPhone (iPad,Android and OSx/Windows are fine)

    If you look at the edge of these orange squares, you can see a nice blurry transparency.

    If I turn on the videoplayer.js plugin suddenly the semitransparent areas have got a grey background.

    As you can see, the one on the left is still looking okay. But if I leave that scene and return, then it will also have a grey background.

    Evidently, the iPhone can render png transparency correctly even when the video player is turned on. For some reason it's rendering correctly sometimes and not other times. To my mind, it would indicate that that the answer lies with KRPano.

    I've stripped everything back and tested many different ways - It's clear that if you turn all the video player item alphas to 0, Everything is fine. However, if you set any alpha above 0, the fringe begins to appear in some items and not others. Leaving the scene and returning makes the fringes appear in all items.

    I really hope someone can help me. Perhaps I'm the only one in the whole community that uses iPhone and PNG transparency and video at the same time, but I believe it should work.

  • It took me awhile to get this set up but here is a test page to allow you to actually see what's going on. Please bear in mind there are no problems with iPad, android desktop or any other platform it's only iPhone where you see this banding problem.

    Aufzugsraum - TÜV Süd Akademie

    ---

    So this page has got a video hotspot on the right and a PNG hotspot with transparency (the orange thing on the left)


    If you click on this animated octagonal hotspot it will take you through to the next scene. Your notice that when the camera turns around the orange PNG hotspot has now got dark banding around it.


    If you now click the animated blue octagon again it'll take you back to the original starting shop shot. You'll notice that the original hotspot has now also got this dark banding around it.



    If I remove the video hotspot on the right everything works fine and you never get any banding on the PNG file. It's clearly caused by the presence of the video player.

    Edited once, last by nicoclark (October 4, 2024 at 6:22 AM).

  • Hi Klaus,

    Thanks for responding to the post. I've been trying to solve this one for about three weeks now. Glad to know there is an answer coming soon. Is there any intermediate workaround? The project is going online probably within seven days or so.

    By way, just to point out, it seems to be only iPhoneOS not iPadOS

    Thanks

    Nico

  • About a workaround - actually yes, is possible - add this anywhere in your first xml:

    Code
    <action autorun="preinit" type="Javascript" devices="ios">
      var gl = krpano.webGL.context, gl_pixelStorei = gl.pixelStorei;
      gl.pixelStorei = function(n,p){ gl_pixelStorei.call(gl,n,n == gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL ? false : p); };
    </action>
  • Thank you so much!! Problem solved! Follow your article!

    My client also needs to go online in a hurry, and it will be launched on October 21. It's ok now!

    If you need a 3D tour, feel free to contact me for panoramic image 3D tour production services and krpano secondary development. *smile*
    In addition, if you have development business in panoramic image platform, you can also contact me. I look forward to exchanging various application scenarios and exploring panorama applications with you.

    Our company is based in Shanghai, China and we have been engaged in panoramic business since 2017.
    Email:2269544378@qq.com
    web:http://www.good360vr.com

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!