トップ > 129 > 129 - 人気ブログ(Blog)検索結果詳細 (2009年1月10日 1時)

最近、iPhone Dev Centerにログインしていないなぁ。と思い、久しぶりにログインしたところ12/8、9にサンプルが追加されていたみたいです。

※今までにリリースされたものも一部アップデートされたものも有るみたいです。

その一つが「テクスチャ圧縮」についてのサンプルだったので自分は既に検証済みですが折角なのでビルドしてみました。

PVRTextureLoader

https://developer.apple.com/iphone/library/samplecode/PVRTextureLoader/index.html

そこでちょっとハマり箇所が有ったので解説しておきます。

ハマり箇所としてはPVRTCフォーマットのファイル(圧縮されたテクスチャファイル)は付属しておらず自分で生成しないといけないというところです。

まぁ、以前解説したこちらのエントリーを参照して貰えば生成できると思いますが念のため解説しておきます。

1. サンプル解凍後のフォルダ内の Images フォルダへ移動。

2. そのフォルダ内で以下のシェルスクリプトを作成し、 pvrtc.sh という名前で保存。

#!/bin/sh

TEXTURE_TOOL=/Developer/Platforms/iPhoneOS.platform/Developer/usr/bin/texturetool
cmd="${TEXTURE_TOOL} -e PVRTC --channel-weighting-linear --bits-per-pixel-2 -p ${1%.*}_linear2bpp.png -o Brick_2.pvr ${1}"
echo ${cmd}
${cmd}

cmd="${TEXTURE_TOOL} -e PVRTC --channel-weighting-linear --bits-per-pixel-4 -p ${1%.*}_linear4bpp.png -o Brick_4.pvr ${1}"
echo ${cmd}
${cmd}

cmd="${TEXTURE_TOOL} -m -e PVRTC --channel-weighting-linear --bits-per-pixel-2 -p ${1%.*}_mipmap_linear2bpp.png -o Brick_mipmap_2.pvr ${1}"
echo ${cmd}
${cmd}

cmd="${TEXTURE_TOOL} -m -e PVRTC --channel-weighting-linear --bits-per-pixel-4 -p ${1%.*}_mipmap_linear4bpp.png -o Brick_mipmap_4.pvr ${1}"
echo ${cmd}
${cmd}

3. そのスクリプトに実行権限を追加し、以下の様に実行。

./pvrtc.sh Brick.png

PVRTCフォーマットのファイルの作成方法は以上となります。後は普通にビルドすれば実行できます。

PVRテクスチャの読み込みのサンプルとしてだけでなく、「ミップマップ」や「テクスチャの拡大・縮小時のフィルタ」の品質比較用として使える中々、良いサンプルでした。

今回はプリミティブについて解説です。OpenGLでプリミティブと言えば点やライン、三角形、四角形、多角形などのことを表します。

OpenGLで使用できるプリミティブには以下のものがあります。

• GL_POINTS
• GL_LINES
• GL_LINE_STRIP
• GL_LINE_LOOP
• GL_TRIANGLES
• GL_TRIANGLE_STRIP
• GL_TRIANGLE_FAN
• GL_QUADS
• GL_QUAD_STRIP
• GL_POLYGON

それでは順番に解説します。緑色で記述してある数字は頂点の指定の順番です。

GL_POINTS

点を描画。

• 最初の1つ→頂点1つを指定(0番を使用して描画)
• 2つ目以降→頂点1つを追加で指定(2つ目は1番を使用して描画)

GL_LINES

2つの頂点を指定して、ラインを描画。2つ目以降のラインもそれぞれ2つの頂点を指定する。

• 最初の1つ→頂点2つを指定(0番、1番を使用して描画)
• 2つ目以降→頂点2つを追加で指定(2つ目は2番、3番を追加で指定。2番、3番を使用して描画)

GL_LINE_STRIP

2つの頂点を指定して、ラインを描画。2つ目以降のラインは前のラインの最後の頂点を始点とする。

• 最初の1つ→頂点2つを指定(0番、1番を使用して描画)
• 2つ目以降→頂点1つを追加で指定(2つ目は2番を追加で指定。1番、2番を使用して描画)

GL_LINE_LOOP

基本的には GL_LINE_STRIP と同様の描画を行う。こちらは最初に指定した頂点と最後に指定した頂点を繋ぐラインも描画される。

• 最初の1つ→頂点2つを指定(0番、1番を使用。実際には0番→1番→0番のラインが描画される)
• 2つ目以降→頂点1つを追加で指定(2つ目は2番を追加で指定。1番、2番を使用して描画。実際には1番→2番→0番のラインが描画される)

GL_TRIANGLES

3つの頂点を指定して、三角形を描画。2つ目以降の三角形もそれぞれ3つの頂点を指定する。

• 最初の1つ→頂点3つを指定(0番、1番、2番を使用して描画)
• 2つ目以降→頂点3つを追加で指定(2つ目は1番、3番、2番を使用して描画)

GL_TRIANGLE_STRIP

3つの頂点を指定して、三角形を描画。2つ目以降は「1つ前の頂点2つ+新しい頂点1つ」の3つの頂点を使用して描画される。

• 最初の1つ→頂点3つを指定(0番、1番、2番を使用して描画)
• 2つ目以降→頂点1つを追加で指定(2つ目は3番を追加で指定。3番、2番、1番を使用して描画)

GL_TRIANGLE_FAN

最初に指定した頂点を中心に扇状に三角形を描画。2つ目以降は「1つ前の頂点2つ+新しい頂点1つ」の3つの頂点を使用して描画される。

• 最初の1つ→頂点3つを指定(0番、1番、2番を使用して描画)
• 2つ目以降→頂点1つを追加で指定(2つ目は3番を追加で指定。0番、2番、3番を使用して描画)

GL_QUADS

4つの頂点を指定して、四角形を描画。2つ目以降の四角形もそれぞれ4つの頂点を指定する。

• 最初の1つ→頂点4つを指定(0番、1番、3番、2番を使用して描画)
• 2つ目以降→頂点4つを追加で指定(2つ目は5番、4番、2番、3番を使用して描画)

GL_QUAD_STRIP

4つの頂点を指定して、四角形を描画。2つ目以降は「1つ前の頂点2つ+新しい頂点2つ」の4つの頂点を使用して描画される。

• 最初の1つ→頂点4つを指定(0番、1番、3番、2番を使用して描画)
• 2つ目以降→頂点2つを追加で指定(2つ目は4番、5番を追加で指定。5番、4番、2番、3番を使用して描画)

GL_POLYGON

指定した頂点を繋いだ多角形を描画。

iPhone(OpenGL ES)でのサポート状況

iPhone(OpenGL ES)でのサポート状況は以下の様になっています。

定数	描画内容	使用可能か？
GL_POINTS	点	○
GL_LINES	ライン	○
GL_LINE_STRIP	ライン	○
GL_LINE_LOOP	ライン	○
GL_TRIANGLES	三角形	○
GL_TRIANGLE_STRIP	三角形	○
GL_TRIANGLE_FAN	三角形	○
GL_QUADS	四角形	×
GL_QUAD_STRIP	四角形	×
GL_POLYGON	多角形	×

iPhoneの場合、四角形と多角形のみサポートされない様です。

ということでサンプルコードはMac版だけですこちらからDL下さい。画面をクリックすると頂点を増加、右クリックすると減少します。

iPhone3Dプログラミング講座の一覧はこちら

glArrayElement() と glDrawElements() を使った描画方法について解説します(OpenGLは描画方法が多すぎだと思います。こんなにいるのかなぁ？(^_^;))

今回のサンプルコードはこちらにMac版、iPhone版がありますのでダウンロードして下さい。

ここでは以下の4つの頂点のデータが有る場合の使い方を解説します。

// 頂点配列情報
const GLfloat quadVertices[] = {
    0.0, 1.0, 0.0, // 1つ目の頂点情報(X、Y、Z座標)
    0.0, 0.0, 0.0, // 2つ目の頂点情報(X、Y、Z座標) 
    1.0, 0.0, 0.0, // 3つ目の頂点情報(X、Y、Z座標)
    1.0, 1.0, 0.0, // 4つ目の頂点情報(X、Y、Z座標)
};
// カラー配列情報
const GLbyte quadColors[] = {
    255,   0,   0, 255, // 1つ目のカラー情報(RGBA)
      0, 255,   0, 255, // 2つ目のカラー情報(RGBA)
      0,   0, 255, 255, // 3つ目のカラー情報(RGBA)
    255,   0, 255, 255, // 4つ目のカラー情報(RGBA)
};

画面で見ると以下の様な位置関係になります。

こちらの配列データをすぐに使える様に今までと同様に設定処理を記述します。

    // 頂点配列のメモリアドレスの指定
    glVertexPointer(3, GL_FLOAT, 0, quadVertices);
    glEnableClientState(GL_VERTEX_ARRAY); // 頂点配列の有効化
    
    // カラー配列のメモリアドレスの指定
    glColorPointer(4, GL_UNSIGNED_BYTE, 0, quadColors);
    glEnableClientState(GL_COLOR_ARRAY); // カラー配列の有効化

glArrayElements()を使った三角形の描画

※iPhone(OpenGL ES)では glBegin() 、 glEnd() コマンドは使用できないため glArrayElements() は使用できません。Macで確認して下さい。

glArrayElements()を使った描画は以下の様に記述します。

    glBegin(GL_TRIANGLES);
    glArrayElement(0);
    glArrayElement(2);
    glArrayElement(3);
    glEnd();

引数はインデックスの指定となります。

上記で設定して頂点配列、 quadVertices のインデックスを指定することにより三角形の3つの頂点を指定しています。ここでは0番、2番、3番の頂点を選択しています。

glDrawElements()を使った三角形の描画

glDrawElements() の場合も基本的に glArrayElements() と同様の指定となります。

しかし、こちらはインデックスを配列で指定し、以下の様に記述します。ここでは3番、0番、1番の頂点を選択しています。

    GLuint indices[] = {
        3, 0, 1,
    };
    glDrawElements(GL_TRIANGLES, sizeof(indices)/sizeof(indices[0]), GL_UNSIGNED_INT, indices);

iPhone3Dプログラミング講座の一覧はこちら

Appleの人達が事あるごとにOpenGL ESの最適化にはテクスチャ圧縮使えとプッシュしてるのでいい加減、テクスチャ圧縮に手を付ける事にしました。

iPhoneの開発環境にはテクスチャ圧縮作成(PVRTC圧縮)ツールが付属していて簡単に作ることができます。

iPhone SDKをインストールすると以下のパスにインストールされる様です。

/Developer/Platforms/iPhoneOS.platform/Developer/usr/bin/texturetool

オプション設定により以下のような設定が可能な様です。

オプション	説明
-h	ヘルプの表示
-l	エンコーダオプションとファイルフォーマットの表示
-m	ミップマップの作成
-e <encoder>	エンコード設定。<encoder>にエンコードを指定
-p <preview_file>	プレビュー画像の出力。<preview_file>にプレビューファイル名を指定
-o <output>	出力ファイルの指定
-f <format>	出力ファイルのファイルフォーマットを指定

エンコードオプションとしては以下の設定が可能な様です。

オプション	説明
--bits-per-pixel-2	1ピクセルに2ビット割り当てる
--bits-per-pixel-4	1ピクセルに4ビット割り当てる
--channel-weighting-linear	RGBAすべてのチャンネルで均等に圧縮する
--channel-weighting-perceptual	--channel-weighting-linearに比べ緑(G)のチャンネルの損失を押さえた圧縮

※緑(G)のチャンネルの損失を押さえた圧縮が準備して有るのは人間の目は緑色の識別能力が高いことに由来してる思われます。

詳細はこちらのページを参照下さい。

Technical Q&A QA1611: Creating textures in the PVRTC compression format

https://developer.apple.com/iphone/library/qa/qa2008/qa1611.html

取りあえず適当に記述例をチョイスし、「はちゅね」のテクスチャを圧縮してみたところ 124KB の「はちゅね」のテクスチャが 128KB に！

サイズ増えちゃってるよorz

しょうが無いのでもう少し、読み進めたところ「line art(線画)は苦手だけど写真まかせろ」みたいな記述を見かけたので写真の画像も準備してどうせなら全パターン検証してやろうと以下の様なシェルスクリプトを準備し、一括でテクスチャ圧縮生成しました。

#!/bin/sh

TEXTURE_TOOL=/Developer/Platforms/iPhoneOS.platform/Developer/usr/bin/texturetool
cmd="${TEXTURE_TOOL} -e PVRTC --channel-weighting-linear --bits-per-pixel-2 -p ${1%.*}_linear2bpp.png -o ${1%.*}_linear2bpp.pvrtc ${1}"
echo ${cmd}
${cmd}

cmd="${TEXTURE_TOOL} -e PVRTC --channel-weighting-linear --bits-per-pixel-4 -p ${1%.*}_linear4bpp.png -o ${1%.*}_linear4bpp.pvrtc ${1}"
echo ${cmd}
${cmd}

cmd="${TEXTURE_TOOL} -e PVRTC --channel-weighting-perceptual --bits-per-pixel-2 -p ${1%.*}_perceptual2bpp.png -o ${1%.*}_perceptual2bpp.pvrtc ${1}"
echo ${cmd}
${cmd}

cmd="${TEXTURE_TOOL} -e PVRTC --channel-weighting-perceptual --bits-per-pixel-4 -p ${1%.*}_perceptual4bpp.png -o ${1%.*}_perceptual4bpp.pvrtc ${1}"
echo ${cmd}
${cmd}

こちらのスクリプトは例えば pvrtc.sh などのファイル名で保存し、実行権限を追加後、以下の様に引数に元のファイルを指定して実行して下さい。

./pvrtc.sh miku.png

実行権限の追加が面倒くさかったら以下でもOK。

sh pvrtc.sh miku.png

データサイズ比較

はちゅねのテクスチャ(サイズは512x512)はこちら

写真(サイズは128x128)のテクスチャはこちらを変換しました。

それぞれの変換後のサイズは以下の様になりました。

以降はこのように省略して記載します。

--bits-per-pixel-2 → 2bpp

--bits-per-pixel-4 → 4bpp

--channel-weighting-linear → linear

--channel-weighting-perceptual → perceptual

はちゅねのテクスチャ

種別	サイズ
元データ	124KB(125584byte)
linear/2bpp	64KB(65536byte)
perceptual/2bpp	64KB(65536byte)
linear/4bpp	128KB(131072byte)
perceptual/4bpp	128KB(131072byte)

写真画像

種別	サイズ
元データ	128KB(128510byte)
linear/2bpp	16KB(16384byte)
perceptual/2bpp	16KB(16384byte)
linear/4bpp	32KB(32768byte)
perceptual/4bpp	32KB(32768byte)

なかなかおもしろい結果が出ました。 linear と perceptual とで同じビット数を使用するものは同じサイズになる様です。また、写真画像の場合かなり圧縮されるようですね。

データ欠損の比較

次にどの程度、元画像と異なる部分が有るのかを確認してみました。

判定ルールとしては元画像と圧縮後のプレビュー画像のRGB値を以下の様に計算をし、結果をグレースケールの画像ファイルとして出力しました。

(Rの差分+Gの差分+Bの差分) / 3 → グレースケールの値

※Aの差分も入れた方が良かったかな？(^_^;)

差分がそのままグレースケールの値となるため差分が大きいほど白く、差分が無い部分は黒く出力されます。

それではまず「はちゅね」のテクスチャの差分から

linear/2bpp

perceptual/2bpp

linear/4bpp

perceptual/4bpp

じっくり見ると色が変わる部分の境界辺りが白くなっていますね。実際の画像でも境界辺りの色がボケていました。

しかし、正直 linear と perceptual とどちらの方が綺麗に見えるかは自分にはイマイチ判断に悩みますねぇ(実際にどちらを選択するかはデザイナーの方と相談して作業を進めた方が良いのではないでしょうか？)。

次に写真の場合の差分

linear/2bpp

perceptual/2bpp

linear/4bpp

perceptual/4bpp

さすが写真は「自信あり」なだけあってほとんど白い部分がないです。右下の辺りが多少白くなってるだけみたいです。4bppのものだとほとんど真っ黒です。

多少、実際の画像を見ると諧調が減ってのっぺりとした印象を受けましたが実際にテクスチャに使用されたときは縮小・拡大の処理がかかる場合も多いためそんなに問題になる場面は少ないような気がします。

なお、元ファイルと実際に生成されたテクスチャ圧縮のプレビュー画像との比較をしたい場合はこちらのファイルをDLして下さい。

こちらには上記の差分画像の生成プログラムも含まれています。そちらを実行すると差分画像の生成もできます。

まとめ

テクスチャ圧縮、予想以上のクオリティでびっくりしました。この程度の劣化であれば実際には動いているモデルに使う場合などにはほとんど元画像と区別がつかないのでは無いでしょうか。

このクオリティでVRAMの使用量を削減できるのであれば確かに「使う価値あり」ですね。

でも、アニメ調のテクスチャの場合は要検討ですかねw

こちらで紹介した様にはちゅねのiPhoneアプリに文字列を表示できるようになりました。

テクスチャ上にビットマップフォントを準備して文字列を描画 - 強火で進め

http://d.hatena.ne.jp/nakamura001/20081228/1230474743

そこでさっそく以前、ベンチマーク代わり(なのにFPSの表示が無かったヒドいやつですw)に作成した文字列表示の処理を追加してFPSを確認してみました。

今回改めて、ポリゴン数を確認してみたところ以下の様に合計で2,371の三角形ポリゴンを使用していました。

場所	三角形ポリゴンの数
本体	1127
本体(輪郭用)	976
右腕	172
ネギ	96

実際のiPhone上では多少、FPSの値に変動がありました。

ここで紹介している値はあくまで参考値としての確認に留め、実際の値は実機で確認下さい。

ソースコードはこちらになります。

4体表示。2,371x4=9,484ポリゴン。

9体表示。2,371x9=21,339ポリゴン。

12体表示。2,371x12=28,452ポリゴン。

どうやらiPhoneのOpenGL ESでは文字列の描画処理用のコマンドが見当たらなかったので自前でテクスチャ上にビットマップフォントを準備し、文字列を描画することにしました。

フォント選定

フォントはフリーのものでもビットマップデータ化を禁止しているものも多いので今回使用したのはこちらの「みかちゃん」フォントを使用しました。

オリジナルフォント【みかちゃん】

http://mikachan-font.com/

こちらのフォントはフォント自身の販売以外は制限のない、使用者にとても優しいライセンスとなっています。作者さんに感謝、感謝です。

フォントには「みかちゃん」(等幅フォント)と「みかちゃん-P」(プロポーショナルフォント)があるのですが今回は処理が楽なので等幅フォントの「みかちゃん」を使用しました。

今回はデバック情報の表示に使用する予定なので「等幅フォント」の方を選択しましたが長文を表示する場合などは「プロポーショナル」の方を選択した方が良いでしょう。

対応する文字コードの範囲

さてとりあえずビットマップ化する文字の対象の選出です。取りあえず日本語も使える様にしちゃうとデータサイズが大きくなりすぎるので今回はASCII文字列のみです。

こちらの情報を確認したところ

[psl]ASCIIコード一覧表

http://www.psl.ne.jp/perl/pdojo00b.html

文字コード 0x20 のスペースから 0x7E の ~(チルダ)まで良さそうです。

こちらの様にカタカナまで入れても良いかな？とも思いましたが取りあえず今回は英数字、記号までとしました。

アスキー表

http://www.tuat.ac.jp/~yamada/cp1/ascii.html

ビットマップ化

次にビットマップ化です。普通ならビットマップデータを準備して内部的に文字列を描画したりするんでしょうがまだMacのプログラムにはあまり慣れてないし楽したいなぁと思ってHTMLファイルを出力するC言語プログラムを作成するというちょっとトリッキーなことしてますw

プログラムはこの様になっています。ソースコードはこちらからDLして下さい。

スタイルシートで整形したテーブルに文字を1行、16文字づつ表示するHTMLファイルを生成しています。

#include <stdio.h>

int main (int argc, const char * argv[]) {
	FILE *fp;
	int i, count;
	fp = fopen("../../ascii.html", "w");
	if (fp) {
		fprintf(fp, "<html>\n<body>\n");
		fprintf(fp, "<style type='text/css'></style>\n");
		fprintf(fp, "<style type='text/css'></style>\n");
		fprintf(fp, "<style type='text/css'></style>\n");
		
		count = 0;
		fprintf(fp, "<table class='ffamily'>\n<tr>");
		for (i=0x20; i<0x7F; i++) {
			count++;
			fprintf(fp, "<td>%c</td>", (char)i);
			if (count >= 16) {
				fprintf(fp, "</tr>\n<tr>\n");
				count = 0;
			}
		}
		fprintf(fp, "</tr>\n</table>\n</body>\n</html>\n");
		fclose(fp);
	}
    return 0;
}

このプログラムを実行するとプロジェクトと同じ位置に ascii.html というHTMLファイルが生成されますのでFireFoxなどのブラウザで表示し、その画面をキャプチャして下さい。

表示結果この様になります。

こちらを加工してこの様にします。

加工した点は以下

• 枠線は必要ないので幅と高さを測定した後に白で塗りつぶす
• iPhoneではテクスチャは2の乗数(128,256,512など)しか対応していないので画像のサイズを128x128とする
• CGエディタとテクスチャ座標系ではY座標の向きが逆なので画像を反転
• 描画ミスした場合にすぐに分かる様に角を緑と青でマークを付ける
• 自分が使用しているCGエディタのLeeshoreはアルファチャンネルを追加しても全てのピクセルのアルファ値が100%の時は自動的にRGBの画像として保存される様なので実際には使用しない部分にアルファ値100%以外のピクセルを作成

文字列描画のプログラム

文字列の描画については以前紹介した glDrawTexiOES() を使用して行っています。

glReadPixels()、glDrawTexiOES()コマンドを使ってレンダリング後の画像を利用する - 強火で進め

http://d.hatena.ne.jp/nakamura001/20081208/1228729579

ビットマップフォントをロードしたテクスチャをバインドし、 DrawTextureFont()関数(自作関数) を呼ぶと描画できるように作成しました。

DrawTextureFont()関数の引数は先頭から順に以下の様になります。

• X座標
• Y座標
• 描画する文字列を char * 型で指定(ASCII文字列の0x20〜0x7Eの範囲のみ。それ以外を指定した場合にはスペースに置き換わります)

    glBindTexture(GL_TEXTURE_2D, asciiTexName);
    sprintf(fps, "%3.1ffps", frame_rate);
    DrawTextureFont(0, 0, fps);
    DrawTextureFont(0, kTexFontHeight, "Hello World!");

具体的な実装方法はこちらのサンプルコードを参照下さい。

問題点

実装してみて現在分かっている問題点として以下のものがあります。もしかしたらプログラム次第で対応可能なのかもしれませんが今回調べた範囲では対応策が見つかりませんでした(もし、対応策をご存知の方がいましたらコメント欄にて情報お願いします<(_ _)>)。

問題点1. RGBAのテクスチャでないといけない

透過しないし、RGBのテクスチャで良いかな思いRGBのものでテクスチャを作ったところエラーとなりました。iPhone(OpenGL ES)はRGBAしか対応してない？

問題点2. 文字に透過、半透明が使えない

背景の白の部分のアルファ値を50%に設定してテストしたところ灰色になったので成功したのかな？と思ったのですが文字の後ろにはちゅねが来てもまったく描画がされませんでした。

特に問題点2については現在はデバック用途を考えているので大きな問題ではないのですが実際にユーザが読む部分で使用する場合などはちょっと問題になるかなと思っています。

取りあえずこの辺りに対応するには glDrawTexiOES() コマンドを使っての描画でなくポリゴンを準備して、そこに文字のテクスチャを貼付ける形での実装をしないといけないかなぁと思っています。

glDrawTexiOES() だとカメラが移動したときのことを考慮しなくて良いので楽かなぁと思ってたんですが意外な弱点がありましたw 必要になったらポリゴン版も作らないといけないなぁ。

あと、こちらのサイトの方がやられてるみたいな動的な生成もしたいところ。

文字列のイメージを作成する - Objective-Audio

http://objective-audio.jp/2008/12/post-11.html

とりあえずサンプルコードも動いたのでガッツリBoostの勉強をしようかと以下の2冊を購入。

最初はどちらかだけ購入する予定で書店に行ったのですが実際に立ち読みしてみると「Boost C++をチューンアップする最先端ライブラリ」は最初から読み進めるの良い本で「Boost C++ Librariesプログラミング」の方は「メソッドについての小さなサンプル」と「使用するのに必要なヘッダファイル」という構成なのでこちらは辞書の様に使おうかな？と思い両方購入しました。

他にも色々と物色したところこの様なGCC本を発見、

中々ないGCCのオプションについて解説した本です。こういう本は日本語のものではほとんど無いですし、発売されてもすぐに絶版ことも多いので速攻ゲットでした。

後、以前紹介したBlenderで物理シュミレーションを行う方法を解説した本が既に発売されていたのでこちらも合わせて購入。

Blenderのソフトボディ、パーティクルなどを解説した本 - 強火で進め

http://d.hatena.ne.jp/nakamura001/20081202/1228203330

内容を簡単に紹介するとこんな感じです。

• 水のモデリング
• 布のモデリング
• パーティクル
• ダイナミックパーティクル
• ボイド
• ソフトボディ
• 髪
• 流体
• Bender用の物理エンジンとゲームエンジンの使い方
• 木や植物の制作

充実しすぎですw

この本、5,800円しますけど他の3DCGアプリやプラグインの値段を考えるととてもお買い得です。

この本でBlenderの使い方をマスターすれば無料でこのようなモデルが作成できることを考えるとすぐに元は取れると思います。

Blenderをガッツリやろうという人には手放しでおすすめできる一冊だと思います。

あっ、後、内容は中級向け以上なのでBleder自体の操作方法などについての解説は入っていません。その部分はこの辺りの入門向けの本で覚えてから読み始めた方が良いと思います。

最近、書店に行ってないものなのでまとめて購入してかなりの散財っぷりでしたw

元を取れるようにしっかり読まないとなぁ。

MacにC++の高速ライブラリBoostをインストールした - 強火で進め

http://d.hatena.ne.jp/nakamura001/20081225/1230195789

こちらでインストールの解説をしましたが実際に使うときも色々と設定を行わないと上手く行かないところがあったのでそちらについても解説しておきます。

Boostライブラリの使い方

今回は例として正規表現のライブラリである regex.hpp を使用する方法を解説します。

1. C++のプロジェクトを作成する。BoostはC++向けのライブラリなので「Command Line Utility」-「C++ Tool」でプロジェクトを作成します。なお、Objective-Cと一緒に使いたい場合は拡張子を .mm にすれば使えるはずです。

2. inclucde する。取りあえずincludeしない事には話が進みません。

#include <boost/regex.hpp>

3. include ファイルの検索パスを追加。プロジェクト名を右クリックし、「情報を見る」実行。表示されたウィンドウの「ビルド」タブを選択後、「Other C++ Flags」という項目を編集します。

デフォルトで $(OTHER_CFLAGS) と入っていますのでその後に -I(Boostのincludeファイルをインストールしたフォルダのパス) という形で指定します。

自分で make した場合は以下のパス

/usr/local/include/boost-1_37

※おそらく 1_37 の部分はBoostのバージョンによって異なると思いますので実際に /usr/local/include/ 以下を確認して記述して下さい。

MacPortsでインストールした場合は以下のパスとなる様です。

-I/opt/local/include/

4. ライブラリの追加。次にライブラリファイルを追加する必要があります。

自分で make した場合は以下のフォルダの

/usr/local/lib

以下のファイルを追加します。

libboost_regex-gcc40-mt.a

/usr/local/lib はデフォルトの状態では表示されませんのでTinkerToolなどのアプリを使って表示される様にするかターミナルで以下の様にタイプし、表示されたフォルダの lib をショートカットに追加しておくと良いでしょう。

※素直にMacPortsでインストールするのが一番手間が無い気もしますが(^_^;)

$ cd /usr/local/

$ open .

MacPortsでインストールした場合は以下のフォルダの

/opt/local/lib

以下のファイルを追加します。

libboost_regex-mt.dylib

※こちらはリンクで実際のファイルは libboost_regex-mt-1_35.dylib です。おそらく新しいバージョンのBoostをインストールした場合はリンク先がそちらに切り替わるのだと思われます。自分のプログラムの性質に合わせて「リンクを指定」 or 「現在のバージョン指定」を選択して下さい。

5. 後はプログラムを書いてビルドすれば完了です。

今回は regex.hpp を使用するときの解説なので実際は使用するライブラリに対応したライブラリファイルを追加して下さい。

基本的にヘッダファイルと同等の名前が付いている様なのですぐに対応するファイルは見つかるかと思います。

コマンドラインから使うとき

ちなみにコマンドラインから使う場合はこの様になります。

g++ main.cpp -I/opt/local/include /opt/local/lib/libboost_regex-mt.dylib

g++ プログラムファイル includeファイルのフォルダ指定 ライブラリのパス

取りあえず自分もインストールが終わって、サンプルプログラム動かした程度なのでこれからこの辺りの本を買って勉強しようかと思ってます。

C++の凄腕ハッカーたちが作り上げたBoostライブラリ、以前から名前だけは聞いたことがあったのですが最近、Boostに正規表現のライブラリが有ると聞いて俄然やる気がでてMacにインストールすることにしました。

公式サイトはこちら

Boost C++ Libraries

http://www.boost.org/

翻訳サイトはこちらです。

Boost C++ Libraries

http://boost.cppll.jp/HEAD/

Boostをソースコードをコンパイルしてインストールする

Mac向けの情報は少ないですが付属のドキュメントやこちらのサイトなどを参考にガンバリました。

Boost.Regex: Index

http://boost.cppll.jp/HEAD/libs/regex/doc/install.html#gcc

※でもMacPortsで入れるのが簡単で使うときの手間も少ないので後半に紹介しているMacPortsでのインストールがおすすめだったりしますw

手順としてはまず、こちらの「Boost」からソースコードをダウンロードし、

SourceForge.net: Boost C++ Libraries: Files

http://sourceforge.net/project/showfiles.php?group_id=7586

解凍後のディレクトリ

libs/regex/build

に移動後、以下のオプションを指定して make を実行します。

make -fgcc.mak

何やら bjam ってのを使った方法もあるみたいだったんですけど色々とビルド関連の処理を実行するたびに以下の様なエラーが発生。改行コードの問題で発生している様でエラーが出るたびに改行コード変更ですorz

./configure: ./tools/jam/src/build.sh: /bin/sh^M: bad interpreter: No such file or directory

こりゃ素直に make が良いかな？ってことで今回は愚直に make

オンリーです。

ながーいコンパイル処理が完了してさてテスト用にいい感じのサンプルコードは無いかなぁ？と検索したところ悲劇が発生、BoostはMacPostsに対応しているのね。今までの苦労はいったいorz

BoostをMacPortsでインストールする

折角見つけたのでMacPorts版もインストールすることにしました。

参考にしたのはこちらのサイト。とても丁寧に解説してあっておすすめです。

MacでBoost - Adukan

http://d.hatena.ne.jp/aduka/20081222/1229909299

最近、iPhone Dev Centerにログインしていないなぁ。と思い、久しぶりにログインしたところ12/8、9にサンプルが追加されていたみたいです。

※今までにリリースされたものも一部アップデートされたものも有るみたいです。

その一つが「テクスチャ圧縮」についてのサンプルだったので自分は既に検証済みですが折角なのでビルドしてみました。

PVRTextureLoader

https://developer.apple.com/iphone/library/samplecode/PVRTextureLoader/index.html

そこでちょっとハマり箇所が有ったので解説しておきます。

ハマり箇所としてはPVRTCフォーマットのファイル(圧縮されたテクスチャファイル)は付属しておらず自分で生成しないといけないというところです。

まぁ、以前解説したこちらのエントリーを参照して貰えば生成できると思いますが念のため解説しておきます。

1. サンプル解凍後のフォルダ内の Images フォルダへ移動。

2. そのフォルダ内で以下のシェルスクリプトを作成し、 pvrtc.sh という名前で保存。

#!/bin/sh

TEXTURE_TOOL=/Developer/Platforms/iPhoneOS.platform/Developer/usr/bin/texturetool
cmd="${TEXTURE_TOOL} -e PVRTC --channel-weighting-linear --bits-per-pixel-2 -p ${1%.*}_linear2bpp.png -o Brick_2.pvr ${1}"
echo ${cmd}
${cmd}

cmd="${TEXTURE_TOOL} -e PVRTC --channel-weighting-linear --bits-per-pixel-4 -p ${1%.*}_linear4bpp.png -o Brick_4.pvr ${1}"
echo ${cmd}
${cmd}

cmd="${TEXTURE_TOOL} -m -e PVRTC --channel-weighting-linear --bits-per-pixel-2 -p ${1%.*}_mipmap_linear2bpp.png -o Brick_mipmap_2.pvr ${1}"
echo ${cmd}
${cmd}

cmd="${TEXTURE_TOOL} -m -e PVRTC --channel-weighting-linear --bits-per-pixel-4 -p ${1%.*}_mipmap_linear4bpp.png -o Brick_mipmap_4.pvr ${1}"
echo ${cmd}
${cmd}

3. そのスクリプトに実行権限を追加し、以下の様に実行。

./pvrtc.sh Brick.png

PVRTCフォーマットのファイルの作成方法は以上となります。後は普通にビルドすれば実行できます。

PVRテクスチャの読み込みのサンプルとしてだけでなく、「ミップマップ」や「テクスチャの拡大・縮小時のフィルタ」の品質比較用として使える中々、良いサンプルでした。

今回はプリミティブについて解説です。OpenGLでプリミティブと言えば点やライン、三角形、四角形、多角形などのことを表します。

OpenGLで使用できるプリミティブには以下のものがあります。

• GL_POINTS
• GL_LINES
• GL_LINE_STRIP
• GL_LINE_LOOP
• GL_TRIANGLES
• GL_TRIANGLE_STRIP
• GL_TRIANGLE_FAN
• GL_QUADS
• GL_QUAD_STRIP
• GL_POLYGON

それでは順番に解説します。緑色で記述してある数字は頂点の指定の順番です。

GL_POINTS

点を描画。

• 最初の1つ→頂点1つを指定(0番を使用して描画)
• 2つ目以降→頂点1つを追加で指定(2つ目は1番を使用して描画)

GL_LINES

2つの頂点を指定して、ラインを描画。2つ目以降のラインもそれぞれ2つの頂点を指定する。

• 最初の1つ→頂点2つを指定(0番、1番を使用して描画)
• 2つ目以降→頂点2つを追加で指定(2つ目は2番、3番を追加で指定。2番、3番を使用して描画)

GL_LINE_STRIP

2つの頂点を指定して、ラインを描画。2つ目以降のラインは前のラインの最後の頂点を始点とする。

• 最初の1つ→頂点2つを指定(0番、1番を使用して描画)
• 2つ目以降→頂点1つを追加で指定(2つ目は2番を追加で指定。1番、2番を使用して描画)

GL_LINE_LOOP

基本的には GL_LINE_STRIP と同様の描画を行う。こちらは最初に指定した頂点と最後に指定した頂点を繋ぐラインも描画される。

• 最初の1つ→頂点2つを指定(0番、1番を使用。実際には0番→1番→0番のラインが描画される)
• 2つ目以降→頂点1つを追加で指定(2つ目は2番を追加で指定。1番、2番を使用して描画。実際には1番→2番→0番のラインが描画される)

GL_TRIANGLES

3つの頂点を指定して、三角形を描画。2つ目以降の三角形もそれぞれ3つの頂点を指定する。

• 最初の1つ→頂点3つを指定(0番、1番、2番を使用して描画)
• 2つ目以降→頂点3つを追加で指定(2つ目は1番、3番、2番を使用して描画)

GL_TRIANGLE_STRIP

3つの頂点を指定して、三角形を描画。2つ目以降は「1つ前の頂点2つ+新しい頂点1つ」の3つの頂点を使用して描画される。

• 最初の1つ→頂点3つを指定(0番、1番、2番を使用して描画)
• 2つ目以降→頂点1つを追加で指定(2つ目は3番を追加で指定。3番、2番、1番を使用して描画)

GL_TRIANGLE_FAN

最初に指定した頂点を中心に扇状に三角形を描画。2つ目以降は「1つ前の頂点2つ+新しい頂点1つ」の3つの頂点を使用して描画される。

• 最初の1つ→頂点3つを指定(0番、1番、2番を使用して描画)
• 2つ目以降→頂点1つを追加で指定(2つ目は3番を追加で指定。0番、2番、3番を使用して描画)

GL_QUADS

4つの頂点を指定して、四角形を描画。2つ目以降の四角形もそれぞれ4つの頂点を指定する。

• 最初の1つ→頂点4つを指定(0番、1番、3番、2番を使用して描画)
• 2つ目以降→頂点4つを追加で指定(2つ目は5番、4番、2番、3番を使用して描画)

GL_QUAD_STRIP

4つの頂点を指定して、四角形を描画。2つ目以降は「1つ前の頂点2つ+新しい頂点2つ」の4つの頂点を使用して描画される。

• 最初の1つ→頂点4つを指定(0番、1番、3番、2番を使用して描画)
• 2つ目以降→頂点2つを追加で指定(2つ目は4番、5番を追加で指定。5番、4番、2番、3番を使用して描画)

GL_POLYGON

指定した頂点を繋いだ多角形を描画。

iPhone(OpenGL ES)でのサポート状況

iPhone(OpenGL ES)でのサポート状況は以下の様になっています。

定数	描画内容	使用可能か？
GL_POINTS	点	○
GL_LINES	ライン	○
GL_LINE_STRIP	ライン	○
GL_LINE_LOOP	ライン	○
GL_TRIANGLES	三角形	○
GL_TRIANGLE_STRIP	三角形	○
GL_TRIANGLE_FAN	三角形	○
GL_QUADS	四角形	×
GL_QUAD_STRIP	四角形	×
GL_POLYGON	多角形	×

iPhoneの場合、四角形と多角形のみサポートされない様です。

ということでサンプルコードはMac版だけですこちらからDL下さい。画面をクリックすると頂点を増加、右クリックすると減少します。

iPhone3Dプログラミング講座の一覧はこちら

glArrayElement() と glDrawElements() を使った描画方法について解説します(OpenGLは描画方法が多すぎだと思います。こんなにいるのかなぁ？(^_^;))

今回のサンプルコードはこちらにMac版、iPhone版がありますのでダウンロードして下さい。

ここでは以下の4つの頂点のデータが有る場合の使い方を解説します。

// 頂点配列情報
const GLfloat quadVertices[] = {
    0.0, 1.0, 0.0, // 1つ目の頂点情報(X、Y、Z座標)
    0.0, 0.0, 0.0, // 2つ目の頂点情報(X、Y、Z座標) 
    1.0, 0.0, 0.0, // 3つ目の頂点情報(X、Y、Z座標)
    1.0, 1.0, 0.0, // 4つ目の頂点情報(X、Y、Z座標)
};
// カラー配列情報
const GLbyte quadColors[] = {
    255,   0,   0, 255, // 1つ目のカラー情報(RGBA)
      0, 255,   0, 255, // 2つ目のカラー情報(RGBA)
      0,   0, 255, 255, // 3つ目のカラー情報(RGBA)
    255,   0, 255, 255, // 4つ目のカラー情報(RGBA)
};

画面で見ると以下の様な位置関係になります。

こちらの配列データをすぐに使える様に今までと同様に設定処理を記述します。

    // 頂点配列のメモリアドレスの指定
    glVertexPointer(3, GL_FLOAT, 0, quadVertices);
    glEnableClientState(GL_VERTEX_ARRAY); // 頂点配列の有効化
    
    // カラー配列のメモリアドレスの指定
    glColorPointer(4, GL_UNSIGNED_BYTE, 0, quadColors);
    glEnableClientState(GL_COLOR_ARRAY); // カラー配列の有効化

glArrayElements()を使った三角形の描画

※iPhone(OpenGL ES)では glBegin() 、 glEnd() コマンドは使用できないため glArrayElements() は使用できません。Macで確認して下さい。

glArrayElements()を使った描画は以下の様に記述します。

    glBegin(GL_TRIANGLES);
    glArrayElement(0);
    glArrayElement(2);
    glArrayElement(3);
    glEnd();

引数はインデックスの指定となります。

上記で設定して頂点配列、 quadVertices のインデックスを指定することにより三角形の3つの頂点を指定しています。ここでは0番、2番、3番の頂点を選択しています。

glDrawElements()を使った三角形の描画

glDrawElements() の場合も基本的に glArrayElements() と同様の指定となります。

しかし、こちらはインデックスを配列で指定し、以下の様に記述します。ここでは3番、0番、1番の頂点を選択しています。

    GLuint indices[] = {
        3, 0, 1,
    };
    glDrawElements(GL_TRIANGLES, sizeof(indices)/sizeof(indices[0]), GL_UNSIGNED_INT, indices);

iPhone3Dプログラミング講座の一覧はこちら

Appleの人達が事あるごとにOpenGL ESの最適化にはテクスチャ圧縮使えとプッシュしてるのでいい加減、テクスチャ圧縮に手を付ける事にしました。

iPhoneの開発環境にはテクスチャ圧縮作成(PVRTC圧縮)ツールが付属していて簡単に作ることができます。

iPhone SDKをインストールすると以下のパスにインストールされる様です。

/Developer/Platforms/iPhoneOS.platform/Developer/usr/bin/texturetool

オプション設定により以下のような設定が可能な様です。

オプション	説明
-h	ヘルプの表示
-l	エンコーダオプションとファイルフォーマットの表示
-m	ミップマップの作成
-e <encoder>	エンコード設定。<encoder>にエンコードを指定
-p <preview_file>	プレビュー画像の出力。<preview_file>にプレビューファイル名を指定
-o <output>	出力ファイルの指定
-f <format>	出力ファイルのファイルフォーマットを指定

エンコードオプションとしては以下の設定が可能な様です。

オプション	説明
--bits-per-pixel-2	1ピクセルに2ビット割り当てる
--bits-per-pixel-4	1ピクセルに4ビット割り当てる
--channel-weighting-linear	RGBAすべてのチャンネルで均等に圧縮する
--channel-weighting-perceptual	--channel-weighting-linearに比べ緑(G)のチャンネルの損失を押さえた圧縮

※緑(G)のチャンネルの損失を押さえた圧縮が準備して有るのは人間の目は緑色の識別能力が高いことに由来してる思われます。

詳細はこちらのページを参照下さい。

Technical Q&A QA1611: Creating textures in the PVRTC compression format

https://developer.apple.com/iphone/library/qa/qa2008/qa1611.html

取りあえず適当に記述例をチョイスし、「はちゅね」のテクスチャを圧縮してみたところ 124KB の「はちゅね」のテクスチャが 128KB に！

サイズ増えちゃってるよorz

しょうが無いのでもう少し、読み進めたところ「line art(線画)は苦手だけど写真まかせろ」みたいな記述を見かけたので写真の画像も準備してどうせなら全パターン検証してやろうと以下の様なシェルスクリプトを準備し、一括でテクスチャ圧縮生成しました。

#!/bin/sh

TEXTURE_TOOL=/Developer/Platforms/iPhoneOS.platform/Developer/usr/bin/texturetool
cmd="${TEXTURE_TOOL} -e PVRTC --channel-weighting-linear --bits-per-pixel-2 -p ${1%.*}_linear2bpp.png -o ${1%.*}_linear2bpp.pvrtc ${1}"
echo ${cmd}
${cmd}

cmd="${TEXTURE_TOOL} -e PVRTC --channel-weighting-linear --bits-per-pixel-4 -p ${1%.*}_linear4bpp.png -o ${1%.*}_linear4bpp.pvrtc ${1}"
echo ${cmd}
${cmd}

cmd="${TEXTURE_TOOL} -e PVRTC --channel-weighting-perceptual --bits-per-pixel-2 -p ${1%.*}_perceptual2bpp.png -o ${1%.*}_perceptual2bpp.pvrtc ${1}"
echo ${cmd}
${cmd}

cmd="${TEXTURE_TOOL} -e PVRTC --channel-weighting-perceptual --bits-per-pixel-4 -p ${1%.*}_perceptual4bpp.png -o ${1%.*}_perceptual4bpp.pvrtc ${1}"
echo ${cmd}
${cmd}

こちらのスクリプトは例えば pvrtc.sh などのファイル名で保存し、実行権限を追加後、以下の様に引数に元のファイルを指定して実行して下さい。

./pvrtc.sh miku.png

実行権限の追加が面倒くさかったら以下でもOK。

sh pvrtc.sh miku.png

データサイズ比較

はちゅねのテクスチャ(サイズは512x512)はこちら

写真(サイズは128x128)のテクスチャはこちらを変換しました。

それぞれの変換後のサイズは以下の様になりました。

以降はこのように省略して記載します。

--bits-per-pixel-2 → 2bpp

--bits-per-pixel-4 → 4bpp

--channel-weighting-linear → linear

--channel-weighting-perceptual → perceptual

はちゅねのテクスチャ

種別	サイズ
元データ	124KB(125584byte)
linear/2bpp	64KB(65536byte)
perceptual/2bpp	64KB(65536byte)
linear/4bpp	128KB(131072byte)
perceptual/4bpp	128KB(131072byte)

写真画像

種別	サイズ
元データ	128KB(128510byte)
linear/2bpp	16KB(16384byte)
perceptual/2bpp	16KB(16384byte)
linear/4bpp	32KB(32768byte)
perceptual/4bpp	32KB(32768byte)

なかなかおもしろい結果が出ました。 linear と perceptual とで同じビット数を使用するものは同じサイズになる様です。また、写真画像の場合かなり圧縮されるようですね。

データ欠損の比較

次にどの程度、元画像と異なる部分が有るのかを確認してみました。

判定ルールとしては元画像と圧縮後のプレビュー画像のRGB値を以下の様に計算をし、結果をグレースケールの画像ファイルとして出力しました。

(Rの差分+Gの差分+Bの差分) / 3 → グレースケールの値

※Aの差分も入れた方が良かったかな？(^_^;)

差分がそのままグレースケールの値となるため差分が大きいほど白く、差分が無い部分は黒く出力されます。

それではまず「はちゅね」のテクスチャの差分から

linear/2bpp

perceptual/2bpp

linear/4bpp

perceptual/4bpp

じっくり見ると色が変わる部分の境界辺りが白くなっていますね。実際の画像でも境界辺りの色がボケていました。

しかし、正直 linear と perceptual とどちらの方が綺麗に見えるかは自分にはイマイチ判断に悩みますねぇ(実際にどちらを選択するかはデザイナーの方と相談して作業を進めた方が良いのではないでしょうか？)。

次に写真の場合の差分

linear/2bpp

perceptual/2bpp

linear/4bpp

perceptual/4bpp

さすが写真は「自信あり」なだけあってほとんど白い部分がないです。右下の辺りが多少白くなってるだけみたいです。4bppのものだとほとんど真っ黒です。

多少、実際の画像を見ると諧調が減ってのっぺりとした印象を受けましたが実際にテクスチャに使用されたときは縮小・拡大の処理がかかる場合も多いためそんなに問題になる場面は少ないような気がします。

なお、元ファイルと実際に生成されたテクスチャ圧縮のプレビュー画像との比較をしたい場合はこちらのファイルをDLして下さい。

こちらには上記の差分画像の生成プログラムも含まれています。そちらを実行すると差分画像の生成もできます。

まとめ

テクスチャ圧縮、予想以上のクオリティでびっくりしました。この程度の劣化であれば実際には動いているモデルに使う場合などにはほとんど元画像と区別がつかないのでは無いでしょうか。

このクオリティでVRAMの使用量を削減できるのであれば確かに「使う価値あり」ですね。

でも、アニメ調のテクスチャの場合は要検討ですかねw

こちらで紹介した様にはちゅねのiPhoneアプリに文字列を表示できるようになりました。

テクスチャ上にビットマップフォントを準備して文字列を描画 - 強火で進め

http://d.hatena.ne.jp/nakamura001/20081228/1230474743

そこでさっそく以前、ベンチマーク代わり(なのにFPSの表示が無かったヒドいやつですw)に作成した文字列表示の処理を追加してFPSを確認してみました。

今回改めて、ポリゴン数を確認してみたところ以下の様に合計で2,371の三角形ポリゴンを使用していました。

場所	三角形ポリゴンの数
本体	1127
本体(輪郭用)	976
右腕	172
ネギ	96

実際のiPhone上では多少、FPSの値に変動がありました。

ここで紹介している値はあくまで参考値としての確認に留め、実際の値は実機で確認下さい。

ソースコードはこちらになります。

4体表示。2,371x4=9,484ポリゴン。

9体表示。2,371x9=21,339ポリゴン。

12体表示。2,371x12=28,452ポリゴン。

どうやらiPhoneのOpenGL ESでは文字列の描画処理用のコマンドが見当たらなかったので自前でテクスチャ上にビットマップフォントを準備し、文字列を描画することにしました。

フォント選定

フォントはフリーのものでもビットマップデータ化を禁止しているものも多いので今回使用したのはこちらの「みかちゃん」フォントを使用しました。

オリジナルフォント【みかちゃん】

http://mikachan-font.com/

こちらのフォントはフォント自身の販売以外は制限のない、使用者にとても優しいライセンスとなっています。作者さんに感謝、感謝です。

フォントには「みかちゃん」(等幅フォント)と「みかちゃん-P」(プロポーショナルフォント)があるのですが今回は処理が楽なので等幅フォントの「みかちゃん」を使用しました。

今回はデバック情報の表示に使用する予定なので「等幅フォント」の方を選択しましたが長文を表示する場合などは「プロポーショナル」の方を選択した方が良いでしょう。

対応する文字コードの範囲

さてとりあえずビットマップ化する文字の対象の選出です。取りあえず日本語も使える様にしちゃうとデータサイズが大きくなりすぎるので今回はASCII文字列のみです。

こちらの情報を確認したところ

[psl]ASCIIコード一覧表

http://www.psl.ne.jp/perl/pdojo00b.html

文字コード 0x20 のスペースから 0x7E の ~(チルダ)まで良さそうです。

こちらの様にカタカナまで入れても良いかな？とも思いましたが取りあえず今回は英数字、記号までとしました。

アスキー表

http://www.tuat.ac.jp/~yamada/cp1/ascii.html

ビットマップ化

次にビットマップ化です。普通ならビットマップデータを準備して内部的に文字列を描画したりするんでしょうがまだMacのプログラムにはあまり慣れてないし楽したいなぁと思ってHTMLファイルを出力するC言語プログラムを作成するというちょっとトリッキーなことしてますw

プログラムはこの様になっています。ソースコードはこちらからDLして下さい。

スタイルシートで整形したテーブルに文字を1行、16文字づつ表示するHTMLファイルを生成しています。

#include <stdio.h>

int main (int argc, const char * argv[]) {
	FILE *fp;
	int i, count;
	fp = fopen("../../ascii.html", "w");
	if (fp) {
		fprintf(fp, "<html>\n<body>\n");
		fprintf(fp, "<style type='text/css'></style>\n");
		fprintf(fp, "<style type='text/css'></style>\n");
		fprintf(fp, "<style type='text/css'></style>\n");
		
		count = 0;
		fprintf(fp, "<table class='ffamily'>\n<tr>");
		for (i=0x20; i<0x7F; i++) {
			count++;
			fprintf(fp, "<td>%c</td>", (char)i);
			if (count >= 16) {
				fprintf(fp, "</tr>\n<tr>\n");
				count = 0;
			}
		}
		fprintf(fp, "</tr>\n</table>\n</body>\n</html>\n");
		fclose(fp);
	}
    return 0;
}

このプログラムを実行するとプロジェクトと同じ位置に ascii.html というHTMLファイルが生成されますのでFireFoxなどのブラウザで表示し、その画面をキャプチャして下さい。

表示結果この様になります。

こちらを加工してこの様にします。

加工した点は以下

• 枠線は必要ないので幅と高さを測定した後に白で塗りつぶす
• iPhoneではテクスチャは2の乗数(128,256,512など)しか対応していないので画像のサイズを128x128とする
• CGエディタとテクスチャ座標系ではY座標の向きが逆なので画像を反転
• 描画ミスした場合にすぐに分かる様に角を緑と青でマークを付ける
• 自分が使用しているCGエディタのLeeshoreはアルファチャンネルを追加しても全てのピクセルのアルファ値が100%の時は自動的にRGBの画像として保存される様なので実際には使用しない部分にアルファ値100%以外のピクセルを作成

文字列描画のプログラム

文字列の描画については以前紹介した glDrawTexiOES() を使用して行っています。

glReadPixels()、glDrawTexiOES()コマンドを使ってレンダリング後の画像を利用する - 強火で進め

http://d.hatena.ne.jp/nakamura001/20081208/1228729579

ビットマップフォントをロードしたテクスチャをバインドし、 DrawTextureFont()関数(自作関数) を呼ぶと描画できるように作成しました。

DrawTextureFont()関数の引数は先頭から順に以下の様になります。

• X座標
• Y座標
• 描画する文字列を char * 型で指定(ASCII文字列の0x20〜0x7Eの範囲のみ。それ以外を指定した場合にはスペースに置き換わります)

    glBindTexture(GL_TEXTURE_2D, asciiTexName);
    sprintf(fps, "%3.1ffps", frame_rate);
    DrawTextureFont(0, 0, fps);
    DrawTextureFont(0, kTexFontHeight, "Hello World!");

具体的な実装方法はこちらのサンプルコードを参照下さい。

問題点

実装してみて現在分かっている問題点として以下のものがあります。もしかしたらプログラム次第で対応可能なのかもしれませんが今回調べた範囲では対応策が見つかりませんでした(もし、対応策をご存知の方がいましたらコメント欄にて情報お願いします<(_ _)>)。

問題点1. RGBAのテクスチャでないといけない

透過しないし、RGBのテクスチャで良いかな思いRGBのものでテクスチャを作ったところエラーとなりました。iPhone(OpenGL ES)はRGBAしか対応してない？

問題点2. 文字に透過、半透明が使えない

背景の白の部分のアルファ値を50%に設定してテストしたところ灰色になったので成功したのかな？と思ったのですが文字の後ろにはちゅねが来てもまったく描画がされませんでした。

特に問題点2については現在はデバック用途を考えているので大きな問題ではないのですが実際にユーザが読む部分で使用する場合などはちょっと問題になるかなと思っています。

取りあえずこの辺りに対応するには glDrawTexiOES() コマンドを使っての描画でなくポリゴンを準備して、そこに文字のテクスチャを貼付ける形での実装をしないといけないかなぁと思っています。

glDrawTexiOES() だとカメラが移動したときのことを考慮しなくて良いので楽かなぁと思ってたんですが意外な弱点がありましたw 必要になったらポリゴン版も作らないといけないなぁ。

あと、こちらのサイトの方がやられてるみたいな動的な生成もしたいところ。

文字列のイメージを作成する - Objective-Audio

http://objective-audio.jp/2008/12/post-11.html

とりあえずサンプルコードも動いたのでガッツリBoostの勉強をしようかと以下の2冊を購入。

最初はどちらかだけ購入する予定で書店に行ったのですが実際に立ち読みしてみると「Boost C++をチューンアップする最先端ライブラリ」は最初から読み進めるの良い本で「Boost C++ Librariesプログラミング」の方は「メソッドについての小さなサンプル」と「使用するのに必要なヘッダファイル」という構成なのでこちらは辞書の様に使おうかな？と思い両方購入しました。

他にも色々と物色したところこの様なGCC本を発見、

中々ないGCCのオプションについて解説した本