Scientific Computing & Data Science

이번 예제는 Cube Map에 관한 것이며, Cube Map은 environment mapping의 일종으로서 환경이 오브젝트에 반사된 것과 같은 효과를 내기 위한 것입니다.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.js123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354..

이번 예제는 지오메트리의 재질, 즉 매터리얼에 관한 것이며, 기본 매터리얼인 Basic, Lambert, Phong 쉐이딩으로 구성하였습니다.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.js123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263..

이번 예제는 기본적인 Geometry에 대한 것입니다. 기본적인 Geometry라 함은, Three.js가 제공하는 Geometry Primitives를 의미합니다.Download Project Click here to view with full screen mode OperationsMouse Left Button Click & Drag: Camera Rotating Mouse Wheel: Camera Zoom In & Out Mouse Right Button Click & Drag: Camera Panning main.js12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455..

이번 예제는 Web-Cam으로부터 받은 화면 이미지를 각종 오브젝트의 texture로 출력하는 예제입니다. 웹캠이 없는 경우 각 오브젝트의 texture는 검게 출력되며, 웹 브라우저가 웹캠을 허용하겠냐는 메시지에 대하여 허용하지 않을 경우에도 검게 출력됩니다.Download Project FULL SCREEN[Operations]Mouse Left Button Click & Drag: Camera RotatingMouse Wheel: Camera Zoom In & OutMouse Right Button Click & Drag: Camera Panning [main.js]// standard global variables var container, scene, camera, renderer, contro..

이번 예제는 Web-Cam을 통해 화면을 웹 페이지에 띄우는 예제입니다. Web-Cam이 없는 경우 화면이 나오지 않으며, "웹캠을 허용하시겠습니까?"라는 메시지가 나올 경우 허용해야만 Web-Cam을 통해 화면이 출력됨에 유의하기 바랍니다.Download Project FULL SCREEN

이번 글에서는 가장 기본적인 Sphere 오브젝트를 하나 표시하는 정도의 수준으로 일종의 Three.js 프레임웍 기반의 WebGL Project 템플릿을 소개하고자 합니다. Download Project FULL SCREENOperationsMouse Left Button Click & Drag: Camera RotatingMouse Wheel: Camera Zoom In & OutMouse Right Button Click & Drag: Camera Panningmain.js12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686..

Written by Geol Choi | Feb. 10, 2014 이번 글에서는 WebGL의 대표적인 프레임워크인 Three.js의 대해 알아보도록 하겠습니다.Three.js 기원 및 역사Browser 플러그인 등 별도의 설치없이 WebGL 기반 JavaScript를 이용하여 구현하는 GPU가속 3D 애니메이션 엔진2010년 4월 Ricardo Cabello가 처음으로 릴리즈본 라이브러의 시초는 2000년 초반으로 거슬러 올라가게 되는데 최초의 코드는 ActionScript로 개발되었으며 2009년에 JavaScript로 포팅함WebGL의 출현에 따라 Paul Brunt는 Three.js에 쉽게 렌더러를 추가할 수 있었음Cabello는 API 설계, CanvasRenderer, SVGRenderer를 추..

by Geol Choi | Feb. 10, 2014대표적인 WebGL 프레임웍들과 특징들주요 WebGL 프레임에 대해 소개드리겠습니다. 현재 나와있는 WebGL 프레임웍과 엔진은 실로 종류가 다양합니다. 이러한 프레임웍 및 엔진들의 특징을 간단히 요약해 보았습니다. EnchantJS - HTML5/JavaScript 기반 엔진 / Object Direction, Asynchronous Processing, Plugin Expansion, visual Material 등과 같은 기능 제공IMPACT - JavaScript 게임엔진Crafty - 작은 규모의 JavaScript 게임엔진 / 충돌 감지, 스프라이트 맵 지원 등과 같은 꽤 괜찮은 기능 제공Pulse - 2D JavaScript 게임 및 그래픽스..

Written by Geol Choi | Feb. 10, 2014이번 글에서는 WebGL을 통해 구현된 사례에 대해 알아보도록 하겠습니다. 대표적인 WebGL showcase 사이트는 다음과 같습니다.WebGL ShowcasesGoogle Chrome ExperimentMozilla WebGL Demo StudioThree.js Web PageMr.Doob Web PageHello RacerCar VisualizerOrbit ViewerWave Simulatoracko.netDisney OZ PromotionGoogle SpaceInteractive Music VideoWebGL Editor

Written by Geol Choi | Dec. 23, 2017WebGL 그래픽스 파이프라인WebGL에 대한 그래픽스 파이프라인은 OpenGL에서의 그래픽스 파이프라인과 크게 다르지 않습니다. 단, JavaScript API를 사용하는 점은 차별된 요소라고 할 수 있습니다. WebGL을 지원하는 데스크탑 브라우저Mozilla Firefox: 버전 4.0부터 모든 플랫폼에 대해 지원Google Chrome: 버전 9부터 모든 플랫폼에 대해 지원Apple Safari: OS X Mountain Lion, OS X Lion에 대해서는 버전 6.0부터 지원, Mac OS X Snow Leopard에 대해서는 버전 5.1부터 지원, 기본적으로는 기능이 해제되어 있음Opera: 버전 11과 12에서 지원됨, 기본..