この度、約3年ぶりにサイトを全面リニューアルしました。

せっかくなのでこれを機会に新しいことに取り組んでみようと思い立ち、かねてより興味があったWebGLによるインタラクティブな3DCG表現に挑戦してみました。

WebGL自体はさほど目新しいものではないのかもしれませんが、3DCGの表現技術うんぬんより、まずブラウザの挙動に差がありすぎて怖くて使えなかったというのが実情ではないかとおもいます。

私自身は今現在もどうなのかなという思いはありますが、今年（2022）の6月にIEがサポートを終了するので思い切ってやってみました。

実際、リニューアルはしたもののモバイル表示でタッチスクロールできないという不具合が発生しました。（これについてはブラウザの挙動問題関係ないですが）

まあこのあたりは既知の問題で、クリアできたつもりでいたんですがやっぱりちょっと難しかったですね。
追記　その後クリアしました。

問題解決のため様々な方法を試すうち、よくよく考えてみたらそもそもモバイル表示がインタラクティブである必要があるのかと考え始めました。

というのも、PCではマウスホイールでスクロールを行うのでクリックとは動作が全く違うので競合することはありませんが、スマートフォンやタブレット操作におけるタップ、フリック、スワイプなどは類似動作で、3Dモデルを動かしたいのにスクロールしたなど、結局使い勝手が悪くなってしまうことからどちらかに制限をかけたりしますが、構成的にスクロールに制限をかけるわけにいかないので3Dモデルを動かすことができないようにする必要があります。

だとすると、モバイル表示でWebGLを使う必然性がまったくなく、動画とかでいいじゃないかという結論にいたりました。

動画とかと書きましたが、アニメーションを扱える画像形式であるWebP（ウェッピー）とAPNG（エーピング）で迷い、使い慣れたAPNGに落ち着きました。

最終的にはPC表示では3DCGモデルを使い、スマートフォンとタブレット表示にはAPNGで表示してスクロールできるように変更しました。

ただちょっとAPNGのサイズが大きすぎて重いです。もうちょっとなんとかしないとだめですね。
試しにWebP で出力してみたらサイズがAPNGの半分以下になったので、品質がさほど変わらないのであれば WebP に変えるべきかもしれません。
Webpでも重かったです。
その後タッチスクロール問題が解決し、現在はスマートフォンとタブレットでも3Dモデルが表示されています。
※ただ、 スマートフォンとタブレット の場合には先に述べたように操作の重複が考えられるのでPCのように 3Dモデル をユーザーが動かすことはできない設定としました。

なお、IE（インターネット・エクスプローラー）ではWebGLによる3DCGはまったくもって完全に表示されなかったのでIEによるアクセスの際には背景に静止画像が表示されます。

せめて動いてほしかったのでAPNGがよかったんですが、プラグインを入れないとIEが対応していないので断念しました。

まあ、IEは今年（2022）の6月にサポート終了なのでさして心残りはありませんが。