gl.enchant.jsを最新のブラウザーに対応させる！？

Question

実現したいこと

gl.enchant.jsで作ったゲームが、最新のブラウザーでも正しく表示されるようにしたい！

前提

お世話になります。
古いモジュールですので、あきらめるのも手ですが、できれば対応したいと考えています。
PCや古いスマホでは、正しく表示されるのですが、
新しいスマホでは、ポリゴンが崩れて表示されます。
新しいスマホでもedgeでは大丈夫だったりと、まだブラウザーによってはまちまちなのですが、流れからして、今大丈夫なブラウザーも今後は見れなくなっていくと思われます。

つまりgl.enchant.js中に、最新のjavascriptでは廃止されてしまった構文が使われているのではと考えています。

問題個所を探しやすくするために、code9leapに、次のように必要最小限のコードを書きおろしました。

enchant()
const game = new Game()
game.onload = () => {
const sn = new Scene3D, cb = new Cube
sn.addChild(cb)
}
game.start()

これは、画面にただ立方体を表示するだけの単純なコードです。
しかし、これを最近のandroid端末で実行すると、ポリゴンが崩れて6面ある立方体のうち、1面だけが薄く表示されるだけになってしまいます。

次のアドレスから上のコードを実行できますので、試していただきたいです。
https://coderun.9leap.net/codes/211902/

そして、
gl.enchant.jsのどこをどう修正すれば良いか解説をお願いします。

Comments

[Lhankor_Mhy]

当方の以下の環境では同じもの（黒背景に灰色の正方形）が表示されました。
・Win 10 Chrome、Firefox、Edge
・iOS Safari
この表示が正しいのか崩れているのか、どちらなのかわからないですが、比較できるものがなかったので検証は難しいかもしれません。

[qg0]

失礼しました。
おっしゃる通り、先ほどの例は、正しい時とおかしい時の区別が文章だけでは全く伝わらない内容でした。

ですから、先ほどのコードを少し変えました。

enchant()
const game = new Game()
game.onload = () => {
const sn = new Scene3D, sp = new Sphere
sn.addChild(sp)
}
game.start()

このコードを実行すると、黒背景の中央に灰色の球体が表示されます。
しかし、最近のアンドロイド端末だと、黒背景のやや右上に球体ではない変てこな模様が表示されます。
つまり意図した形でない変な物が出てきてしまいます。

こちらのアドレスで実行できます。
https://coderun.9leap.net/codes/211905/

恐れ入りますが、もう一度見てもらえますか。

[int32_t]

> https://coderun.9leap.net/codes/211905/

Android14の携帯電話とタブレットのChromeで見てみましたが、きれいな球体が表示されました。

[qg0]

情報ありがとうございます。
私の新しいスマホもAndroid14でした。
新しいスマホだと一律にダメだと思い込んでいました。
家にある端末だと、

Windows10：
〇Chrome125.0.6422.61
〇Edge125.0.2535.51
〇Firefox56.0
〇Opera110.0.5130.23

iOS15.8.2：
〇Safari
〇Chrome124.0.6367.111

Android7.1.1：
〇Chrome119.0.6045.193

Android8.0.0：
〇Chrome125.0.6422.53
〇Firefox126.0

Android13：
×Chrome123.0.6312.118

Android14：
×Chrome124.0.6367.179
×Firefox126.0
〇Edge124.0.2478.104

以上のように、わりと新しい機種でうまく表示されない状況です。
しかし、同じ機種でもブラウザーを変えればちゃんと表示されたり、機種性能の問題でもないと考えています。

しかし現状ほとんどの端末で正しく表示されているなら、しばらく放置でも問題ないか・・・。