글로우 셰이더를 조정하여 더보기 좋게 만들기


9

나는 간단한 게임을 가지고 있으며 그 주제는이 작은 선들입니다. iOS 및 Android를 대상으로하므로 지금 실행할 수있는 거대한 범위의 프로세서가 있습니다.

여기에 이미지 설명을 입력하십시오

두 가지 이유로 실시간 글로우를 추가하려고합니다.

  1. 대부분의 장치에서 앤티 앨리어싱을 처리 할 렌더링 시간이 없다는 사실을 숨기려고합니다.
  2. 게임의 주제는 순수한 빛이어야하고, 그 그림은 순수한 빛인 것처럼 보여야합니다.

나는 분리 가능한 가우시안 블러 셰이더를 꽤 오랫동안 조정 해 왔고 좌절의 지점에 도달했습니다. 올바르게 보일 수는 없습니다. 아마도 문제는 빛의 들쭉날쭉 한 가장자리를 헛되게 숨기려고합니다. 그 동안 빛이 흐릿하게 보이지 않습니다.

내 가장 큰 문제는 그것을 가장 잘 보이게 만드는 데 관련된 모든 변수입니다.

저는 그래픽 / 렌더링을 처음 접했고 전혀 예술가가 아닙니다. 아마도 나에게 대출에 대해 가장 실망스러운 것은 관련된 것으로 보이는 모든 변수 일 것입니다. 글로우로 가능한 많은 변화를 보았습니다.

  • A. 블렌드 모드, 스크린 블렌드 모드 또는 다른 조합 추가
  • B. 블러 무게, 조합 전에 다르게 정상
  • C. 시그마는 가우스 벨 기능의 (내가 사용하고 혼란 계산기를하지만, 내가 다른 사람에가 볼 같은 값을 제공하지 않는 것)
  • D. 시그마 함수에 전송 된 "x"값의 스칼라
  • E. 샘플 스케일 (블러 반경을 더 작게 또는 더 크게 만들기)
  • F. 글로우 버퍼의 해상도 변경

이와 같은 많은 변수로 작업 할 때 가장 잘 보이는 상수를 어떻게 찾습니까?

또한 조정을하고 변경하기가 너무 길다는 것을 알기 때문에 시간이 오래 걸리기 때문에 문제가 발생합니다. 쉐이더 장난감으로 처리하지만이 이미지를로드하거나 절차 적으로 이미지를 생성 할 수는 없습니다.

지금은 가우시안 벨 커브 커널의 시그마에 정말로 붙어 있습니다. 특히 프로세서 속도가 필요하기 때문에 수식 대신 숫자로 코딩하기 때문입니다. 사용하기에 좋은 시그마를 제안 할 수 있습니까 ?

답변:


8

가우스 필터의 시그마 및 커널 크기

가우시안의 시그마와 커널 크기 (픽셀)를 선택하는 방법과 관련하여 : 원하는 블러의 폭 (시각적으로 판단)에 따라 시그마를 설정 한 다음 시그마를 기반으로 커널 크기를 선택합니다. 너무 비싸지는 않지만 (수학적으로 무한한) 종 곡선을 멋지게 보이도록 충분히 캡처 할 수있는 커널 크기를 찾는 게임입니다.

경험상 커널 크기는 시그마의 6 배 이상이어야합니다. 그런 다음 커널은 각 방향으로 3 시그마까지 확장되어 수학적 벨 커브의 거의 모든 가중치포함 하기에 충분합니다 . 필터가 대칭이되도록 픽셀 크기를 다음 홀수로 반올림하는 것도 좋습니다. 예를 들어 sigma = 1.5px 인 경우 9 픽셀 필터를 사용합니다. sigma = 2.0 px 인 경우 13 픽셀 필터 등을 사용하십시오.

또는 사용할 수있는 커널 크기를 제어하는 ​​성능 제한이있는 경우 6으로 나누어 최대 시그마를 얻을 수 있습니다. (시그마는 종 곡선 방정식에 대한 입력이므로 분수 일 수 있습니다.)

그건 그렇고, 큰 가우시안 블러에서 더 나은 성능을 얻는 방법은 이미지를 다운 샘플링하고 더 작은 블러를 수행 한 다음 업 샘플링하는 것입니다. 예를 들어 효과적인 13 픽셀 블러를 얻으려면 이미지를 2 배 (바이 리니어 필터링 사용)로 다운 샘플링 한 다음 7 픽셀 블러를 수행 한 다음 업 샘플링 (바이 리니어 필터링 사용) 할 수 있습니다. 13 픽셀 블러와 거의 비슷해 보이지만 상당히 빠릅니다.

잘 보이는 글로우 필터 만들기

이것의 일반적인 트릭은 서로 다른 반경의 여러 가우스를 사용하는 것입니다. 단일 가우시안 자체보다 글로우 효과가 더 좋습니다. 예를 들어, 다음은 3 개의 레이어를 추가로 혼합하여 만든 Photoshop의 모형입니다. 3 개의 가우시안 크기는 3px, 5px 및 11px입니다 (각 시그마 = 0.5px, 0.83px, 1.83px에 해당).

목업 블룸 필터

또한 더 큰 가우시안을 추가하여 광선의 겉보기 반경을 추가로 늘릴 수 있습니다. 이것이 표준 "블룸"효과가 3D 게임 엔진에서 구현되는 방식입니다.

성능이 중요한 경우 가장 작은 가우시안을 흐리게 처리되지 않은 원본 이미지의 사본으로 대체 할 수 있습니다. 결과 효과는 더 부드럽 지 않고 더 선명 해 보이지만 여전히 주변에 빛이납니다. 앞에서 언급했듯이 더 큰 가우시안은 다운 샘플링, 블러 링 및 업 샘플링으로 수행 할 수 있습니다. 업 샘플링은 하드웨어 이중 선형 필터링을 사용하여 수행 할 수 있으며, 레이어를 혼합하는 패스로 접 힙니다.

재기 스

위 이미지의 일부 영역에서는 재기가 여전히 보입니다. 불행히도, 흐림 반경이 상당히 크지 않으면 흐림이 재기 숨기기에 그다지 효과적이지 않습니다. 포스트 프로세스를 사용하여 재기를 제거하는 쉬운 방법은 없습니다.이를 피하는 가장 좋은 방법은 처음부터 렌더링하지 않는 것입니다. :)

성능상의 이유로 MSAA를 사용할 수 없지만 다른 옵션이 될 수 있다고 들었습니다. 글로우 트레일을 렌더링하는 방법에 따라 크기를 약간 늘리고 그라디언트를 적용하여 가장자리의 몇 픽셀 내에서 색상을 흐리게하는 셰이더를 작성할 수 있습니다. 그것은 그들이 더 매끄러 워 보이도록 도와 줄 것입니다. 다음 은 절차 모양의 앤티 앨리어싱에 사용되는 1px 너비의 가장자리 감소를 보여주는 셰이더 장난감 입니다.


@Nathan_Reed 나는 MSAA를하는 대신 예외적으로 2 배의 타격을주지 않는 트릭을 거의 제외하고 대부분의 팁을 적용했습니다. 현재 효과에 하이라이트를 더 추가하는 것에 대한 질문이있는 경우 질문을 편집하거나 새로 작성해야합니까?
J.Doe

@ J.Doe Great, 잘 들리게되어 기쁩니다! 원하는 모양이 있다면 효과를 조정하는 방법에 대해 새로운 질문을하는 것이 좋습니다.
Nathan Reed
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.