ものすごく久々の更新です。

最近使用している環境は専らMacで、VirtualBoxではなく開発環境もParallels Desktop上のLinuxを使うことが多くなりました。

EnableSendFileの設定などはもちろんVirtualBox同様必要なのですが、それ以前の問題としてアップデートを行ったところネットワークをブリッジに設定すると接続できなくなってしまいました…。

いろいろ調べたところ、設定ファイルを修正することで接続できるようになりました！その方法は以下の通りです。

config.pvs

まず、仮想マシンのファイルがあるフォルダをFinderで開きます。標準では、書類の中のParallelsフォルダになるかと思います。

次に、対象となる仮想マシンのファイル（.pvmファイル）を右クリックし、「パッケージの内容を表示」を選びます。

その中のconfig.pvsをテキストエディタで開きます。

そのうち、以下のような記述があるはずなので、その部分を変更します。

<NetworkAdapter>
...
<ForceHostMacAddress>1</ForceHostMacAddress>
<DHCPUseHostMac>0</DHCPUseHostMac>
...
</NetworkAdapter>

私の環境では上記設定のみでうまくいきましたが、それでもだめな場合はDHCPUseHostMacも1に設定してみてください。

VirtualBoxにCentOSなどのLinux環境を構築し、そこへApacheやらデータベースサーバやらをインストールしてWebアプリの開発を行うことがよくあります。

その際に、ホストのディレクトリを共有フォルダ設定してマウントパスをApacheのDocumentRootに指定すると便利に開発できるかと思います。

・・・が、しかし、今日その設定を行ってみてブラウザで表示を確認してみたところ、なぜか静的コンテンツがまともに表示されません・・・。

まっしろになってしまったり、更新したはずなのに古いものが表示されたり・・・。一体原因はなんなんでしょうか。。

EnableSendfile

Apacheの設定ファイル、httpd.confのcache関係のモジュールをオフにしたりといろいろとやってみましたが、全く変化ありません。

あきらめかけていたのですが、Live HTTP Headersでヘッダを見てみたところ、静的コンテンツが、206 Partial Content というレスポンスになっていることが分かりました。

このレスポンスコードをたよりに色々と検索してみると、どうやら EnableSendfile ディレクティブをオフにすればよいらしいことが分かりました。

さらに、このディレクティブについて調べてみると、

ネットワークマウントされた DocumentRoot (例えば NFS や SMB) では、カーネルは自身のキャッシュを使ってネットワークからのファイルを 送ることができないことがあります。

とあり、まさに今の症状の通りでしたので設定してみると・・・。

うまくいきました！！

もし、同じような状況に直面している人がいたらお役に立てば嬉しいです。

普段、会社ではUbuntu 8.10を使っているのですが、なぜかFirefoxが遅い・・・。Firefoxが、というよりかはFirefoxで動かすJavascriptが遅い感じなのです。

ちょっと遅い感じがする、というレベルではなくAjaxを多用しているサイトとかだと止まるんじゃないかと思うほど分かりやすい遅さです。

調べてみると、ipv6系のネットワークの遅延についての記事はたくさん出るのですが、Javascriptが遅いという話はなかなか見つかりませんでした。

ビルドオプションがおかしいのかな？と思って、最適化ビルドされたSwiftfoxを試してみることも考えたのですがバージョンが3.0.4系で止まってしまっているので、自分でビルドしてみることにしました。

apt-getを駆使する

Ubuntuはdebian系のディストリビューションなので、ソースからビルドし最終的には.debファイルにしてパッケージ化しておき、公式リポジトリ側がバージョンアップしたら更新できるようにしたいと思います。

まず、ソースコードの取得について。

普通ソースコードは公式サイトからtarボールやsvn, cvsなどのバージョン管理ツールで取ってくることが多いと思いますが、debパッケージ管理されているアプリのソースは、以下のコマンドで取得できます。

カレントディレクトリにいろいろ展開されるので、専用にディレクトリを作成し、その中で行った方が良いです。

また、このソースをビルドするために必要なパッケージを一括でインストールすることもできます。

debuild

ビルドには、debuildというツールを使うのですが、この辺がちょっとややこしかったです。

apt-get sourceでソースを取ってくると、前述のように色々とファイルを取得して新しくディレクトリが作成されます。この中にソースやらが入っているのですが、debianというサブディレクトリができていると思います。

この、debianの中に重要なファイルとして、ビルドオプションなどが定義されたrules、バージョン情報が書かれたchangelog、依存関係が定義されたcontrolなどが存在していると思います。

まずはrulesを編集してビルドオプションを変更します（以下は変更箇所のみ）。

CFLAGS = -g -O3 -march=native
CXXFLAGS = -g -O3 -march=native

#
#   (中略)
#

    -enable-optimize="-O3 -w -march=native" ¥

そして、changelogの編集ですが、これはコマンドで行うことができますが、それにはdevscriptsパッケージが必要なのでインストールしておきます。

次に編集用のコマンドを実行しますが、これはdebianディレクトリの親ディレクトリをカレントにして行う必要があります（そうしないと、debian/changelogが無いと怒られます）。

debchangeを起動するとエディタの選択肢が出るので好みのものを選びます（私は1のviにしました）。

とりあえず、何もせずに保存してしまっても特に問題はないですが、分かりやすいようにコメントを入れたり、リポジトリが更新するであろうバージョン番号の採番方法と重複しないように修正を入れます（バージョンについては、一つ下のバージョンがリポジトリの最新バージョンなので、それに -0 とかを付加したものにしておけばいいかと思います）。

ここまでで一応準備は整ったので、最後にビルドコマンドを実行します。

しばらく時間が掛かると思いますが、そのうちプロンプトに戻るはずです。もしエラーが出たら、failedとか出ているはずなので・・・その時はrulesかchangelog（たぶんrulesのほう）の記述が間違っている箇所があるので修正後再度実行します。

debのインストール

ビルドが終わると、最初の作業ディレクトリ（今まで作業していたところの親ディレクトリ）に移動するとたくさんのdebファイルができていると思います。

Firefoxの場合は、firefox-3.0_3.0.7+nobinonly-0ubuntu0.8.10.1-0_i386.deb（バージョン番号によってファイル名が違います）というファイルが本体で、あとfirefox-3.0-gnome-supportとfirefox-3.0-brandingの2つのパッケージも入れておかないと依存関係が壊れているとか言われてしまうので要注意です。

インストールは普通のdeb同様、

という感じでいけます。

インストールしたが・・・

さて、上記でビルド済みのパッケージをインストールできたはずなんですが・・・。about:buildconfigを見てみても、ビルドオプションが全く変化なしでした。。。orz

速度的にも大して変化はないようなので正しくインストールできているのかどうか謎です。ただ、ビルド中のコマンドラインオプションに追加した最適化オプションなどは入っていたのは確認できたんですが・・・。

うーん、どういうことでしょう・・・？(?_?)

PHPを使って、アクセス解析結果やアンケートの集計結果などグラフを表示したいという機会は結構あるのではないかと思います。

しかし、何もないところからこれを作ろうとするとかなり骨が折れる上に、美しいグラフを作成するのは難しいのではないかと思います。

今回はオープンソースのライブラリを使って、比較的簡単にグラフを作成してみたいと思います。

pChart

まずはpChartというライブラリから。これはGPLライセンスのライブラリで、サーバサイドで画像を生成するタイプのものになります。動作には、GDサポートを有効にしたPHPが必要となります。

対応しているグラフの種類は、

• 折れ線グラフ
• 3次スプライン曲線
• プロットチャート
• 棒グラフ
• パイチャート

と、豊富に対応していて、生成されるグラフの品質もかなり高いです。

このライブラリは、データを表すpDataとグラフを表すpChartという二つのクラスを使って描画を行います。使い方は以下のような感じです（サンプルをちょっとだけ変えたものです）。

<?php
 // Standard inclusions
 include("pChart/pData.class");
 include("pChart/pChart.class");  

 // Dataset definition
 $DataSet = new pData;
 $DataSet->AddPoint(array(10,2,3,5,3),"Serie1");
 $DataSet->AddPoint(array("1月","2月","3月","4月","5月"),"Serie2");
 $DataSet->AddAllSeries();
 $DataSet->SetAbsciseLabelSerie("Serie2");  

 // Initialise the graph
 $Test = new pChart(380,200);
 $Test->setFontProperties("Fonts/VL-PGothic-Regular.ttf",8);
 $Test->drawFilledRoundedRectangle(7,7,373,193,5,240,240,240);
 $Test->drawRoundedRectangle(5,5,375,195,5,230,230,230);  

 // Draw the pie chart
 $Test->setFontProperties("Fonts/VL-PGothic-Regular.ttf",8);   

$Test->drawPieGraph($DataSet->GetData(),$DataSet->GetDataDescription(),150,90,110,PIE_PERCENTAGE,TRUE,50,20,5);
 $Test->drawPieLegend(310,15,$DataSet->GetData(),$DataSet->GetDataDescription(),250,250,250);  

 $Test->Render("pchart.png");

日本語を表示するためには、setFontProperties() で日本語に対応したフォントを指定する必要があります。メソッドに渡す文字列のエンコーディングをUTF-8にしておけば、表示されるはずです。

このライブラリの面倒な点は、画像サイズはいいとしても、描画するグラフの座標をすべて細かく指定する必要があるところです。全体の大きさを変えたい、という時はすべてのパラメータを変更していくか、あらかじめ各パラメータの数値を最初のpChartのサイズに対する割合（または差分）で変数に入れておくかしなければなりません。

計算でパラメータを求めるように変更したソースは以下のようになります。

<?php
 // Standard inclusions
 include("pChart/pData.class");
 include("pChart/pChart.class");  

 define("CHART_WIDTH", 380);
 define("CHART_HEIGHT", 200);

 define("CHART_MARGIN", 5);

 // Dataset definition
 $DataSet = new pData;
 $DataSet->AddPoint(array(10,2,3,5,3),"Serie1");
 $DataSet->AddPoint(array("1月","2月","3月","4月","5月"),"Serie2");
 $DataSet->AddAllSeries();
 $DataSet->SetAbsciseLabelSerie("Serie2");  

 // Initialise the graph
 $Test = new pChart(CHART_WIDTH,CHART_HEIGHT);
 $Test->setFontProperties("Fonts/VL-PGothic-Regular.ttf",8);
$Test->drawFilledRoundedRectangle(CHART_MARGIN+2,CHART_MARGIN+2,CHART_WIDTH-CHART_MARGIN-2,CHART_HEIGHT-CHART_MARGIN-2,CHART_MARGIN,240,240,240);
 $Test->drawRoundedRectangle(CHART_MARGIN,CHART_MARGIN,CHART_WIDTH-CHART_MARGIN,CHART_HEIGHT-CHART_MARGIN,CHART_MARGIN,230,230,230);  

 // Draw the pie chart
 $Test->setFontProperties("Fonts/VL-PGothic-Regular.ttf",8);
$Test->drawPieGraph($DataSet->GetData(),$DataSet->GetDataDescription(),CHART_MARGIN*10+(CHART_WIDTH-CHART_MARGIN*10)/3,CHART_HEIGHT/2-CHART_MARGIN*2,(CHART_WIDTH-CHART_MARGIN*10)/3,PIE_PERCENTAGE,TRUE,50,20,5);
 $Test->drawPieLegend(CHART_WIDTH-CHART_MARGIN*14,CHART_MARGIN*3,$DataSet->GetData(),$DataSet->GetDataDescription(),250,250,250);  

 //$Test->Render("pcharat.png");
 // direct output image
 $Test->Stroke();

これで、defineしている数値を変えるだけで全体の大きさが変わります。しかし、あまり直感的でないしコードが読みづらいですね・・。上記をラップしたメソッドを用意して自動的に値を伸縮させるとスッキリしそうですが。

あと、このライブラリの特徴としてpCacheクラスというのを使うことでデータをキャッシングして高速化することができるようです。

Open Flash Chart

これはLGPLのグラフライブラリで、Flashをつかった描画ができます。JSONを使ったデータをFlashに受け渡す構造になっているため、基本的にサーバサイドの言語はなんでも使えると思います。

グラフの種類は、

• 折れ線グラフ
• 棒グラフ（スタイルが何種類か）
• エリアグラフ
• パイチャート
• 散布図
• レーダーチャート

が使えるようです。描画部分はFlashなのでグラフの種類によってはアニメーションさせることもできます。

用意されているクラスライブラリはPHPのほか、

• Ruby
• .Net
• Perl
• Java
• Python
• Google WebToolkit

と、多くの言語に対応されています。

このライブラリは、前述のとおりデータをJSONで受け渡すので、サーバサイドでのJSON生成コードとFlashへ受け渡すためのJavascriptコードの2つが必要となります。

まず、JSON生成部分は以下のようになります。

// ランダム値のデータを用意
srand((double)microtime()*1000000);
$data = array();
for( $i=0; $i<10; $i++ )
  $data[] = rand(2,9);

require_once('OFC/OFC_Chart.php');

$title = new OFC_Elements_Title("テスト");

// ここのオブジェクトの選び方でグラフの種類が決定される
$bar = new OFC_Charts_Bar_3d();
$bar->set_values( $data );
$bar->colour = '#D54C78';

$x_axis = new OFC_Elements_Axis_X();
$x_axis->set_3d( 5 );
$x_axis->colour = '#909090';
$x_axis->set_labels( array(1,2,3,4,5,6,7,8,9,10) );

$chart = new OFC_Chart();
$chart->set_title( $title );
$chart->add_element( $bar );
$chart->set_x_axis( $x_axis );

上の例では、OFC_Charts_Bar_3d クラスを使っていますが、これを変更することによってグラフの種類をいろいろと変えることができます。

Javascript側はJSONデータを設定して決められた関数でFlashに受け渡すだけです。

<script type="text/javascript" src="js/json/json2.js"></script>
<script type="text/javascript">
function open_flash_chart_data()
{
    return JSON.stringify(data);
}

// toPrettyString() メソッドでJSON形式のコードがreturnされてくる
var data = <?php echo $chart->toPrettyString(); ?>;
</script>

また、上記のようにスクリプトベースで値をセットするのではなく、あらかじめJSON形式のデータをファイルに入れておき、GETパラメータで ?ofc=ファイル名 としても読み込むことができるようです。ファイル名のところはphpのようなサーバサイド生成できるスクリプトでもOKなので、同じグラフでデータだけ切り替えたい場合等に便利に使えそうです。

Google Chart API

Googleが公開しているグラフ生成APIです。自サーバへの負荷なし、プログラミングの知識もなしでグラフが使えるというのが最大のメリットでしょうか。

このAPIをPHPでさらに簡単に扱うことができるクラスライブラリを発見したので、使ってみることにしました。

使い方は本当に簡単で、以下のように書くだけです（最初の画像のような表示になります）。

include( 'GoogChart.class.php' );

/** Create chart */
$chart = new GoogChart();

// Set graph data
$data = array(
			'IE' => 46.94,
			'Firefox' => 40.68,
			'Safari' => 4.32,
			'Chrome' => 4.22,
			'Opera' => 3.03,
			'その他' => 0.78
		);

// Set graph colors
$color = array(
			'#99C754',
			'#54C7C5',
			'#999999',
		);

// Setup chart attributes
$chart->setChartAttrs( array(
	'type' => 'pie',
	'title' => 'ブラウザ利用比率',
	'data' => $data,
	'size' => array( 230, 150 ),
	'color' => $color
	));

// Print chart
echo $chart;

連想配列のデータを作ってグラフのインスタンスに渡すだけで、以下のようなGoogle Chart API用の img タグが生成されます。

http://chart.apis.google.com/chart?cht=p&chtt=%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E5%88%A9%E7%94%A8%E6%AF%94%E7%8E%87&chd=t%3A46.94%2C40.68%2C4.32%2C4.22%2C3.03%2C0.78&chl=IE%7CFirefox%7CSafari%7CChrome%7COpera%7C%E3%81%9D%E3%81%AE%E4%BB%96&chs=230×150&chco=99C754%2C54C7C5%2C999999&chm=&chf=a%2Cs%2Cffffff

今回紹介したライブラリは3種類とも、それぞれ特徴が異なるので用途によって使い分けるのがいいかな、と思います。

ここ数日、Astro (FP10) の3D機能をいろいろやってみてるのですが、Matrix関係やdrawTriangles()メソッドによって確かに便利になっていると思います。

しかし、3Dプログラミングをしようと思うと必ず必要な、ある重要な機能が抜けているのです・・・。

上は、私が試しにつくった球の3D表示のswfをキャプチャしたものですが、その機能がないおかげで、これだけでもかなり大変でした。。

シェーディング機能が全く用意されていない

実は、Flash Player10の3D機能にはシェーディング（3Dプログラミングにおいての）の機能が全く用意されていないのです。

これはどういうことかというと、DirectXやOpenGLなどの一般的な3DのAPIでは標準で用意されている光源やその光源によってどのような色で各ピクセルを出力するかといった計算を行う機能がAstroにはないということです。つまり、シェーディング部分を自前で実装する必要があります。

3Dのシェーディングは一般的なものにフラットシェーディング、グーローシェーディング、フォンシェーディングなどがありますが、これらをAction Scriptで実装するにはどうすればよいか、ちょっと考えてみました。

フラットシェーディング

フラットシェーディングとは面単位で色が決定されるシェーディング方法で、面法線をもとにランバート反射を計算するものです。

これは、三角形を描画する毎にbeginFill()でその色を塗ればよさそうです。三角形ごとに色がことなるので、今回追加されたdrawTriangles()は使えないと思います。

グーローシェーディング

これは、頂点単位の法線を用いて頂点毎のランバート反射を計算し、各頂点間の色を線形補完することによるシェーディング方法です。

これについては、beginGradiantFill()でいけるのかな？パラメータを見る限りちょっと難しそう・・・。ひょっとしたらbeginShaderFill()とかを使わないと無理かも。

フォンシェーディング

これは頂点単位の法線を補完してピクセル単位で法線をもとにランバート反射やフォンの鏡面反射モデルを適用するものですが、まともに計算するのはまず無理です（パフォーマンス的に計算量が多くなりすぎる）。

全く方法が思いつかなかったのですがPapervision3Dでは実現できてるみたいなので、ソースを見てみたところ、やはりまともなやり方を正面からやるのではなくライトマップで近似しているようです。

ライトマップとは、ライティングの計算を省略するためにテクスチャにライト情報をもたせてそれをもとに色をつける方法で、具体的にはテクスチャマッピングを行った後、このライトマップテクスチャを乗算します。

今回作ったもの

今回は、テクスチャマッピングが面倒だった（UVの用意とかが要るので・・）ので、ライトマップ自体に色をつけてそれっぽくしてみました。

ライトマップのビットマップデータの生成は以下のような感じでやっています（ほぼPapervisionのまんま・・）。

    public function makeLightMap(lightColor:int, diffuseColor:int, ambientColor:int, specularLevel:int):BitmapData
    {
      var w:Number = 1024;
      var mat:Matrix = new Matrix();
      var s:Sprite = new Sprite();
      mat.createGradientBox(w,w,0,0,0);

      s.graphics.beginGradientFill(GradientType.RADIAL, [lightColor,diffuseColor,ambientColor],
         [1,1,1], [0,255-specularLevel, 255], mat);
      s.graphics.drawRect(0,0,w,w);
      s.graphics.endFill();

      var bmp:BitmapData = new BitmapData(w,w,false,0x0000ff);
      bmp.draw(s);

      return bmp;
    }

放射状のグラデーションを使って、スペキュラハイライト〜ディフューズ色の減衰のようになるようにしています（全然正確ではないので、あくまでそれっぽい感じです＾＾；）。

これをどうやって物体に貼り付けるか、ですが、光線ベクトルと視線ベクトルのハーフベクトルを計算して、そのハーフベクトルの先から物体を見たときの法線ベクトルの位置をテクスチャ座標としてサンプリングしています（意味わかるかな・・）。ハーフベクトルを正規化した座標を視点とする行列を生成して、その行列で法線ベクトルを変換しているわけです。

    public function calcUV(mat:Matrix3D):void
    {
      uvts = new Vector.<Number>();
      for(var index:int = 0; index < vertices.length; index+=3)
      {
        var vertex:Vector3D = new Vector3D(vertices[index], vertices[index+1], vertices[index+2]);
        vertex = mat.transformVector(vertex);
        vertex.normalize(); // -1 〜 1 の範囲に

        uvts.push((vertex.x + 1.0) / 2.0);
        uvts.push((vertex.y + 1.0) / 2.0);
        uvts.push(1.0); // t は仮の値を入れる
      }
    }

こんな感じです。

ちょっと、環境によっては重いかもしれないのでswfを貼るのは今回はやめておきます。ソースは以下からダウンロードできるので興味がある方は見てみてください。
astro_phong.zip

以前紹介したバンプマッピングのPixel BenderをFlashで使おうとしてみたのですが、なぜかうまくいきませんでした・・・。

真っ黒でなにもでなかったり、明らかにおかしな色になってしまったのです。その際、色々試した結果をここでちょっと報告したいと思います。

まずは、上の画像がいったいなんなのかを説明します。

outCoord()の値を可視化する

上の画像は、outCoord()の値からx座標の値をR成分に、y座標の値をG成分にしたものです。

これには、以下のPixel Benderのコードを使っています。

<languageVersion : 1.0;>

kernel SampleFilter
<   namespace : "jp.flup";
    vendor : "Flup Inc.";
    version : 1;
    description : "outCoord test filter";
>
{
    input image4 src;
    output pixel4 dst;

    void
    evaluatePixel()
    {
        dst.r = (outCoord().x-100.0)/200.0;
        dst.g = (100.0-outCoord().y)/200.0;
        dst.b = 0.0;
        dst.a = 1.0;
    }
}

これは、Pixel Bender Toolkit で生成した画像を出力したもので、Flashはこの時点では関係ありません。

ShaderFilterの適用

次に、ShaderFilterで単一の入力イメージに対してフィルタを適用してみます。これはActionScriptになります。

package {
    import flash.display.*;
    import flash.filters.*;

    public class filter_test extends Sprite
    {
        [Embed(source="test.pbj", mimeType="application/octet-stream")]
        private static var ShaderByteCode:Class;

        [Embed(source="dummy.jpg")]
        private static var Image1:Class;

        private var bmp1:Bitmap;

        public function filter_test()
        {
            stage.align = StageAlign.TOP_LEFT;
            stage.scaleMode = StageScaleMode.NO_SCALE;

            bmp1 = new Image1() as Bitmap;
            addChild(bmp1);

            var shader:Shader = new Shader(new ShaderByteCode());
            bmp1.filters = [new ShaderFilter(shader)];
        }
    }
}

blendShaderにすると・・・

次に、2枚の画像に対してブレンドモードでShaderを適用してみます。フィルタも若干（といっても入力を増やすだけですが）変更します。

<languageVersion : 1.0;>

kernel SampleFilter
<   namespace : "jp.flup";
    vendor : "Flup Inc.";
    version : 1;
    description : "outCoord test filter";
>
{
    input image4 src;
    input image4 src2;
    output pixel4 dst;

    void
    evaluatePixel()
    {
        dst.r = (outCoord().x-100.0)/200.0;
        dst.g = (100.0-outCoord().y)/200.0;
        dst.b = 0.0;
        dst.a = 1.0;
    }
}

このようにして、入力画像を2つ使うことができるようにします（実際使ってはいませんが・・）。

次に、ActionScript側も入力画像を2つ使ってblendShaderを指定するように変更します。

package {
    import flash.display.*;
    import flash.filters.*;

    public class filter_test extends Sprite
    {
        [Embed(source="test.pbj", mimeType="application/octet-stream")]
        private static var ShaderByteCode:Class;

        [Embed(source="dummy.jpg")]
        private static var Image1:Class;

        private var bmp1:Bitmap;
        private var bmp2:Bitmap;

        public function filter_test()
        {
            stage.align = StageAlign.TOP_LEFT;
            stage.scaleMode = StageScaleMode.NO_SCALE;

            bmp1 = new Image1() as Bitmap;
            addChild(bmp1);

            bmp2 = new Image1() as Bitmap;
            addChild(bmp2);

            var shader:Shader = new Shader(new ShaderByteCode());
            bmp2.blendMode = BlendMode.SHADER;
            bmp2.blendShader = shader;
        }
    }
}

実際には入力画像はつかっておらず、outCoord()の値のみで出力画像を生成しているので、結果は以前と変わらないはずですが・・・。

どういうことなのか？

これが仕様なのかバグなのかは私には分かりませんし、私の方法が悪いのかもしれませんが、blendShaderでpbjを使うと、outCoord()が出力ピクセル毎に（ほぼ）同じ値になってしまうようです。ほぼ、と書いたのは全く同じかどうか確認することができず、座標系が異なっている可能性もあるので・・。

ただ、Pixel Benderでは1ピクセルにつき座標を1増減するつもりで記述している（し、Pixel Bender Toolkitではそれで問題なく動作を確認している）ので、outCoord()の値によってピクセル値を制御することをblendShaderでやりたい場合は今回のような問題が発生しそうです。

一体これはどういうことなんでしょうね？どなたか原因が分かる方いらっしゃったらお教えください・・・。

昨日、広島Ruby会議 01-2009 に行ってきました。

なかなか盛況でたくさんの方が参加されていましたが、スーツ率が高く若干肩身が狭かったです（笑）

実は私は今までRubyは触ったことがまったくなかったのですが今回イベントに参加してみて、興味が出てきたのでちょっとやってみようかと思います。

お題としては、最近久々にいろいろやっている3D系のプログラムを書いてみることにします。果たしてうまくいくのかどうか・・・。

環境準備

開発環境はUbuntu 8.10で、rubyパッケージはインストール済みの状態でした。

RubyでOpenGLをやる場合、ruby-opengl というgems（Rubyのライブラリパッケージ管理のシステム）のパッケージが必要なようなので、入れてみます。

すると、gemコマンドがないと怒られました・・・。rubygemsパッケージが入っていなかったようなので、synapticからインストールします（パッケージ名が分からなかったので。apt-get install rubygems でもOK）。

再度、先ほどのコマンドを実行すると、今度は rake コマンドがないといわれたので、

します。

今度こそいけるかと思いきや、大量のコンパイルエラーが・・・。エラーを追ってみてみると、どうやらOpenGLのGLUT関係のヘッダのincludeでこけている模様。

再びsynapticからパッケージをopenglとかで検索してみてみると、freeglut3-devというのを発見！たぶんこれだろうということで、インストール。

ここで、最初に入れたruby-openglのインストールコマンドを実行すると、ようやくインストールに成功しました。

あとはOpenGLのコードを書くだけ

実際大変だったのは、上記の環境の設定で、あとは公式サイトのリファレンスを見たりしましたがそれほど難しいところはありませんでした。

作法(?)として、セミコロンがいらなかったり、クラスやメソッドの宣言で { } を使わなかったり、インスタンス変数に@を付けたり、インスタンス化が、new Class() ではなく、Class.new() にするといったところは多少戸惑いましたが、覚えれば何てことはなさそうです。

今回作ったコードは以下のような感じです。

#!/usr/bin/ruby

#-----------------------------------------
# GLUTでティーポットを描画するだけのプログラム
# @author flipper
# @date   2009.03.12
#-----------------------------------------

require "rubygems"
require "opengl"
require "glut"

class Teapot
    LIGHT_POSITION = [0.25, 1.0, 0.25, 0.0]
    LIGHT_DIFFUSE  = [1.0, 1.0, 1.0]
    LIGHT_AMBIENT  = [0.25, 0.25, 0.25]
    LIGHT_SPECULAR = [1.0, 1.0, 1.0]

    MAT_DIFFUSE   = [1.0, 0.0, 0.0]
    MAT_AMBIENT   = [0.25, 0.25, 0.25]
    MAT_SPECULAR  = [1.0, 1.0, 1.0]
    MAT_SHININESS = [32.0]

    def reshape(w,h)
        GL.Viewport(0,0,w,h)

        GL.MatrixMode(GL::GL_PROJECTION)
        GL.LoadIdentity()
        GLU.Perspective(45.0, w.to_f()/h.to_f(), 0.1, 100.0)
    end

    def display()
        GL.MatrixMode(GL::GL_MODELVIEW)
        GL.LoadIdentity()
        GLU.LookAt(0.5, 1.5, 2.5, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0)

        GL.Lightfv(GL::GL_LIGHT0, GL::GL_POSITION, LIGHT_POSITION)
        GL.Lightfv(GL::GL_LIGHT0, GL::GL_DIFFUSE, LIGHT_DIFFUSE)
        GL.Lightfv(GL::GL_LIGHT0, GL::GL_AMBIENT, LIGHT_AMBIENT)
        GL.Lightfv(GL::GL_LIGHT0, GL::GL_SPECULAR, LIGHT_SPECULAR)

        GL.Materialfv(GL::GL_FRONT, GL::GL_DIFFUSE, MAT_DIFFUSE)
        GL.Materialfv(GL::GL_FRONT, GL::GL_AMBIENT, MAT_AMBIENT)
        GL.Materialfv(GL::GL_FRONT, GL::GL_SPECULAR, MAT_SPECULAR)
        GL.Materialfv(GL::GL_FRONT, GL::GL_SHININESS, MAT_SHININESS)

        GL.ClearColor(0.0, 0.0, 0.0, 1.0)
        GL.Clear(GL::GL_COLOR_BUFFER_BIT | GL::GL_DEPTH_BUFFER_BIT)

        GL.Rotate(@rotX, 1, 0, 0)
        GL.Rotate(@rotY, 0, 1, 0)
        GLUT.SolidTeapot(0.5)

        GLUT.SwapBuffers()
    end

    def mouse(button,state,x,y)
        if button == GLUT::GLUT_LEFT_BUTTON && state == GLUT::GLUT_DOWN then
            @start_x = x
            @start_y = y
            @drag_flg = true
        elsif state == GLUT::GLUT_UP then
            @drag_flg = false
        end
    end

    def motion(x,y)
        if @drag_flg then
            dx = x - @start_x
            dy = y - @start_y

            @rotY += dx
            @rotY = @rotY % 360

            @rotX += dy
            @rotX = @rotX % 360
        end
        @start_x = x
        @start_y = y
        GLUT.PostRedisplay()
    end

    def initialize()
        @start_x = 0
        @start_y = 0
        @rotY = 0
        @rotX = 0
        @drag_flg = false
        GLUT.InitWindowPosition(100, 100)
        GLUT.InitWindowSize(300,300)
        GLUT.Init
        GLUT.InitDisplayMode(GLUT::GLUT_DOUBLE | GLUT::GLUT_RGB | GLUT::GLUT_DEPTH)
        GLUT.CreateWindow("Ruby de OpenGL")

        GL.Enable(GL::GL_DEPTH_TEST)
        GL.Enable(GL::GL_LIGHTING)
        GL.Enable(GL::GL_LIGHT0)

        GL.FrontFace(GL::GL_CW)
        GL.Enable(GL::GL_AUTO_NORMAL)
        GL.Enable(GL::GL_NORMALIZE)
        GL.Enable(GL::GL_DEPTH_TEST)
        GL.DepthFunc(GL::GL_LESS)

        GL.ShadeModel(GL::SMOOTH)

        GLUT.ReshapeFunc(method(:reshape).to_proc())
        GLUT.DisplayFunc(method(:display).to_proc())
        GLUT.MouseFunc(method(:mouse).to_proc())
        GLUT.MotionFunc(method(:motion).to_proc())
    end

    def start()
        GLUT.MainLoop()
    end
end

Teapot.new().start()

rubygl.rb

保存後、以下のコマンドで実行できます。

マウスのドラッグで回転ができます（が、適当につくっているので軸がx,y軸固定です・・）。

今回のコードはRubyのコードというよりは単にOpenGLのコードになってしまったような気もするので、今度はWebアプリっぽいものを作ってみたいと思います。

昨年秋に正式公開されたFlash Player 10ですが、かなりいろいろな機能が強化されているようで、中でも3D機能のネイティブ対応は大きいのではないかと思います。

そこで、Flex Builderで10対応の新機能を使ってみようと思ったのですが、そのままではうまくいかないようです。色々試して出来たのでやり方を紹介します。

最新のFlex SDKをダウンロード

まず、元から入っているSDKは古いのでAdobeのサイトから最新のSDKをダウンロードします。(Download Flex 3) Adobe SDKとオープンソースSDKがありますが、これは自分が開発するライセンスをオープンソースにしたい場合はオープンソースSDKの方を選べばOKです（Adobe SDKの方はクローズドソースのパッケージが含まれているそうです）。

ダウンロードしたら、Flex Builderのインストール先の中の sdks ディレクトリの中へフォルダを作って解凍します。

flex-config.xmlの書き換え

解凍後、SDKの中にframeworksというディレクトリがありますのでそれを開きます。

その中の、flex-config.xmlのうち、以下の記述を変更します。

    <target-player>9.0.124</target-player>
　　　　　↓
    <target-player>10.0.0</target-player>

      <external-library-path>
          <path-element>libs/player/{targetPlayerMajorVersion}/playerglobal.swc</path-element>
      </external-library-path>
　　　　　↓
      <external-library-path>
          <path-element>libs/player/10/playerglobal.swc</path-element>
      </external-library-path>

      <library-path>
         <path-element>libs</path-element>
		 <!-- keep the original location in the libpath for backwards-compatibility -->
         <path-element>libs/player</path-element>
         <path-element>libs/player/{targetPlayerMajorVersion}</path-element>
	     <path-element>locale/{locale}</path-element>
      </library-path>
　　　　　↓
      <library-path>
         <path-element>libs</path-element>
		 <!-- keep the original location in the libpath for backwards-compatibility -->
         <path-element>libs/player</path-element>
         <path-element>libs/player/10</path-element>
	     <path-element>locale/{locale}</path-element>
      </library-path>

Flex Builderの設定

[ウィンドウ]→[設定]で、設定画面を開き、左側のFlex > インストールされている Flex SDKを選びます。
するとSDKの一覧が出るので、「追加」ボタンで最初に解凍したSDKのパスを指定します。

すると一覧に追加されるので、新しく追加されたSDKの左にチェックを入れてOKボタンを押します。

次に、新しいプロジェクトを作り、プロジェクトのプロパティを表示します。この中のFlexビルドパスに、playerglobal.swcというのがあるのですが、これは9用のものなので削除します。そして、SWCの追加をクリックしてSDK_ROOT/frameworks/libs/player/10/playerglobal.swcを追加します。

追加したplayerglobal.swcの左の三角をクリックして、リンクタイプを編集し、「外部」に設定しておきます。

最後に、プロジェクトプロパティの中の必要なFlash Playerバージョンを 10.0.0 にすればOKです。

テスト

実際にPlayer10のコードが作れるかどうか確かめてみます。以下のソースをビルドして実行できるかどうか見てみてください。
fp10_test.zip

Pixel Benderというのは、Adobeが開発中の画像・動画処理の仕組みで、出力画像をピクセル毎にプログラマブルに生成することができるようにするものです。

また、GPUのハードウェア支援も得ることができるので、処理によってはかなりの高速化が期待できます。

現段階では、Adobe After Effects CS4とFlash Player 10、Photoshop CS4 に対応しているようです。実際の開発では pbk (Pixel Bender Kernel File) という形式のコードを作成していくのですが、これは基本的にどのアプリケーションでも同じコードで動作するとのことです（実際にはAfter EffectsやFlashは細かい制限がありますので、すべてがそのままで動作するわけではないです）。

今回は実験がてら、法線マップを使ったバンプマッピングをPixel Benderでやってみます。

3D基礎知識

いきなり、「法線マップ」と言われても訳が分からないと思いますので、簡単に3Dの基礎的な部分を書いておきます。

まず、3次元の座標系についてですが、今回は左右をx軸で右が正、上下をy軸で上が正、奥行きをz軸で手前が正というようにします（左図参照）。

次に、法線というのは3D空間において、面あるいは点がどの方向を向いているかを表すベクトルのことです。2次元に置き換えて考えると、常にこちらを向いていることになるので、(0, 0, 1) となります（ベクトルの成分表記で）。

この法線というものは光源に対してその場所がどういう色になるか計算するのに使われます。これをシェーディングといいます。今回はこのシェーディングの計算のうち、ランバートとフォンのモデルを使います。

ランバート反射

あまり反射率が高くない（ぴかぴかしていない）材質の色というのは視点の位置にあまり左右されず同じ色に見えます。これを拡散反射(diffuse reflection)といい、代表的な反射計算のモデルとしてランバート反射というものがあります。

面に対して垂直に光をあてる時がもっとも明るくなることから考えられており、法線ベクトルと光線ベクトルの逆ベクトルの内積（ともに正規化された状態で）から算出できます。

鏡面反射

一方、ぴかぴかした反射は鏡を考えれば明らかなように、視点の位置によって見え方が変わります。これを鏡面反射といいます(specular reflection)。この近似についてもさまざまなシミュレーションモデルが考案されているのですが、有名なものにフォンのモデルがあります。

このフォンのモデルの考え方は、視線の反射ベクトルと光線ベクトルの角度が小さければ小さいほど明るくなり、その角度が大きいほど暗くなるというもので、要は光が反射する先にいればまぶしく感じるけど、そこからずれるほどまぶしさを感じなくなるということから考えられています。

しかし、反射ベクトルを計算するのは大変な場合もあるので、それを簡略化して光線ベクトルと視線ベクトルの中間のハーフベクトルを使う方法が考えられました。これがBlinnによる修正モデルです。

元のフォンのモデルは反射ベクトルと光線ベクトルの内積のべき乗で算出しますが、Blinn-Phong修正モデルではハーフベクトルと法線ベクトルの内積のべき乗を使います。なぜこうなるかは、反射ベクトルと光線ベクトルが一致するとき、ハーフベクトルと法線ベクトルが一致する関係にあることから分かると思います。

法線マップ

法線マップというのは、前述の法線データをピクセルごとに画像に保存したものです。ベクトルというのは正規化すると各座標の成分が-1〜1の範囲におさまるので、それを0〜255の範囲に置き換えてx=>r, y=>g, z=>bにそれぞれ保存できます。

3Dのプログラムでは、このように画像にベクトルデータをマッピングしておくことがよくあります。複雑な照明計算を前もって行っておき、それを保存した画像を使ってレンダリング時の計算を減らすことができます。

Pixel Benderでコーディング

今回のプログラムは点光源（場所によって光線ベクトルが異なる。どの場所でも光線ベクトルが同じ光源は平行光源という）として扱い、光源との距離によって明るさが減衰するようにしてみました。減衰のモデルは A = 1 / (a + D * b + D * D * c) （Dは光源との距離、a,b,cは定数）として、計算結果にAを乗算しています。

実際のコードは以下のようになります。

<languageVersion : 1.0;>

kernel BumpFilter
<   namespace : "jp.flup";
    vendor : "Flup Inc.";
    version : 1;
    description : "Bump mapping filter";
>
{
    // 500x500限定にしている。parameterにして設定可能にしてもいい
    const float2 textureSize = float2(500.0, 500.0);
    // 平面の位置となるZ座標（何でも良いけど光源の位置とかと関係してくるので、相対的に調整が必要）
    const float textureZ = -1000.0;

    // 光源の位置
    parameter float3 lightPos
    <
        minValue: float3(-textureSize.x/2.0,-textureSize.y/2.0,textureZ + 10.0);
        maxValue: float3(textureSize.x/2.0,textureSize.y/2.0,textureZ + 100.0);
        defaultValue: float3(0.0, 0.0,textureZ + 20.0);
    >;
    // 視点の位置（原点固定）
    const float3 viewPos = float3(0.0, 0.0, 0.0);

    // specular計算でのべき乗（大きいほど反射範囲が収束します）
    parameter float power
    <
        minValue: 0.0;
        maxValue: 1000.0;
        defaultValue: 30.0;
    >;

    // 減衰定数 A = 1 / (x + D * y + D * D * z)
    parameter float3 attenuate
    <
        minValue: float3(0,0,0);
        maxValue: float3(1.0,1.0,0.04);
        defaultValue: float3(0.2,0.1,0.001); // z は距離の2乗に乗算するので小さくしています
    >;

    // 拡散光の強度（大きいほど素材の色が見えます）
    parameter float diffuseIntensity
    <
        minValue: 1.0;
        maxValue: 100.0;
        defaultValue: 20.0;
    >;

    // Image1 : diffuse texture
    input image4 colorTex;
    // Image2 : normal texture
    input image4 normalTex;

    output pixel4 dst;

    void
    evaluatePixel()
    {
        // 現在計算中の座標
        float3 pos = float3(outCoord().x-textureSize.x/2.0,textureSize.y/2.0-outCoord().y,textureZ);
        // 光線ベクトル（光源から物体へのベクトル）
        float3 lightVector = pos-lightPos;
        // 光源と物体の距離（ベクトル長で求まる）
        float lightDistance = length(lightVector);
        // 減衰率の計算
        float attenuator = attenuate.x + lightDistance * attenuate.y + lightDistance * lightDistance * attenuate.z;
        if(attenuator == 0.0)
            attenuator = 1.0;  // ゼロ除算防止

        float3 light = normalize(lightVector);

        // 視線ベクトル（視点から物体へのベクトル）
        float3 viewVector = pos-viewPos;
        float3 view = normalize(viewVector);

        // diffuse色の取得
        pixel4 inputColor = sampleNearest(colorTex,outCoord());

        // 法線ベクトルの取得
        float3 normal = normalize(float3(sampleLinear(normalTex, outCoord()).rgb * 2.0 - 1.0));
        if(normal.z < 0.0)
            normal.z = -normal.z; // 座標系の違いでZ値が負になっているときは符号を反転

        // ハーフベクトル = 光線の逆ベクトル + 視線の逆ベクトル
        float3 halfVector = normalize(-light -view);
        // specular成分の計算
        float dp = dot(normal, halfVector);
        float specular = pow(max(dp, 0.0), power);
        // diffuseとspecularを加算してclamp
        dst.rgb = clamp((inputColor.rgb * dot(normal, -light) * diffuseIntensity + float3(1.0,1.0,1.0) * specular)/attenuator, 0.0, 1.0);
    }
}

実行すると、以下のような感じになります。

今回のコードは以下からダウンロードできます。
pixel_bender_bump_mapping.zip

次は、このPixel BenderのコードをFlexで使ってみたいと思います。

dragdropuploadという便利なFirefoxの拡張があります。定番の拡張なのでご存知の方も多いことと思います。

簡単に説明すると、この拡張をインストールするとエクスプローラなどからファイルアップロードのフォームへドラッグ＆ドロップでファイルの指定ができるというものです。

しかし、Linuxだからなのか分かりませんが日本語ファイル名をGmailの添付に指定しようとするとURIエンコードされた状態になってしまい、正常にアップロードできません。

いろいろとGoogleで検索をかけてみたものの、サイドバーを日本語化したものを配布しているところは見つかりましたが今回の現象とは違うので解決には至りませんでした。

そこで、今回自力で修正してみることにしました。

xpiの中身

xpi ファイルは実はzip形式のファイルになっているのでまずは書庫を解凍してみます（実際にはnautilusでダブルクリックするとFile Rollerで書庫内閲覧ができるので、そちらから処理しました）。

xpiの中には以下のようなファイルが入っています。

• chrome
• dragdropupload.jar
• install.rdf
• LICENSE.txt

寄り道Tips

今回はまったく関係ないのですが、install.rdfはインストールに必要となる情報が定義されています。

たとえば、古いバージョンの拡張でFirefoxをアップデートしたときに対応されなくなった、という状況がよくあります。そんなとき、（保証はもちろんないですが）このファイルを書き換えることで強制的にインストールすることができます。

        <em:targetApplication>>
            <Description>>
                <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>>
                    <em:minVersion>1.0</em:minVersion>
                    <em:maxVersion>3.0.*</em:maxVersion>
            </Description>
        </em:targetApplication>

このファイルの上記の箇所がFirefoxでの対応バージョンの定義となっていますので、maxVersionを3.1.*とすれば、Firefox 3.1にアップデートされた場合でもインストールすることができます。

繰り返しますが、この操作は配布元が確認できていない状態でのインストールなのであくまでも自己責任で。

jsファイルの修正

さて、脇道にそれましたが、ファイル名をセットしているのはdragdropupload.jarというファイル内のjsファイルとなります（.jarファイルも.xpi同様、zip形式になっています）。

今回修正するのは書庫内の content/dragdropupload.js です。

ドロップイベントに関連付けられたハンドラを修正すべき、ということから dragDropHandler あたりを見てみます。その中に、onDrop 関数を発見！！ここでドロップ時の処理を行っているに違いありません。

中を見ると、contentType に応じて処理が分岐されています。nautilusからドロップしたときのcontentTypeがどれか分からなかったので、とりあえず alert(td.flavour.contentType) を追加して拡張をインストールしてみると、”application/x-moz-file” と出てきたのでその部分を修正することにしました。

この中でファイル名をセットしているところでURIデコードすればよさそうです。JavaScriptでのURIデコードは decodeURIComponent() 関数で行うことができるので、それを以下のように追加します。

        case "text/x-moz-url":
        case "application/x-moz-file":
            {
                // check if there are multiple files ...
                if(multi)
                {
                    // assume all of flavour moz-file
                    var files = [];
                    for(var i = 0; i < transferData.dataList.length; i++)
                    {
                        var td = transferData.dataList[i];

                        for(var j = 0; j < td.dataList.length; j++)
                        {
                            var fd = td.dataList[j];
                            if(fd.flavour.contentType == "application/x-moz-file")
                            {
                                files.push(decodeURIComponent(fd.data.path)); // ここを変更
                           }
                        }
                    }
                    this.applyFiles(evt, files);
                }
            }
            break;

一応、これでnautilusからGmailの添付へドラッグ＆ドロップできるようになりました。なお、変更を反映してインストールするにはzip圧縮して元のファイル名に戻せばOKです。

※他のツールからのドロップや他のOSについては考慮していません