▲

GN⁺: 비디오 게임에서 아웃라인 그리기 방법

 (ameye.dev)
2P by neo 2달전 | ★ favorite | 댓글 1개

  • 소개

    • 게임에서 외곽선 렌더링은 미적 이유나 게임플레이 지원을 위해 자주 사용됨. 예를 들어, 게임 Sable에서는 만화책 스타일을 만들기 위해 외곽선을 사용하며, The Last of Us에서는 적을 강조 표시하기 위해 사용됨.

  • 림 효과

    • 기법

      • 프레넬 효과를 사용하여 객체의 가장자리에 외곽선을 렌더링할 수 있음. 이는 객체의 가장자리에서 효과가 강해짐.

    • 구현

      • 프레넬 효과를 구현한 커스텀 셰이더를 사용하여 객체에 외곽선을 렌더링함. 구체나 캡슐과 같은 부드러운 객체에 적합하지만, 큐브와 같은 날카로운 객체에는 적합하지 않음.

  • 버텍스 압출

    • 기법

      • 원본 객체의 복제본을 사용하여 외곽선을 형성함. 복제본의 버텍스를 확장하여 원본보다 크게 만듦.

    • 압출 방향

      • 버텍스를 이동시키는 방향을 선택하여 객체의 크기를 조정함. 객체 공간에서 버텍스를 이동시켜 외곽선을 형성함.

    • 압출 공간

      • 객체 공간에서 버텍스를 이동시키는 방법과 클립 공간에서 이동시키는 방법이 있음. 클립 공간에서의 이동은 균일한 외곽선을 제공함.

    • 마스킹

      • 복제된 메시의 전면을 제거하여 외곽선만 보이도록 함.

  • 블러 버퍼

    • 기법

      • 객체의 실루엣을 버퍼에 렌더링하고, 이를 블러 처리하여 외곽선을 형성함.

    • 실루엣 버퍼

      • 객체를 단색으로 렌더링하여 실루엣 버퍼를 생성함.

    • 블러 패스

      • 실루엣 버퍼를 확장하기 위해 블러 패스를 사용함. 박스 블러나 가우시안 블러를 사용하여 성능을 향상시킴.

    • 외곽선 패스

      • 블러 처리된 실루엣을 원본 장면과 결합하여 외곽선을 형성함.

  • 점프 플러드 알고리즘

    • 점프 플러드 알고리즘을 사용하여 외곽선을 렌더링함. 넓은 외곽선을 저렴한 성능 비용으로 렌더링할 수 있음.

  • 엣지 감지

    • 기법

      • 전체 화면 패스를 사용하여 장면의 불연속성을 감지하고 외곽선을 렌더링함.

    • 불연속성 감지

      • Roberts cross나 Sobel 연산자를 사용하여 불연속성을 감지함.

    • 불연속성의 원천

      • 깊이, 노멀, 색상 텍스처에서 불연속성을 감지하여 외곽선을 형성함.

    • 엣지 감지 조정

      • 불연속성 감지에 사용되는 임계값을 조정하여 아티팩트를 제거함.

    • 사용자 정의 불연속성 원천

      • 사용자 정의 불연속성 원천을 제공하여 외곽선을 제어할 수 있음.

  • 결론

    • 외곽선을 그리는 5가지 방법이 있으며, 성능, 시각적 충실도, 수동 설정 간의 절충점을 제공함.
▲
neo 2달전  [-]
Hacker News 의견

  • Jump Flood Algorithm에 관한 기사를 매우 흥미롭게 읽었음. 픽셀 수준에서 다양한 접근 방식을 생각하는 것이 즐거움

    • SDF(Signed Distance Field)를 생성하는 매우 영리한 방법임. 선형 시간 내에 원하는 너비의 윤곽선을 생성할 수 있는 점이 인상적임
    • SDF는 벡터 기반, 함수 기반, 혹은 텍셀/복셀 기반 등 다양한 방식으로 활용 가능함. Houdini는 레스터 SDF를 잘 지원하며, 무료 버전도 있음
    • SDF는 다양한 분야에서 유용하게 사용됨

  • 모델을 단색으로 렌더링한 후 엣지 감지를 통해 윤곽선을 얻는 방법을 제안함. 추가적인 렌더 패스가 필요함

  • 스타일화된 3D 그래픽에 대한 연구개발 프로젝트에 관심이 있음. 해결되지 않은 여러 질문들이 있음

    • 카메라가 줌 아웃할 때 만화 렌더링된 3D 모델의 디테일을 줄이는 방법
    • 3D 배경을 수채화처럼 렌더링하는 방법
    • 스타일화된 3D 게임에서 연기, 불꽃, 나무 등을 표현하는 방법
    • 자유롭게 움직이는 카메라에서 모델을 자동으로 조정하는 방법
    • 스타일화된 3D 렌더러에서 이상적인 메쉬 및 배경 편집기 프로그램의 모습
    • 간단한 3D 모델에서 레트로 픽셀 아트를 렌더링하는 가능성
    • 스타일화를 통해 3D 게임 세계를 더 물리적으로 정확하게 만드는 방법

  • Astral Divide 게임에서 블러 버퍼와 유사한 기술을 개발함. 안티앨리어싱을 활용하여 경계를 생성함. 성능이 저렴하고 구현이 간단함

  • 기술 예술에 대한 열정이 있으며, Godot의 컴퓨트 셰이더 파이프라인 개선을 기대함. 현재의 컴포지터 플러그인 설정은 다소 복잡함

  • Unity의 가격 논란 이후 개발자들이 Unreal과 Godot로 이동했는지 궁금함

  • VR 앱 개발에서 웹 개발로 전환했지만, 3D 그래픽, 충돌, 셰이더 작업의 마법 같은 느낌을 그리워함

  • 엣지 감지 렌더링 결과가 매우 만족스러움. 네덜란드 만화책 Franka의 한 장면처럼 보임

  • Mars First Logistics 개발자가 제안한 엣지 감지 방법에 대한 훌륭한 노트를 발견함

  • 윤곽선을 그리는 간단한 기술 제안

    • 각 면의 고유한 엣지를 저장하는 배열 생성
    • 엣지를 뷰 공간으로 변환한 후, 특정 조건에 따라 엣지를 그림
답변달기