Objective-c上でJavascriptを実行出来る環境を手に入れる

どうも、吉村です。

WWDC2013の内容の一つに、JavaScriptCore.frameworkの説明するセッションがあります。
これを使えば非常に簡単にJavascriptをObjective-c上で走らせることが可能になります。
 ※同じことをPythonでもチャレンジしようとしたのですが、あまりの面倒臭さにほっぽり投げてしまいました。

今回はせっかくなので、csg.jsを組み込んで遊んでみたいと思います。

CSG(Constructive Solid Geometry)は、球体や、立方体等のオブジェクト同士での引き算や足し算、論理演算を行う手法です。
csg.jsはその実装の一つです。

ではやってみましょう。

まずはJavaScriptのコンテキストを作成して、csg.jsを読み込ませます。

はい、これでもう準備は万端です。

さっそくジオメトリ演算をやらせてみましょう。
今回は単純に、立方体 – 球体の計算を行います。

javascript的には、
var cube = CSG.cube();
var sphere1 = CSG.sphere({ radius: 1.0, center: [%f, %f, %f] });
var polygons = cube.subtract(sphere1).toPolygons();
という所ですね。

はい、これでもう演算は終了です。
こんなに簡単にCSGができるなんて楽チンですね!
これでめでたしめでたし・・・というと怒られそうなので、
ちゃんと可視化しましょう。

今回は簡単に、ポリゴンをワイヤーフレームとして描画してみます。
そのために、Javascriptからの計算結果であるpolygonsから、線の頂点群を取り出してみましょう。

頂点のバッファとして、あらかじめ、
std::vector m_linesVertices;
を用意しておきましょう。
JSValueには[]が使えるので、直感的にアクセスしていくことができます。
細かい所はcsg.jsのリファレンスを参照しながらたどっていきます。

これができれば、あとはm_linesVerticesをglDrawArraysで描画すれば完成です。
今回ごく単純な以下のシェーダーを用意しました。

描画コードを追記すれば、
以下の動画のようにジオメトリ演算の結果を見ることができます!

CSG from wowdev on Vimeo.

描画コードもろもろ含んだソースコードは以下から手に入れることができます。
https://github.com/wowdevjp/CSGJS_embed_objc

是非皆さんもJavaScriptCoreを試してみてはいかがでしょうか。