室外との気温差や、湿度によって、窓ガラスが曇っていることがありますよね。
そんな曇った窓に、指で文字/絵を描いたことがある人は多いと思います。
楽しいようであり、どこか儚さもあり。
それをWebアプリケーションとしてJavaScriptで実装してみました。
※前回投稿した「スマホで砂に絵を描けるWebサービスをWebGLで作ってみた」の別バージョンです。
先に今回の完成品
前回同様、タッチイベントに対応しているので、スマホ・タブレット等でアクセスすれば、指で窓に描くことができます。
また描いた絵は、サイトにアップロードしたり、ツイートできるようにしています。
👇から試せます
Pittura
※元々heroku上で動かしていましたが、Github Pagesに載せ替えて動かしています。
アップロードやツイート等の機能はすべて外しています。
https://negi141.github.io/pittura-demo/
Canvas上のタッチイベント処理
タッチイベント処理等は、前回と同様なので、そちらをご参照ください。
曇った窓の表現について
↓は実写ですが、これを目指して行きたいと思います。
よくよくこの写真を観察してみると、
①描かれる前
・・・背景が曇りによってボカされ、また白っぽくなっている。
窓の外側に水滴が付いている。
②描かれた後
・・・背景はクリア。窓の外側に水滴がついている。
この2つは、水滴が垂れたり、背景が動いたりしない限りは変わらないので、
2つの画像をあらかじめ画像加工ソフト等で用意します。
▼オリジナル画像
▼①描かれる前
ぼかした背景＋明るさ＋水滴
▼②描かれた後
クリアな背景＋水滴
実装
画像ができたら、次に①をテクスチャにしたメッシュを配置します。
その後ろに②をテクスチャにしたメッシュを配置します。
タッチによる軌跡は前回バンプマップを作った要領で画面上には表示していないバッファに、白黒画像として残していきます。
この白黒画像を、①のアルファマップとして適用して透過させることで、後ろから②が出てきて、窓ガラスらしくなります。
// materialBlur ＝ ①描かれる前 のマテリアル
materialBlur = new THREE.MeshPhongMaterial( {
specular: 0x000000, shininess: 0, overdraw: 0.5,
// textureBlur ＝ ①描かれる前 のテクスチャ
map: textureBlur,
// textureAlpha ＝ タッチによる軌跡を残したテクスチャ
// これをアルファマップとして読み込む
alphaMap: textureAlpha,
transparent: true, depthTest: false } );
meshBlur = new THREE.Mesh( geometryBlur, materialBlur );
group.add( meshBlur );
▼完成品
https://pittura.herokuapp.com で試せますので、是非スマホでアクセスしてみてください！
※herokuの無料枠なためアクセス時に10秒程度待ちます。