최근에 개인프로젝트 “꽃, | flower”을 만들었다. WebGL을 사용한 3D 그림책을 컨셉으로 잡고 진행을 했었는데 2017년 초부터 시작해서 대략 8개월 정도의 기간이 걸렸다. 가장 오랫동안 한 개인작업이라 애착이 갔고, 만들면서도 기록을 남기고 싶다는 생각에 글을 쓰기 시작했다. 이 프로젝트를 어떻게 시작하게 되었고, 그림과 개발을 동시에 진행하면서 느꼈던 점이나 어려웠던 점들을 정리해보려고 한다.
Array를 쓰다보면 항상 사용하던 map이나 splice 만 쓸 뿐 some, every 메소드에 대해선 항상 헷갈려 하던 부분이라 공부도 할 겸 Array method를 정리해보았다. 몇가지 빠진 method들은 추후에 공부를 하면서 추가할 예정이다.
3d object위에 그 object에 대한 설명이 달린 태그를 붙여서 object를 따라다니게 하려고 한다. div로 만든 태그를 object위에 붙여서 따라다니게 하려면 object의 position 값을 대입해야 되는데 position은 x,y,z 값을 가지고 있고, div는 x, y 값만 가지고 있기 때문에 3d position(x,y,z)를 x,y로 변경해서 사용해야만 한다.
3D 에서 개발하다보면 위치 확인차 바닥면을 기준으로 볼 수 있는 그리드가 필요해서 만들어 보았다.
Canvas에서 사용하는 Method 정리
csg.js는 두개의 3D 모델이 겹쳐있을 때 하나로 합치거나 겹쳐있는 영역만 빼야 하는 경우에 사용할 수 있는 라이브러리이다. ThreeCSG.js를 사용하면 csg.js를 Three.js에서도 사용할 수 있다.
React Component에서 따로따로 resize 이벤트를 거는 것보다 Redux를 통해서 한 군데에서 관리하는게 낫지 않을까 하는 생각에 Redux를 시작.
Three.js에서 제공해주는 예제들을 하나하나 보다보면 Shader를 직접 만들어서 사용하는 예제들이 많다. Three.js에서 제공해주는 Material 중에서 직접 셰이더를 작성해서 적용할 수 있는 ShaderMaterial이 있어서 간편하게 셰이더를 적용해 볼 수 있다. 다만 셰이더를 작성하는 GLSL이 생소하고 예제를 보면서 이해하기에는 어려움이 많아 기본적인 셰이더의 예시를 제공해주는 블로그가 있어서 참고하였다.
웹워커는 Background Thread에서 스크립트를 실행하는 방법이다. UI Thread와는 별개의 Thread를 실행시켜 사용자 인터페이스(UI)를 방해하지 않고 작업을 수행할 수 있다. – Thread란 어떠한 프로그램 내에서, 특히 프로세스 내에서 실행되는 흐름의 단위를 말한다. 일반적으로 한 프로그램은 하나의 스레드를 가지고 있지만, 프로그램 환경에 따라 둘 이상의 스레드를 동시에 실행할 수 있다. 이러한 실행 방식을 멀티스레드(multithread)라고 한다. ( 출처 : […]
window.postMessage를 이용하면 iframe안의 페이지와 메시지를 주고 받을 수 있다.