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

　WebGLでの文字描画 / magicien　

WebGLで文字を表示させようとすると、いろいろと面倒なので、そのときに使った方法。

2Dの文字や図形を描画する場合、WebGLでまともに実現しようとすると、canvasのオブジェクトをもう一つ作って、字を描いて、テクスチャに貼付けて、それをレンダリングする、というような流れになるかと思います。
が、わざわざそんなことしなくても、作ったcanvasをそのままHTMLの画面上に貼付けた方が手間がかからないし、描画も早かったので、下のようなコードで3Dのcanvasの上に2Dのcanvasを同じサイズ、位置で重ねて使いました。

function create2DContext(canvas3D) {
  var canvas2D = document.createElement('canvas');
  canvas3D.insert( { after: canvas2D } );
  Element.setStyle( canvas2D, {
    position: 'absolute',
    'z-index': 10
  });
  Position.clone( canvas3D, canvas2D );
  canvas2D.width = canvas3D.width
  canvas2D.height = canvas3D.height

  var context2D = canvas2D.getContext('2d');
  return context2D;
}

prototype.js、scriptaculousを使っているので、ソースはそのまま使えないかもですが...
1つのcanvasで2Dのコンテキストと3Dのコンテキストを両方取得できれば問題無いのですが、一度どちらかのコンテキストを取得してしまうと、もう一方のコンテキストが取得できなくなってしまうため、2D用canvasと3D用canvasの2つが必要になるわけです。

　WebGLサンプル追加 / magicien　

ひっそりとサンプルを追加。

気づけば3ヶ月以上空いてしまった...なんか昨年も同じ流れだったような気がする。
まだ作りかけだったりしますが、とりあえず動くようになったので、公開します。

今後はライブラリ開発に戻りつつ、サンプルの完成を目指しつつ、サンプル作成で得たノウハウを書き連ねていければと思います。

　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ソートした上で最後に描画しないといけない

　WebGLサンプルページ / magicien　

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

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

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

　WebGL動画その６ / magicien　

ようやくの公開。

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

　WebGL動画その５ / magicien　

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


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

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

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

　FileReaderのお試し中 / magicien　

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

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

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

---

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

RangeError: Maximum call stack size exceeded.

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

　IK再考中断 / magicien　

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

IKに気を取られている隙にドメインの有効期限が切れてしまいました...
というわけで、今後は「darkhorse2.0spec.jp」になります。
気分によっては、またドメイン変更するかもしれませんが、とりあえずこれで。

で、問題のIKについて。

結論から言うと、挫折しました！
ヤコビアンを使ってIKを計算しようとあれこれやってみましたが、
どうにもうまくいかない上に非常に重い。
逡巡の末、IKは保留する、という結論を出しました。

IKの実装の過程で、行列のLU分解や疑似逆行列の計算、クォータニオンのlog、expが実装できたので良しとします。

ただ、今のままだと、モーションによっては、脚がグニャグニャになってグロテスクです。
サンプル用に公開しようと思っていたモーションもグニャグニャになるので、どうしたものか。

　IK再考 / magicien　

読書しかしていないと思われると困るので、WebGLのことも書いておきます。

未だにIKがおかしいので、IKに詳しい友人に見てもらったところ、
「これじゃだめだよ...」と言われたので、アルゴリズムを変更することにしました。
今は実装方法を考え中。
既存のモデルだと、IKが必要な箇所は少ないので、IKの計算量は多少増えても大丈夫だろうと思ってます。
なんとか今日中に実装したいけど、読みたい本が...