Web/Graphics4 [4] Three.js - Material Material은 Object의 피부같은 것으로, Geometry가 투명한지, Metallic한지 "피부"같은 것을 결정한다. 다양한 Material이 있는데, 대표적으로 다음과 같다. MeshBasicMaterial -> 단순한 색깔 및 와이어프레임을 부여 MeshDepthMaterial -> 카메라와의 거리를 이용해 색상을 결정한다 MeshNormalMaterial -> Normal Vector 방향을 색상으로 표현함. 해당 지점의 법선 벡터가 가르키는 방향에 대해 색상이 변경된다. MeshFaceMaterial -> 사용자가 개별 Face에 대해 독립적인 material을 지정할 수 있음 MeshLambertMaterial -> Vertice에서 lighting을 계산하여 Shiny 하지 않음 Me.. 2020. 9. 28. [3] Three.js - Scene, Light Sources 이전 시작 단계에서 간단한 튜토리얼을 통해 Three.js 를 어떻게 사용하는지 알아보는데요 이번 단계에서는 Three.js 의 Scene을 구성하는데 사용되는 Object와 역할 three.Scene Object의 역할 geometric과 mesh와의 관계 orthographic camera와 perspective camera의 차이 를 알아보겠습니다. Scene api 화면에 무언가를 보여주려면 다음 3가지 요소가 필요합니다. - Camera -> 화면에 어떤 요소가 렌더링되는지를 결정 - Lights -> 물체가 어떻게 보이고, 그림자를 어떻게 생성하는지를 결정 - Objects -> Camera에 비춰지는 물체들 Scene 객체는 이런 서로 다른 요소들을 담는 역할을 합니다. Scene에 추가된 .. 2020. 9. 23. [2] Three.js - 시작하기 Three.js 는 자바스크립트 3d 라이브러리로 많은 곳에서 사용되고 있습니다. 다양한 라이브러리가 있지만, Three js를 사용하는건 아무래도 커뮤니티가 크고 TypeScript 지원이 잘 된다는 것이 그 이유입니다. Three.js 엔 여러 장점이 있는데 우선 대부분의 브라우저에서 동작하고 3d 를 구현하기 위해 개별 플러그인이 필요하지 않습니다. 무엇보다 가장 큰 장점은 WebGL을 몰라도 쉽게 사용할 수 있다는 큰 장점이 있습니다. WebGL은 일반 캔버스와는 달리 GPU 자원을 사용할 수 있어 성능상의 이점을 보입니다. 저는 간단한 웹팩 설정으로 ts를 이용하여 로컬에서 작업하였습니다. 설정 방식은 이 글을 참고하시면 좋을 것 같습니다. 설정하기 위 웹팩 설정을 완료했다면, 프로젝트의 구조는.. 2020. 9. 22. [1] WebGL Fundamental 해당 내용은 이 동영상을 들으면서 기록한 것입니다. 가벼운 마음으로 심심할때마다 공부해서 끝내는 것이 목표입니다. 1. Basic Mathematics, Translation Rotation Scaling Projection OpenGL은 2차원 및 3차원 그래픽스의 표준 API 규격이다. 실제 구현체는 manufacturer (NVIDIA ..) 들의 GPU Driver에 존재하기 떄문에, 구현 방식은 개별 드라이버에 따라 다르다. WebGL은 OpenGL-ES 스펙을 구현한 구현체로, 해당 구현체를 이용하여 개발을 하게 되면 GPU Vendor 에 구애받지 않고 기능을 구현할 수 있다. CPU가 아닌 GPU를 사용하는 이유는 GPU는 병렬처리가 가능하기 때문이다. Computer Graphics에서 .. 2020. 9. 10. 이전 1 다음
