MidoriPhotoArt - 繊維質感印刷風写真ビューワ
作ったもの
写真を紙の繊維感・厚み・透過感とともに表示するWebアプリです。
JPEGをアップロードすると、和紙や印刷紙のような質感で表示されます。パーリンノイズで繊維を生成し、透過光の散乱まで再現しています。
写真展示でこのアプリを使おうと思っていました。デジタル写真をもっと温かみのある印刷物のように見せたかった。
まずは、質感表現の仕組みを見てみましょう：
スライダーで質感を調整できます。紙の白さ、印刷の濃淡、透過度を変えると、まったく違う雰囲気になる。
なぜ作ったか
デジタル写真は便利だけど、冷たい。
印刷写真には、紙の質感がある。光を透かすと、繊維が見える。厚みのムラで、光の透け方が変わる。
その質感をWebGLで再現したかった。
写真を美しく見せるだけでなく、紙という物質の存在を感じさせたい。そう考えました。
パーリンノイズで繊維を表現
紙の繊維は、ランダムだけど自然なパターン。
最初、完全なランダムノイズを使った。一度つまずいた。
ザラザラしすぎて、紙に見えない。ただのノイズ。これは課題。
パーリンノイズに変えた。滑らかなノイズ関数。自然な繊維のパターンが生成できる。
// パーリンノイズで繊維感を生成
float noise = perlin(uv * 50.0);
float fiber = smoothstep(0.4, 0.6, noise);
50.0は繊維の細かさ。数値を変えると、粗い繊維から細かい繊維まで表現できる。
10.0だと粗すぎる、100.0だと細かすぎる。50.0がちょうど良かった。
透過光の表現
紙に光を当てると、透ける。
厚い部分は光を遮り、薄い部分は光を通す。この透過感を再現したかった。
ノイズ値を紙の厚みとして扱う：
// 紙の厚みを計算（ノイズ値）
float thickness = perlin(uv * 50.0);
// 厚みに応じて透過率を計算
float transmittance = (1.0 - thickness) * paperTransmit;
// 透過光を加算
vec3 transmittedLight = backgroundColor * transmittance;
paperTransmitは透過度のパラメータ。0.0なら不透明、2.0なら半透明。
0.58がちょうど良かった。紙の透け感が自然に再現できる。
散乱（ぼかし）の実装
透過光は、紙の中で拡散する。
真っすぐ透けるのではなく、周囲にぼんやり広がる。この散乱を表現したかった。
最初、透過光をそのまま加算した。不自然。光が鋭すぎる。
周囲の色をぼかして加算する処理を追加：
// 周囲8方向から色を取得してぼかす
vec3 blurred = vec3(0.0);
for (int i = -1; i <= 1; i++) {
for (int j = -1; j <= 1; j++) {
vec2 offset = vec2(i, j) * 0.002;
blurred += texture2D(image, uv + offset).rgb;
}
}
blurred /= 9.0;
// ぼかした色を透過光として加算
vec3 scattered = blurred * transmittance;
9個のピクセルを平均してぼかす。簡易的だけど、効果は抜群。
光が柔らかく広がって、紙の質感が増した。意外でした。
紙の色調整
紙の色も重要。
真っ白だと、写真が明るすぎる。経年劣化したような、少し黄ばんだ色が温かみがある。
カラーピッカーと色合いスライダーで調整できるようにしました：
let paperBaseColor = [1.0, 0.98, 0.95]; // ほんのり黄ばんだ白
let paperTint = 0.097; // 色合いの強さ
カラーピッカーで好きな色を選べる。paperTintで色の強さを調整。
0.097が自然な色合い。0.2以上だと、色が強すぎて不自然になった。
印刷の濃淡
写真の濃さも調整可能にしました。
photoStrengthで画像の強さを調整。1.37がちょうど良い。
1.0だと薄い、2.0だと濃すぎる。1.37で、紙に印刷したような自然な濃さになった。
contrastは印刷のコントラスト。1.26で、明暗がはっきりする。
細かい数値だけど、見た目が大きく変わる。何度も調整して、最適な値を見つけました。
実際に試してみた
風景写真
風景写真を読み込んでみた。
紙の繊維が見える。光を透かすと、空の部分がほんのり光る。印刷写真のような温かみが出た。
デジタル写真とは違う、物質感がある。これが作りたかったもの。
ポートレート
人物写真も試した。
肌の質感が柔らかくなる。紙の繊維が写真と混ざって、絵画のような雰囲気になった。
コントラストを下げると、さらに柔らかい印象になる。
モノクロ写真
モノクロ写真だと、紙の質感が際立つ。
白黒のコントラストに、紙の繊維が加わる。まるで写真集の1ページのような仕上がり。
一番気に入った組み合わせ。
使ってみて
実際に試してみてください：
旧サイトのデモを見る
繊維質感印刷風の写真表現は、WebGLのシェーダーで実現できました。
ポイントは以下の3つ：
- パーリンノイズで繊維生成：完全ランダムでなく、自然なパターンを生成、スケール50.0が最適
- 透過光の散乱表現：周囲9ピクセルを平均してぼかし、光が拡散する効果を再現
- パラメータの微調整：photoStrength=1.37、paperTransmit=0.58、contrast=1.26で自然な質感
最初は完全ランダムノイズで一度つまずいた。パーリンノイズに変えて、ようやく自然な繊維感が出ました。透過光のぼかしも、試行錯誤の結果です。
写真を温かみのある印刷物のように見せたい方の参考になれば嬉しいです。
まとめ
今回は、写真を紙の繊維感とともに表示する体験型作品を作りました。
ポイントは以下の4つ：
- パーリンノイズ：自然な繊維パターンを生成、スケール50.0で適度な細かさ
- 厚みによる透過表現：ノイズ値を紙の厚みとして扱い、透過率を計算
- 光の散乱：透過光を周囲にぼかして加算、紙の中で光が拡散する効果
- パラメータ調整：紙の白さ1.12、印刷の濃淡1.26、透過度0.58で自然な質感
デジタル写真に物質感を与える試みでした。完全ランダムノイズでは紙に見えず、パーリンノイズで自然な繊維を生成。透過光のぼかしも重要でした。
写真展示で使うことを想定して作りましたが、Webでも同じような表現ができると実感しました。
参考にした資料
この記事で興味を持った方におすすめのリンク：
最後まで読んでくださり、ありがとうございました。