デプスシャドウ技法〜その基本形 GPUのピクセルスループット(テクセルフィルレート)が劇的に向上したことに後押しされて、最近では「ステンシルシャドウボリューム技法」よりも採用例が多くなってきているのが「デプスシャドウ技法」(Depth Shadow)だ。この技法は「シャドウマップ技法」(Shadow Maps)や「デプスバッファシャドウ技法」(Depth Buffer Shadow)とも呼ばれたりするが、本連載では「デプスシャドウ技法」で統一する。 この技法はDirectX 9/SM3.0時代に様々な改良版が生まれており、本連載では、その改良版までを紹介しようと思う。まずは、この基本形の概念から解説しよう。 この技法では光源からの遮蔽構造を、「光源から遮蔽物までの距離」の情報で表現するのがキモとなる。 「光源から遮蔽物までの距離」……というと難しいイメージがあるが、実はこれ
ステンシルシャドウボリューム技法 結局のところ、セルフシャドウ表現までを含んだ正確な影を出すためには、どうしても光源からの光を何がどう遮蔽しているか、という情報を求めなければならない。つまり、そのシーンの、光から見た遮蔽構造を求めなければならないのだ。 比較的、互換性が高く、汎用性が高い技法として最近でも採用例が多いのが「ステンシルシャドウボリューム技法」(Stencil Shadow Volume)だ。この技法は2004年を代表する3D PCゲームとなった「DOOM3」(id software,2004)が採用したことでも話題になった。 ステンシルシャドウボリューム技法による影生成の代表作ともいえる「DOOM3」(id software,2004) (C)2004 Id Software, Inc. All rights reserved. Distributed by Act
90年代の3Dゲームの影生成技法の主流だったのが、3Dキャラクタの足元に黒いマルを置くだけの簡易的な影、通称「丸影」だ。 1枚の板ポリゴンに丸い影テクスチャを貼り付けた物を足元に描くだけなので、負荷は非常に軽い。3D空間上におけるキャラクタ位置を立体的にプレイヤーに伝える……という程度の情報量はあるが、あらゆるキャラクタの影が同じ丸く描かれるだけなので、「影」としてのリアリティはほとんど無かった。 「Oni」(BUNGIE,2001)より。足元にただ丸い影スプライトを描くだけの超簡易影生成技法が使われていた。 Oni and the Oni logo are trademarks of Take 2 Interactive Software, Inc. Bungie and the Bungie logo are trademarks of Microsoft, Inc.
現在の3Dグラフィックスにおいて、最も重要なテーマの1つが影生成だ。シーンのリアリティを演出する要素として、今や欠かせない存在となっており、3Dゲームグラフィックスの設計をする際においても、どんな影生成技法を実装するかが、最重要検討項目にもなっている。 今回からは、最近の3Dゲームによく用いられる典型的な影生成技法の話題を取り扱ってみたい。 3Dグラフィックスにおける2つのカゲの存在 現在のリアルタイム3Dグラフィックスにおける"影"(カゲ)は、大きく分けると2通りのものがある。 日本語でもカゲは「陰」の字を書くカゲと「影」の字を書くカゲがあるが、リアルタイム3Dグラフィックスにおける2種類のカゲは、この日本語のカゲの定義と対応している。 1つは、ライティング(陰影処理)の結果として暗くなる「陰」だ。 現在の3Dグラフィックスはポリゴン、あるいはピクセル単位のライティングを行うが、その際、
米国時間5月26日より、YouTubeでHTML5を通して3D動画を視聴することが可能になった。ただし1つ注意事項がある。この新機能を利用できるのは「Firefox 4」のみで、しかも特定のNVIDIAグラフィックスカードが必要だ。 Mozillaのプラットフォーム製品管理担当ディレクターであるChris Blizzard氏のブログ投稿によると、YouTubeは現在「数千件」の3D動画をホスティングしており、それらの動画は「WebM」形式でエンコード／再生されているという。NVIDIAの「3D Vision」グラフィックスカードを搭載しているユーザーのみがそれらの動画を3Dで視聴することが可能で、再生にはFirefoxを使用する必要がある。 3D Visionハードウェアを持っている人は、YouTubeで「yt3d」を検索すると、3Dでエンコードされた動画のリストが表示される。3Dハードウ
CSS-3D Demos (その他のデモを) Spinning spiraling space cube using CSS3 3D animation and 3D transforms View in Safari, iPhone, iPad, Chrome (buggy) FF12.0a2/Aurora (buggy). Shorter URI: http://bit.ly/eZ3FUU Last updated: 24th of Feb, 2012 Demo 1 (viewing) Demo 2 All images used come from WISE - Multimedia Gallery.
今年のAdobe MAX 2010で発表された新技術の一つにFlash Playerの新しい3D APIがあります。現状のFlashの3Dでは数千のポリゴンしか処理できませんが、次の時代のFlash Playerでは数十万のポリゴンが処理できるようになります。これは従来と比べて 100倍ものパフォーマンスとなります。どのぐらい凄いかというと、次のビデオを見てもらえばわかるはず。 数十万のポリゴンをHDサイズのフルスクリーンにおいて60 FPSで処理される、という鬼のようなパフォーマンス。なおかつ、CPUの使用率が減るというエンドユーザーに優しい恩恵付き。この技術はFlash PlayerからGPUを利用することにより可能になったものです。コードネームは「Molehill」と呼ばれており、2011年中旬のリリース予定で開発が進められています。 Adobe Labs – 3D APIs for
HTML5というわけではないですが、CavasタグとJavaScriptを使って3Dのデモを作ってみました。 デモを見る ソースコード (［右クリック］→［ソースを見る］を選択) こういうのを見れば「HTML5すごい、Flashいらない」と思う人もいるかもですが、冷静にファーストインプレッションを。同じものを以前Flashで実装したことがありますが（Papervision3D演出サンプルNo.01:羽ばたく蝶々）、両者のデモを比較することでメリット・デメリットが見えてきます。 ＜追記：2013年9月3日＞ Three.jsの最新版rev 60にアップデートしてみました。3年前に作成したときはrev 17だったのですが、別物のライブラリと言わんばかりにほとんどAPIが変わってしまっています。ちなみにTypeScriptで書きなおしています。 デモを見る ソースコード (TypeScript)
An interactive film by Chris Milk Featuring "We Used To Wait" Built in HTML5 This film does not work on mobile as it requires pop-ups. Please visit the site from a desktop browser. This film requires pop-ups. Click the icon in the address bar. Select "Always allow pop-ups from wildernessdowntown.com."
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く