[ 개인 미니 프로젝트 ] 이미지를 3차원 공간에 배치하고 모니터 느낌의 필터링 해주는 사이트

이 소프트웨어는 개인적인 목적으로, 공부 용도로 개발되었습니다. 따라서 내부망에서 개발되었을 뿐, 외부 서비스, 제공 목적으로 서비스하지 않습니다. 따라서 라이선스 등 내부적인 사항들은 조사되지 않았습니다. 이 게시물은 단순히 Whitmem의 개발 기록을 남긴 게시물이며 업으로서 제공하지 않습니다.

요약

사이트 미리보기

사용자는 원하는 이미지를 선택하여 모니터에서 바라보는 것 처럼 R, G, B 3색의 픽셀로 구성된 이미지를 추출할 수 있다. 시점을 마음대로 변경하고 확대, 축소할 수 있으며 밝기를 조절해 픽셀의 강도를 선택할 수 있도록 하며, 최종적으로 이미지 파일로 내려받을 수 있는 사이트

이 사이트는 개인 포트폴리오 기록 사이트에 있는 그대로(AS-IS) 업로드 해 두었다. 다음 링크에서 방문할 수 있다. 이미지 픽셀화 도구 사이트

개발 언어

주요 언어 : Javascript 외 웹 마크 언어(HTML, CSS)

개발 환경 : Ubuntu Server

의존성 : Threejs

개발 기간 : 2시간

방문 : 이미지 픽셀화 도구 사이트

개발 배경

이미지 자료를 업로드할 때 단순히 평면상의 그림이나 이미지보다, 3D 객체 이미지를 올리는 것이 시각적으로 흥미를 유발한다. 하지만 매번 3D 소프트웨어를 실행해서 위에 텍스처를 올려 렌더링하는 것은 번거로운일이고, 또 모니터 느낌이 나도록 픽셀 처리를 하려면 쉐이더 노드를 별개로 다 연결해줘야 하는 번거로움이 있었다. 따라서 이미지를 선택하면 픽셀 처리로 보여주고 시점을 자유자재로 변경할 수 있도록 사이트를 개발하였다.

기능 스냅샷

사용자는 사이트에 최초로 방문하면 위와 같은 화면을 볼 수 있는데, 여기서 자기가 필터하고 싶은 이미지를 선택한다.

필터하고자 하는 이미지를 선택하면 해당 이미지에 맞게끔 RGB 픽셀 수가 조절되는데, 이때 스크롤을 통해서 확대, 축소를 진행할 수 있다. 한편 좌클릭 드래그를 통해서 시점을 회전할 수 있고, 우클릭 드래그를 통해서 시점을 이동할 수 있다.

밝기 값은 -1~1 까지 값을 권장하는데, 밝기 값을 높일수록 픽셀이 불투명해지고, 낮을수록 픽셀이 뚜렷해진다.

최종적으로 저장 버튼을 누르면 현재 화면 뷰를 png 이미지로 내려받을 수 있다.

개발 과정

텍스처 로드 및 할당

내부적으로 사이트에 접근하면 rgb.png라는 파일의 텍스처를 로드한다. 이 텍스처는 RGB 픽셀 한개를 나타내는 텍스쳐이다.

한편 사용자가 입력한 텍스쳐 파일도 로드되는데, 그 과정에서 사용자 이미지의 너비와 높이 정보를 기록하고, 해당 크기를 바탕으로 평면을 초기화한다.

평면을 초기화하는 과정에서 Material은 ShaderMaterial로 적용하여 픽셀 느낌을 낼 수 있는 fragmentShader을 적용한다. 이 쉐이더는 사용자가 입력한 일반 original 텍스처와 RGB 색상 하나를 표현하는 텍스처인 tex 를 서로 합성해서 결과 색상을 내보낸다. 그 과정에서 픽셀 개수만큼 RGB 텍스처를 표현하기 위해 UV 좌표의 배율을 조절한다.

고찰 사항

지금은 매 순간 실시간 렌더링을 수행하고 있는데 성능 조절을 해야할 것으로 보인다.