本サイトのトップページにアクセスすると、暗い背景の中、カラフルな玉が行ったり来たりしています。WEBではあまり見ることがない滑らかな動きに「おぉっ」となった方もいるのではないでしょうか?
しくみが気になっている方のために、どんな方法を使っているのか解説いたします。
WEB GLとThree.js
最近のWEB(ブラウザ)は3DCG(3次元コンピューターグラフィックス)を扱うことができます。名前の通り[幅][高さ]に加えて[奥行]のある領域にコンピューターで描画するというものです。
スマホアプリのゲームなどで、立体感のある物体などは、3DCGで描かれているものが多いです。例えば、「ねこあつめ」は2Dですが、「ポケモンGO」は3DCGです。
その3DCGをブラウザで使えるようにしているのが、WEB GL という技術です。
ただそのWEB GL、非常に専門的かつ難解で、一般のWEB屋さんにはとても扱いきれないです。
ですがそんな人達でも気軽にWEB GLを扱えるように、Mr.Doobさんというとても頭の良い、本当に立派な方が、難しい計算を全て代行してくれるThree.jsというものを作ってくれました。
このThree.jsを使うことで、難しいことを考えずに直感的に3DCGを扱えるようになりました。当然、シナプスのトップページもThree.jsで実装されております。
実際に動いているボールの数は
なんと10000個です。
ブラウザを開くと瞬時に10000個の球を描き出して、しかもいい感じで動かしてくれます。色に関しては約1677万色からランダムで選ばれています。
いろんな技術の進化を感じます、ありがたいです。
Mr.Doobさんありがとう。