WebGL2 [Three.js] 텍스처가 깜빡이는 문제 안녕하세요 :) 오늘은 아래와 같이 구름 텍스쳐를 실험하다가 각도가 변경되면 텍스처가 깜빡거리거나 부분이 잘려 보이는 문제가 발생했습니다. 위에 보시면 어색하게 잘려있는 구름이 보이실 겁니다. 위 원인은 각 객체가 가지고 있는 depth 정보 때문인데요, 객체들은 depth 정보를 이용해 해당 객체를 그릴지 말지를 결정한다고 합니다. 렌더링 최적화에는 도움이 되겠지만 위처럼 겹겹이 쌓여있는 형태의 객체에선 오히려 나타나야할 부분이 잘려버리는 문제가 발생하네요. 해결방법은 간단합니다. material을 생성할때 depthWrite 키값으로 false를 넘겨주면 됩니다. const material = new THREE.MeshLambertMaterial({ map: textureMap, transparent.. 2023. 8. 18. [Canvas] window.requestAnimationFrame이란 안녕하세요, 개발자 Sean입니다. 본격적으로 3D관련 기술 공부를 시작했는데 window.requestAnimationFame이란 메서드를 보고 정리해 두면 좋겠다 생각되어 정리해 올려봅니다. MDN의 정의에 따르면 아래와 같습니다. **window.requestAnimationFrame()**은 브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출하게 합니다. 이 메서드는 리페인트 이전에 실행할 콜백을 인자로 받습니다. const animate = () => { window.requestAnimationFrame(animate); ctx.clearRect(0,0,canvasWidth, canvasHeight); particle.dr.. 2023. 2. 15. 이전 1 다음
