2D 행성 텍스처의 3D 환상


10

몇 년 전에 저는 2D 텍스처를 사용하여 회전하는 행성의 환상을 사용자에게주는 기술을 듣습니다. 사용자가 위치 나 뷰포트를 변경할 수 없다는 점을 감안할 때

이 기술의 이름은 무엇입니까?

답변:


25

좋아, 지금 담당자가 있다고 생각합니다. 이미지가 포함 된 이전 게시물의 내용 찾고있는 회전하는 행성 효과입니까? 단순히 스타 필드에서 반투명 "구멍"을 통해 볼 수있는 스크롤링 2D 이미지입니다.

효과가 어떻게 생겼는지에 대한 간단한 애니메이션 GIF를 만들었습니다. 분명히 훨씬 매끄럽게 애니메이션 될 수 있습니다. 저는 행성 표면을 각 프레임마다 4 픽셀 씩 이동 시켰습니다. 또한 이미지를 감싸도록 설정되어 있지 않으므로 루프 끝에 결함이 있습니다.

행성 http://www.perludus.com/orbit.gif

Photoshop에서이 작업을 모두 수행했지만이 개념은 알파 투명도 등을 수행 할 수있는 2D 렌더링 환경에서 작동합니다. 다음은 프로세스를 보여주는 일련의 스크린 샷입니다.

  1. 빈 별 배경을 만들고 둥근 구멍을 자릅니다.
    대체 텍스트
  2. 이 지구와 같은 회색 음영 음영 영역을 찾으십시오.
    대체 텍스트
  3. 여기에 구멍이있는 별과 반구형의 음영 처리 된 구가 있습니다.
    대체 텍스트
  4. 구멍의 크기에 파란색 원을 만들고 파란색으로 빛납니다. 또한 반투명으로 설정하십시오. 음영 처리 된 구의 모양은 다음과 같습니다.
    대체 텍스트
  5. 이제 행성 표면 질감을 찾으십시오. 방금 "평면 표면 텍스처"를 찾았습니다.
    대체 텍스트
  6. 반투명 구멍이있는 별 이미지 아래에 행성 질감을 배치 하여이 모양을 얻으십시오.
    대체 텍스트

행성 표면에 애니메이션을 적용하려면 기본 행성 표면 텍스처를 이동하십시오. 매끄럽고 끝없는 회전을 얻으려면 가장자리에 닿을 때 텍스처를 이동하는 것에 대해 영리해야합니다.

이것이 도움이 되길 바라며 당신이 찾고 있던 효과입니다!

추신 : 행성 질감을 만드는 다소 참신한 방법으로 예술가들에 대한이 기사를 보았습니다.이 대답을 생각하게했습니다 .


NP Henrik. 나는 당신의 게시물을 보자 마자 "나는이 사람이 무슨 뜻인지 알 것이다." 100 % 확신 할 수는 없지만 이것이 오리지널 스타 트렉 TV 쇼에서 회전하는 행성 효과가 이루어진 방식이라고 생각합니다.
Tim Holt

이것은 훌륭한 답변이었습니다. 제가 가지고있는 게임 프로젝트에 대한 아이디어를 제공합니다. 다음 번에 스타 크래프트 2를로드 할 때 이것이 어떻게 수행되는지 확인해야합니다. =)
Bryan Harrington

환상적인 답변, 멋진 스크린 샷!
오류 454

당신의 이미지는 죽었다. 고칠 수 있다고 생각하십니까?
Mithical

3

메신저는 당신이 의미하는 바를 추측하고 거기에 아이디어를 던지지 만, 그것을하는 '유명한'방법은 아닐 것입니다.

2D로 모두

2 개의 텍스처를 취하십시오. 하나는 당신의 땅 덩어리이고 다른 하나는 구름입니다. 구름에는 '알아보기'를 할 수 있도록 일치하는 알파 레이어가 있어야합니다.

텍스처를 타일링 가능하게 만듭니다. 즉, 매끄러운 랩핑입니다. 포토샵에서 이러한 튜토리얼이나 튜토리얼을 만들 수 있도록 도와주는 프로그램이 있습니다.

그런 다음 마지막으로 원인 스텐실 마스크를 만듭니다. 따라서 실제로 사각형 텍스처에 둥근 구멍을 통해 모서리를 가리게됩니다.

이제 랜드 및 클라우드 텍스처의 텍스처 매트릭스에 애니메이션을 적용하여 움직이게합니다. 서로 다른 방향과 속도로 움직이면 회전하는 것처럼 보입니다. 텍스처를 얼마나 매끄럽게 만들 었는지에 달려 있습니다.


2

나는이 기사가 그 기술을 설명한다고 생각한다. (러시아어이므로 번역 된 링크를 게시합니다.)

https://translate.googleusercontent.com/translate_c?depth=1&hl=en&rurl=translate.google.com&sl=auto&sp=nmt4&tl=en&u=https://habrahabr.ru/post/248381/&usg=ALkJrhgViuYdAi-Vav3cyhxvydkaBKh6

여기에 구현했습니다. http://github.com/meric/renderplanet

기본적으로 직교 투영을 인코딩하는 이미지 ( http://mathworld.wolfram.com/OrthographicProjection.html )를 만들고 셰이더를 사용하여 지구와 구름 텍스처를 감싸십시오. dt에 따라 행성 텍스처를 오프셋하여 회전시킵니다. 대기 링과 그림자에 대해 준비된 반투명 이미지를 사용하거나 반투명 호를 그리고 그림자에 대한 셰이더를 실험하여 이미지를 생성하십시오.

이미지는 다음과 같습니다.

직교

원 안의 각 픽셀에 대해 Red + Green/255조회 할 행성 / 구름 텍스처의 정규화 된 X 좌표 Blue + Alpha/255이며 정규화 된 Y 좌표입니다.

결과는 다음과 같습니다.

견본

행성과 구름 텍스처는 등방 형 투영이어야합니다.


1

작업중인 컨텍스트에 대한 제한 사항에 대해서는 확실하지 않습니다. 3D 렌더링에서 대부분의 텍스처는 2D입니다. 따라서 2D 표면 텍스처가 매핑 된 3D 구를 표시하는 경우 실제로 문제가되지 않습니다. 3D 렌더링을 사용할 수 없으면 사용할 수있는 것을 정확하게 말해야합니다.

기본적인 문제는 구의 표면에 평평한 질감을 렌더링해야한다는 것인데, 3D 렌더링으로 무료로 얻을 수 있습니다. 행성이 회전함에 따라 행성 표면의 보이는 부분은 비선형 방식으로 움직입니다 (질감의 적도 부분은 극보다 빠르게 움직입니다). 따라서 디스크에 이미지를 매핑 할 때 이미지를 직접 왜곡하거나 VirtualVoid가 제안한대로 시간이 지남에 따라 여러 이미지를 변경해야한다고 생각합니다.

구현하는 것이 끔찍하지만, 픽셀 단위로 텍스처를 렌더링 할 수 있다면 기본적으로 구의 각 라인에 대해 래스터 화 계산을 개별적으로 수행 할 수 있습니다. 표면 맵 텍스처가 평평 해져서 적도에 512px의 이미지가 있다고 가정 해 봅시다. 보이는 디스크의 너비가 256 픽셀이라고 가정 해 봅시다. 이제 렌더링 된 디스크의 각 줄을 표면 질감의 슬라이딩 창으로 생각하십시오. 적도에서 창은 텍스처 너비의 50 %이며 각 256px를 디스크의 해당 픽셀에 복사하기 만하면됩니다. 디스크의 다음 줄은 256px보다 약간 작지만 왜곡 된 표면 맵으로 인해 여전히 256px의 입력 표면 맵 데이터가 있습니다. 그런 다음 입력 표면 맵 데이터를 서브 샘플링하고 결과 픽셀을 렌더링합니다. 쉬운 수학을 위해 s는 적도와 극점 사이의 1/3이 출력 디스크에서 128px 너비라고 가정합니다. 따라서 각 128px는 평균 2 개의 인접 픽셀이됩니다. 극점에 도달하면 256px의 평균을 몇 개의 출력 픽셀로 평균화합니다.

다른 방법으로 할 수도 있고 소스 텍스처의 선 길이가 서로 다릅니다. 따라서 소스 데이터를 포함하는 줄에는 512px가 있지만 아래쪽 1/3 줄은 256px이며 맨 아래 줄은 몇 픽셀입니다. 그러나 각 선은 동등한 y 좌표에서 디스크 너비의 두 배입니다. 그런 종류의 텍스쳐는 만드는 것이 절대적으로 끔찍할 것입니다. 그리고 아마도 끔찍한 앨리어싱 문제로 고통받을 것입니다.

두 경우 모두 애니메이션은 단순히 입력 텍스처에서 시작 픽셀 x를 증가시키고 입력 텍스처 라인의 시작 부분을 감싸는 것입니다.

내가 이것에 대해 더 많이 쓸수록, 나는 그것이 끔찍한 아이디어임을 확신하고, 당신이 정말로 다른 선택이 전혀 없다면 구현할 것이라고 확신합니다. 그리고 다른 선택을하지 않으려면 매우 이례적인 상황이어야합니다.

나는 (명확하지 않은)이 문제에 대한 특정 명명 된 기술로 어떤 해결책을 들었다고 생각하지 않습니다.


0

스프라이트. 당신이 묘사하는 것은 3D 게임 엔진의 2D 스프라이트가 저렴하게 렌더링하는 것처럼 들립니다 (Nintendo64는 많은 초기 3D 엔진과 마찬가지로이 작업을 수행했습니다).

행성 회전을 렌더링하려면 미리 렌더링 된 행성 회전 인 스프라이트 시트를 기반으로 애니메이션 된 2D 스프라이트 만 표시하면됩니다. 예를 들어 애니메이션 .GIF와 같습니다. 문제는 미리 렌더링 된 것이므로 사용자가 시야각을 조작 할 수없는 경우에만 작동합니다.

http://en.wikipedia.org/wiki/Sprite_(computer_graphics )


0

여러 프레임이있는 하나의 텍스처를 사용하는 단순한 애니메이션 일 수 있습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.