Three.js 에서 창 크기 변경 및 리사이즈시에 비율 또는 해상도 저하 문제 해결

Three.js 에서 창 크기 변경 및 리사이즈시에 비율 또는 해상도 저하 문제 해결 - Whitmem

Graphic Development
2024-12-30 20:11 게시 33347cb325d5bfaa843b

이 페이지는 외부 공간에 무단 복제할 수 없으며 오직 있는 그대로 게시되며 부정확한 내용을 포함할 수 있습니다. 법률이 허용하는 한 가이드 라인에 맞춰 게시 내용을 인용하거나 출처로 표기할 수 있습니다.
This page is not to be distributed to external services; it is provided as is and may contain inaccuracies.

창 리사이즈 화질 문제 해결

창 크기가 변경될 때 렌더 타겟 또는 렌더러의 사이즈를 조절하여 렌더 영역이 의도한 사이즈로 렌더링되도록 해야한다.

렌더러를 리사이즈하는 방법에 대해서, render 객체에 대해 setSize() 함수를 통해 너비와 높이를 재지정해야 한다.

웹 페이지의 사이즈가 조절되는 경우, 상기 함수를 통해 새로운 너비와 높이로 다시 재지정 해주면된다.

window.addEventListener("resize", function(){ } );

특히 메인 렌더러가 아닌, 렌더 타겟이나 렌더 타겟 텍스처를 사용하는 경우 해당 렌더 타겟 텍스처의 사이즈도 같이 조절해야 한다. 그렇지 않는 경우 시스템은 정 사이즈로 렌더링되지만 렌더 타겟 텍스처에 렌더링하는 과정에서 해상도가 저하되어 표시된다.

예를 들어 다음과 같은 렌더 타겟을 만들어 어떤 쉐이더의 렌더 대상으로 지정한 경우, 하기 사진과 같이 창 크기가 조절되는 경우 새 너비와 높이로 다시 렌더 타겟의 사이즈를 조절해야 한다.

댓글 0개