게이트 내부의 크로노 트리거에서 전환을 복제하는 그래픽 프로그래밍

최근에 처음으로이 게임을 시작했는데 실제로 내 관심이 절정에 달했습니다

~ 12 : 08에서 시작하여 모션의 전환을 볼 수 있습니다

거기에 흥미로운 수학이있는 것 같습니다. 서로 다른 두 가지 뷰가 결합 된 것으로 보입니다. 파란색 잔물결이 배경에서 먼저 렌더링 된 다음 자주색 진동 파가 일종의 유사 3D 투영에서 렌더링되는 것처럼 보입니다.

그러나 그들이이 결과에 정확히 도달 한 것은 저를 넘어서고 호기심은 저보다 더 나아졌습니다.

많은 사람들이 이것이 특히 어떻게 수행되는지 알 것이라고는 기대하지 않지만 누군가가 광범위한 그래픽 프로그래밍을 수행했다면 아마도 나를 깨우칠 수도 있습니다.

쉐이더를 사용하여 효과를 복제하려고했습니다.

Shader00 센터 : https://www.shadertoy.com/view/XsXSz2

Shader01 측면 : https://www.shadertoy.com/view/4sXSz2

:) Byte56이 말했듯이 세 개의 평면을 설정할 수 있습니다. RandyGaul이 언급했듯이 Shader00을 사용하여 카메라를 정면으로 향한 평면과 Shader01을 사용하는 평면 2 개는 깊이의 착시를주기 위해 상단 / 하단이 균일하지 않게 조정됩니다.

그들은 확신 할만한 충분한 3D 모양을 제공해야한다고 생각합니다.

두 셰이더는 모두 YouTube 링크와 정확히 동일하지 않습니다 (또한 초안에 가깝습니다). 그러나이 셰이더가 자신 만의 버전을 만들 수있는 공간을 제공 할 수 있다고 생각합니다.

튜토리얼 : 간단한 스트라이프 패턴 만드는 법.

평면의 각 점에는 좌표가 있습니다. 셰이더 효과를 만들려고하면 기본적으로 평면에 2D 수학이 표시됩니다. 여기 간단한 예를 소개하겠습니다.

//This shader will visualize coordinates 
vec2 uv = gl_FragCoord.xy / iResolution.xy;
gl_FragColor = vec4(uv.x,uv.y,0,1);

빨간색은 x 좌표를 나타내고 녹색 색조는 y 좌표를 나타냅니다. 지금은 가장 간단한 셰이더 효과를 만들고 싶습니다. 스트라이프. 이 튜토리얼에서는 uv.y 값이 필요하지 않습니다.

vec2 uv = gl_FragCoord.xy / iResolution.xy;
gl_FragColor = vec4(uv.x,0,0,1);

오른쪽으로 향할 때 붉은 색조가 강해지는 것을 볼 수 있습니다. 오른쪽으로 이동하면 좌표의 x 값이 높아지기 때문입니다. 왼쪽 끝 x 좌표는 0에서 시작하고 오른쪽 끝 x 좌표는 1입니다.

이 기본 이해가 있으므로 "직관적 인"것을 시도해 봅시다

vec2 uv = gl_FragCoord.xy / iResolution.xy;
float color = 0.0;
if(uv.x < .5 ) color= 1.0 ;
gl_FragColor = vec4(color,0,0,1);

거기에 스트라이프 패턴이 있습니다. 잠깐만 ... 그건별로 안좋아 보인다. 예, 이것은 단지 빨간색과 검은 색입니다. 스트라이프 패턴은 두 개 이상의 색상 섹션으로 구성됩니다. 그곳에...!

vec2 uv = gl_FragCoord.xy / iResolution.xy;
float color = 0.0;
if(uv.x < .2 ||(uv.x >.4 && uv.x < .6) || (uv.x > .8 && uv.x <1.0 )) color= 1.0 ;
gl_FragColor = vec4(color,0,0,1);

그러나 N 개의 스트라이프를 만들고 싶다면 어떻게해야합니까?

내가 표시하려고하는 것은 전통적인 프로그래밍 "logic"을 사용하여 셰이더 프로그래밍에 접근하려고하면 실패 할 가능성이 있다는 것입니다. 쉐이더와 관련해서는 수학에 관한 것입니다.

수학에 대해 말하면 "스트라이프"패턴과 가장 유사한 패턴은 무엇입니까? 다시 말해, 줄무늬처럼 보이는 방정식은 무엇입니까? 예. Y = sin (X). 그러나 X 값의 범위는 0.0 ~ 1.0입니다. Y = sin (X)를 사용하려는 경우 x 값의 범위는 0.0 ~ 6.28 (대략 2 PI)입니다.

vec2 uv = gl_FragCoord.xy / iResolution.xy;
float x = uv.x * 2.0 *PI; 
float y = sin(x);
gl_FragColor = vec4(y,0,0,1);

이제 방정식에 의해 생성 된 패턴의 관점에서 "스트라이프"가 생겼습니다. 우리는 왜이 접근법을 취해야합니까? 이것이 더 빠를뿐만 아니라 N 개의 스트라이프를 갖기 위해 추악한 "if"조건을 작성할 필요가 없습니다. 하나 이상의 스트라이프를 원한다면 최대 X 값을 더 늘려서 단순히 패턴을 확장 할 수 있습니다.

vec2 uv = gl_FragCoord.xy / iResolution.xy;
float x = uv.x * (2.0 *PI * 10.0); //ta dan!
float y = sin(x);
gl_FragColor = vec4(y,0,0,1);

이 셰이더가 초기 셰이더와 같은 완벽한 스트라이프를 생성하지는 않지만 실제로는 더 적합한 방정식을 작성하기 만하면됩니다!

vec2 uv = gl_FragCoord.xy / iResolution.xy;
float x = uv.x * (2.0 *PI * 10.0);
float y = sin(x) / abs(sin(x) );
gl_FragColor = vec4(y,0,0,1);

위예 ~~~

다음 : 물결 모양의 스트라이프 패턴을 만드는 방법