[FE] React-three/fiber 겹친 오브젝트 간 렌더링 오류 트러블 슈팅

🦍 상황

- 별을 클릭하여 게시글을 등록하거나 조회해야 하는데, 별의 크기가 너무 작아 클릭이 어려웠다.
- 편의성 증대를 위해 별을 둘러싸고 있는 보다 커다랗고 투명한 구를 생성하여 클릭 시 편의성을 향상시켰다.
- 이 때, 별과 별 사이를 잇는 별자리 선이 끝까지 이어지지 못하고 끊어져 보이는 렌더링 문제가 발생하였다.

별자리 선이 별과 별을 끝까지 이어주지 못하는 상황

---

🐈 문제 원인 파악 및 해결

- 문제의 원인은 별을 잇는 선분과 별 주위 구체가 겹쳤기 때문이었다. 각 오브젝트들이 차지하는 공간은 다음과 같다.

 
- 별을 잇는 선분과 클릭 편의성을 위해 만든 구체가 차지하는 공간이 겹쳐 일부는 제대로 보이고, 일부는 그렇지 않은 오류가 발생했다.
- Material의 속성 중 depthTest라는 속성을 이용해 문제를 해결하였다.
 
    - depthTest : 겹쳐있는 오브젝트 중 카메라와 보다 멀리 떨어져 있는 오브젝트는 앞쪽의 오브젝트에 의해 가려지게끔 렌더링되는데, 가리고 있는 앞쪽의 오브젝트에 depthTest 속성을 false로 설정하면 가려진 오브젝트가 앞쪽의 오브젝트를 뚫고 나오듯이 가려짐없이 렌더링된다.
 
- 별 주위 구체에 depthTest 속성을 false로 설정해 구체에 가려진 선분을 가려짐 없이 렌더링

function StarSurround(props) {
    const [opacity, setOpacity] = useState(0);

    return (
        <mesh
            position={props.position}
            onClick={(e) => {
                props.handleClick(e, props.location);
            }}
            onPointerEnter={(e) => {
                setOpacity(0.05);
            }}
            onPointerLeave={() => setOpacity(0)}
        >
            <sphereGeometry args={[0.7, 48, 48]} />
            <meshStandardMaterial
                transparent={true}
                opacity={opacity}
                depthTest={false} {/* 해당 속성을 조절하여 문제 해결 */}
            />
        </mesh>
    );
}

---

🐕 결과

 
- 별과 별 사이를 잇는 선분이 끊어지지 않고 정상적으로 렌더링된다.

---

🐇 고찰

- 아는 만큼 보이는 것을 느꼈다. depthTest 라는 속성을 알지도 못하고 있던 때에는 해결 불가능한 문제라고 판단해 계속해서 방치해 뒀었으나, 이를 알고 나니 상당히 쉽게 해결할 수 있었다.