読者です 読者をやめる 読者になる 読者になる

CX's Hatena Blog

はてなブログを使ってみるテスト

jsdo.it 2年目を振り返ってみる

JavaScript WebGL Three.js Oimo.js Windows

jsdo.it を使い始めて早2年。気が付いたらコード投稿数が1000本を超えてました。

f:id:cx20:20150405161421p:plain

せっかくなので、少し振り返ってみたいと思います。

WebGL

WebGL は難しいという話をよく聞くので、ライブラリ無しでどれだけ頑張れるか試してみました。

自分が試してみた限りでは、難しいというよりは、冗長なコードが多いだけで、自前で3次元空間にプロットするようなケース(リサージュ図形を描く等)であれば意外とライブラリ無しでも行けそうな感触です。

変換行列を使った拡大・縮小、回転などの操作も、公式に当てはめるだけなので、時間に余裕のある人は勉強がてらにスクラッチで書いてみるのも良いのではないでしょうか。

GLSL

GLSL は GPU の為のプログラミング言語(シェーダ言語)です。WebGLOpenGL のシェーダ言語として採用されています。

シェーダは習うより慣れろ的な風潮?があるようなので、先人の方のコードを色々と試してみました。

Shadertoy BETA

GLSL Sandbox Gallery

Filters〜世界一面白いカメラフィルターが、ここから生まれる。〜

Three.js + Oimo.js

Oimo.js は、Saharan さんの ActionScript 3.0 版物理演ライブラリ「OimoPhysics」を lo-th さんが、JavaScript にコンバージョンしたものになります。

他にもいくつか JavaScript の 3D 物理演算ライブラリがあるのですが、Oimo.js がファイルサイズがコンパクトなのとパフォーマンス的に優れている為、個人的にオススメです。

cx20.hatenablog.com

国土地理院3Dデータ

昨年より国土地理院の3Dデータを WebGL 形式(Three.js を使った HTML ファイル)でダウンロードできるようになりました。

地理院地図3D

これを応用して、色々な 3D 表現を試してみました。

番外編

先日、マイクロソフト社より Internet Explorer 部門Microsoft MVP を頂きました。

cx20.hatenablog.com

jsdo.it への投稿数、PV数が活動の成果として認められたのではないかと思われます。

まとめ

  • WebGL はスクラッチでも意外となんとかなる
  • GLSL は先人に学ぶべし
  • 3D物理演算は Oimo.js がおすすめ
  • 国土地理院のデータは遊べる
  • jsdo.it で 1000本投稿すると MVP がもらえる(かもしれない)
  • jsdo.it は楽しい。