なにが変わるの WebGL 2.0本日のテーマ なにが変わるの WebGL 2.0 2011年に WebGL 1.0 が登場して以来、長らく WebGL の API そのものは変化していません。現行の WebGL でさえ、使いこなせる人はまだまだ少ない状況ですが、いずれやってくる WebGL 2.0 の時代に向けて、アンテナを張っておくことは無駄にはならないでしょう。 本日のテーマ 今回は詳細についてはいろいろ省略しますが、ざっくりと、WebGL 2.0 についてお話ししようと思います。 あんまり細かいことには触れません！
wgld.org | GLSL: シェーダ内でレイを定義する |
ray marching の世界 前回は、GLSL だけを用いてリアルタイムにノイズを生成することに挑戦しました。 GPU の力をフルに引き出せる WebGL ならではの高速なノイズ生成は、今後も GLSL で様々な処理を記述していく上で必ず役に立ちます。若干シェーダのコードが多かったのでわかりにくい部分もあったかもしれませんが、落ち着いて考えてみればそれほど難しくないと思います。ぜひ、がんばって習得してください。 さて、今回からいよいよ GLSL でray marching(レイマーチング)を実装していきます。本テキストでは、そもそもレイマーチングとはなんなのか、そしてレイマーチングを行う上で欠かせないレイの定義について詳しく解説していきます。 サンプルとしては見た目に派手さはありませんが、今後のレイマーチングに関するテキストの基本中の基本となる部分ですのでしっかりと理解できるようにがん
WebGL が切り開く Web の未来
前説 時は遡り……このスライドを書き始めた頃 「3DCG Meetup は初参加だしな！」 前回の Meetup で登壇された西田さん(@knockknockjp)が公開してくれている、WebGL をテーマにしたスライドでも見てみるか……
wgld.org | WebGL: シャドウマッピング |
影の描画 前回は射影テクスチャマッピングを応用したテクニックのひとつとして、光学迷彩を取り上げました。光学迷彩を施すモデルの後ろにあるものは全て事前にレンダリングする必要があるため、コストはけして安くないものの、その見た目のかっこよさは今までのサンプルのなかでもピカイチだったのではないでしょうか。 さて、今回は影のレンダリングに挑戦します。 とは言え、影をレンダリングするための手法には様々なものが考案されており、それぞれにメリットとデメリットがあります。今回やってみるのはモデルの深度値を格納するデプスバッファを使った、一般にデプスバッファシャドウなどと呼ばれている手法です。 深度値を用いたシャドウマッピングでは、次のような手順でモデルをレンダリングしていきます。 オフスクリーン用のフレームバッファを用意 フレームバッファにライトから見たときの深度値を描き込む 本番のレンダリングでフレームバ
wgld.org | WebGL: バンプマッピング |
特殊なライティングテクニック 前回はフレームバッファへのレンダリング結果に対して、ブラーフィルターを適用して全体にぼかし処理を掛ける方法を解説しました。フラグメントシェーダを使ってピクセルごとに処理することで、一度レンダリングした結果にエフェクトを掛けることが可能となり、様々な効果を演出できます。ぼかし処理はその一例でしかありませんが、シェーダの使い方などを参考にしていただけたらと思います。 さて、話は変わって今回は、バンプマッピングをやってみたいと思います。 バンプマッピング(bump mapping)は一般に、法線マップなどを用いることによってあたかも凹凸があるかのように見せることができるライティングテクニックです。バンプマッピングを活用すると、少ないポリゴン数のモデルであっても高い表現力を得ることができるようになります。 と、言葉で説明されてもいまいちわかりにくいですね。 たとえば、
wgld.org | WebGL: gaussian フィルタ |
ガウシアンブラー 前回はエッジ検出の手法の一つ、laplacian フィルタを解説しました。前々回に紹介した sobel フィルタと比較すると、細い線による繊細なエッジ検出ができるのでしたね。 さて、今回はフィルタ系の処理をもう一つ取り上げます。今回のフィルタはかなり実用性の高いものです。今後様々なエフェクト処理を行なっていく上で欠かせないぼかし系処理の代表格、gaussian フィルタ(ガウシアンフィルタ)です。 ガウシアンぼかし、あるいはガウスぼかしなどと呼ばれるぼかし処理は、様々なペイントソフトやフォトレタッチソフトにも搭載されています。そもそも[ ぼかす ]という処理に優劣があるのかというところに疑問を抱く方ももしかしたらいるかもしれませんが、gaussian フィルタが優れているポイントはいくつかあります。 処理結果が自然で美しく仕上がる 大きくぼかしを掛けることが可能 その割に
wgld.org | WebGL: VAO(vertex array object) |
頂点情報をより扱いやすく 前回は、WebGL の拡張機能のひとつである float texture を用いて、頂点テクスチャフェッチを行いました。実用性はあまりないサンプルでしたが、float texture を利用することの可能性のひとつとして参考にしていただければと思います。 さて、今回ですが VAO (vertex array object)を扱ってみようと思います。VAO は、標準の WebGL では利用できない技術ですが、float texture と同様に拡張機能として実装されており、同機能を有効化することで初めて利用が可能になります。 とはいえ、VAO を使ったら何が嬉しいのか、というかそもそも VAO ってなんやねんという人も意外と多いのではないでしょうか。※自分はそうでした(笑) 今回は、この vertex array object について見ていくことにしましょう。 V
超弾幕も可能？ WebGL高速化のススメ
今日のテーマ WebGL高速化のススメ 今回はあくまでも WebGL 特有の高速化 TIPS です。 WebGL にあまりなじみのない方もいらっしゃると思うので…… そもそも WebGL って？ というところから簡単に解説します。
wgld.org | WebGL: ステンシルバッファでアウトライン |
ステンシルバッファの活用 前回はステンシルバッファの基本的な使い方を解説しました。 ステンシルバッファは整数値でデータを管理し、場合によりレンダリングを行なわないように設定することができるなど、特殊な処理を行うことができる概念でしたね。 今回はステンシルバッファを用いた代表的な処理の一つであるアウトラインのレンダリングを行なってみたいと思います。アウトラインをレンダリングするテクニックには、必然的にシルエットのレンダリングを行なう技術を伴います。少しだけ複雑な手順を踏むことになりますが、それでもまだ、3D プログラミングの類としては簡単な部類の処理です。焦らずじっくり取り組みましょう。 さて、それではまずシルエットをレンダリングすることから考えてみます。 シルエットはまるで影絵のように、オブジェクトの輪郭だけをレンダリングすることで表現できます。今回の場合、まずシルエットをレンダリングした
wgld.org | WebGL: 頂点テクスチャフェッチ(VTF) |
頂点シェーダでテクスチャの参照 前回は浮動小数点数テクスチャを、WebGL の拡張機能によって利用可能とする方法を解説しました。 仕組みとしては利用できたとしても、ハードウェアの性能によっては開発側が意図した精度が得られるとは限らないこともあり、今後に期待の掛かる楽しみな機能でした。 さて、今回は拡張機能とは少し違いますが、前回解説した浮動小数点数テクスチャと組み合わせることによって、とてつもない効果を生み出すかもしれない頂点テクスチャフェッチ(vertex texture fetch)をやってみたいと思います。 頂点テクスチャフェッチは、その英語表記の頭文字を取って VTF などと呼ばれることもあります。近年のコンシューマゲームなどでも割と活躍している技術の一つで、その応用範囲はかなり広いと言っていいと思います。 頂点テクスチャフェッチとは、簡潔に言うなら[ 頂点シェーダ内でテクスチャを
WebGL 開発支援サイト wgld.org
次なる 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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
wgld.org | GLSL: オブジェクト同士を補間して結合する |