著者名が「magicien」
111〜120件目 / 226件
前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 次へ

　OpenGL ES 2.0 プログラミングガイド / magicien　

ふと思い出してこの本を開いてみたところ、WebGLでのClipPlaneの実現方法が載っていた。

ES 1.1にはあったけど、2.0で無くなった機能をどう実装するか、という話が一通り載っていて、シェーダのプログラムもコピペしてそのまま使えるレベル。
そのうちの一つが、ユーザ定義クリップ面の話。

クリップ面の式を

Ax + By + Cz + D = 0

としたとき、

v_clipPlane = (A, B, C, D)

として次のシェーダを書けばOK。
（ (A, B, C)はクリップ面に対する法線、Dは原点(0, 0)とクリップ面との距離になる。
　例えば、Y=0平面をクリップ面としたいなら、v_clipPlane=(0,1,0,0））

頂点シェーダ：

uniform vec4 v_clipPlane;
uniform mat4 matViewProjection;
attribute vec4 rm_Vertex;

varying float v_clipDist;

void main(void)
{
  v_clipDist = dot(rm_Vertex.xyz, u_clipPlane.xyz) + u_clipPlane.w;
  gl_Position = matViewProjection * rm_Vertex;
}

フラグメントシェーダ：

precision mediump float;
varying float v_clipDist;

void main(void)
{
  if(v_clipDist < 0.0)
    discard;

  gl_FragColor = vec4(0.5, 0.5, 1.0, 0.0);
}

頂点（rm_Vertex）毎にクリップ面との距離（v_clipDist）を計算しておく。
v_clipDist が 0 より小さい点はクリップ面の裏側にあることになるため、描画しない（discard）。
もっと難しい計算が必要だと思ったけど、恐ろしく簡単に実装できた。

　床面反射 / magicien　

馬鹿は風邪をひかないと言いますが、エイプリルフールで患った病がこじれた挙げ句、こんな感じになりました。

このページを参考にして実装。
床面反射は今のところ、y=0平面で反射した結果（y軸のスケールを-1にした結果）を描画しているだけ。
ただ、それだと床面の枠からはみ出してしまうので、stencilを使って床があるところだけ描画するようにする。

WebGLでステンシルバッファを使う場合は、getContextをするときにオプションを指定する必要がある。

var canvas = $('canvas');
var context = canvas.getContext('webkit-3d', {stencil: true});

あとはOpenGLと同様。

以下、今回使った描画の流れの個人的メモ。

---

１．Color、Depth、Stencilの各バッファをクリア
２．Color有効、Depth有効、Stencil有効（Always 1に上書き）にして床面を描画
３．Color有効、Depth有効、Stencil有効（Always 0に上書き）にして床面以外を描画
４．Color無効、Depth有効（rangeを1〜1に指定）、Stencil有効（1の箇所のみ描画、値は変更せず）にして床面を描画
５．scale(1, -1, 1)でY=0平面で反射、カリング指定をしている場合はFrontとBackを入れ替え
６．Color有効（blendFunc(ONE、ZERO) →元のAlpha値を気にせず上書き）、Depth有効、Stencil有効（1の箇所のみ描画、値は変更せず）にして床面以外をRGBAそれぞれの値を70%にして描画
７．scale、カリング指定を元に戻す
８．Color有効（blendFunc(ONE_MINUS_DST_ALPHA, DST_ALPHA)→元のAlpha値が100%なら描画しない、70%ならAlpha30%で描画）、Depth有効、Stencil有効（1の箇所のみ描画、値は変更せず）にして床面を描画

---

問題点
・ClipPlaneが使えないので、床面の裏側のオブジェクトが描画されてしまう。自力で実装するか...
・６＆８のStencilの指定方法は改善できそう。
・６のAlpha値の指定が悪いらしく、Alpha値を持つテクスチャがうまく描画されない
・そもそもAlpha値が1.0じゃない部分はzソートした上で最後に描画しないといけない

　GWのあれこれ / magicien　

ゴールデンウィークは引きこもりを解消すべく、いろいろ出かけましたが、そのうちの一つとして東京スカイツリーを見てきました。

見てきたといっても、関係者しか中に入れないようなので、外から眺めてきただけですが。
東京スカイツリー周辺は再開発が進んでいるのだろうと思いきや、そんな雰囲気はありませんでした。
今回入れなかったツリーの１階部分がこれから充実していくのかもしれません。

上野から浅草を通ってスカイツリーに行く途中に立ち寄ったのが、神谷バーというところ。 昼過ぎでしたが恐ろしい程繁盛しており、お好きな席にどうぞ、と言われても空席が無くてしばらく立ち往生。見かねたおじさんに手招きされて、もうすぐ立つからここに座りなよと席を譲ってもらいました。
前に読んだ本に同じような名前の飲み物が出てきたような気がすると思い、電気ブランなるものを注文しました。
見たところ梅酒のようで甘い印象でしたが、飲んでみると普通に強いお酒で、ブランデーに少しサイダーを混ぜたような感じ。デンキブランFIXというものもありましたが、こちらは甘くてさわやかなカクテルでした。

　【2012年4月1日】I.Q REVENGE【発売】 / magicien　

もう4月1日も19時を回りそうですが、私が制作に携わったゲームのCMをご紹介します。

　WebGLサンプルページ / magicien　

サンプルページへのリンクを張り忘れていたので。

WebGLサンプルページはこちら↓
http://darkhorse2.0spec.jp/dh3d/sample/

さっき改めて動作確認したら、Firefoxの描画が速くてきれいになってた...。きれいさはまだSafariやChromeには追い付いてないけど、速さは互角かも。ただChromeはsubstringの遅さをなんとかして欲しい。Opera Nextはちょっと前のFirefoxくらい。

　WebGL動画その６ / magicien　

ようやくの公開。

やり残したことは山ほどあるけど、そんなことを言っていると一生公開できないので、とりあえず。
いつのまにか英語版の方にも動画公開できるようになっていたので、ついでに公開しておきました。

　QuickTime Player Xの「画面収録」をFinal Cut Pro 7に取り込む / magicien　

Macで画面キャプチャして動画を作成しようと思ったときに毎回分からなくなるのでメモ。

QuickTime Player X で「新規画面収録」を使って画面キャプチャを撮った後、Final Cut Pro に取り込もうとすると、エラーが出て読み込めない。
理由は、下のリンク先によると、「可変フレームレートは取り扱え」ないから、らしい。
http://oshiete.goo.ne.jp/qa/6160886.html

解決方法は、QuickTime Proで固定フレームレートに変換すれば良いらしいけど、QuickTime Player Xにそんな機能は無い、気がする。あるいは、画質を犠牲にすれば、他のフォーマットに変えてしまうことで固定フレームレートになるかもしれない。

ただ、Final Cut Pro 7をインストールすると、QuickTime Player 7が勝手にPro化されるみたいなので、「QuickTime7」で検索して、アップルのサイトからQuickTime Player 7をダウンロード。
すると、特に何もしなくても、QuickTime Player 7がPro版になっている。すばらしい！

あとは、上のリンク先に書いてある通りに動画を変換する。

---

[ファイル]-[書き出す]を選択。
「書き出し」項目は「ムービーからQuickTimeムービー」とします。
[オプション]ボタンをクリック。
「ビデオ」項目内の[設定]ボタンをクリック。
圧縮の種類を「Apple Intermediate Codec」に、フレームレートを29.27に変更。
圧縮プログラムは「その他」のままでOK。
「ビデオ」項目内の[サイズ]ボタンをクリック。
「現在のサイズ」として保存してする。

---

で、Final Cut Proで読み込めるファイルの出来上がり。

Final Cut Pro Xを入れると、QuickTime Player X がPro版になるんだろうか...。
まぁ、バージョンアップに追従していけるほどリッチじゃないです、はい。

　日本優勝！ / magicien　

ワールドカップ優勝ってまじですか！

PK戦は神懸かってましたね！
劣勢での粘りとか...ドラマか漫画かと思うような展開でした。

6月にWebGLソース公開だったはずが、延長戦に突入した私も見習いたいです。

　WebGL動画その５ / magicien　

その５は１月公開予定でしたが...
気づいたら、こんな時期になってました。


音楽無しでMMDは成り立たないだろう、ということで付けてみました。

再生開始時にモーションと音楽の同期をして、あとは放ったらかしなので、
再生が進むにつれ、ずれていくかなぁと思ったけど、意外と大丈夫でした。

あとはソース公開に向けて、いろいろと準備を進めていきます。

　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月はゴールデンウィークも含め、既にスケジュールで埋め尽くされていて正直かなり厳しいですが...
ブラウザの実装も大分進んできたみたいなので、ちょっと急ぎます。