알레폰드의 테크 이모저모

================================= ================================= ================================= WebGL Three.js여러가지 3D 예제 모음 https://stemkoski.github.io/Three.js/ Three.js - examples Hello World A heavily commented but basic scene. Illustrates the setup of a scene, camera, renderer, event handlers (for window resize and fullscreen, provided by the THREEx library), mouse controls to rotate/z..

================================= ================================= ================================= 출처: https://threejs.org/docs/#api/objects/Sprite Sprite A sprite is a plane that always faces towards the camera, generally with a partially transparent texture applied. Sprites do not cast shadows, settingcastShadow = truewill have no effect. Example var spriteMap = new THREE.TextureLoader().lo..

================================= ================================= ================================= 출처: http://cinema4dr12.tistory.com/953 [Programming / WebGL] Web Cam Texture WebGL 프레임웍인 three.js의 Extension인 threejs-extension을 이용하여 Web Cam으로부터 받은 화면을 텍스쳐로 적용하는 예제이다. 예제 파일 다운로드 : HTML CSS [style.css] #render { margin: 0px; background-color: #836b2c; overflow: hidden; width: 100%; height: 100%..

================================= ================================= ================================= 출처: http://cinema4dr12.tistory.com/820 [WebGL/ThreeJS] COLLADA(dae) Loader WebGL의 ThreeJS 프레임워크에서 3D 지오메트리 포맷인 COLLADA를 로딩하는 방법에 대하여 알아보도록 하겠다. COLLADA 포맷은 3D 지오메트리 정보를 표현하는 포맷 중 하나이며, .dae 확장자명으로 XML 태그 형식으로 정의된다. 시중의 거의 대부분의 3D 저작도구는 COLLADA 포맷 익스포트(export)를 지원한다. COLLADA 포맷에는 지오메트리 뿐만아니라 매터리얼..

================================= ================================= ================================= 출처: http://cinema4dr12.tistory.com/796 [WebGL] Path Tracing 이번 예제는 Path Tracing 알고리즘을 이용한 렌더링에 관한 것이다. Path Tracing에 대한 자세한 내용은 다음 링크를 참고한다:http://cs.brown.edu/courses/cs224/papers/mc_pathtracing.pdf [Download Project] FULL SCREEN [webgl-path-tracing.js]/* WebGL Path Tracing (http://madebyevan.c..

================================= ================================= ================================= 출처: http://cinema4dr12.tistory.com/795 [WebGL] Blur Shader 이번 예제는 Blur Shader 구현에 관한 것이다.또한 Shader Code는 zz85에게 저작권이 있음을 알려둔다:Visit zz85's Web Page. [Download Project] FULL SCREEN [Operations] Mouse Left Button Click & Drag: Camera Rotating Mouse Wheel: Camera Zoom In & Out Mouse Right Button Cl..

================================= ================================= ================================= 출처: http://cinema4dr12.tistory.com/794 [WebGL] Bloom Shader 이번 예제는 Bloom Shader 구현에 관한 것이다.또한 Shader Code는 Alfred Qualia에게 저작권이 있음을 알려둔다:Visit Alfred Qualia's Web Page. [Download Project] FULL SCREEN [Operations] Mouse Left Button Click & Drag: Camera Rotating Mouse Wheel: Camera Zoom In & Out M..

================================= ================================= ================================= 출처: http://cinema4dr12.tistory.com/793 [WebGL] Dot-Screen Shader 이번 예제는 Dot Screen Shader 구현에 관한 것이다. 또한 Shader Code는 Alfred Qualia에게 저작권이 있음을 알려둔다:Visit Alfred Qualia's Web Page. [Download Project] FULL SCREEN [Operations] Mouse Left Button Click & Drag: Camera Rotating Mouse Wheel: Camera Zoom..

================================= ================================= ================================= 출처: http://cinema4dr12.tistory.com/792 [WebGL] Vignette Shader 이번 예제는 Vignette Shader 구현에 관한 것이다.Vignette Shader에 대한 자세한 내용은 다음을 참고하도록 한다: https://github.com/mattdesl/lwjgl-basics/wiki/ShaderLesson3 또한 Shader Code는 Alfred Qualia에게 저작권이 있음을 알려둔다:Visit Alfred Qualia's Web Page. [Download Project] ..

=====================================================================    출처: http://cinema4dr12.tistory.com/790[WebGL] Embedded HTML  이번 예제는 HTML 페이지를 Plane 오브젝트에 Embedding 하는 방법에 대한 것이다.[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 v..