calendar

S M T W T F S
     12
3456789
10111213141516
17181920212223
24252627282930
<< November 2019 >>

categories

archives

PV3D:ShadedMaterialでテクスチャ+シェード

0
    ShadedMaterialを使って、テクスチャを張った面にシェードを付けるデモです。以前のエントリでテクスチャ+シェードは出来ないと書いていたんですが、別件調べてたら普通に出来る事が分かったので今更ながら紹介します。無知って怖いですねw

    FlatShader
    GouraudShader
    CellShader


    デモはこちら ソースはこちら

    コードはこんな感じで
    var sdr = new FlatShader(light);
    var mat = new ShadedMaterial( new BitmapAssetMaterial("texture"), sdr);
    var obj = new Sphere(mat);
    scene.addChild(obj);

    ShadedMaterialに元画像のマテリアルと、シェーダー(〜Shaderってやつ)を渡せばよい。シェーダーはFlatShaderのところをGouraudedShaderとかにいろいろ変えることでデモのようになります。



    でShaderの中で面白いなと思ったのがPhongShader。表面に軽い凹凸デコボコを付けられます。

    PhongShader

    デモはこちら ソースはこちら

    左が凹凸設定していないPhongShader、右が凹凸設定したPhongShaderです。
    PhongShaderのインスタンス化する際に渡す引数で、凹凸を表現するためのマッピング画像(バンプマップ・bumpmap)を指定します。バンプマップは白黒の画像で、そのピクセルデータが凹凸の度合を示しています。

    var bumpMapBitmap = new Bitmap(new bumpearthmap(0, 0)); //bumparthmapがバンプマップのリンケージ
    var sdr = new PhongShader( light, 0xffffff, 0x333333, 0, bumpMapBitmap.bitmapData );
    var mat = new ShadedMaterial( new BitmapAssetMaterial( "earthmap" ), sdr); //earthmapは元画像のリンケージ名
    var obj = new Sphere(mat);
    scene.addChild(obj);

    デモみたいにテクスチャ画像と凹凸がそのまま対応しているような場合は、バンプマップ画像は、元のテクスチャ画像をPhotoShopかなんかで白黒にしてコントラストを調整すればできあがり。

    元画像(テクスチャ画像)


    調整後画像(バンプマップ)






    コメント
    コメントする








       
    この記事のトラックバックURL
    トラックバック