Closed4

safari(iOS 15 & desktop) でのCanvasについてのバグがあるようです。

hrgwtrhrgwtr

手元のiPhone12miniでの、Canvasレンダリングが重いので色々調べていたら出てきました。
最初は実装かと思ったのですが、手元のiPhone7で普通に動いたので気付きました。最終的にはデスクトップ(mac)で、chromeとsafariで一目瞭然で違いが出ていました。。。
結論を先に書くと現在(2022/1)解決策はなさそうです。

引用URL:
Three.jsのフォーラムにて
https://discourse.threejs.org/t/rendering-bug-with-metal-ios-macos/29812
Three.jsのissueにて
https://github.com/mrdoob/three.js/issues/22582

Appleフォーラム
https://developer.apple.com/forums/thread/690975
https://developer.apple.com/forums/thread/684843

hrgwtrhrgwtr

GPUとsafari(WKWebview)の組み合わせで、複合的に不具合が出ているようです。
実験的な機能のon/offを触ると動きが改善されるパターンが手元でも有りました。
「GPU ~」と「WebGL ~」あたりでしょうか。

自分の場合:
p5.jsでcanvasを使った実装をしました。
chromeとiPhone7のsafariでは問題なく、iPhone12(iOS15.2)とmac(M1 / v12.1)のsafariだと、処理落ちしています。

デフォルトでonになっているみたいなので、デベロッパーからはどうすることも出来なそうです。

hrgwtrhrgwtr

ただ、1年くらい前にThree.jsで作ったものを確認したが、問題なく動いていた。
何かの組み合わせなのかもしれない。
ただ、手元のコードで、現象が起きるのはsafariのみなので、safariのバグ(仕様?)だと思って静観するしかなさそうです。

hrgwtrhrgwtr

検証プラス:
iPad(iOS14.7.1)の場合でも問題なく動く。やはりiOS15以降の問題なようです。
iOS14だと、実験的な機能にもGPUやWebGL via Metal も無いし、WebGPUもデフォルトoffになっていたりするので、やはり引用先にあったように、この辺りが悪さしてそうです。

このスクラップは2022/01/22にクローズされました