Scientific Computing & Data Science

WebGL 프레임웍인 three.js의 Extension인 threejs-extension을 이용하여 Web Cam으로부터 받은 화면을 텍스쳐로 적용하는 예제입니다.예제 파일 다운로드 : HTML123456789101112131415161718 WebCam Texture Colored by Color ScriptercsCSS [style.css]1234567#render { margin: 0px; background-color: #836b2c; overflow: hidden; width: 100%; height: 100%;}csJavaScript [main.js]12345678910111213141516171819202122232425262728293031323334353637383940414243444..

이번 글에서는 CINEMA 4D를 이용하여 지오메트리 모델을 Collada로 내보내기(export)하고 이를 three.js의 Collada importer로 불러오는 방법에 대하여 알아보기로 하겠습니다.오브젝트 굽기(Baking Object) Collada 포맷으로 내보낼 오브젝트를 생성 또는 로드(load)합니다. 콘텐츠 브라우저를 이용하여도 좋습니다. 예제로서 아래 이미지와 같이 비행기 모델을 열었습니다. 내보내고자 하는 모델 외에 모두 지웁니다. 그리고, 해당 프로젝트 파일을 Menu > File > Save project with Assets...로 저장합니다 (지정한 이름으로 폴더가 생성됩니다). Scene Manager에서 모든 지오메트리를 선택하고, 우클릭하여 Connect Objects ..

WebGL의 ThreeJS 프레임워크에서 3D 지오메트리 포맷인 COLLADA를 로딩하는 방법에 대하여 알아보도록 하겠습니다. COLLADA 포맷은 3D 지오메트리 정보를 표현하는 포맷 중 하나이며, .dae 확장자명으로 XML 태그 형식으로 정의됩니다. 시중의 거의 대부분의 3D 저작도구는 COLLADA 포맷 익스포트(export)를 지원한다. COLLADA 포맷에는 지오메트리 뿐만아니라 매터리얼과 애니메이션 정보가 포함됩니다.Step 1 - Export COLLDAD FormatBlender, Maxon CINEMA 4D, Autodesk Maya, Autodesk 3dsMax 등 3D 저작도구에서 지오메트리를 생성합니다. 만약 텍스쳐를 적용하였다면 가급적 Bake 기능을 활용하여 하나의 전체적인 U..

이번 예제는 Bloom Shader 구현에 관한 것입니다. 또한 Shader Code는 Alfred Qualia에게 저작권이 있음을 알려 둡니다:Visit Alfred Qualia's Web Page.Download Project Click here to view with full screen mode OperationsMouse Left Button Click & Drag: Camera RotatingMouse Wheel: Camera Zoom In & OutMouse Right Button Click & Drag: Camera Panningmain.js123456789101112131415161718192021222324252627282930313233343536373839404142434445464..

이번 예제는 Dot Screen Shader 구현에 관한 것입니다. 또한 Shader Code는 Alfred Qualia에게 저작권이 있음을 알려 둡니다:Visit Alfred Qualia's Web Page.Download Project Click here to view with full screen mode OperationsMouse Left Button Click & Drag: Camera RotatingMouse Wheel: Camera Zoom In & OutMouse Right Button Click & Drag: Camera Panningmain.js1234567891011121314151617181920212223242526272829303132333435363738394041424344..

이번 예제는 Vignette Shader 구현에 관한 것입니다. Vignette Shader에 대한 자세한 내용은 다음을 참고하시기 바랍니다: https://github.com/mattdesl/lwjgl-basics/wiki/ShaderLesson3 또한 Shader Code는 Alfred Qualia에게 저작권이 있음을 알려 드립니다:Visit Alfred Qualia's Web Page.Download Project Click here to view with full screen mode OperationsMouse Left Button Click & Drag: Camera RotatingMouse Wheel: Camera Zoom In & OutMouse Right Button Click & Dra..

이번 예제는 HTML 페이지를 Plane 오브젝트에 Embedding 하는 방법에 대한 것이다.Download Project Click here to view with full screen mode OperationsMouse Left Button Click & Drag: Camera RotatingMouse Wheel: Camera Zoom In & OutMouse Right Button Click & Drag: Camera Panningmain.js12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576..

이번 예제는 특정 오브젝트가 마우스 클릭해 반응하도록 하는 것입니다. 마우스 포인터가 놓여진 오브젝트를 인식시켜 클릭 시 그 오브젝트가 회전하도록 합니다.Download Project Click here to view with full screen mode Operations 해당 카드를 마우스 클릭 main.js123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110..

이번 예제는 마우스 드래그를 통해 컨텐츠를 컨트롤 하는 것에 관한 것입니다. 개인적으로는 본 테스트 프로젝트를 만들면서 꽤 재밌었던 기억이 납니다. 매우 심플하지만 응용하면 요긴한 프로젝트라는 생각이 듭니다.Download Project Click here to view with full screen mode OperationsMouse Left Button Click + Dragmain.js123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293..

이번 예제는 Leap Motion Controller를 이용한 오브젝트 컨트롤에 관한 것이다. 아쉽게도 현재 필자는 개발 당시에는 Leap Motion Controller를 가지고 있었으나, 현재는 보유하고 있지 않아 본 테스트 프로젝트가 제대로 작동하는지 검증을 할 수 없는 상태이다.다만, 개발 당시에는 본 테스트 프로젝트가 정상 작동하였었기 때문에 일단 올려본다. Leap Motion Controller를 가지고 계신 분은 테스트 해 보시기 바란다. [Download Project] FULL SCREEN [main.js]// standard global variables var container, scene, camera, renderer; var keyboard = new THREEx.Keyboar..