실외와의 기온차나 습도에 따라 창유리가 흐려지는 경우가 있네요.
그런 흐린 창문에 손가락으로 문자/그림을 그린 적이 있는 사람은 많다고 생각합니다.
즐거운 것 같고, 어딘가 바보도 있습니다.

그것을 웹 애플리케이션으로 JavaScript로 구현해 보았습니다.

※전회 투고한 「 스마트 폰으로 모래에 그림을 그릴 수있는 웹 서비스를 WebGL로 만들어 보았습니다. 」의 다른 버젼입니다.

먼저 이번 완성품

전회와 같이 터치 이벤트에 대응하고 있으므로, 스마트 폰, 태블릿 등으로 액세스하면 손가락으로 창에 그릴 수 있습니다.
또 그린 그림은 사이트에 업로드하거나 트윗할 수 있도록 하고 있습니다.

👇에서 시도할 수 있습니다.
Pittura
htps // 핏츠라. 어리석은 p. 이 m/를 rks/d등 w? m=2
※업로드나 트윗의 기능은 현재는 제외하고 있습니다.
※heroku의 무료 프레임이기 때문에 액세스시에 10초 정도 걸릴지도 모릅니다.

Canvas의 터치 이벤트 처리

터치 이벤트 처리 등은 지난번 과 동일하므로, 그쪽을 참조해 주십시오.

흐린 창문의 표현에 대해

↓는 실사입니다만, 이것을 목표로 해 가고 싶습니다.

잘 이 사진을 관찰하면,
①그리기 전
···배경이 흐림에 의해 보카되어, 또 하얗게 되어 있다.
창 밖에 물방울이 붙어 있다.

② 그려진 후
···배경은 클리어. 창 밖에 물방울이 붙어 있다.

이 두 가지는 물방울이 처지거나 배경이 움직이지 않는 한 변하지 않기 때문에,
2개의 화상을 미리 화상 가공 소프트 등으로 준비합니다.
▼오리지널 이미지


▼① 그려지기 전
흐릿한 배경 + 밝기 + 물방울


▼②그린 후
선명한 배경 + 물방울

구현

이미지가 완성되면 ①을 텍스처로 한 메쉬를 배치합니다.
뒤에 ②를 텍스처로 한 메쉬를 배치합니다.

터치에 의한 궤적은 지난번 범프맵을 만든 요령 로 화면상에는 표시하고 있지 않은 버퍼에, 흑백 화상으로서 남겨 갑니다.

이 흑백 이미지를 ①의 알파 맵으로 적용하여 투과시킴으로써 뒤에서 ②가 나오고 창유리답게 됩니다.

[①그리기 전]의 머티리얼(Three.js)

   // 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 );

▼완성품


htps // 핏츠라. 어리석은 p. 이 m 에서 시도 할 수 있으므로 꼭 스마트 폰으로 액세스 해보세요!
※heroku의 무료 프레임이기 때문에 액세스시에 10초 정도 기다립니다.