Kugelblitz

いつ何時誰の挑戦でも受ける!

WebGLデモ#01

そろそろWebGLに手を出してみようかと思います。なお、現時点でのブラウザ毎の対応状況はこんな感じです。もう古いブラウザの人は切り捨てていいんじゃないかな。で、作ったデモがこれです。
web_gl_demo01

デモの仕様ですが、中点変位法でランダムに作成した島の地形の周りを、楕円形にカメラを動かしています。カメラの向いている方向は原点(0,0,0)です。

光源の位置を上下させて朝-昼-夕を演出していますが、夕方の次は夜ではなく、朝になります。夜にするのも別に簡単なのですが、現状夜景の演出等はなく、ただ薄暗い画面を眺めているのもおもしろくはないので。星空とかにすればいいのかな?

実装ですが、イチからWebGLの低レベルAPIを叩くのもつらいので、three.jsを間に入れることにします。サンプルコードもたくさん掲載されているので、使い方の習得はそんなに難しくないんじゃないでしょうか。デモを作ってみて思いましたが、目に見えるものをつくるので、結果の複雑さの割にはわりと簡単なんじゃないかと思います。

また、一応スマートフォンでも観れるようにはしてみました。WebGLとは直接関係ないですが、Androidの標準ブラウザが一番怪しげな動きになりますね。z-indexが効かないので「-webkit-transform: translate3d(0,0,1px);」とかで上下関係を指定してたりしています。

Pocket

他の記事