본문 바로가기

WebGL

(2)
[Three.js] 1. vue 로 빨간 육각면체 만들기 화면에 무언가를 그리려면 4가지 요소가 필요합니다.1. 오브젝트를 포함한 scene2. 오브젝트3. 카메라4. 랜더러1. scene scene은 컨테이너와 같습니다. 그 안에 오브젝트, 조명, 카메라 등을 배치할 수 있으며, Three.js에 해당 장면을 렌더링하도록 요청합니다import { PerspectiveCamera, Scene, BoxGeometry, MeshBasicMaterial, Mesh, WebGLRenderer} from 'three'const scene = new Scene() 특징컨테이너: 씬은 다양한 3D 객체들(메쉬, 조명, 카메라 등)을 포함하는 컨테이너로서의 역할을 합니다.조직화: 씬 내에서 객체들은 계층적으로 조직될 수 있으며, 이는 복잡한 3D 환경을 효과적으로..
[Three.js] 0. WebGL 와 Three.js 의 관계 WebGL( Web Graphics Library 의 약자)은 플러그인을 사용하지 않고 호환되는 모든 웹 브라우저에서대화형 2D 및 3D 그래픽을 렌더링하기 위한 JavaScript API입니다. 대부분의 최신 브라우저와 호환되며, 방문자의 GPU(그래픽 처리 장치)를 사용하기 때문에 속도가 빠릅니다. GPU는 수천 개의 병렬 계산을 수행할 수 있습니다.3D 모델을 렌더링하고 싶은데 이 모델이 1000개의 삼각형으로 구성되어 있다면, 모델을 렌더링하려면 GPU가 3000개의 점의 위치를 계산해야 합니다.GPU는 병렬 계산을 할 수 있기 때문에 모든 삼각형 점을 하나의 원시 데이터로 처리합니다. 모델의 포인트가 배치되면 GPU는 해당 삼각형의 보이는 각 픽셀을 그려야 합니다. 이때도 GPU는 수천, 수만 ..