728x90 Front-End/ThreeJS7 Three.js 렌더링 성능 최적화: 웹 3D 그래픽의 성능을 향상시키는 전략 소개 Three.js를 사용한 웹 3D 그래픽은 멋진 시각적 효과를 제공하지만, 렌더링 성능을 최적화하지 않으면 사용자 경험에 부정적인 영향을 미칠 수 있습니다. 이 블로그 글에서는 웹 3D 그래픽 프로젝트에서 렌더링 성능을 향상시키기 위한 다양한 전략과 최적화 기술을 살펴봅니다. 1. 모델 최적화: 모델의 복잡성은 FPS에 가장 직접적인 영향을 미치는 요소 중 하나입니다. 모델이 더 복잡하면 렌더링 및 계산에 더 많은 시간이 소요될 수 있습니다. 따라서 모델의 복잡성을 최적화하고 필요하지 않는 세부 정보를 제거하는 것이 중요합니다. 또한 LOD를 사용하여 렌더링 중에 더 낮은 해상도 또는 단순화된 모델을 사용합니다. 이는 원격 물체 또는 화면에서 멀리 있는 물체의 경우에 성능을 향상시킬 수 있습니다. .. 2023. 11. 2. threejs scaling-performance threejs scaling-perfomance WebGL을 실행하는 것은 장치의 성능에 따라 상당히 비쌀 수 있다. 이를 완화하려면, 특히 약한 옵션을 포함하여 다양한 장치에서 애플리케이션을 사용할 수 있도록 하려면 성능 최적화를 살펴봐야 한다. 1. 주문형 렌더링 three.js 앱은 일반적으로 초당 60번 실행되는 게임 루프에서 실행된다. 이는 일반적으로 배터리를 가장 많이 소모하고 팬이 회전하게 만드는 원인이다.그러나 장면의 움직이는 부분이 정지되도록 허용되면 렌더링을 계속하는 것은 낭비가 된다 이러한 경우 필요할 때만 렌더링되는 주문형 렌더링을 선택할 수 있다 이렇게 하면 배터리가 절약되고 시끄러운 팬을 억제할 수 있다. 컬러 그레이딩 demand 옵션은 구성 요소 트리 전체에서 소품 변경이 감.. 2023. 10. 23. Geometries Geometries 도형의 거리, 모양, 크기 및 상대 위차와 같은 공간의 속성과 관련된 수학의 한 분야이다. 물리적 세계를 모델링하기 위해 개발된 기하학은 거의 모든 과학과 예술, 건축 및 그래픽 과 관련된 기타 활동에 적용된다. Three.js 에는 일반적인 도형을 만들기 위한 많은 클래스가 있다 그중에서 3가지 Geometry 살펴볼 생각이다. BoxGeometry BoxGeometry는 주어진 '너비', '높이', '깊이'가 있는 직육면체의 기하학 클래스이다. 생성 시 각 모서리가 축 중 하나와 평행한 상태에서 원점의 중심에 배치된다. BoxGeometry(width : Float, height : Float, depth : Float, widthSegm.. 2023. 7. 25. Object3D Hierarchy Object3D는 Three.js의 많은 개체에 대한 기본 클래스로 3D 공간에서 개체를 조작하기 위한 메서드와 속성을 제공한다 가장 일반적인 ex) 메쉬, 조명, 카메라 및 Object3D 이다 https://threejs.org/docs/#api/en/core/Object3D three.js docs threejs.org 장면에 다른 Object3D 추가할수 있으면 부모 Object3D의 add() 메소드를 통해서 자식 Object3D를 만들수 있다 const object1 = new THREE.Mesh( new THREE.SphereGeometry(), new THREE.MeshPhongMaterial({ color: 0xff0000 }) // 빨강 ) object1.position.set(4, 0.. 2023. 7. 24. Dat GUI Dat.GUI 는 Three.js 에 대해 배우는데 사용하는 매우 유용한 도구 이다 설치 dat.gui 받아오기 npm install dat.gui --save-dev이제 기존 javascript 파일에 가져온다 import { GUI } from 'dat.gui' threejs 에서 따로 제공해주는 gui import { GUI } from "three/examples/jsm/libs/lil-gui.module.min" x,y,z 적용하기 x,y,z 기준으로 회전값을 설정해 준다 const gui = new GUI() const cubeFolder = gui.addFolder("Cube"); const cubeRotationFolder = cubeFolder.addFolder("Rotat.. 2023. 7. 21. ThreeJS 시작하기 NPM 및 빌드 도구로 설치 npm 패키지 레지스트리 에서 설치하고 빌드 도구를 사용한다 Node.js 설치하기 종속성 관리를 로드하고 빌드 도구를 실행하는 필요하다 프로젝트 폴더의 터미널 을 사용하여 three.js 및 빌드 도구인 Vite를 설치한다 npm init # three.js npm install --save three # vite npm install --save-dev vite npm은 package.json 사용하여 설치한 각 종속성의 버전을 설명한다. 프로젝트에서 함께 작업하는 다른사람이 있는 경우 npm install 실행하여 각 종속성의 원래 버전을 설치할수 있다. 버전 기록을 사용하는 경우 package.json 커밋을 한다 node_modules 폴더는 각 종속성에 대한 코드를.. 2023. 7. 20. 이전 1 2 다음 728x90
