FC2ブログ

頭と尻尾はくれてやる!

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


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

The Book of Shaders: Noise
↑このノイズを使って手書きの線っぽいものを作ってみようとした。
SceneKitのSCNProgramのシェーダに記述し、macOSで実行。

まずは直線。
上記ページの直線部分の記述が自分には理解できないので、自分なりに理解できるコードで記述してみた。
{
    //フラグメントシェーダ内

    float2 xy = in.position_.xy / in.position_.w;//—(1)
    float2 st = (xy + 1.0)/2.0;//—(2)
    
//    st *= 3.0;//—(3)
    
    float3 c = lines1(st);    

    float4 color = float4(float3(c) , 1.0);
    return half4(color);
}

float lines1(float2 st)
{
    float f = fract(st).y;
    return step(0.99 , sin( f * 3.14159 ) );//—(4)
}
↑コードはこんな感じ。
平面オブジェクトを画面からはみ出すほど近くにあるカメラから見ている。
(1)は頂点シェーダからもらった座標を-1から1になるようにしている。macOSのウインドウ(表示画面)に対応している。
(2)ではその座標を0から1になるようにしている。
(4)のstep関数でsin関数の値がしきい値以上で白になる。

シェーダで描いた直線

↑実行結果。直線は描けた。

シェーダで描いた3本の直線

↑上記コードの(3)を有効にすればこのようになる。なるほど。


次にこの直線の輪郭をノイズを使ってふらふらとさせようとしたんだが、、、
float lines2(float2 st)
{
    float fy = fract(st).y;

    float2 tempSt = st*float2(50,1);
    float d = 0.005 * noise(tempSt);
    
    return step(0.98+d , sin(fy * 3.14159 ));
}
↑noise関数は元記事参照ください。線の幅にnoise関数を使ってランダムな要素を加える。

シェーダで描いた直線(輪郭を揺らす)

↑それっぽくはなったけど、これだと上下対称になるのがおもしろくない。

なので、こんな感じにしてみた↓
float lines3(float2 st)
{
    float fy = fract(st).y;
    float fy_pi = fy * 3.14159;

    float r = step(0.0 ,cos(fy_pi))*2.0-1.0; // -1 or 1
    float2 tempSt = st*float2(25.0*r ,1);
    float d = 0.005 * noise(tempSt);
    return step(0.994+d , sin(fy_pi ));
}
↑試行錯誤の末、こんなので、、、



↑それっぽくなったかも。
回転させても形状が変わっていないのを確認してる。
{
    return smoothstep(0.992+d , 0.994+d , sin(fy_pi ));
}
↑smoothstepを使うと少しぼかせる↓

シェーダで描いた手書きのような直線

おもしろいな〜



<< シェーダーで手書きっぽい線を描きたい(2)  TopPage  強力すぎるミルク泡立て器 >>

コメント


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

トラックバック

トラックバックURL
http://ringsbell.blog117.fc2.com/tb.php/1198-6c550b2e




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

FC2Ad