알레폰드의 테크 이모저모

================================= ================================= ================================= 출처: 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..

=====================================================================     출처: http://cinema4dr12.tistory.com/773[WebGL] Multiple Cameras 이번 예제에서는 화면을 2분할 하고 우측 화면에는 가상 카메라의 움직임을, 좌측 화면에는 가상 카메라를 통해 입력되는 영상을 표시한다. [Download Project] FULL SCREEN  [Operations]W: Move forwardS: Move backwardQ: Move to the leftE: Move to the rightA: Rotate to the leftD: Rotate to the right[main.js]// MAIN // standard..

================================= ================================= ================================= 출처: http://cinema4dr12.tistory.com/765 [WebGL] Web-Cam으로 화면 출력하기 이번 예제는 Web-Cam을 통해 화면을 웹 페이지에 띄우는 예제이다. Web-Cam이 없는 경우 화면이 나오지 않으며, "웹캠을 허용하시겠습니까?"라는 메시지가 나올 경우 허용해야만 Web-Cam을 통해 화면이 출력됨에 유의하기 바란다. [Download Project] FULL SCREEN ================================= ================================..

=====================================================================   출처: http://cinema4dr12.tistory.com/288 [대표적인 WebGL 프레임웍들과 특징들]현재 나와있는 WebGL 프레임웍과 엔진은 실로 종류가 다양하다.이러한 프레임웍 및 엔진들의 특징을 간단히 요약해 보았다.EnchantJS - HTML5/JavaScript 기반 엔진 / Object Direction, Asynchronous Processing, Plugin Expansion, visual Material 등과 같은 기능 제공Imapct - JavaScript 게임엔진Crafty - 작은 규모의 JavaScript 게임엔진 / 충돌 감지, 스프라이트 ..

=====================================================================   출처: https://blog.pigno.se/post/131780373668/threejs%EC%99%80-webgl Three.js를 들어본적이 있는가? 아니면 WebGL을 아는지 묻고싶다. WebGL부터 설명하자면 3D 랜더링을 위한 일반 개발환경의 OpenGL의 ES 2.0을 바탕으로 웹에서 구동 할 수 있게 제공한 기술이다. 물론 WebGL은 브라우저마다 사용이 되는 것도 있고 불가한 브라우저도 존재한다.http://caniuse.com/#feat=webgl 주소를 들어가 보면 WebGL을 지원하는 브라우저 목록을 확인할 수 있는데 인터넷 익스플로러 같은 경우 11버전..

================================= ================================= ================================= 출처: https://webglfundamentals.org/webgl/lessons/webgl-3d-camera.html WebGL 3D - Cameras This post is a continuation of a series of posts about WebGL. The first started with fundamentals and the previous was about 3D perspective projection. If you haven't read those please view them first. In the..