シェーディング強化

なんか IE6 だと壁の表示がおかしくなるよなーと思っていたのですが、ま、どうせ IE6 だし、とあまり気にしてはいませんでした。
ところが Opera でも同じ現象が起きることを確認したので、これは修正せねば、とちょっと本気出して調べました。

具体的にはこんな現象になります。

赤で囲ったところは本来連続している壁なのですが、こんな風に切れてしまいます。
計算誤差か何かかと思いましたが、そうではなく、 div の border の挙動が IE6 と Opera については異なるようです。

本気出して調べた割には、解決方法まで調べていないのですがｗｗｗ　回避策を模索している中で現在壁単位でフラットシェーディングしているのを１枚の壁の中でなめらかに色を変化させるグローシェーディング風の描画ができることに気づきました。
もっと早く気付いても良かったんですがｗｗ

やってみたのがこれ。

ただしあくまでもグローシェーディング「風」で本当のグローシェーディングではありません。


具体的な方法は例によって力技でしてｗ、今まで１枚の壁は１枚の div (の border) で表示していたのを複数の div (の border) で表現するようにしたというだけです。
つまり表示する div の数が無茶苦茶増えていますｗ

当然処理速度が犠牲になるので処理速度に応じて分割数が変化するようにしました。
処理速度の遅い FF や IE8 ではこの程度の分割数になります↓

ぱっと見は今までと殆ど変わらないですねｗ 　一応２～３分割はされているようです。

Opera や IE6 で壁が途切れてしまう件は、こうやって１枚の壁を複数に分割することで回避しています。なんで回避できるのかは調べてませんｗ