ソフト職人

WebGLU のサンプル一覧

Published at: 10:01 pm - 水曜日 1月 25 2012

Check

WebGLU についてくるサンプルを一通り実行できるようにしてみました。作りたいものに近いサンプルを探すと参考になるかと思います。技術レベルもつけてみましたので、簡単なものから見ていくと慣れ易いかと思います。

実際にはそのままで動かないものがあったので、それらは動くように修正を加えてあります。

サンプル名	説明	レベル
billiards	ビリヤードを題材にしたデモです	★★★
boids	群集シミュレーションのデモです	★★★
boids(ribbons)	群集シミュレーションのデモです	★★★
boxes	物理計算を適用した立方体の重なり合うデモです	★★★
drawelements	インデックス配列を用いた描画デモです	★
dynamicShader	シェーダを動的に変更して確認することが出来ます。シェーダの勉強に役立ちます	★
freeflight	軌跡を伴った飛行機が飛び、カメラがそれを追いかけるデモです	★★
hierarchical	階層構造(親子関係)を持ったオブジェクトのデモです	★★
keyframe	キーフレームアニメーションのデモです	★★★
material	マテリアルを用いたデモです	★★
pointCloud	10万個の点の集まりを描画するデモです	★
pyramid	ピラミッド型のオブジェクトを表示するデモです	★
spotlight_projection(basic)	動作確認中
spotlight_projection(combo)	動作確認中
texture	動作確認中
tutorial	動作確認中
videosphere	ビデオをテクスチャとして貼るデモです	★

Posted in: WebGL by satoyuichi No Comments

WordPress で WebGLU を使う

Published at: 09:01 pm - 金曜日 1月 13 2012

Check

WebGL に関して投稿するようになったのですが、結果を直接埋め込めないのをもどかしく感じました。やはり投稿中に表示させた方が見やすいのでなんとか投稿に埋め込めないだろうかといろいろ試してみました。

結果的に投稿中に埋め込みつつ WebGLU も使えるように出来ました。ただ、テンプレートをいじったりする必要があるので、試す前にバックアップを取るなど自己責任でお楽しみ下さい。

WebGLU のライブラリパスを変更する

WebGLU を設置する前に、ライブラリパスを変更する必要があります。 “/src/webglu.js” ファイルを以下のように変更します。 46 行目から 50 行目までを 51 行目から 55 行目のように変更します。ちなみにこれはパーマリンク設定がデフォルトの場合の設定ですので、パーマリンクを変更している方は適宜変更する必要があります。

/** 
 * The primary WebGLU namespace.
 * Holds drawing related data and has useful functions and objects for
 * working with WebGL.
 * @namespace WebGLU
 */
$W = {
 
    createdObjectCount:0,
 
    /** Various paths used by WebGLU. 
     * @property {String} libsrc Path to *GLU libraries themselved 
     * @property {String} shaders Where shaders are stored
     * @property {String} external Where external libraries, like Sylvester, are stored
     * @property {String} textures
     * @property {String} materials
     * @property {String} sylvester Which Sylvester lib to load, Sylvester.src.js or Sylvester.js
     */
    paths:{
//        libsrc : "../../src/",
//        shaders : "../../shaders/",
//        external : "../../external/",
//        textures : "../../textures/",
//        materials : "../../materials/",
        libsrc : "./wp-includes/js/WebGLU/src/",
        shaders : "./wp-includes/js/WebGLU/shaders/",
        external : "./wp-includes/js/WebGLU/external/",
	textures : "./wp-includes/js/WebGLU/textures/",
        materials : "./wp-includes/js/WebGLU/materials/",
        sylvester : "Sylvester.src.js"
    },

WebGLU の設置

ライブラリパスを変更した WebGLU を使えるようにするために WordPress ディレクトリ内に設置します。 WordPress のディレクトリを “WordPress” だとすると以下のように “WebGLU” ディレクトリを作成します。

/WordPress/wp-includes/js/WebGLU

作成したディレクトリ以下に WebGLU のライブラリ群を設置します。以下のディレクトリを設置すればよいと思います。

src
shaders
external
textures
materials

WebGLU をヘッダに追加する

次に WebGLU を投稿内で読み込むように設定します。これはテンプレートを編集する必要があります。「外観」 → 「テーマ編集」 → 「ヘッダー(header.php)」を選択して “head” タグ内に以下の 19 行目のように追加をします。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
 
<head profile="http://gmpg.org/xfn/11">
 
	<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
 
	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
	<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
 
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
	<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
	<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
	<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
 
	<?php wp_get_archives('type=monthly&format=link'); ?>
	<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
	<?php wp_enqueue_script( 'webglu.js', '/wp-includes/js/WebGLU/src/webglu.js'); ?>
	<?php wp_head(); ?>
</head>

カスタムフィールドでスクリプトを作成する

これで投稿内で WebGLU を書く準備は整ったのですが、投稿内にそのままスクリプトを書いてもうまく動作しません。なぜかというと WordPress が様々なタグを挿入、変更するためです。そのため、こちらが書いたスクリプトやタグをそのままの形で挿入出来るようにする必要があります。

WordPress にはそのような目的のため「カスタムフィールド」という仕組みを用意してあるのでそちらを利用することにしました。

カスタムフィールドは標準では表示されないようになっていると思うのでまずは「表示オプション」の「カスタムフィールド」にチェックをいれてカスタムフィールドを表示させます。次にカスタムフィールドを作成します。名前を “webglu_code” として値には WebGLU のサンプル “pyramid.html” を改造して次のようにしたコードを入れます。

<div>
<canvas id="canvas" width="500" height="500"></canvas>
<script type ="application/x-javascript">
function start() {
    if (!$W.initialize()) return;
    $W.GL.clearColor(0.9, 0.9, 0.9, 1.0);
    $W.camera.setPosition(2, 2, 3);
 
    var pyramidModel = [
        ["vertex", [0, 1, 0,   // tip 0
                   -1,-1, 1,   // fl 1
                    1,-1, 1,   // fr 2
                   -1,-1,-1,   // bl 3
                    1,-1,-1]], // br 4 
 
        ["color", [1, 1, 1,    // white
                   1, 0, 0,    // red
                   0, 1, 0,    // green
                   0, 0, 1,    // blue
                   1, 0, 1 ]], // magenta
 
        ["wglu_elements", [0, 1, 2,
                           0, 3, 4,
                           0, 3, 1,
                           0, 2, 4 ]]
        ];
 
    var pyramid = $W.createObject({ type: $W.GL.TRIANGLES,
                                    data: pyramidModel });
    pyramid.setPosition(0, 1, 0);
    pyramid.animation._update = function() {
        this.setRotation(this.age / 60, 0, 0);
    }
    $W.start();
};
 
start();
</script>
</div>

カスタムフィールドを挿入する

次に作成したカスタムフィールドを投稿中に挿入します。プラグインで投稿の任意の位置にカスタムフィールドを挿入出来るようにするものもあるようですが、とりあえずはプラグインを使わない方法を紹介します。ただしこの場合は

任意の場所には入れられない
使えるカスタムフィールドの値が固定される

などの制約があります。

こちらもテンプレートを変更しての対応になります。「メインインデックスのテンプレート(index.php)」を変更します。以下 23 行目から 26 行目にあるようにカスタムフィールドを挿入するためのコードを追加します。こちらのテンプレートは通常の表示に使われるようです。

<?php get_header(); ?>
 
<div id="container">
 
<div class="navigation">
	<?php posts_nav_link('', '<span class="floatright">Next &raquo;</span>', '<span class="floatleft">&laquo; Previous</span>'); ?>
</div>
 
	<div id="postcon">
		<?php if(have_posts()) : ?>
			<?php while(have_posts()) : the_post(); ?>
				<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 
					<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
 
					<div class="entry">
 
						<div class="postmetadata">
							<?php _e('Published at&#58;'); ?> <?php the_time(' h:m a - l F d Y') ?>
						</div>
 
						<?php the_content(); ?>
						<?php
							$webglu_code = get_post_meta($post->ID, 'webglu_code', true);
							echo $webglu_code;
						?>
						<div class="metabox">

次に「単一記事の投稿(single.php)」にも同じように追加します。こちらのテンプレートは下書きのプレビューなどのために使われるようです。

<?php get_header(); ?>
 
<div id="container">
 
<div style="text-align:center;">
<?php adsensem_ad('ad-3'); ?><br/><br/>
</div>
 
<div class="navigation">
	<span class="floatleft"><?php previous_post_link('&laquo; %link') ?></span> <span class="floatright"><?php next_post_link(' %link &raquo;') ?></span>
</div>
 
	<div id="postcon">
		<?php if(have_posts()) : ?>
			<?php while(have_posts()) : the_post(); ?>
				<div class="post" id="post-<?php the_ID(); ?>">
 
					<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
 
					<div class="entry">
 
						<?php the_content(); ?>
						<?php
							$webglu_code = get_post_meta($post->ID, 'webglu_code', true);
							echo $webglu_code;
						?>
						<?php link_pages('<p><strong>Pages:</strong> ', '</p>', 'number'); ?>
 
						<div class="metabox">

これでカスタムフィールドに書いたコードが投稿の後に挿入され、実行されれば成功です。

Posted in: Web, WebGL by satoyuichi No Comments

Emacs での glsl-mode の導入

Published at: 11:01 pm - 水曜日 1月 11 2012

Check

私はエディタとしてずっと Emacs を愛用しているので、シェーダを書くときにも Emacs の恩恵が得られると便利です。探してみると Emacs Lisp がありましたので、紹介します。

ちなみに下記では Windows 用の Emacs クローンの Meadow を例にしていますが、他の環境でも同様にすれば使えるはずです。

機能としては

シンタックスハイライト
インデント(TAB または C-M-\)
.vert ファイルと .frag ファイルの切り替え(S-lefttab あるいは ff-find-other-file)

があります。

ダウンロードと設定

まず、下記から Emacs Lisp をダウンロード(またはコピー & ペースト)します。
glsl-mode.el

そしたら次のような適当なディレクトリにファイルを保存します。(ついでに “emacs-lisp-byte-compile” などでバイトコンパイルしておくと良いと思います)
C:\meadow\packages\lisp\glsl-mode\glsl-mode.el

次に設定ファイル(~/.emacs.d/init.el) に次を加えます。

(autoload 'glsl-mode "glsl-mode" nil t)
(add-to-list 'auto-mode-alist '("\\.vert\\'" . glsl-mode))
(add-to-list 'auto-mode-alist '("\\.frag\\'" . glsl-mode))

こうすると .vert(頂点シェーダ)ファイルや .frag(フラグメントシェーダ)ファイルを読み込めば自動的に glsl-mode になります。

おまけ cg-mode

NVIDIA 系な方は Cg を利用している方もいるかと思います。 Cg にも cg-mode があるようなので、利用してみると良いかと思います。
cg-mode.el

Posted in: OpenGL by satoyuichi No Comments

WordPress で翻訳するプラグイン “Transposh Translation Filter”

Published at: 11:01 pm - 金曜日 1月 06 2012

Check

サイトを多言語化しようと思って切り替えのためのプラグインを探していたのですが、切り替えるどころか翻訳してくれるプラグインを見つけたのでそちらを紹介します。

Transposh Translation Filter

こちらのプラグインをインストールすると設定に “Transposh” が追加されるので、適当な設定を行います。主に翻訳を行う言語の指定になります。

ウィジェットにも “Transposh” が追加されるのでサイドバーなどに追加します。

こうするとウィジェットが追加され、先ほど指定した言語を選択できるプルダウンボックスが表示されます。このサイトでは英語、日本語、韓国語を選択してみました。

最近は Google 翻訳などのサービスがあるのでそちらを利用することで翻訳を手軽に行うことが出来ますね。

こちらの欠点といえば自動翻訳なので当然、翻訳間違えがあるということです。とはいっても、自分で一から翻訳する労力と比べると許容できるレベルなのではないかと思います。

Posted in: Web by satoyuichi No Comments

WebGLU のサンプル(pyramid.html)を動かしてみる

Published at: 11:01 pm - 木曜日 1月 05 2012

Check

まだまだ発展途上ではありますが、 Web ブラウザで 3D グラフィクスを楽しめる WebGL の環境も広がってきました。さっそく使ってみたいと思っている方も多いと思います。ですが、いざとなるとちょっとしたオブジェクトを表示するまでにも乗り越えなければならない壁が多くて嫌になってしまうかもしれません。少しでも簡単に実現する方法はないでしょうか？

一般的にはライブラリを探したりオーサリングツールを使ったりすることで工数を削減すると思います。今回はライブラリを探して使ってみました。

WebGL が動作するかの確認

まずは自分の環境で WebGL が動作するかを確認しておきましょう。次のデモが動作するか確認してみてください。(あるいはこのページの下にあるサンプルのリンク先に飛んでみて下さい)
aquarium(水族館のデモ)

WebGL が動作しない場合は “It does not appear your computer supports WebGL.” と自分のコンピュータでは WebGL が動作しない旨が表示されます。加えて、追加情報へのリンクが表示されます。 Chrome を使っている場合は次のページに飛んで、諸条件を確認することが出来ます。
WebGL と 3D グラフィックス

OS、ブラウザおよびグラフィクスカードによっては動作しない場合がありますので、動かない場合は使っている組み合わせで動作条件の確認をしましょう。

WebGLU のダウンロードとアップロード

OpenGL には “GLU” というライブラリがあるのですが、 WebGL にも “WebGLU” というライブラリがありました(両者は名前が似ているだけみたいです)。とりあえず、以下で公開されていますので “WebGLU” など適当な名前のディレクトリ以下にダウンロードします。
WebGLU(sourceforge)
WebGLU(github)
ダウンロードしたらディレクトリごと、レンタルサーバなどの web ページが閲覧できる場所にアップロードします。アクセス権などを適切に設定すれば準備完了です。

サンプル(pyramid.html)を動かす

さっそくプログラムを書いてみたいところですが、まずは自分の環境で WebGLU が正しく動作するかを確認してみましょう。 WebGLU にはいろいろなサンプルがついているのですが、その中でも単純な “pyramid.html” を実行してみたいと思います。名前の通りピラミッドのような四角すいが回転するだけのプログラムです。

それでは早速アクセスしてみましょう。アップロードした場所に続けて “/examples/pyramid/pyramid.html” と入力し、アクセスしてみると表示され…ませんね。”pyramid.html” を見てみると冒頭に

<html><head>
<script type="text/javascript" src="../../src/webglu.complete.js"></script>
<script type="text/javascript" src="../../external/Sylvester.src.js"></script>

という部分があるのですが、”src” ディレクトリ以下を見ても “webglu.complete.js” というファイルはありません。その代り “webglu.js” ならあるので先ほどの部分を次のように変えてアップロードし直します。

<html><head>
<script type="text/javascript" src="../../src/webglu.js"></script>
<script type="text/javascript" src="../../external/Sylvester.src.js"></script>

再度、アクセスしてみると今度は表示されるようになったと思います。なんだか妙な感じですが結果オーライということにしておきましょう。ちなみに他のサンプルはそのままでも動くものが多いようです。わざわざ手を加えないと動かないというのが曲者ですが、それでもこのサンプルは単純な部類に入るので、入り口としてこの例を参考にすると取り掛かりやすいかと思います。
“pyramid.html” の動作サンプル

Posted in: WebGL by satoyuichi No Comments

Blender でのポリゴンリダクション(Decimator)

Published at: 09:12 pm - 金曜日 12月 23 2011

Check

モデリングをしたり、ハイトマップから自動生成する過程ではポリゴン数が多くなりがちです。本職のモデラーさんならばポリゴン数を意識しながらモデリングするのも簡単かもしれません。ですが、私のようなプログラマーがテストデータとして作っている場合は難しいといえます。

そんな場合はポリゴン数が多くなっても形を作ってからポリゴン数を削減(これを一般的にポリゴンリダクションと言います)するという方法が簡単です。 Blender では Modifier 中の Decimator という機能を使うと実現出来ます。

オブジェクトモードで操作をします。 “Modifier” メニューから “Decimator” を追加します。

“Decimator” を追加したら “Ratio” を操作してポリゴン(Face) の数を調節します。 “Ratio” が 1.00 の時はポリゴン数が “968″ です。

“Ratio” を 0.3 くらいまで下げるとポリゴン数が 300 台まで下がります。ちょうど良い数まで下がったら “Apply” ボタンを押してオブジェクトに適用します。

Decimator は「なるべく」元の形を保ったままポリゴン数を少なくする機能なので、ポリゴン数と見た目のバランスがちょうど良い点を見つけるのがポイントになります。あるいは Decimator でポリゴンを削減してから形を整えるというアプローチも良いと思います。

注意

ただし、地形のモデルなどを綺麗なグリッド状に保ちたい場合、 Decimator を使うと形が崩れてしまいますので注意が必要です。

Posted in: Blender, CG by satoyuichi No Comments

WordPress で数式を扱うプラグイン ”Youngwhan’s Simple Latex”

Published at: 10:12 pm - 月曜日 12月 19 2011

Check

「ポリゴンの表と裏」
でテキストでは表すことが難しい数式を扱う必要がありました。そこで

一旦 LaTeX で書いて出力を画像ファイルとして貼り付ける
MathML で記述する

のどちらかを考えたのですが、どちらも気軽にやるというには手間がかかりすぎます。何か他に方法はないかと考えていたところ、 WordPress のプラグインで何か良いものがあるのではないかと思いつき探したところ次のものにたどり着きました。

Youngwhan’s Simple Latex

ほぼ LaTeX と同じ感覚で数式を記述することが出来ます。プラグインを有効化したら［ｍａｔｈ］［／ｍａｔｈ］(全角で書いていますが実際は半角で入力)タグで囲んで記述します。次からの例は前後をタグで囲むのを忘れないように注意して下さい。

単純な例

例えば次のように書けば

x^{2} + y^{2} = z^{2}

次の出力になります。

$x^{2} + y^{2} = z^{2}$

ベクトルの例

次のように書けば(-(マイナス)記号の前後にスペースを挟んではいけないようです)

\overrightarrow{AB} = (B_{x}-A_{x}, B_{y}-A_{y}, B_{z}-A_{z})

次の出力になります。

$\overrightarrow{AB} = (B_{x}-A_{x}, B_{y}-A_{y}, B_{z}-A_{z})$

行列の例

次のように書けば

\overrightarrow{AB} \times \overrightarrow{BC} =

\left(\begin{array}{ccc}
\left|\begin{array}{rr}

A_{y} & B_{y} \\ A_{z} & B_{z}

\end{array}\right|, &
\left|\begin{array}{rr}

A_{x} & B_{x} \\ A_{z} & B_{z}

\end{array}\right|, &
\left|\begin{array}{rr}

A_{x} & B_{x} \\ A_{y} & B_{y}

\end{array}\right| &

\end{array}\right)

次の出力になります。

$ \overrightarrow{AB} \times \overrightarrow{BC} = \left(\begin{array}{ccc} \left|\begin{array}{rr} A_{y} & B_{y} \\ A_{z} & B_{z} \end{array}\right|, & \left|\begin{array}{rr} A_{x} & B_{x} \\ A_{z} & B_{z} \end{array}\right|, & \left|\begin{array}{rr} A_{x} & B_{x} \\ A_{y} & B_{y} \end{array}\right| & \end{array}\right) $

MathML に比べればとても簡単に綺麗な出力が得られて気持ちが良いです。

Posted in: Web by satoyuichi No Comments

ポリゴンの表と裏

Published at: 11:12 pm - 月曜日 12月 12 2011

Check

OpenGL などの描画 API を使っていると頂点の並び順によって描画されたりされなかったりして戸惑った経験をした方もいるかと思います。これはなぜかというとポリゴンが視点に対して表を向けているのか裏を向けているのかで、描画の切り替えをしているからです。

ポリゴンの裏側が描画されない理由

通常、立体物で視点に対して裏になっている場合は、そのポリゴンより手前に別の表を向けているポリゴンがあるはずなので、裏を向いているポリゴンを描画する必要はありません。また、看板や紙のような平らなモデルであっても裏になっているポリゴンをそのまま描画してしまうと文字や模様が裏返ってしまうのでこれも良くありません(ガラスなどの透明な物体は例外になりますが、これはこれで表も裏も描画すれば正確な描画になるかというとそういうことでもありません)。

ポリゴンの表裏はどのように決まるのか

つまり描画する必要のないポリゴンを対象から外すために表側か裏側かで切り替えをしているということになります。では、どうして頂点の並び順によってポリゴンの表と裏が変わるのでしょうか？そもそもポリゴンの表と裏はどうやって決まるのでしょうか？

結論から先に書くと数学的に計算して求めます。

頂点 A, B, C から作られるポリゴン ABC で考えます。ちなみにこちらが表面です。まず頂点 A と B を結んだベクトル AB を求めます。ベクトルは終点から始点を引くことで求められます。式は

$\overrightarrow{AB} = (B_{x}-A_{x}, B_{y}-A_{y}, B_{z}-A_{z})$

となります。同じように頂点 B と C を結んだベクトル BC も求めます。

次にそのベクトル AB, BC の外積を求めます。式は

となります。
それぞれの成分の行列式の求め方は X 成分を例にすると

$ \left|\begin{array}{rr} A_{y} & B_{y} \\ A_{z} & B_{z} \end{array}\right| = A_{y} \times B_{z}-B_{y} \times A_{z} $

となります。これを Y 成分と Z 成分ともに同様に求めます。
それでは頂点 A, B, C に具体的な値を入れて計算してみます。

$ A = (1, 1, 0), B = (0, 0, 0), C = (1, 0, 0) $

とするとベクトル AB, BC は

$\overrightarrow{AB} = (0-1, 0-1, 0-0) = (-1, -1, 0)$
$\overrightarrow{BC} = (0-1, 0-0, 0-0) = (-1, 0, 0)$

となり、これの外積は

$ \overrightarrow{AB} \times \overrightarrow{BC} = \left(\begin{array}{ccc} \left|\begin{array}{rr} -1 & 0 \\ 0 & 0 \end{array}\right|, & \left|\begin{array}{rr} -1 & -1 \\ 0 & 0 \end{array}\right|, & \left|\begin{array}{rr} -1 & -1 \\ -1 & 0 \end{array}\right| & \end{array}\right) $

となるため、結果は

$\overrightarrow{AB} \times \overrightarrow{BC} = (0, 0, 1)$

となります。これは空間的にベクトル AB, BC に対して直交するベクトルになります。ここで Z 成分が正になっていることに注目して下さい。

それでは今度は逆回りのポリゴン ACB を考えた時、ベクトル AC, CB で同じようにしてみます。こちらは裏面を向いている例です。

$\overrightarrow{AC} = (1-1, 0-1, 0-0) = (0, -1, 0)$
$\overrightarrow{CB} = (0-1, 0-0, 0-0) = (-1, 0, 0)$
$ \overrightarrow{AC} \times \overrightarrow{CB} = \left(\begin{array}{ccc} \left|\begin{array}{rr} -1 & 0 \\ 0 & 0 \end{array}\right|, & \left|\begin{array}{rr} 0 & -1 \\ 0 & 0 \end{array}\right|, & \left|\begin{array}{rr} 0 & -1 \\ -1 & 0 \end{array}\right| & \end{array}\right) $
$\overrightarrow{AC} \times \overrightarrow{CB} = (0, 0, -1)$

すると先ほどと同じくベクトル AC, CB に対して直交するベクトルになりましたが、 Z 方向が逆(負)を向いていることが分かります。

このように頂点の並び順によってポリゴンの表と裏が変わることが分かります。ちなみに右回りの場合は時計回りということで clockwise(CW), 左回りの場合は反時計回りということで counter clockwise(CCW) と略します。

右手系と左手系

右手系と左手系というのは Z 軸が手前と奥のどちらを正(プラス)として扱うかということを表しています。手の指先(親指以外)を X 軸の正、手のひらを Y 軸の正とした場合、右手の親指は手前を向き左手の親指は奥を向きます。このため右手系では手前を正、左手系では奥を正とします。

なお、代表的な描画 API としては OpenGL が右手系、DirectX が左手系を採用しています。数学の教科書は右手系で書かれているので、自分がどちらの座標系を扱っているのか意識しないと思った結果にならず戸惑ってしまうかもしれません。

先ほどの略称でいうと右手系では CCW が表、左手系では CW が表として扱われます。つまり上記の例は CCW が表だったので右手系だったということですね。

プリミティブによる違い

トライアングルリストの場合は常に三角形毎の回転方向は変わりませんが、トライアングルストリップの場合はポリゴン毎の回転方向が交互に変わります。ただ、これはこういうもので最初のポリゴンの回転方向を基準に表の扱いを決めているので交互に描画されないといったことはありません。

ローポリゴンモデルの場合

ローポリゴンモデルの場合は皿のように薄い物体や壺などの内側が見える構造の物に対して、上面と下面、外側と内側の両方にポリゴンを貼る余裕がない場合もあります。そういった場合は表裏面の両方を描画するようにしてポリゴン数を抑えるといったこともアリです。その際にはどちらから見ても不自然でないテクスチャデザインにするなどの注意が必要です。

Posted in: CG, OpenGL by satoyuichi No Comments

Android で XML ファイルから Menu を作成する

Published at: 09:12 am - 土曜日 12月 10 2011

Check

Android の Menu キーを押した時の Menu の作成、表示方法にはいくつか方法があります。とりあえず静的(内容の変更がない)な場合はあらかじめ XML ファイルに内容を記述して呼び出す形がシンプルで管理もしやすいと思います。

公式サイトでは以下が参考になります。
User Interface > Menus

今回は以下のようなものを用意してみました。Eclipse の “Package Explorer” を右クリックして New -> Android XML File を選択します。 “New Android XML File” ダイアログの “Resource Type” から Menu を選択して “Project” にこの XML ファイルを追加するプロジェクトを選択します。 “File” にはこの XML ファイルの名前を適当に入力します。

最低限、以下のように設定しておけば表示と項目選択時の動作をさせることが出来ます。項目自体の ID は “@+id/toggle_culling” などとして保存することで、 “R.java” ファイルに自動的に ID が追加されます。この ID は後で項目選択時の動作を書く時に使います。メニューボタンに表示させる文字列は “string.xml” に文字列を記入しておき、そこに登録した ID で文字列を引くようにしています。

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/toggle_culling"
          android:title="@string/toggle_culling" />
    <item android:id="@+id/toggle_transparent"
          android:title="@string/toggle_transparent" />
    <item android:id="@+id/toggle_texture"
          android:title="@string/toggle_texture" />
    <item android:id="@+id/select_bg_color"
          android:title="@string/select_bg_color" />
</menu>

“string.xml” の例は以下のようになります。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="toggle_culling">カリング</string>
    <string name="toggle_transparent">透明</string>
    <string name="toggle_texture">テクスチャ</string>
    <string name="select_bg_color">背景色</string>
</resources>

メニューボタンが押された時は Activity::onCreateOptionsMenu() が呼び出されるので、これをオーバーライドして MenuInflater::inflate() に先ほど作ったメニューの ID を指定します。

メニューの項目が選択された場合は Activity::onOptionsItemSelected() が呼び出されるので、これもオーバーライドして選択された時の動作を記述します。どれが選択されたかは MenuItem::getItemId() を使って判定をします。この ID は先ほどメニューの XML で “@+id/toggle_culling” などとした ID を使うことが出来ます。Eclipse の補完候補に出てこない場合は XML ファイルの保存を忘れているか、記述ミスがあると思うのでコンソールを確認してみて下さい。

 public boolean onCreateOptionsMenu(Menu menu) {
	  super.onCreateOptionsMenu(menu);
	  MenuInflater inflater = getMenuInflater();
	  inflater.inflate(R.menu.main_menu, menu);
	  return true;
 }
 
 public boolean onOptionsItemSelected(MenuItem item) {
	  switch (item.getItemId()) {
	  case R.id.toggle_culling:
		   m_renderer.toggleCulling();
		   return true;
	  case R.id.toggle_texture:
		   m_renderer.toggleTexture();
		   return true;
	  case R.id.toggle_transparent:
		   m_renderer.toggleTransparent();
		   return true;
	  case R.id.select_bg_color:
		   m_colorPickerDialog.show();
		   return true;
	  default:
		   return super.onOptionsItemSelected(item);
	  }
 }

これらの実行例を以下に示します。これらは直接プログラムに書くことも出来るのですが、XML ファイルなどでプログラムの外に出した方がメンテナンスもやりやすいですし、多言語化にも対応しやすいのでオススメです。

それにしても、Android アプリケーションの開発は Eclipse のプラグインがないとやりにくいですね。私は Emacs 使いなのであまり開発環境は使わないのですが、Android アプリの場合は補完の関係もあり Eclipse 内でプログラミングをすることも時々あります。

Posted in: Android by satoyuichi No Comments

なぜモデルデータにポリゴンを使うのか

Published at: 10:12 pm - 火曜日 12月 06 2011

Check

ゲーム機でも 3D グラフィクスが楽しめるようになってからすでに10年以上経ちましたね。「ポリゴン」という単語も広く浸透していると思います。それどころか「3D グラフィクス = ポリゴン」という印象すらあります。

そこでポリゴンってなんだろうか、なぜ 3D グラフィクスといえばポリゴンなんだろうかなどという話も含めておさらいしてみようと思います。意外に 3D グラフィクスの入門書でも端折られていたり、深くは説明されていない部分なんですよね。

ポリゴン

それでは最初にポリゴンについて調べてみると「ポリ(poly)」は複数を意味する時につきますね。化学ではポリエチレン(複数のエチレンで構成されている)やポリエステル(同じく)、音楽ではポリリズム(複数のリズムが同時になる)などがあります。
それから「ゴン(gon)」というのは「～角形」という意味ですので、ポリゴン(polygon)の意味は「多角形」ということになります。

ポリゴンモデル

3D グラフィクスではモデル(人間、車、その他いろいろ)を多くの場合ポリゴンで扱っています。モデルには角ばったものや、すべらかに丸みを持ったものなどいろいろな形状がありますが、それらを多角形の集まりで近似して表現するのがポリゴンモデルということになります。

先ほど見たように「ポリゴン」なので、多角形で近似するなら何角形で近似しても良いはずなのですが、通常は三角形を使います。

なぜポリゴンといえば三角形なのか

ただ近似するだけなら何角形を使っても良いのですが、3D グラフィクスでは一般的に三角形を使います。なぜかというと三角形には他の多角形にはない特徴があって、それを前提とすることで処理を単純化できるためです。処理を単純化出来ればハードやソフトの生産コストを下げることが出来ます。

それで、三角形にある特徴としては以下のようなものが挙げられます。

全ての頂点が必ず同一平面に乗る
必ず凸形になる
他の多角形は必ず三角形に分割できる

上でも強調してありますが、必ずというのがポイントです。

なぜ三角形だと都合が良いのか

三角形を使った場合の利点はラスタライズ時にあります。ここでいうラスタライズはポリゴンデータをピクセルデータとして画面(VRAM, フレームバッファ)に書き出す処理のことを指します(広義にはもっといろいろな処理を含む場合もあります)。

三角形を使った場合は例えば、画面の左上から右下に向かってデータを書き出していくとします。そうした場合、左から右に引いた直線と、三角形の各辺が交差する点が2点に限られます(各頂点の場合は同じ位置が二つあると考えます)。左側を最小値、右側を最大値と考えると、その2点間にだけデータを書き出していくという非常に単純なアルゴリズムを適用することが出来ます。

もし三角形以外の多角形を使った場合は凹型になることも考えられます。そうした場合、左から右に引いた直線と、三角形の各辺が交差する点が3点以上ある場合が考えられます。すると先ほどのような、最小値と最大値の2点間だけデータを書き出すという単純なアルゴリズムでは対応できなくなってしまいます。

このように三角形に限定することによって適用するアルゴリズムが単純かつ一つにすることが出来るわけです。

なぜ曲面は使わないのか

コンピュータグラフィクスで立体を扱うにはポリゴンしか手段がないかというと、そうではなく曲面を使って表現することも出来ます。ですが、ポリゴンに比べて一般的ではありませんし、私も実用的に使った経験がありません。

なぜなのかを考えてみると以下のような点が挙げられます。

モデリングが大変
角ばった表現が苦手
曲面描画が出来るハードウェアでないと(実用的に)使えない

最後に曲面を使った場合に考えられる利点も挙げておきます。

どこまで拡大しても綺麗な曲面が表現できる
ポリゴンに比べて少ないデータ量で曲面を表現できる
処理時間を一定にできる

とはいえ「曲面で表現しないと絶対にダメ」という場面は限られるでしょうし、ポリゴンの方が単純なだけに応用も効くのではないかと思います。

Posted in: CG by satoyuichi No Comments

ソフト職人

WebGLU のサンプル一覧

WordPress で WebGLU を使う

WebGLU のライブラリパスを変更する

WebGLU の設置

WebGLU をヘッダに追加する

カスタムフィールドでスクリプトを作成する

カスタムフィールドを挿入する

Emacs での glsl-mode の導入

ダウンロードと設定

おまけ cg-mode

WordPress で翻訳するプラグイン “Transposh Translation Filter”

WebGLU のサンプル(pyramid.html)を動かしてみる

WebGL が動作するかの確認

WebGLU のダウンロードとアップロード

サンプル(pyramid.html)を動かす

Blender でのポリゴンリダクション(Decimator)

注意

WordPress で数式を扱うプラグイン ”Youngwhan’s Simple Latex”

単純な例

ベクトルの例

行列の例

ポリゴンの表と裏

ポリゴンの裏側が描画されない理由

ポリゴンの表裏はどのように決まるのか

右手系と左手系

プリミティブによる違い

ローポリゴンモデルの場合

Android で XML ファイルから Menu を作成する

なぜモデルデータにポリゴンを使うのか

ポリゴン

ポリゴンモデル

なぜポリゴンといえば三角形なのか

なぜ三角形だと都合が良いのか

なぜ曲面は使わないのか

Translation

最近の投稿

カテゴリー

2012年1月
月	火	水	木	金	土	日
« 12月
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31