XNA에서 직접 SVG 아트 렌더링


36

SVG와 같은 벡터화 된 형식의 2D 아트가 있다고 가정 해보십시오. 전체 SVG 렌더러를 직접 구현하지 않고도 직접 렌더링하는 쉬운 방법이 있습니까?

물론 다른 해상도 / 줌 레벨을 위해 오프라인으로 (예 : 컨텐츠 파이프 라인에서) 래스터화할 수 있지만 벡터 그래픽이 제공하는 연속 줌 레벨에서 선명한 비주얼을 유지하고 싶습니다.

답변:


24

좋은 질문입니다. 나는 이것을 한 시점에서 실험하고있었습니다. 쉽고 사전 구축 된 솔루션을 찾을 수 없었습니다. 그러나 직접 구현하려고 할 때 찾은 리소스 중 일부를 알려 드리겠습니다.


우선 GPU Gems 3 : GPU에 렌더링 벡터 아트 (및 관련 Loop-Blinn paper ) 의 기사가 있습니다 .

가장 어려운 부분은 2 차 곡선을 그리는 것이 쉽지만 3D 곡선 (일반 SVG에서 볼 수있는 것과 같은)은 상당히 더 어렵다는 것입니다. 이 기사에서는 이에 대해 자세히 설명하지만 수학 모자를 가져와야합니다.

3 차 곡선 렌더링의 대안은 3 차 곡선을 3 차 곡선으로 변환하는 것입니다. 또한 사소한 문제입니다.

GPU에서 벡터 곡선을 렌더링 할 수 있으면 콘텐츠 파이프 라인에서 SVG를 구문 분석하고 렌더링 할 수있는 메쉬로 변환하는 것만으로도 간단합니다. 그런데 SVG 파싱은 쉽습니다 .

또 다른 잠재적으로 쉬운 대안은 곡선을 모두 함께 포기하고 SVG의 선형 근사치를 삼각 측량하는 것입니다.

이 두 솔루션 모두 삼각 측량이 필요합니다. 여기 XNA에 적합한 합리적인 삼각 측량기가 있습니다.


완전히 다른 대안으로, "거리 필드"를 사용하여 거의 벡터와 같은 날카로운 모서리로 스프라이트를 렌더링 할 수 있습니다.

이 작업을 수행하는 방법에 대한 SIGGRAPH 2007 Valve의 논문은 다음과 같습니다. 벡터 텍스처 및 특수 효과를위한 향상된 알파 테스트 확대 (PDF)

여기서 기본 방법은 구현하기가 매우 쉽습니다. 모서리가 날카 로워 지려고 할 때 어려움이 있습니다 (종이에만 닿은 부분). 이 방법은 또한 단순한 모양을 그리는 것 외에는 상당히 심각한 제한이 있습니다. Valve가 그것을 사용하는 것처럼 UI 텍스트와 데칼에 가장 적합합니다.


이제 모든 것을 말 했으므로, 내 경험상 여기의 모든 노력이 가치가 없다고 말해야합니다!

매우 멋진 Masagin 데모 와 같은 극단적 인 벡터 확대 / 축소 효과를 기본으로 게임 플레이 를 기반으로 하지 않는 한 SVG를 사전 렌더링하고 비트 맵 기술 (더 쉽고, 더 나은 지원 등)을 사용하여 벗어날 수 있습니다.

가장 먼저 떠오르는 기술 중 하나는 스프라이트의 밉 매핑 ( wiki ) 고해상도 버전으로, 최대 스프라이트 크기까지 해상도 독립성을 제공합니다.

이 블로그 게시물 은 SVG 렌더링 지원을 XNA 컨텐츠 파이프 라인에 추가하기에 좋은 장소 일 것입니다.


훌륭한 답변, 감사합니다! 그것은 자신을 걸기에 충분한 밧줄 이상입니다. 결국, 나는 아마도 당신의 조언을 받아 비트 맵 경로로 갈 것입니다. 그동안 할 일이 몇 가지 있습니다! : P
drxzcl

이 답변은 여전히 ​​정확합니까?
lochok 2016 년

@lochok 예. 내 대답에는 갑자기 작동을 멈출 수있는 것이 없습니다. 미래에는 벡터를 더 잘 수행하는 방법이 개발 될 수도 있지만, 글을 쓰는 시점에 새로운 소식은 듣지 못했습니다.
앤드류 러셀

또한 기존 솔루션이 없음을 의미했습니다
lochok
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.