サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
買ってよかったもの
wgld.org
頂点シェーダでテクスチャの参照 前回は浮動小数点数テクスチャを、WebGL の拡張機能によって利用可能とする方法を解説しました。 仕組みとしては利用できたとしても、ハードウェアの性能によっては開発側が意図した精度が得られるとは限らないこともあり、今後に期待の掛かる楽しみな機能でした。 さて、今回は拡張機能とは少し違いますが、前回解説した浮動小数点数テクスチャと組み合わせることによって、とてつもない効果を生み出すかもしれない頂点テクスチャフェッチ(vertex texture fetch)をやってみたいと思います。 頂点テクスチャフェッチは、その英語表記の頭文字を取って VTF などと呼ばれることもあります。近年のコンシューマゲームなどでも割と活躍している技術の一つで、その応用範囲はかなり広いと言っていいと思います。 頂点テクスチャフェッチとは、簡潔に言うなら[ 頂点シェーダ内でテクスチャを
GLSL について知る WebGL では固定機能パイプラインが利用できません。これについては以前のテキスト(レンダリングのための下準備)でも少し触れましたね。 その代わりに、いわゆるプログラマブルシェーダの一種であるシェーダ言語が実装されています。それが GLSL ( OpenGL Shading Language )です。 GLSL は OpenGL との親和性を持つシェーダ記述言語で、C 言語ライクな独自の文法によって記述します。WebGL の難点の一つがこの GLSL であり、GLSL を理解しなければそもそもレンダリング自体を行なうことができません。WebGL の基本プログラムの知識に加えて、GLSL の知識も必要になるのでちょっと大変ですね。 ただし、基本的なことをやるだけであればそれほど難しくはありません。それに、慣れてしまうとシェーダを自分で記述できることの利点のほうが大きく
GLSL contents GLSL に関するコンテンツの一覧です。 本章では、GLSL のみを用いてスクリーン上に様々なシーンをレンダリングするテクニックを解説します。 従来の頂点情報を持つモデルを利用した WebGL のレンダリングとはまったく異なるプロセスで、驚くほどリッチな表現ができる GLSL の可能性を追求してみてください。 また、あらかじめあえて先に書いておきますが、通常の WebGL プログラミングも 3D プログラミングという分野にありがちな事実としてかなり難易度が高いと思います。ですが GLSL のみを用いてレンダリングを行う本章の内容は、お世辞にも簡単とは言えず、けっこう難しい内容が多いように思います。※あくまでも個人的な経験則ですが…… 大切なことは、難しく理解できないような内容であっても、それに触れたことはけして無駄にならないということを胸に秘めつつ諦めず取り組む
シェーダのみで描き出すノイズ 前回はジュリア集合と呼ばれるフラクタルの一種を GLSL を使ってレンダリングしました。マンデルブロ集合と並ぶ有名なフラクタルですが、GLSL を用いれば GPU の力で高速にレンダリングが行われ非常に美しい模様が次々と姿を変えながら描き出されます。 その様子を眺めているだけでも本当に面白いサンプルだったのではないでしょうか。 さて今回は、前回と比べて見た目に派手さはありませんが、3D プログラミングにおける非常に重要な要素のひとつであるノイズの生成を GLSL だけでやってみたいと思います。今回のポイントは、GPU を用いて高速に処理することでリアルタイムなノイズの生成に挑戦するというところでしょうか。 以前、当サイトのオリジナルライブラリで noiseX.js というものを作りました。これは動的に canvas 上にノイズを生成して描き出すものですが、レン
深度値との長い闘いの幕開け さて、前回まではサンプルを紹介することが多かったですが、今回は「深度値」についてあらためて考えてみたいと思います。 ご存じのとおり、デプスシャドウなどと呼ばれる深度値を用いた影の表現には、一度フレームバッファに深度を描き込み最終的にそれをテクスチャから読み出して再利用するという手順があります。この「描き込み」 → 「読み出し」の部分をしっかり行わないと、深度値を正しく橋渡しすることができません。 WebGL には、本家 OpenGL や DirectX などのような最初から備わっている便利機能が実装されていないことが多く、今回の場合も自前でいろいろとやる必要があります。また、それには少なからず深度というものに関する予備知識が必要なように思います。今回は、この深度値の取り扱いについてあらためて解説したいと思います。 このテキストの執筆には @hiyoko1986
ダイナミックな頂点データの更新 前回は動画ファイルのクロマキー合成を扱いました。リアルタイムにその場で動画ファイルを加工しながら、動的に描画結果に動画を合成するこの方法は、工夫次第で様々な用途があると思います。サンプル自体はシンプルなもので、あまりそのまま利用できるような内容ではなかったと思いますが、応用することでかなり表現の幅を広げることができる技術だったのではないでしょうか。 さて、今回は前回までの動画ファイルや WebRTC を使ったものとはだいぶ趣向の違うテーマになります。 今回のテーマはダイナミックな VBO の更新です。と、言葉で表現してもなんのことやらという感じもしますね。どういうことかと言うと、従来の当サイトのサンプルでは、原則として VBO は最初に javascript の配列を用いて頂点データの定義を行い、あとは行列やシェーダによって加工を行うスタイルで一貫して行って
浮かび上がるシルエット 前回は半球ライティングを解説しました。半球ライティングは環境光のライティングを発展させたような技術で、天空色と、照り返しによる地面の色とが自然と混ざり合うような照明効果が得られるのでしたね。 半球ライティングは計算の負荷もそれほど高くなく、その割には自然な照明効果が得られるため状況に応じて使ってみていただければと思います。 さて、今回は前回に引き続き照明系を扱いたいと思います。今回はリムライティングです。 リムライティングは、主にモデルの後方からライトが当たっている状態を再現する照明効果で、モデルの後方から来たライトの光が、モデルの輪郭部分にうっすらと露光している状態をシミュレートします。こうして言葉で書いてみると少々わかりにくいかもしれませんが、以下の画像を見るとなんとなくどういう意味かわかるのではないでしょうか。 リムライティングの例 この画像のように背景が真っ
GPU の力を引き出すのだ！ 前回は VBO を逐次更新しながら処理することで、CPU 側で頂点の座標を計算してパーティクルを動かす、というテクニックを解説しました。 このやり方の場合、頂点の計算が CPU の性能に依存する形になるので、WebGL 特有の GPU パワーを引き出すことができるというメリットはそれほど活かされない一方、javascript 側ですべて計算しているのでそれほど WebGL や GLSL の記述に精通していなくても、処理を記述しやすいというメリットがあったのでしたね。 そんな中で今回は、これを GPU 側に持っていきます。いわゆる GPGPU と呼ばれる類の技術です。 前回は、あくまでも頂点の座標計算について javascript で行いましたが、今回はこれを GPU 側、つまりシェーダにやってもらいます。つまり、頂点の座標計算から描画までの一連の処理が、基本的
動画をテクスチャに適用してみよう 前回は video タグで動画を読み込み、それを動的にテクスチャに適用する方法について解説しました。 動的に多彩なシーンを WebGL だけで表現するのは大変ですが、動画を用いれば簡単に演出効果を高めることができます。 技術的には、あくまでも再生されている動画のその瞬間瞬間のシーンを、単純にテクスチャに適用するだけでした。これに関してはそれほど難しいことはありませんでしたね。ただし、モバイル端末ではまだまだ再生が難しい場面があるなど、諸手を上げて使っていける状況ではないことについても触れました。この辺りは、今後に期待といった感じですね。 さて、今回はウェブカメラの映像をテクスチャに適用することにチャレンジしてみましょう。 ウェブカメラを使うとは言っても、基本的な考え方は video タグを用いた前回のやり方と同じです。ウェブカメラから動的に、リアルタイムに
今日のテーマ WebGL高速化のススメ 今回はあくまでも WebGL 特有の高速化 TIPS です。 WebGL にあまりなじみのない方もいらっしゃると思うので…… そもそも WebGL って？ というところから簡単に解説します。
メモリアクセスの効率化 前回はフラットシェーディングと題して、WebGL の拡張機能を利用した特殊なシェーディングについて解説しました。 少し古めかしいような、懐かしいような、独特なレンダリング結果を得られるフラットシェーディングですが、現代においてはむしろ拡張機能を利用しないといけないケースもあるというのが、なんとも皮肉めいていて面白い技術でした。 さて今回ですが、インターリーブ配列 を用いた処理について見ていきたいと思います。 3DCG 独自の用語ではなく、一般的なコンピュータ用語として「メモリインターリーブ」というキーワードがあります。これはメモリアクセスを効率化する手法を指して使われる言葉ですが、WebGL の場合も、VBO の生成に工夫を凝らすことにより GPU 上のグラフィックスメモリのアクセスを効率化するインターリーブが利用できます。 OpenGL などのネイティブ開発では一
3D プログラミングと数学 3D プログラミングの世界では、数学的知識が非常に重要になる場面があります。 その最も代表的な例が[ 行列 ]でしょう。行列を知らずして、座標変換は行なえません。そのほかにも、ベクトルの知識や、内積・外積などの知識も欠かせません。ほんとに、困ったものですね。 さて、今回のテーマはクォータニオン(四元数)です。WebGL に限らず、DirectX などでも登場するクォータニオン。それがいったいどういうもので、使用することによってどう便利になるのか、あまりハッキリとイメージできない人も多いと思います。今回はこのクォータニオンの基本的な部分から、簡単な使い方までを解説します。あまり、本格的な数学の話になってしまってもつまらないだけですので、今回のテキストの最大の目的は理解することよりも使い方を知ることとして進めていきます。 そもそもそれはなんなのか クォータニオンは四
概要 プロシージャルにノイズテクスチャを生成するためのヘルパーライブラリです。 noiseX.js を用いると、簡単にノイズテクスチャを生成できます。また、シームレスなノイズテクスチャを簡単に生成できることも特徴で、プロシージャルにノイズを生成したい場合に便利です。 当ライブラリは canvas タグの 2D コンテキストを利用しており、WebGL は一切利用しません。ライブラリを利用して出力したノイズは、canvas エレメントをテクスチャのソースとして扱うことで、WebGL に流用することが可能です。 また当ライブラリのライセンスは完全フリーです。改変も自由です。さほど大層なものでもありませんしね。※疑似乱数生成をもっと最適化すればだいぶ速くなると思うのですが……放置してます……アハハ…… パーリンノイズ 当ライブラリでのノイズ生成は、パーリンノイズ(perlin noize)と呼ばれ
アニメ調レンダリング 前回はフレームバッファを用いることでリアルタイムにキューブマップをレンダリングし、それをキューブマップテクスチャとして適用する動的キューブマッピングについて解説しました。 フレームバッファを使って動的にキューブマップテクスチャを生成することで、リアルな映り込みをダイレクトに実現することができました。少し長いソースコードのサンプルでしたが、要点を抑えれば理解できると思います。 さて、今回は少々趣向を変えて、トゥーンレンダリングを解説しようと思います。トゥーンレンダリングは、別名トゥーンシェーディング、あるいはセルシェーディングなどと呼ばれます。 トゥーンレンダリングを施すと、レンダリング結果はアニメ調、あるいは漫画調になります。これは陰影付けが今まで行なってきたような滑らかな濃淡の変化ではなく、段階的にくっきりと行なわれることによって実現できます。また、今回はその段階的
ray marching の世界 前回は、GLSL だけを用いてリアルタイムにノイズを生成することに挑戦しました。 GPU の力をフルに引き出せる WebGL ならではの高速なノイズ生成は、今後も GLSL で様々な処理を記述していく上で必ず役に立ちます。若干シェーダのコードが多かったのでわかりにくい部分もあったかもしれませんが、落ち着いて考えてみればそれほど難しくないと思います。ぜひ、がんばって習得してください。 さて、今回からいよいよ GLSL でray marching(レイマーチング)を実装していきます。本テキストでは、そもそもレイマーチングとはなんなのか、そしてレイマーチングを行う上で欠かせないレイの定義について詳しく解説していきます。 サンプルとしては見た目に派手さはありませんが、今後のレイマーチングに関するテキストの基本中の基本となる部分ですのでしっかりと理解できるようにがん
次なる Web を見据えて 来たるべき WebGL2 の時代へ 2011 年、最初のバージョンである 1.0 が勧告された WebGL は、ウェブブラウザ上で OpenGL ES に相当するグラフィックス API の機能を利用することができる JavaScript の API です。 そして 2016 年、WebGL の正当な後継バージョンとなる WebGL2 (もしくは WebGL 2.0) がいよいよ本格的に利用できる段階になりつつあります。 当サイトでは、2012 年の開設以来、WebGL 1.0 系の API を用いるための技術解説を掲載してきました。そして今後は、時代の変遷に合わせて WebGL 2.0 系の解説記事も公開していく方針です。 WebGL 2.0 が登場するとは言っても、後方互換を保つという意味もあって 意図的に有効化 しない限りは WebGL 1.0 相当の AP
ガウシアンブラー 前回はエッジ検出の手法の一つ、laplacian フィルタを解説しました。前々回に紹介した sobel フィルタと比較すると、細い線による繊細なエッジ検出ができるのでしたね。 さて、今回はフィルタ系の処理をもう一つ取り上げます。今回のフィルタはかなり実用性の高いものです。今後様々なエフェクト処理を行なっていく上で欠かせないぼかし系処理の代表格、gaussian フィルタ(ガウシアンフィルタ)です。 ガウシアンぼかし、あるいはガウスぼかしなどと呼ばれるぼかし処理は、様々なペイントソフトやフォトレタッチソフトにも搭載されています。そもそも[ ぼかす ]という処理に優劣があるのかというところに疑問を抱く方ももしかしたらいるかもしれませんが、gaussian フィルタが優れているポイントはいくつかあります。 処理結果が自然で美しく仕上がる 大きくぼかしを掛けることが可能 その割に
WebGL contents WebGL に関するコンテンツの一覧です。 初心者や WebGL の入門者の方は、最初から読み進めていただけると理解が深まると思います。 また、当サイトでは実際に動作する WebGL のサンプルや、WebGL のデモを多数用意していますが、それらには当サイトオリジナルの行列・クォータニオンなどを扱うライブラリ、minMatrix.js などが使われています。ライブラリの詳しい実装については library のページをご覧ください。 WebGL 2.0 については別のコンテンツとして分けて掲載していますので、 WebGL2 のほうを参照してください。 ブラウザの準備 WebGL を始める前に canvas を知る 3D 描画の基礎知識 レンダリングのための下準備 行列(マトリックス)の基礎知識 頂点とポリゴン コンテキストの初期化 シェーダの記述と基礎 頂点バッ
WebGL WebGL top ブラウザの準備 WebGL を始める前に canvas を知る 3D 描画の基礎知識 レンダリングのための下準備 行列(マトリックス)の基礎知識 頂点とポリゴン コンテキストの初期化 シェーダの記述と基礎 頂点バッファの基礎 行列演算とライブラリ シェーダのコンパイルとリンク モデルデータと頂点属性 minMatrix.js と座標変換行列 ポリゴンのレンダリング ポリゴンに色を塗る(頂点色の指定) 複数モデルのレンダリング 再帰処理と移動・回転・拡大縮小 インデックスバッファによる描画 カリングと深度テスト 立体モデル(トーラス)の描画 平行光源によるライティング 環境光によるライティング 反射光によるライティング フォンシェーディング 点光源によるライティング テクスチャマッピング マルチテクスチャ テクスチャパラメータ アルファブレンディング ブレンド
二次元と三次元 三次元空間――それは、我々の生きているこの現実世界に他なりません。 三次元の世界では、全てのものに縦と横、そして奥行きが存在します。そしてそれを再現しようとするのが、リアルタイム 3D レンダリングですね。しかし、三次元空間を再現しようとするとき、それを出力する先は普通、二次元のモニター上です。 パソコンや、モバイル機器などのあらゆるデバイスは、二次元のモニター上に情報を出力します。少なくとも現代ではいまのところ、奥行きのある空間を物理的に実現するデバイスはありませんね。まぁ、研究所の分厚い扉の向こう側にはあるのかもしれませんが、一般家庭には普通そんなものはありません。 WebGL を使って擬似的に三次元空間をシミュレートしたとしても、最終的にはそれをモニターという二次元空間に出力しなくてはなりません。奥行きによる前後関係や、遠近法による伸縮拡大を加味して、どこになにがどん
本日のテーマ なにが変わるの WebGL 2.0 2011年に WebGL 1.0 が登場して以来、長らく WebGL の API そのものは変化していません。現行の WebGL でさえ、使いこなせる人はまだまだ少ない状況ですが、いずれやってくる WebGL 2.0 の時代に向けて、アンテナを張っておくことは無駄にはならないでしょう。 本日のテーマ 今回は詳細についてはいろいろ省略しますが、ざっくりと、WebGL 2.0 についてお話ししようと思います。 あんまり細かいことには触れません！
ズームブラーの応用 前回は、フラグメントシェーダを利用したズームブラーを解説しました。シェーダ内で簡易な乱数ジェネレータを使い、ズーム効果にランダム性を持たせるのがポイントでした。 今回はそのズームブラーを応用することで、ゴッドレイ効果を実現してみましょう。ゴッドレイは、太陽やライトなど、強い光を発するものから放射状に伸びる光の筋のことですね。例えばそれは空の隙間から、あるいはステンドグラスや窓からさ仕込む光明としてシーンを彩ってくれます。 ゴッドレイの一例 ズームブラーが理解できていてれば、その応用だけで割りと簡単に実装できるゴッドレイ。早速、その実装方法について見ていきましょう。 ゴッドレイの実装概念 さて、ゴッドレイフィルタを行う上では、ズームブラーの掛け方と合成方法がポイントになります。今回の場合、一度フレームバッファにゴッドレイ専用の背景を描き込み、その背景に対してズームブラーフ
最近の活動など 2014年6月：Tokyo WebGL Meetup 登壇 2014年9月：3DCG Meetup #04 登壇 ※今回二度目、ありがとうございます！ 2014年9月～：WebGL 総本山という WebGL 総合情報サイト立上げ 2014年11月～：WebGL スクールを開講
前説 時は遡り……このスライドを書き始めた頃 「3DCG Meetup は初参加だしな！」 前回の Meetup で登壇された西田さん(@knockknockjp)が公開してくれている、WebGL をテーマにしたスライドでも見てみるか……
頂点によって描かれるもの 前回はクォータニオンを使って実現するビルボードについて解説しました。常にスクリーンに平行な姿勢を維持し、カメラに対して垂直に映る板状のポリゴンをレンダリングすることで、あたかもそこにモデルが存在するかのように振舞うことができるのでしたね。 ビルボードを使うことで、少ない頂点数で擬似的にモデルが存在するように見せることができ、負荷の軽減が期待できます。その反面、行列に関する演算が追加で発生したり、演出方法を間違えるとそれがビルボードであることがバレバレになってしまったりと、いくつかの難点もありました。 今回紹介するのは、WebGL による点や線の描画です。 いまさらどうして点や線のレンダリングが必要なのかと思うかもしれませんが、これはこれで活用できる場面はいろいろ考えられます。単なる点や線の描画なので派手さはありませんが、習得しておくことは損にはならないはずです。
描かない技術 前回は点のレンダリングを発展させたポイントスプライトについて解説しました。 ポイントスプライトを用いることで、負荷を抑えつつビルボード処理を行うことが可能になるのでしたね。また、ポイントスプライトを実装するにあたりフラグメントシェーダ内で利用できる discard というステートメントについても触れました。 さて、今回は WebGL におけるステンシルバッファの扱いについて解説します。ステンシルバッファを用いると、今まで以上に多彩な表現や特殊なテクニックを扱うことができるようになります。若干理解しにくい部分もあるかもしれませんが、これまで同様、落ち着いて考えればきっと理解できるはずです。がんばって取り組んでください。 それでは早速ステンシルバッファについて考えてみます。 ステンシル( stencil )は直訳すると[ 型紙 ]や[ 原紙 ]といった意味になる言葉で、3D プロ
頂点情報をより扱いやすく 前回は、WebGL の拡張機能のひとつである float texture を用いて、頂点テクスチャフェッチを行いました。実用性はあまりないサンプルでしたが、float texture を利用することの可能性のひとつとして参考にしていただければと思います。 さて、今回ですが VAO (vertex array object)を扱ってみようと思います。VAO は、標準の WebGL では利用できない技術ですが、float texture と同様に拡張機能として実装されており、同機能を有効化することで初めて利用が可能になります。 とはいえ、VAO を使ったら何が嬉しいのか、というかそもそも VAO ってなんやねんという人も意外と多いのではないでしょうか。※自分はそうでした(笑) 今回は、この vertex array object について見ていくことにしましょう。 V
次のページ
このページを最初にブックマークしてみませんか？
『WebGL 開発支援サイト wgld.org』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
