2010-07-03

HTML5のcanvas2dでテクスチャーをはったポリゴン描画

HTML5のCanvas2dではポリゴンや三角形に自由にテクスチャーをはって
描画するという機能はなさそうに見えましたが、
工夫次第ではできるのではないかと思い、ちょっとためしに実装してみました。
ちょっと調べた感じだとすぐには見つからなかったというのもあります。
Canvas3Dはまだ開発版でしか使えないのと、OpenGL2.0相当くらいの
グラフィックスボードが必要とされているっぽいので
インテルのオンボード名環境とかでもちょっとテクスチャーをはった多角形を描けると、
いいこともあるんじゃないかと思っています。
ばねたいとかよさそうです。
http://d.hatena.ne.jp/Dycoon/20081109

以下に動作するものを置きました。
http://www.rmake.net/dycoon/files/polygonTest2/polygonCanvasTest800x600.html
FireFoxやChromeで動作するんじゃないかと思います。
Internet Explorer 8ではHTML5に対応していないので、動きません。
"change mode"というボタンを押すと描画の方法が変わります。

デフォルトの描画に関するスクリーンショットを以下に置きました。

まず、Mozilla FireFox 3.6.6のスクリーンショット。

次に、Google Chrome 6.0.435.1のスクリーンショット。

やっていることは、三角形ポリゴンを2つ組み合わせて
飛行機のテクスチャーを張った四角形を欠いています。
アフィン変換した四角形なら元から描画可能なのであまり適切な例ではありませんが、
とりあえず動作確認をするためには使えるかと思います。

まず、FireFoxではバイリニアフィルタがかかっていますが
Chromeではかかっていません。
ここら辺を調整する関数はないと思いますので、ブラウザの実装依存かと思います。

つぎに、どちらの画面でも飛行機の左上から右下にかけてなにやら線が入ってしまっています。
これはポリゴンの境目に相当するところで発生しています。
これは、テクスチャーをはった三角形描画の方法が原因で起こってしまっているのではないかと思いますので
実現方法から説明してみたいと思います。

HTML5ではパスに模様をつけて描画することと、それをアフィン変換で変換して表示することができます。
このプログラムではテクスチャーの座標の位置に頂点を置き、
その頂点を画面上の位置に変換するようなアフィン変換の行列を求めることで実現しています。

しかし、そうすると本来同じ位置にあるはずの頂点が変換による誤差で
同じ位置にならず三角形の間に隙間が生じてしまうようです。
（ただ、これが原因だともっと違う表示のされ方がするような気もしますので、
もしかしたら別の原因もあるのかもしれません。）

"change mode"を1回押しますと、strokeにテクスチャーを使うようになります。
これにより隙間の線は消えますが、バイリニアフィルタで半透明になっている部分が
隙間のあった位置で濃くなっているのと、描画の範囲自体が広がってしまうということが起こります。
半透明のテクスチャーを使った場合は三角形が隣接している部分が濃くなるというようなことが起こるかと思います。

"change mode"をもう1回押しますと境界の線を表示するようになります。
どんな三角形を描いているか確認するのにご利用ください。

この実現方法だとどうしても問題が残ってしまいました。
この手のことを考えている方の参考にでもなればということで、
以下にソースを貼り付けておこうかと思います。

それでは

2010-01-01

寅を写真に合成してみた。

あけましておめでとうございます。

年賀状用に虎をモデリングして写真に合成したりしてみました。

写真は両親がクロアチアに行ったときに撮影したものを使用しました。

以下主に虎の部分のモデリングなどについて。

2009-07-17

ゲーム共有サイトRmakeを開始

Dycoon2009-07-17

1月ごろから開発していたシステムがそこそこ形になってきたので紹介します。
ブラウザ上でゲームを作成するサービス「Rmake」です。

ゲームを作成して共有するサイト - Rmake

id:akasataのところで詳しく紹介されています。

http://d.hatena.ne.jp/akasata/20090717/1247818184

このようなサービスに興味がありましたらRmakeをお試しいただければ幸いです。

サーバーやFlashのマップエディターやマップ描画などはid:akasataが主におこないました。
クジラ飛行机さん（id:kujirahand）にはアドバイスなどをいろいろいただきました。
私はゲームエンジンやエディタの一部などを作成しました。

RmakeのActionRPG（今はそれしかありませんが）のイベントの挙動はスクリプト言語で書くようになっています。
言語の名前はArrp（"アルプ"と読むのがいいと思っていますがどうでしょう？）と呼んでいます。

Arrpはrubyライクな言語です。
今のところはrubyサブセットと呼ぶには仕様の違いがいろいろありますが
rubyでも実行できるような形に持っていければと思っています。

Arrpを作るにあたって以下のページを参考にしました。

http://www.hakkaku.net/articles/20080226-154

Action Script用のパーサーを作るうえで非常に参考になりました。
アドバイスをいただいたクジラ飛行机さん（id:kujirahand）の記事でもあります。

2009-02-28

日本語プログラミング言語なでしこのクジラ飛行机さんとお会いした

Dycoon2009-02-28

今やっている仕事のスクリプト部分などでお世話になっている
クジラ飛行机さん(id:kujirahand http://wiki.kujirahand.com/page/)とリアルで会う機会がありました。

id:akasata氏やid:kaisehさんとも一緒で飲んだり食べたりしながら、
Delphiの昔話や今私がかかわっているプロジェクトやFlashや言語処理のことなどを話したりしていました。

楽しく有意義な時間を過ごせました。
ありがとうございました。

2009-02-21

AO benchを実装してみた

Dycoon2009-02-21

Ambient Occlusionをレイトレースで求めるプログラムをいろんな環境に移植してみようという
AO benchというプロジェクトがあるようです。

http://lucille.atso-net.jp/aobench/

最近こちらのAO benchを自分で実装してどのくらい速度が出るかなどいろいろ試していました。
とりあえず実装してみたのをおいておきます。

VC++版をマルチスレッド化してみたもの（スレッド4本）（ソースコードおよび実行ファイル）

http://www.rmake.net/dycoon/files/aobench/aobench.zip

私の環境(Athlon X2 Dual 4800+ 2.42GHz)で2.1秒くらいかかっていたのが1.3秒くらいになりました。
QuadコアなCPUとかだともう少し速度が出るかもしれません。
Visual Studio 2005のVC++を使用しています。そろそろ2008に移行したいところではあります。

ただ、プロジェクトの趣旨が言語ごとでの性能の比較っぽいのでマルチスレッド化は趣旨に合わない
のではないかという気がしないでもありませんが。