FC2ブログ

頭と尻尾はくれてやる!

パソコンおやじのiPhoneアプリ・サイト作成・運営日記


シェーダーで手書きっぽい線を描きたい(2)

シェーダーで手書きっぽい線を描きたい
↑こんな感じでシェーダでいろいろと面白い表現ができるので、これを利用してBlenderで作ったオブジェクトの輪郭線をいじってみた。目標は手書きっぽい線にしたかったわけだが、、、

シェーダを使った輪郭線

↑これは頂点を法線方向に拡大させて背面を黒で描いて、というトゥーンレンダリングなどでは定番の手法。線の太さが均一。これはこれでキレイ。

手書き風輪郭線

↑頂点の拡大する量をnoise関数などを使って変えた場合。
線の太さが場所によって微妙に違って趣が出たでしょ!、、、と言いたいけど、微妙すぎて誰も気付かないな、こりゃ。

ホントは頂点シェーダではなく、フラグメントシェーダで処理したかったんだけど、、、実力不足で挫折したのでした。

頂点シェーダの一部はこんな感じ。noise関数は前の記事などにあります。
vertex SimpleVertex myOutlineVertex(MyVertexInput in [[stage_in]],
                                    constant SCNSceneBuffer& scn_frame [[buffer(0)]],
                                    constant MyNodeBuffer& scn_node [[buffer(1)]]
                                    )
{
    SimpleVertex vert;
    
    float4 pos = scn_node.modelViewProjectionTransform * float4(in.position, 1.0);
    float2 xy = pos.xy / pos.w;
    float2 st = (xy + 1.0)/2.0;
    st *= 30.0;

//    float d = 0.075;//一定幅の場合
    float d = 0.05+0.05*smoothstep(0.0 , 1.0 , noise(st));

    in.position +=  d * in.normal;//法線方向へ拡大
    
    vert.position = scn_node.modelViewProjectionTransform * float4(in.position, 1.0);//これをフラグメントシェーダへ
…以下略…
}

↓別なモデルにこの手法を適用してみたのがこんな感じ。

<< 新iPhoneどうするかな〜?  TopPage  シェーダーで手書きっぽい線を描きたい >>

コメント


管理者にだけ表示を許可する
 

トラックバック

トラックバックURL
http://ringsbell.blog117.fc2.com/tb.php/1199-31ac6009




Copyright ©頭と尻尾はくれてやる!. Powered by FC2 Blog. Template by eriraha.

FC2Ad