wam
w__am 개발노트
wam
  • 분류 전체보기 (165)
    • CS 지식 (10)
      • 자료구조 (0)
      • 알고리즘 (0)
      • 컴퓨터 구조 (0)
      • 운영체제 (0)
      • 네트워크 (7)
      • 데이터베이스 (0)
      • 디자인 패턴 (3)
    • Frontend (131)
      • Three.js (64)
      • NPM (1)
      • Nest.js (19)
      • React (10)
      • Apollo (7)
      • TypeScript (2)
      • JavaScript (12)
      • HTML, CSS (1)
      • Jest (3)
      • E2E (5)
      • Cypress (7)
    • Database (12)
      • TypeORM (12)
    • IT 지식 (8)
      • 클라우드 서비스 (3)
      • 네트워크 (1)
      • 데이터 포맷 (2)
      • 기타 (2)
    • IT Book (2)
    • 유용한 사이트 (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록
  • 🐱 Github

인기 글

태그

  • e.preventdefault()
  • math.sin()
  • 스코프
  • 데이터 포맷
  • threejs 개발 할 때 도움을 줄 수 있는 유틸리티
  • 함수 표현식
  • getdelta()
  • getelapsedtime()
  • axeshelper
  • reactive variables
  • 함수 리터럴
  • 함수 선언문
  • 삼각함수
  • 초기 환경설정
  • mapped types
  • Decorators
  • type-graphql
  • Interface
  • 함수의 범위
  • 디자인 패턴
  • gridhelper
  • 렌더링 성능 최적화
  • react 성능 최적화
  • 오프-프레미스(off-premise) 방식
  • API
  • 원형적인 움직임
  • three.js 구성 요소
  • joi 에러
  • math.cos()
  • isabstract

최근 글

관리자

글쓰기 / 스킨편집 / 관리자페이지
hELLO · Designed By 정상우.
wam

w__am 개발노트

애니메이션 성능 보정
Frontend/Three.js

애니메이션 성능 보정

2024. 8. 28. 01:48


애니메이션 성능 보정

 

  • 사용자마다 다른 기기에서 사용
  • 컴퓨터 성능에 따라 움직이는 속도가 다를 수 있음

 

주의 getElapsedTime()와 getDelta()은 동시에 사용하면 값이 꼬이기 때문에 동시에 사용하지 말자

 

 

성능 보정 : 경과시간 clock.getElapsedTime()

 

clock.getElapsedTime() 메서드를 사용하여 경과시간으로 성능 보정하기

 

  • 실행 시점으로부터 총 경과 시간
  • 초 단위로 찍힘
  • 성능이 시간에 영향을 주지 않음 (절대 시간)

 

 

기존

// 1초에 60도씩 돌아간다.
mesh.rotation.y += THREE.MathUtils.degToRad(1);

 

 

성능 보정

// 1도 대신 경과 시간을 넣기

const time = clock.getElapsedTime() ;
mesh.rotation.y = time; // +=로 값을 더해 주는 것이 아니라 = 로 초 자체를 사용하면 됨.
// mesh.rotation.y = 10 * time; // 속도를 올리고 싶을 때

 

 

성능 보정 : 실행 간격 clock.getDelta()

 

clock.getDelta() 메서드를 사용하여 함수 실행 간격 시간으로 성능 보정하기

 

  • 함수가 한 번 실행될 때마다 그 시간 간격 즉, 시간차를 나타낸다.

 

 

기존

// 1초에 60도씩 돌아간다.
mesh.rotation.y += THREE.MathUtils.degToRad(1);

 

 

성능 보정

// 1도 대신 실행 간격 넣기

const delta= clock.getDelta() ;
mesh.rotation.y += delta; // 일정한 값이 기 때문에 += 을 사용해서 증가 시키기

 

 

다른 방법의 성능 보정 : 자바스크립트 내장 기능을 이용 Date.now()

 

자바스크립트 내장 기능 Date.now() 메서드를 사용하여 성능 보정하기

 

  • Date.now() 메소드는 UTC 기준으로 1970년 1월 1일 0시 0분 0초부터 현재까지 경과된 밀리초를 반환합니다. __mdn 문서

 

 

성능 보정

	let oldTime = Date.now(); // 처음 실행되는 시점

	function draw() {
		const newTime = Date.now();
		const deltaTime = newTime - oldTime; // 시간차 계산
		oldTime = newTime; // 지금 실행 시간으로 변경
		// deltaTime 값이 기본적으로 크기 때문에 소수점으로 값 계산
		mesh.rotation.y += deltaTime * 0.005;
		mesh.position.y += deltaTime * 0.001;
		
		if (mesh.position.y > 3) {
			mesh.position.y = 0;
		}
		renderer.render(scene, camera);

		// window.requestAnimationFrame(draw);
		renderer.setAnimationLoop(draw);
	}

컴퓨터 화면 주사율에 따라 값은 달라진다.

 

 

저작자표시 변경금지

'Frontend > Three.js' 카테고리의 다른 글

안개(Fog) 만들기  (0) 2024.08.28
라이브러리를 이용한 애니메이션  (0) 2024.08.28
애니메이션 기본  (0) 2024.08.28
빛(조명) 설정하기  (0) 2024.04.20
Renderer에 배경색, 투명화 설정  (0) 2024.04.20
    'Frontend/Three.js' 카테고리의 다른 글
    • 안개(Fog) 만들기
    • 라이브러리를 이용한 애니메이션
    • 애니메이션 기본
    • 빛(조명) 설정하기
    wam
    wam

    티스토리툴바