タグに「WebGL」を持つ
31〜40件目 / 42件
前へ 1 2 3 4 5 次へ

　Object.clone() / magicien　

一カ所詰まった＆悩み中の仕様についてメモ。

例えば、DHMatrixというクラスを定義したとして、

var m = new DHMatrix();
if(m instanceof DHMatrix){
  alert("TRUE");
}else{
  alert("FALSE");
}

みたいに書くと、TRUEと表示される。でも、

var m = new DHMatrix();
var m2 = Object.clone(m);
if(m2 instanceof DHMatrix){
  alert("TRUE");
}else{
  alsert("FALSE");
}

みたいに書くと、FALSEと表示される。
プログラム内で、特定のクラスのインスタンスかどうかによって処理を分けていて、
この仕様を知らずにハマってました。
解決策は、Object.cloneを使わずに、独自のcloneメソッドを実装することでしょうか...

　WebGLでのエラーコード / magicien　

WebGLでのエラーコードについて私的メモ。

context.getError()で得られるエラーコードの種類。
ファイルの場所は、

WebCore/platform/graphics/GraphicsContext3D.h

主なエラーコードは、

NO_ERROR = 0,
INVALID_ENUM = 0x0500, (=1280)
INVALID_VALUE = 0x0501, (=1281)
INVALID_OPERATION = 0x0502, (=1282)
OUT_OF_MEMORY = 0x0505 (=1285)

　テクスチャ関連のAPIが変わった？ / magicien　

以前、Chromiumのテクスチャがうまく動作しなくなったと思っていたら、
最近WebKitのテクスチャのAPIも変わったらしい...


自分のために、WebKitで表示された警告をメモ。

Calling obsolete texImage2D(GLenum target, GLint level, HTMLImageElement image)
Calling obsolete texImage2D(GLenum target, GLint level, HTMLImageElement image, 
                                                    GLboolean flipY, GLboolean premultiplyAlpha)

最新のAPIってどこで見られるんだろう...

---

2010/07/10 追記：
せっかくWebKitのソースが公開されているので、ヘッダだけでも見てみた。
ヘッダを見る限り、texImage2Dで今使える引数は、

void texImage2D(unsigned target, unsigned level, unsigned internalformat,
                               unsigned width, unsigned height, unsigned border,
                               unsigned format, unsigned type, ArrayBufferView* pixels, ExceptionCode&);
void texImage2D(unsigned target, unsigned level, unsigned internalformat,
                               unsigned format, unsigned type, ImageData* pixels, ExceptionCode&);
void texImage2D(unsigned target, unsigned level, unsigned internalformat,
                               unsigned format, unsigned type, HTMLImageElement* image, ExceptionCode&);
void texImage2D(unsigned target, unsigned level, unsigned internalformat,
                               unsigned format, unsigned type, HTMLCanvasElement* canvas, ExceptionCode&);
void texImage2D(unsigned target, unsigned level, unsigned internalformat,
                               unsigned format, unsigned type, HTMLVideoElement* video, ExceptionCode&);

の5種類っぽい。最後のExceptionCodeは内部処理用のものだと思うので、
ExceptionCodeを除く引数がJavaScriptで指定できるものでしょう。
ファイルの場所は、
WebKit-r62909/Webcore/html/canvas/WebGLRenderingContext.h

　コード整理中 / magicien　

現在、WebGLアプリの設計見直しとコード整理中。
まだ作りかけですが、クラス図を載せてみます。

　動作テストの動画（２回目） / magicien　

とりあえず、WebGLアプリについて、出来ているところまでで動画にしてアップ。


今後すべきことをメモしておくと、
1. 何故かMinefieldでまともに動作しなくなったため、それを修正
2. ひざのIKの計算を修正
3. ソースコードの整理
ここまで終わったらソースを公開する予定。

スキンウェイトもうまくいっていない気がするので、余裕があれば修正したいです。
他にもやりたいことはいろいろ...時間が足りない！

　動作テストの動画をアップしてみた / magicien　

某動画共有サイトにWebGLアプリの動作テスト動画をアップしてみました。

今まで動画をアップしたことなんてないので、勝手がわからない...

　WebGLを動作させるためのブラウザをインストールする方法（Win編） / マルパチ　

久しぶりの投稿になってしまいました。マルパチです。

さてmagicienからWebGLの動作環境の導入法について書いてくれと頼まれました。
ところが私のマシンではChromium(Chromeの開発版)でWebGLが起動できず、WebKit(Safariの開発版)に至ってはそもそもアプリケーションが起動しません(爆)

しかしMinefield(FireFoxの開発版)は問題なくWebGLの起動に成功したので、とりあえずMinefieldのインストール方法についてのみ書くことにします。
ChromiumとWebKitについては導入に成功し次第、追記することにします。


Minefield（Firefoxの開発版）のインストール方法


下記URLからWin用のパッケージ（firefox-3.7a4pre.en-US.win32.installer.exe）をダウンロードします。 http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/

WebGLを動作させるためにMesa software OpenGLが必要になるので以下のURLからダウンロードします。
http://people.mozilla.com/~vladimir/webgl/webgl-mesa-751.zip
ダウンロードした「webgl-mesa-751.zip」を解凍すると中に「osmesa32.dll」が入っています。
Cドライブにtempフォルダを作成し、osmesa32.dllをフォルダの中にコピーしてください。

ここでようやくMinefieldを起動します。
Minefieldのアイコンをダブルクリックして起動してください
URL入力欄に「about:config」と入力します。
すると、警告画面が表示されるので、「I'll be careful, I promise!」というボタンをクリック。
設定一覧がダーッと表示されるので、Filterにwebglと入力して「webgl.enabled_for_all_sites」を探してください。
「webgl.enabled_for_all_sites」を選び、ダブルクリックします。
webgl.enabled_for_all_sitesのValueが「true」に変更されるはずです。
次に同じ設定一覧の中から「webgl.osmesalib」を選び、ダブルクリックします。
「enter string value」というウィンドウが出てくるので、「C:\temp\osmesa32.dll」と入力して先ほどのosmesa32.dllを指定してください。

設定は以上で完了です。
これで、MinefieldでWebGLが動作するようになります。


ていうかMacの方が簡単そうですね。普及率はWindowsの方が高いのに。
以下のサンプルURLへ行き、自転する地球が表示されれば導入成功です。
http://webos-goodies.googlecode.com/svn/trunk/blog/articles/getting_started_with_webgl/webgl_sample.html

　WebGLを動作させるためのブラウザをインストールする方法（Mac編） / magicien　

MacでWebGLを動作させる方法。

現在、WebGLが動作する環境は、WebKit、Minefield、Chromiumの3つ。
いずれも開発版なので、バグやらセキュリティホールやらがあるかもしれません。
インストール、実行する場合は、自己責任で行うようお願いします。
3つとも既存のブラウザの開発版であり、場合によっては正規版のブラウザに影響を及ぼす場合があります。
インストールの前に、ブラウザの設定やデータをバックアップしておくことをお勧めします。
あるいは、普段使っていないブラウザの開発版を利用すると良いかもしれません。

WebKit（Safariの開発版）のインストール方法

下記URLから、Mac用のものをダウンロード。
http://nightly.webkit.org/
ダウンロード後、WebKitのアイコンを「アプリケーション」フォルダにドラッグ＆ドロップ。

次に、ターミナルを起動し、

defaults write com.apple.Safari WebKitWebGLEnabled -bool YES

というコマンドを実行。
これで、WebKitでWebGLが動作するようになる。

Minefield（Firefoxの開発版）のインストール方法

下記URLからMac用のパッケージ（例：firefox-3.7a4pre.en-US.mac.dmg）をダウンロード。
http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/
ダウンロード後、Minefieldのアイコンを「アプリケーション」フォルダにドラッグ＆ドロップ。

次に、Minefieldを起動、URL入力欄に「about:config」と入力。
すると、警告画面が表示されるので、「I'll be careful, I promise!」というボタンをクリック。
設定一覧が表示されるので、その中から、「webgl.enabled_for_all_sites」を選び、ダブルクリックする。
（Filterにwebglと入力すると、項目が絞り込まれるので探しやすい。）
webgl.enabled_for_all_sitesのValueが「true」になっていればOK。
これで、MinefieldでWebGLが動作するようになる。

Chromium（Chromeの開発版）のインストール方法

下記URLからMac用のパッケージ（chrome-mac.zip）をダウンロード。
http://build.chromium.org/buildbot/continuous/mac/LATEST/
ダウンロード後、Chromiumのアイコンを「アプリケーション」フォルダにドラッグ＆ドロップ。

次に、以下のコマンドでChromiumを起動（コマンドによる起動は毎回必要）。

/Applications/Chromium.app/Contents/MacOS/Chromium --enable-webgl

すると、ChromiumでWebGLが動作する。
もしローカルファイルにアクセスする場合は、--allow-file-access-from-filesのオプションも付けて起動する。

実際に使ってみたところ、動作スピードは、
Safari ＞ Chromium ＞ Firefox
といったところ。Firefoxはちょっとカクカクだったり、動作が変だったりしましたが、
SafariとChromiumは割とサクサク動作しました。

---

2010/08/10 追記：
Chromiumの起動オプションを修正。
なんだかChromiumでのWebGLの表示が変だ...

　スキンメッシュアニメーション3 / magicien　

だんだん完成に近づいてきた...

結局、ボーン毎にグループ化して、グループ毎に描画、ということにしました。
GPUで頂点ブレンディングするとなると、頂点の座標やら法線やらはJS側で変更する必要がないので、
初期化のときに一度バッファにデータを入力すれば良いわけです。
計算量も減るし、メモリにデータが載れば、データ転送量も減って、高速化に大きな効果が。

実際に実装してみて、どれくらい速くなったかというと、約1.5倍。
前々回、Safariでfpsが20くらいと書きましたが、これは関数呼び出しの周期を50msにしていたせいでした。
周期を10msにしたところ、実際には25fpsくらい出ました。
で、頂点ブレンディングをGPU側で実装したところ、40fpsくらいに！
とはいえ、モデルを1つしか表示していないのと、
ボーンの影響とは別の頂点のモーフィングを実装する必要があるので、
描画速度としては、まだまだといったところです。
無駄な処理や冗長な処理が何か所かあるので、そこらへんを削ればもっと速くなるかと。
う〜ん、3月中に完成、公開したい...

　スキンメッシュアニメーション2 / magicien　

さっきまで調べものしながら長々と記事を書いてたら、セッションが切れて、記事が消えてしまった...

頂点ブレンディングをvertex shaderで実装するとき、全ボーンの行列データをuniformで一気に渡すのは無理そう。
では、どうやって実装するかというと、
(1) 影響を与えるボーンが共通している頂点をグループ化し、グループ毎に描画
(2) 影響を与えるボーンの行列データをattributeで渡す

(1) で問題となるのは、グループ化の処理が面倒なこと。
(2) で問題となるのは、転送するデータの量が膨大になること。

速度のことを考えると、やはり(1)で実装すべきなんだろうけど、面倒だなぁ。