wgld.org | WebGL: 浮動小数点数テクスチャ |
テクスチャの限界を超えて 前回は、深度値の扱いと座標系に関する予備知識について解説しました。 基本的に数学的な話がメインだったので、非常に難解な内容になってしまったように思います。数年前の、まだ 3D プログラミングを勉強し始めたばかりの自分が見たら、うわあ……と思わず言いたくなるだろうなと、自分でテキストを書いていても思いました。 3D プログラミングでは、前回のテキストのような数学的な知識の有無によって、製作できるプログラムの完成度のみならず、そのプログラムの柔軟性や効率、ひいては実装できる処理の幅まで劇的に変化します。自分もけして得意な分野ではないのですが、これからも勉強しつつ理解できたことはテキストにし、少しでも WebGL を扱うプログラマの役に立てればなと思います。 さて、今回ですが、前回のような文章ベースの難解なものではなく、もっと実用的なテクニックとして浮動小数点数テクスチ
wgld.org | WebGL: ウェブカメラをテクスチャに適用する |
動画をテクスチャに適用してみよう 前回は video タグで動画を読み込み、それを動的にテクスチャに適用する方法について解説しました。 動的に多彩なシーンを WebGL だけで表現するのは大変ですが、動画を用いれば簡単に演出効果を高めることができます。 技術的には、あくまでも再生されている動画のその瞬間瞬間のシーンを、単純にテクスチャに適用するだけでした。これに関してはそれほど難しいことはありませんでしたね。ただし、モバイル端末ではまだまだ再生が難しい場面があるなど、諸手を上げて使っていける状況ではないことについても触れました。この辺りは、今後に期待といった感じですね。 さて、今回はウェブカメラの映像をテクスチャに適用することにチャレンジしてみましょう。 ウェブカメラを使うとは言っても、基本的な考え方は video タグを用いた前回のやり方と同じです。ウェブカメラから動的に、リアルタイムに
wgld.org | WebGL: トゥーンレンダリング |
アニメ調レンダリング 前回はフレームバッファを用いることでリアルタイムにキューブマップをレンダリングし、それをキューブマップテクスチャとして適用する動的キューブマッピングについて解説しました。 フレームバッファを使って動的にキューブマップテクスチャを生成することで、リアルな映り込みをダイレクトに実現することができました。少し長いソースコードのサンプルでしたが、要点を抑えれば理解できると思います。 さて、今回は少々趣向を変えて、トゥーンレンダリングを解説しようと思います。トゥーンレンダリングは、別名トゥーンシェーディング、あるいはセルシェーディングなどと呼ばれます。 トゥーンレンダリングを施すと、レンダリング結果はアニメ調、あるいは漫画調になります。これは陰影付けが今まで行なってきたような滑らかな濃淡の変化ではなく、段階的にくっきりと行なわれることによって実現できます。また、今回はその段階的
wgld.org | WebGL: GPGPU でパーティクルを大量に描く |
GPU の力を引き出すのだ！ 前回は VBO を逐次更新しながら処理することで、CPU 側で頂点の座標を計算してパーティクルを動かす、というテクニックを解説しました。 このやり方の場合、頂点の計算が CPU の性能に依存する形になるので、WebGL 特有の GPU パワーを引き出すことができるというメリットはそれほど活かされない一方、javascript 側ですべて計算しているのでそれほど WebGL や GLSL の記述に精通していなくても、処理を記述しやすいというメリットがあったのでしたね。 そんな中で今回は、これを GPU 側に持っていきます。いわゆる GPGPU と呼ばれる類の技術です。 前回は、あくまでも頂点の座標計算について javascript で行いましたが、今回はこれを GPU 側、つまりシェーダにやってもらいます。つまり、頂点の座標計算から描画までの一連の処理が、基本的
超弾幕も可能？ WebGL高速化のススメ
今日のテーマ WebGL高速化のススメ 今回はあくまでも WebGL 特有の高速化 TIPS です。 WebGL にあまりなじみのない方もいらっしゃると思うので…… そもそも WebGL って？ というところから簡単に解説します。
超弾幕も可能？ WebGL高速化のススメ
今日のテーマ WebGL高速化のススメ 今回はあくまでも WebGL 特有の高速化 TIPS です。 WebGL にあまりなじみのない方もいらっしゃると思うので…… そもそも WebGL って？ というところから簡単に解説します。
wgld.org | WebGL |
WebGL contents WebGL に関するコンテンツの一覧です。 初心者や WebGL の入門者の方は、最初から読み進めていただけると理解が深まると思います。 また、当サイトでは実際に動作する WebGL のサンプルや、WebGL のデモを多数用意していますが、それらには当サイトオリジナルの行列・クォータニオンなどを扱うライブラリ、minMatrix.js などが使われています。ライブラリの詳しい実装については library のページをご覧ください。 WebGL 2.0 については別のコンテンツとして分けて掲載していますので、 WebGL2 のほうを参照してください。 ブラウザの準備 WebGL を始める前に canvas を知る 3D 描画の基礎知識 レンダリングのための下準備 行列(マトリックス)の基礎知識 頂点とポリゴン コンテキストの初期化 シェーダの記述と基礎 頂点バッ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
なにが変わるの WebGL 2.0