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..

이번 예제는 Path Tracing 알고리즘을 이용한 렌더링에 관한 것입니다. Path Tracing에 대한 자세한 내용은 다음 링크를 참고합니다:http://cs.brown.edu/courses/cs224/papers/mc_pathtracing.pdfDownload Protect FULL SCREEN 아래 화면에서 클릭 & 드래그하여 Sphere 움직여 보세요~~webgl-path-tracing.js1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909..

이번 예제는 Blur Shader 구현에 관한 것입니다. 본 포스팅에 삽입한 Shader Code는 zz85에게 저작권이 있음을 알려둡니다: Visit zz85'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.js12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152..

이번 예제는 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..

이번 예제는 Sepia Shader 구현에 관한 것입니다. 다음 링크를 통해 Sephia Shader에 대한 자세한 내용은 다음을 참고하시기 바랍니다:https://alastaira.wordpress.com/2013/12/02/sepia-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 & 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..