タグに「HTML5」を持つ
1〜10件目 / 11件
1 2 次へ

　setInterval を requestAnimationFrame へ / magicien　

今日、とあるテストを受けようと必死に勉強していたところ、テストセンターがお休みだということに気付き、がっくり。
仕方が無いので、WebGLのライブラリで使っている setInterval を requestAnimationFrame へ書き換えてみた。

実装の仕方はここを参考に。
これといった情報が無くて申し訳ないのですが、特にひっかかることなく変更できました。

が、手元のMacのSafariだと、webkitRequestAnimationFrame が無い。どうやら、Safari 6 以上じゃないと実装されていないらしい。そして、Safari 6 は、MacOS v10.7（Lion）以上しか対応していないらしい。手元のMacはv10.6（Snow Leopard）。ということで、Macでは動作確認できませんでした。

Chromeは問題無く動きました。前よりも心なしかぬるぬる動いているような気がする。FirefoxとOperaは相変わらず。

新しいMacを買うべきか、OSをバージョンアップすべきか、それが問題だ...

　JavaScriptでバイナリデータの読み込み / magicien　

JavaScriptでPMD、VMD等のバイナリデータを読み込んだときに使った方法。

HTML5のAPIの実装が進めば、こんなことする必要も無くなる気がしますが、今使っている方法は次のとおり。

まずはファイルをバイナリとして取得する必要がある。
読み込みの対象がFileオブジェクトの場合は、FileReaderを使えばOK。

function readData(data) {
 ...
}

function readBinaryFile(file) {
  var reader = new FileReader();
  reader.onloadend = function() {
    readData(reader.result);
  };
  reader.readAsBinaryString(file);
}

読み込み対象がサーバ上のファイルであれば、"charset=x-user-defined" として読み込む。
例によって prototype.js を使っているので、Ajax.Requestのサブクラスを作って次のようにした。

var BinaryRequest = Class.create(Ajax.Request,
  initialize: function($super, url, options) {
    $super(url, options);
  },

  request: function() {
    this.transport.overrideMimeType('text/plain; charset=x-user-defined');
    Ajax.Request.prototype.request.apply(this, argument);
  },
});

function readBinaryFileFromURL(url) {
  new BinaryRequest(url, {
    method: 'GET',
    onComplete: function(response) {
      readData(response.responseText);
    },
  });
}

これで、データを読み込むところまでは出来たので、あとはデータの解析をするだけ。
とはいえ、そっちの方が大変ですが。データの解析はまた今度。

　MacでのWeb用音声変換 / magicien　

ウェブ用にmp3とoggとwavを用意するときに毎回分からなくなるのでメモ。

・wav→mp3
こういうときに限ってQuickTimeが使えないので、iTunesを使う。
「iTunes」→「環境設定…」→「一般」→「CDをセットしたときの動作」の横の「読み込み設定」→「読み込み方法」で「MP3エンコーダ」を選択
その後、読み込んだ曲を右クリック（Ctrl+クリック）で選択、「MP3バージョンを作成」で出来上がり。

・mp3→wav
上と同じ。「読み込み方法」で「WAVエンコーダ」を選択
その後、曲を右クリック（Ctrl+クリック）で選択、「WAVバージョンを作成」で出来上がり。

・wav→ogg
oggencコマンドを使う。
FinkとかMacPortsとかで vorbis-tools をインストールすると、使えるっぽい。

$ oggenc -o output.ogg input.wav

これでOggファイルの出来上がり。

・ogg→wav
oggdecコマンドを使う。
同じく vorbis-tools でインストールされる。

$ oggdec -o output.wav input.ogg

mp3とoggの変換は一度wavにしてから変換すれば良いんじゃないかと思う。
あと、音声素材サイトでogg形式のファイルが公開されていると、おっ！と思う。
こことかおすすめです。

　Operaで "instanceof Image" がエラーになる / magicien　

Operaで次のようなコードを実行したところ、"Unhandled Error: Second argument to 'instanceof' does not implement" というエラーになった。

var img = new Image();
if(img instanceof Image) {
  alert("img is an instance of Image!");
}

なぜかImageにはinstanceofが使えないらしい。
Operaで上のような判定をしたい場合は、Imageの代わりにHTMLImageElementを使えばOK。

　FileオブジェクトからAudio読み込み / magicien　

投稿が全くなかったので挫折したかと思われたかも知れませんが、実はプログラミングを続けています。

音声ファイルをドラッグ&ドロップしたときに、そのファイルをAudioオブジェクトで再生したい場合。

var audio = new Audio();

function droppedFile(file) {
  var reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function() {
    audio.src = reader.result;
  };
}

こんな感じでAudioオブジェクトにFileオブジェクト（上の"file"）を読み込める。

ドロップされたvmdファイルを読み込む部分は実装完了。
pmdファイルは、テクスチャファイルがあったりして複数ファイルの読み込みに対応しなければならず、まだ実装できていません。

公開すると言いながら、なかなかソース公開できずにいますが、そろそろ覚悟を決めようかと思ってます。
5月はゴールデンウィークも含め、既にスケジュールで埋め尽くされていて正直かなり厳しいですが...
ブラウザの実装も大分進んできたみたいなので、ちょっと急ぎます。

　FileReaderのお試し中 / magicien　

WebGLのソース公開の準備そっちのけで新機能実装中...

ファイルをドラッグ&ドロップで読み込めるようにしようと実装を進めたところ、
FileReaderでのファイル読み込みが非同期でしか出来ないというところで頓挫。
ループを回して、ステータスが変更されるのを待とうとしたところ、
ループ処理が回り続けて、いつまでもファイル読み込みに処理が渡らない...
sleepやyieldが実装されていれば...と思ったら、yieldは既に実装されている？
でもyieldの仕様がかなり怪しい。
結局、yieldを使ってもFileReaderのファイル読み込みに処理を譲ることは出来なそう。

こうなったら根本的にプログラムの構造を直した方が良いかもしれない。
ついでにWeb Workersに対応させて、マルチスレッド化してしまおうかと考え中。
でもWeb Workersも値がコピー渡ししかできないのが不満、というか不安。
わざわざマルチスレッド化して動作が重くなったら凹むなぁ。

---

追記：
ちょっと実験したら、

RangeError: Maximum call stack size exceeded.

って出たので、Web Workersでファイルのパースは諦め。
でもプログラムはイベントドリブンに書き換えねばなるまい...
HTML5のクラスは使いどころが難しいなぁ。

　WebKit仕様変更再び... / magicien　

今度はシェーダのコンパイルで大量のエラーが...

最近仕様変更多くないですか...
新しい仕様が分かり次第記事を更新予定。

---

2010/09/08 追記：
vertex shaderからgl_FrontColorが無くなったような気がする...
とりあえず、varying vec4で代わりの変数を作ったら大丈夫でした。

fragment shaderの方のエラーは、

#ifdef GL_ES
precision mediump float;
#endif

と書いたらエラーが出なくなりました。
めでたしめでたし。

　コード整理中 / magicien　

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

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

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


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

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

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

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

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