<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=x-sjis">
<TITLE>mshdribl - DirectX8 Multi-Sample High Dynamic Range Image-Based Lighting 1.0 -</TITLE></HEAD>
<BODY BACKGROUND="../Image/Back2.GIF"
        TEXT="#E0E0E0"
        BGCOLOR="#191919"
        LINK="#FF9090"
        VLINK="#E06060"
        ALINK="#FF0000">

<BASEFONT SIZE="2">

<CENTER><IMG SRC="Image/mshdribl.jpg" WIDTH="320" HEIGHT="240" BORDER=8 ALIGN="RIGHT"></CENTER>
<BR>

<FONT SIZE=+4 COLOR="#EEEEA0"><I><B><CENTER>mshdribl v.1.0 (DirectX8)</CENTER>
</B></I></FONT>
<P>
<FONT SIZE=+2><B><CENTER>- Multi-Sample High Dynamic Range Image-Based Lighting -</CENTER></B></FONT>
<P>
<FONT SIZE=+1 COLOR="#EEEEA0"><B><CENTER>DirectX9 HDR demo will be coming soon!! ... may be ...</CENTER></B></FONT>

<CENTER>
<FONT SIZE="+0" COLOR="#99AAEE"><BR>
<A HREF="../cgi-bin/DayX/mshdribl/dayxmgr.cgi">
<img src="../cgi-bin/DayX/mshdribl/dayx.cgi?gif" BORDER ="0" WIDTH="120" HEIGHT="27">
</A>
<BR>
<FONT SIZE="+0" COLOR="#99AAEE">
Counting Since 2003.03.23</FONT><BR>
Today <img src="../cgi-bin/DayX/mshdribl/dayx.cgi?today" WIDTH="40" HEIGHT="13">
　Yesterday <img src="../cgi-bin/DayX/mshdribl/dayx.cgi?yes" WIDTH="40" HEIGHT="13">
<BR>
</FONT>
</CENTER>


<!--
<BR>
<CENTER>

1.1 からの主な変更点
<P>

<TABLE>
<TR>
<TD><IMG SRC="../Image/GoldButton.gif" BORDER="0" WIDTH="6" HEIGHT="6"></TD>
<TD><FONT SIZE="1" COLOR="#FFFFA0">変更点</FONT></TD>
</TR>
<TR>
<TD><IMG SRC="../Image/GoldButton.gif" BORDER="0" WIDTH="6" HEIGHT="6"></TD>
<TD><FONT SIZE="1" COLOR="#FFFFA0">変更点</FONT></TD>
</TR>
</TABLE>

</CENTER>
-->

<!--
<P>

<CENTER>
<FONT SIZE="+0" COLOR="#EEEEA0">
English docment is
<A HREF="./Text/ReadMe.txt">here.</A>
</FONT>
</CENTER>
-->

<P>


<CENTER>
<IMG SRC="../Image/CyanButton.gif" BORDER="0" WIDTH="12" HEIGHT="12">
<A HREF="#System"><B><I><FONT SIZE="+0" COLOR="#99AAEE">System Requirements</FONT></I></B></A>
<WBR>
<IMG SRC="../Image/CyanButton.gif" BORDER="0" WIDTH="12" HEIGHT="12">
<A HREF="#Notes"><B><I><FONT SIZE="+0" COLOR="#99AAEE">Notes</FONT></I></B></A>
<IMG SRC="../Image/CyanButton.gif" BORDER="0" WIDTH="12" HEIGHT="12">
<A HREF="#Download"><B><I><FONT SIZE="+0" COLOR="#99AAEE">Download !!</FONT></I></B></A>
<WBR>
<IMG SRC="../Image/CyanButton.gif" BORDER="0" WIDTH="12" HEIGHT="12">
<A HREF="#Tech"><B><I><FONT SIZE="+0" COLOR="#99AAEE">Techniques</FONT></I></B></A>
<WBR>
<IMG SRC="../Image/CyanButton.gif" BORDER="0" WIDTH="12" HEIGHT="12">
<A HREF="#Refer"><B><I><FONT SIZE="+0" COLOR="#99AAEE">References</FONT></I></B></A>
</CENTER>


<!-- ------------------------------------------------------------------------------------------------------ -->

<HR>
<P>

<TABLE>
<TR>
<TD>
<IMG SRC="../Image/CyanButton.gif" BORDER="0" WIDTH="24" HEIGHT="24">
</TD>
<TD>
<B><I>
<FONT SIZE="+2" COLOR="#99AAEE">
What is mshdribl ?
</FONT>
</I></B>
</TD>
</TR>
</TABLE>

<BLOCKQUOTE>

　<FONT COLOR="A0FFA0" SIZE="+0"><B>mshdribl</B></FONT> は、DX9 以降の期待のフィーチャーでもある
<FONT COLOR="A0FFA0" SIZE="+0"><B>HDR (High-Dynamic Range : ハイダイナミックレンジ)</B></FONT>
な輝度情報を持つレンダリングを、
DX8 (正確には頂点／ピクセルシェーダのバージョン 1.1) 相当の機能だけで
無理矢理実装した技術デモです。というかほとんど思い付きの一発ネタです。

<BR>
　技術要素としては

<FONT COLOR="A0FFA0" SIZE="+0"><B>
<UL>
<LI>HDR (High-Dynamic Range) Rendering？
<LI>IBL (Image-Based Lighting)
<LI>Glare (Afterimage/Bloom/Ghost/Star) Generation
<LI>Fresnel Effect (Specular Reflectance)
<LI>FSAA (Full-Scene Anti-Alias)
<LI>Motion Blur
</UL>
</B></FONT>
などがあります。

</BLOCKQUOTE>


<!-- ------------------------------------------------------------------------------------------------------ -->

<TABLE>
<TR>
<TD>
<IMG SRC="../Image/CyanButton.gif" BORDER="0" WIDTH="24" HEIGHT="24">
</TD>
<TD>
<B><I>
<FONT SIZE="+2" COLOR="#99AAEE">
Screen Shots !
</FONT>
</I></B>
</TD>
</TR>
</TABLE>

<BLOCKQUOTE>

<A HREF="./Image/00.jpg"><IMG SRC="./Image/00_s.jpg" BORDER="2" WIDTH="80" HEIGHT="60"></A>
<A HREF="./Image/01.jpg"><IMG SRC="./Image/01_s.jpg" BORDER="2" WIDTH="80" HEIGHT="60"></A>
<A HREF="./Image/02.jpg"><IMG SRC="./Image/02_s.jpg" BORDER="2" WIDTH="80" HEIGHT="60"></A>
<A HREF="./Image/03.jpg"><IMG SRC="./Image/03_s.jpg" BORDER="2" WIDTH="80" HEIGHT="60"></A>
<A HREF="./Image/04.jpg"><IMG SRC="./Image/04_s.jpg" BORDER="2" WIDTH="80" HEIGHT="60"></A>

<A HREF="./Image/05.jpg"><IMG SRC="./Image/05_s.jpg" BORDER="2" WIDTH="80" HEIGHT="60"></A>
<A HREF="./Image/06.jpg"><IMG SRC="./Image/06_s.jpg" BORDER="2" WIDTH="80" HEIGHT="60"></A>
<A HREF="./Image/07.jpg"><IMG SRC="./Image/07_s.jpg" BORDER="2" WIDTH="80" HEIGHT="60"></A>
<A HREF="./Image/08.jpg"><IMG SRC="./Image/08_s.jpg" BORDER="2" WIDTH="80" HEIGHT="60"></A>
<A HREF="./Image/09.jpg"><IMG SRC="./Image/09_s.jpg" BORDER="2" WIDTH="80" HEIGHT="60"></A>

</BLOCKQUOTE>

<!-- ------------------------------------------------------------------------------------------------------ -->

<A NAME="System">

<TABLE>
<TR>
<TD>
<IMG SRC="../Image/CyanButton.gif" BORDER="0" WIDTH="24" HEIGHT="24">
</TD>
<TD>
<B><I>
<FONT SIZE="+2" COLOR="#99AAEE">
System Requirements
</FONT>
</I></B>
</TD>
</TR>
</TABLE>

<BLOCKQUOTE>

<FONT COLOR="A0FFA0" SIZE="+0"><B>
<UL>
<LI>Intel(R) 80x86 もしくは互換系 CPU
<LI>DirectX(R) 8.1b 以降のランタイム
<LI>Vertex/Pixel Shader Ver.1.1 以降をハードウェア実装しているビデオカード (早い話が NVIDIA GeForce3 以上)
<LI>ハードドライブに少なくとも 40MB (可能なら 200MB 以上) の空き(大汗
</UL>
</B></FONT>

　機能的には DX8 相当しか使っていませんが、
ユーティリティ等の都合上開発は <FONT COLOR="A0FFA0" SIZE="+0"><B>DX8.1b SDK</B></FONT> で行っています。
<BR>
　リファレンス・ラスタライザでも動作はしますが、極めて不愉快な思いをすること請け合いです (0.04 FPS etc.)。
<FONT COLOR="A0FFA0" SIZE="+0"><B>NVIDIA GeForce FX / ATI RADEON 9500/9700</B></FONT> あたりなら極めて快適に動作します。
<BR>
　RADEON シリーズの場合、RADEON 9500/9700 以降でないとキューブマップ
にミップマップを使用できないため、9000 以前のカードでは相当画質が劣
化すると思われます。

</BLOCKQUOTE>


<!-- ------------------------------------------------------------------------------------------------------ -->

<A NAME="Notes">

<TABLE>
<TR>
<TD>
<IMG SRC="../Image/CyanButton.gif" BORDER="0" WIDTH="24" HEIGHT="24">
</TD>
<TD>
<B><I>
<FONT SIZE="+2" COLOR="#99AAEE">
Notes
</FONT>
</I></B>
</TD>
</TR>
</TABLE>

<BLOCKQUOTE>

　最初に実行する時は、下の理由により起動に 20〜30 秒かかります。
次からは 2〜3 秒で起動します。

<FONT COLOR="A0FFA0" SIZE="+0">
<UL>
<LI>
マルチサンプル数／ライティング情報 (HDR 環境マップ)／露光値の組み合
わせ毎に、20〜40 MB 程度の大量のキャッシュファイルを生成します。
初めての組み合わせではキャッシュファイル生成作業に 10〜20 秒程かか
ります。
</UL>
</FONT>

　二回目以降なら 1〜3 秒程度です。
<P>
　HDR 用の画像やマルチサンプリング処理のため、かなりの VRAM を消費します。
画面解像度の変更が出来ますが、64MB VRAM のカードでは 1024x768 程度が限界だと思います。
現状チェックが甘いので、あまり大きなサイズには変更しない方が無難だと思います。

<P>
　嗚呼…無茶苦茶な仕様で申し訳ありません…。

</BLOCKQUOTE>


<!-- ------------------------------------------------------------------------------------------------------ -->

<A NAME="Download">

<TABLE>
<TR>
<TD>
<IMG SRC="../Image/CyanButton.gif" BORDER="0" WIDTH="24" HEIGHT="24">
</TD>
<TD>
<B><I>
<FONT SIZE="+2" COLOR="#99AAEE">
Download !!
</FONT>
</I></B>
</TD>
</TR>
</TABLE>

<BLOCKQUOTE>

　実行に最小限必要なファイルです。

<TABLE>
  <TR>
    <TD><A HREF="../archives/mshdribl_1_0.zip"><FONT SIZE="3"><B><I>mshdribl_1_0.zip (1,994KB)</I></B></FONT></A></TD>
    <TD><FONT SIZE="2">Minmum executable</FONT></TD>
  </TR>
</TABLE>

<P>
　下は追加用のライト環境マップです。
media フォルダ以下を mshdribl の media フォルダにコピーし、
実行中 Ctrl+L キーで *.lem ファイルをロードしてください。

<TABLE>
  <TR>
    <TD><A HREF="../archives/mshdribl_rnl.zip"><FONT SIZE="3"><B><I>mshdribl_rnl.zip. (1,596KB)</I></B></FONT></A></TD>
    <TD><FONT SIZE="2">Additional HDR light environment file</FONT></TD>
  </TR>
  <TR>
    <TD><A HREF="../archives/mshdribl_stpeters256.zip"><FONT SIZE="3"><B><I>mshdribl_stpeters256.zip. (1,456KB)</I></B></FONT></A></TD>
    <TD><FONT SIZE="2">Additional HDR light environment file</FONT></TD>
  </TR>
  <TR>
    <TD><A HREF="../archives/mshdribl_uffizi256.zip"><FONT SIZE="3"><B><I>mshdribl_uffizi256.zip. (1,496KB)</I></B></FONT></A></TD>
    <TD><FONT SIZE="2">Additional HDR light environment file</FONT></TD>
  </TR>
</FONT>
</TABLE>


</BLOCKQUOTE>


<!-- ------------------------------------------------------------------------------------------------------ -->

<A NAME="Tech">

<TABLE>
<TR>
<TD>
<IMG SRC="../Image/CyanButton.gif" BORDER="0" WIDTH="24" HEIGHT="24">
</TD>
<TD>
<B><I>
<FONT SIZE="+2" COLOR="#99AAEE">
Techniques
</FONT>
</I></B>
</TD>
</TR>
</TABLE>

<BLOCKQUOTE>

<!--
<FONT COLOR="A0FFA0" SIZE="+0"><B>
<UL>
<LI>HDR レンダリングの仕組み
<LI>グレア生成
</UL>
</B></FONT>
-->

<DL>
  <DT><FONT COLOR="A0FFA0" SIZE="+0"><B>HDR レンダリングの仕組み</B></FONT>
    <DD>　レンダリングは全て
        <FONT COLOR="A0FFA0" SIZE="+0">HDR に基づいたイメージベースドライティング</FONT>です。
        基本的に<FONT COLOR="A0FFA0" SIZE="+0">
        カラーレンジの圧縮 (輝度 1.0 を例えば 8.0 相当として処理)</FONT> を利用しています。
        そのまま実装すると当然画質が激しく劣化してしまう訳ですが、
        マルチサンプリングを利用してこれを防いでいます。
        <P>
        　興味のある方は、キャッシュファイルとして生成された連番画像
        <FONT COLOR="A0FFA0" SIZE="+0"><B>(media/Caches/*_80〜*_87.tga)</B></FONT>
        を覗いてみてください。
        各画像は輝度を 1/8 に圧縮しただけの全く同じ画像のようにに見えますが、
        実際には微妙に異なっています。
        <FONT COLOR="A0FFA0" SIZE="+0">*_80.tga の画像輝度を単純に 8 倍すると劣化した画像が生成されますが、
        *_80.tga 〜 *_87.tga を 1 枚ずつ加算してゆくと劣化していない画像を復元できます。</FONT>
        <BR>
        　具体的に説明します。
        ここに、<FONT COLOR="A0FFA0" SIZE="+0"><B>0 〜 7</B></FONT>
        までの整数輝度を持つピクセルがあるとします。この輝度を
        <FONT COLOR="A0FFA0" SIZE="+0"><B>1 / 8</B></FONT> に圧縮した画像を
        8 枚描画し、最後に 8 枚全てを加算して元の輝度に戻します。
        すると当然、<FONT COLOR="A0FFA0" SIZE="+0">丸め誤差により全てのピクセルの輝度は 0</FONT>
        になってしまいます(整数の 1 / 8 はゼロ)。
        そこで、圧縮した 8 枚の画像を描画する際、それぞれの画像毎に 0 〜 7 までの
        個別のオフセットを加算してから 1 / 8 にします
        <FONT COLOR="A0FFA0" SIZE="+0"><B>( (luminance + 0 〜 7) / 8 )</B></FONT>。
        すると、桁落ちの発生する輝度が画像毎に変化します。
        <BR>
        　<FONT COLOR="A0FFA0" SIZE="+0"><B>オフセット=0</B></FONT> の画像では、
        <FONT COLOR="A0FFA0" SIZE="+0"><B>0,1,2,3,4,5,6,7</B></FONT> のそれぞれの輝度は、圧縮後には
        <FONT COLOR="A0FFA0" SIZE="+0"><B>0,0,0,0,0,0,0,0</B></FONT> になります。
        <BR>
        　<FONT COLOR="A0FFA0" SIZE="+0"><B>オフセット=1</B></FONT> の画像では、
        圧縮後の輝度は <FONT COLOR="A0FFA0" SIZE="+0"><B>0,0,0,0,0,0,0,1</B></FONT> になり、
        <BR>
        　<FONT COLOR="A0FFA0" SIZE="+0"><B>オフセット=7</B></FONT> の画像では
        <FONT COLOR="A0FFA0" SIZE="+0"><B>0,1,1,1,1,1,1,1</B></FONT> になります。
        <BR>
        　圧縮前の輝度情報が 8 枚とも全て同じであれば、これらの画像を一枚ずつ加算すると、
        <FONT COLOR="A0FFA0" SIZE="+0">元の精度を復元できる</FONT>ことになります。
        この理屈を応用しています。
        実際のデモでは FSAA やモーションブラーにより同じ画像ではありませんが、それなりの質で復元できます。
        モーションブラーは特に誤差が出ますが、元々動いている時だけのため、実際にはあまり問題が表面化しません。
        <P>
        　本来ならピクセルシェーダ内で処理でき、このような大量のテクスチャは不要なのですが、
        ピクセルシェーダバージョンの都合でレジスタ精度が
        8 bits しか保証されないため、やむなく複数のテクスチャに予め仕込んでいます。
        <BR>
        　また、予め作成したテクスチャを使う都合、デモではこのアルゴリズムが
        適切に働くための条件を満たしていないことが多い
        <FONT COLOR="A0FFA0" SIZE="+0">(少なくとも 100% 鏡面反射もしくは
        100% 拡散反射のマテリアルでなければならない)</FONT> ため、
        背景以外は破綻して画質が多少劣化しています (背景もちょっと変ですが)。
        <BR>
        　デモ中 <FONT COLOR="A0FFA0" SIZE="+0"><B>'o'</B></FONT>
        キーを押している間は、この精度向上アルゴリズムが無効になります。
        見比べてみると画質の違いが判…らないかも知れませんね(汗
        画面を止めた状態で「背景」を見比べれば判るとは思いますが…。

  <P>
  <DT><FONT COLOR="A0FFA0" SIZE="+0"><B>グレア生成</B></FONT>
    <DD>
        　レンダリング画像は HDR 情報を持っているため、
        最後に高輝度成分 (輝度 1.0 を超えているピクセル)を抽出し、
        グレアおよび残像を生成しています。
        グレアのタイプにもよりますが、縮小したバッファ上でおよそ 20〜30 パ
        ス程度のピクセルシェーダによる塗り潰しを行っています。
	グレア生成の具体的なプロセスについては、
	<A HREF="../column/2003-03-21.html">コラム: GDC 2003 Presentation</A>をご参照ください。
        <P>
        <FONT COLOR="A0FFA0" SIZE="+0">
          ※カメラや眼のグレアは、本来なら高輝度ピクセルだけではなく全てのピクセルで発生します。
          しかし、ダイナミックレンジの不足から画像全体がぼやけるだけになるため、高輝度成分のみに
          グレアを発生させています。
        </FONT>
</DL>

</BLOCKQUOTE>


<!-- ------------------------------------------------------------------------------------------------------ -->
<HR>

<A NAME="Refer">

<TABLE>
<TR>
<TD>
<IMG SRC="../Image/CyanButton.gif" BORDER="0" WIDTH="24" HEIGHT="24">
</TD>
<TD>
<B><I>
<FONT SIZE="+2" COLOR="#99AAEE">
References
</FONT>
</I></B>
</TD>
</TR>
</TABLE>

<BLOCKQUOTE>


"The RADIANCE Picture File Format",
 <A HREF="http://radsite.lbl.gov/radiance/refer/Notes/picture_format.html">http://radsite.lbl.gov/radiance/refer/Notes/picture_format.html</A>
<P>

Light Probe Images courtesy of Paul Debevec,
<A HREF="http://www.debevec.org/Probes">http://www.debevec.org/Probes</A>, used with permission.


</BLOCKQUOTE>


<!-- ------------------------------------------------------------------------------------------------------ -->

<P>
<!-- Signature -->
<FONT SIZE="+0">

<HR>
<!--
<CENTER>
<IMG SRC="../Image/Bar2.gif" ALT "-------------------------------------------" width=90% height="16">
</CENTER>
-->

        <TABLE>
        <TR>
        <TD>
        <A HREF="../index.html"><IMG SRC="../Image/MasaPlate.gif" BORDER="0" WIDTH="112" HEIGHT="48"></A>
        </TD>
        <TD><FONT SIZE="2"><A HREF="../index.html">ホームページに戻る</A></FONT></TD>
        </TR>
        </TABLE>

        本ページの御意見・御感想は<BR>
<B>
<ADDRESS>
        <A HREF="mailto:masa@daionet.gr.jp">
                <I>E-Mail: masa@daionet.gr.jp</I></A>
</ADDRESS>
</B>

</FONT>
<!-- Signature -->

</BODY>
</HTML>
