和紙印刷風写真ビューワ - パーリンノイズで繊維を表現
デジタル写真に、紙の温度を足します。繊維はノイズで作り、色は少しだけ黄みを混ぜる。最後は乗算で“印刷らしさ”に寄せます。
作ったもの
写真を和紙に印刷したような質感で表示するWebアプリです。
JPEGをアップロードすると、和紙の繊維感が加わります。パーリンノイズで自然な繊維を生成し、写真と乗算合成しています。
シンプルだけど、効果は十分。デジタル写真に、物質的な温かみを与えられます。
まずは、和紙の繊維パターンを見てみましょう：
パーリンノイズで、自然な繊維のムラを生成します。スケールを変えると、粗い繊維から細かい繊維まで表現できる。
なぜ作ったか
写真を美しく見せたかった。
デジタル写真は綺麗だけど、冷たい。印刷写真のような温かみがない。
和紙の質感を加えたら、どうだろう。そう考えて、シェーダーで実装してみました。
写真展示で使う予定だった。来場者が写真を見るときに、デジタルではなく、印刷物のような親しみを感じてほしかった。
パーリンノイズの実装
和紙の繊維は、ランダムだけど自然なパターン。
最初、単純なランダムノイズを使った。一度つまずいた。
ザラザラしすぎて、和紙に見えない。ただの粗い画像。これは課題。
パーリンノイズに変えた：
float noise(vec2 p) {
vec2 i = floor(p);
vec2 f = fract(p);
float a = hash(i);
float b = hash(i + vec2(1.0, 0.0));
float c = hash(i + vec2(0.0, 1.0));
float d = hash(i + vec2(1.0, 1.0));
vec2 u = f * f * (3.0 - 2.0 * f);
return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
}
隣接するランダム値を補間して、滑らかなノイズを生成。これで自然な繊維パターンができた。
多層ノイズの合成
繊維感を立体的にするため、2つのノイズを重ねました：
// 細かい繊維（高周波）
float finefiber = noise(vUv * 900.0) * 0.08;
// 粗い繊維（低周波）
float coarsefiber = noise(vUv * 200.0) * 0.04;
// 合成
float fiber = finefiber + coarsefiber;
900.0は細かい繊維、200.0は粗い繊維。この2つを重ねることで、和紙特有の複雑な繊維感が出る。
最初、細かいノイズだけを使った。平坦に見えた。
粗いノイズを追加したら、立体感が増した。意外でした。
和紙の色
和紙の色は、わずかに黄色みがかった白。
vec3 washi = vec3(1.0, 0.98, 0.95) - fiber;
RGB（1.0, 0.98, 0.95）で、ほんのり温かみのある白。
繊維のノイズを引くことで、繊維部分が少し暗くなる。これで立体感が出ます。
さらに、全体に4%だけ黄ばみを加える：
finalColor = mix(finalColor, vec3(0.98, 0.97, 0.93), 0.04);
微妙な調整だけど、見た目が大きく変わる。真っ白だと冷たい。黄ばみで温かみが出る。
乗算合成
写真と和紙を、どう合成するか。
加算だと明るくなりすぎる。アルファブレンドだと繊維が目立たない。
乗算合成にした：
vec3 finalColor = photoColor * washiColor;
写真の色に、和紙の色を掛け合わせる。暗い部分はより暗く、明るい部分は和紙の色が乗る。
自然な印刷感が出た。これだ。
試してみた結果
風景写真
風景写真を読み込んだ。
和紙の繊維が見える。空の部分に、微妙な繊維のムラが加わる。印刷写真のような柔らかさが出た。
ポートレート
人物写真も試した。
肌の質感が柔らかくなる。和紙の繊維が、写真に温かみを与える。
デジタルの鋭さが和らいで、優しい印象になった。
モノクロ写真
モノクロ写真が一番合う。
白黒のコントラストに、和紙の繊維が加わる。まるで写真集の1ページ。
気に入った。
使ってみて
実際に試してみてください：
旧サイトのデモを見る
和紙印刷風の写真表現は、パーリンノイズと乗算合成で実現できました。
ポイントは以下の3つ：
- 多層ノイズ合成：細かい繊維（900.0）と粗い繊維（200.0）を重ねて立体感を表現
- 和紙の色：RGB（1.0, 0.98, 0.95）でほんのり温かみのある白、4%の黄ばみを追加
- 乗算合成：写真×和紙で自然な印刷感、加算やアルファブレンドより自然
最初は単純なランダムノイズで一度つまずいた。パーリンノイズに変えて、ようやく自然な繊維感が出ました。多層ノイズの重ね合わせも重要でした。
デジタル写真に温かみを与えたい方の参考になれば嬉しいです。
まとめ
今回は、写真を和紙印刷風に表示するWebアプリを作りました。
ポイントは以下の4つ：
- パーリンノイズ：自然な繊維パターンを生成、単純なランダムノイズでは失敗
- 多層合成：細かい繊維（スケール900.0）と粗い繊維（スケール200.0）を重ねて立体感
- 和紙の色：わずかに黄色みがかった白（1.0, 0.98, 0.95）、4%の黄ばみで温かみ
- 乗算合成：写真×和紙で自然な印刷感、他の合成方法より優れている
midori287の簡易版として作りましたが、シンプルな実装で十分な効果が出ました。パーリンノイズの威力を実感しました。
写真展示で使うことを想定して作りましたが、Webでも同じような表現ができると分かる。
参考にした資料
この記事で興味を持った方におすすめのリンク：
自分の関連記事：
最後まで読んでくださり、ありがとうございました。