Code Archive Skip to content Google About Google Privacy Terms
先日、ちょっとした思いつきで WebKit の Nightly Build をインストールし、 WebGL を試してみました。 WebGL というのは現在策定中の新しい規格で、 JavaScript を使って本格的な 3DCG を実現する API です。同じ目的を持つものとして Google の O3D がありますが、 WebGL は OpenGL ES を管理している Khronos グループを中心に Google, Mozilla, Opera, NVIDIA, AMD といった企業が参画しており、標準化という面ではリードしています。 まだ策定中の規格なので今後変化するかもしれませんが（WebGL 1.0 が正式リリースされました）、少なくとも現状の WebKit の実装については使い方がわかったので、本日はそれをご紹介します。 WebGL は Web 上の最も重要なグラフィックス A
WebGL has been getting a fair amount of buzz lately - and rightfully so, because it is cool. For those that don't know, WebGL is the 3D extension of the Canvas element, based on OpenGL ES 2.0. Having a standardized low-level graphics API like that available in the browser is pretty exciting stuff if you ask me. 3D canvas graphics has been long underway and not until just recently did it get to an
WebGLでテクスチャを使う - ラシウラの続きです。 結論から言うと、canvas同様にimgでもWebGLのテクスチャに使えました。座標系はやはり画像の左上が(0,0)です。canvas2dでこれらと同様に扱えるvideoタグでもおそらく同様にテクスチャ利用ができそうです。 http://gist.github.com/216810 上下反転するにはいろいろやりかたがありますが、ここはvertex shaderのコードで texCoord = coord; を texCoord = mat2(1.0, 0.0, 0.0, -1.0) * coord; などと、変更するのがいいのではないでしょうか。 1ファイル完結にこだわっているため、コード中のimgタグにはdataスキームのURIで画像を埋め込んでます。もちろんhttpなurlでも、PNGでなくてもOKです。 ちなみにPNGファイルか
WebGLで書いてみよう - ラシウラのつづきです。 WebGLはほとんどOpenGLそのままのAPIですが、テクスチャはcanvas要素を使うようになっているようで、このあたりのやり方はちょっと特殊になっているようです。最初、OpenGL風にRGBA配列を作って全く機能せず大変でした。(追記:imgも同様の方法(texImage2D)でテクスチャに使えます) (あとピッキングくらいやれば、たいていのことはWebGLでできるようになるはず) 例 http://gist.github.com/215896 上がWebGL表示で、下がテクスチャに使うcanvasです。このコードでは、テクスチャ座標を、四角形の(-0.5, -0.5)を(0,0), (0.5, 0.5)を(1.0, 1.0)となるように書いてます。どうもcanvasテクスチャは、左上が(0, 0)で、右下が(1.0, 1.0)に
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
