会社では、サーバサイドの開発者だが、
知見として、3D技術は扱えるようにしておきたいと、個人的は思っている。
Unityとか勉強しようかとも思ったけど、
Unityでなにか作りたいものがあるわけでもない。
WebGLなら、なにか今後作ってみる機会もありそうなので、tree.jsというものを勉強してみる。
three.js とは
WebGLを簡単に扱えるようにしたJavaScriptのライブラリである。
去年あたりから、自分は耳にしたが今も頻繁に開発が進んでいるようだ。
WebGLをそのままコーディングすると、三角形を描画するだけでも途方に暮れてしまう…。
昔、DirectX の勉強をしたときのように簡単に挫折を味わえる。笑
深い部分は、ある程度使えるようになってから、個々に調べて知見を深めればいいと思うんだ。
だから、最初はライブラリとかで簡単に始められるものの方が理解も早いと思っている。
というわけで、three.jsを勉強する事にした。
HTML5 の描画機能
HTML5についている描画機能としては、以下の3つが主なものだ。
SVG以外の2つはCanvas要素上でコンテキストを扱って描画処理を実現出来る。
- Canvas 2D Context
CPUで計算される
処理速度はそこまで早くはないが、
殆どのブラウザで正しく動作できる対応状況。 -
Web GL Context
GPUで計算が行われる。
ブラウザの対応状況が最近になって進んできている。
モバイルsafariでは、対応出来ていないよう。 -
SVG (Scalable Vector Graphics)
まだ何に使うのかよくわからない。
こちらは、canvasではなく、svg要素上に描画していくようだ。
単純な図形の描画なら効率的なようだ。
WebGL
今回勉強するthree.js はWebGLを簡単に扱えるようにしたJavaScriptのライブラリだ。
ブラウザの対応状況が加速しているので、
来年くらいになったら、一般的に利用している状況になっているんじゃないだろうか。
自分も勉強してから使えるようになったら、
Erectronで作ったアプリに無駄に3D実装したりしてみたい。
(無駄にエフェクトいれたりね)
夢が広がるぜ〜。