음영처리기를 사용하여 동적 애니메이션 만들기

나는 ilithya의 착색기 시연에 관심을 가진 지 이미 한참이 되었다. 몇 주 전에 나는 그녀에 관한 일을 쓰고 싶었지만, 곧 나는 내가 착색기에 대한 깊이가 없다는 것을 알게 되었다.반면 일리야는 몸을 풀기 위해 Introduction to Shaders기를 썼다.지금 경기일이에요!
만약 당신이 착색기 초보자라면, 아직 Introduction to Shaders 1기를 읽지 않았다면, 이것은 좋은 시작이 될 것이다.그것은 우리가 덮어쓰는 착색기를 더욱 쉽게 이해할 수 있도록 개념적 기반을 제공했다.

여름 스크린

우리는ilithya가 이 훌륭한 착색기를 어떻게 만드는지 깊이 있게 이해합시다Summer Screen.
여기 일이 좀 생겼어요.우선, 우리는 이 수직선을 얻었고, 그것들은 왔다 갔다 이동했다.그리고 나서 우리는 해변의 색깔 파도처럼 꼭대기와 밑바닥으로 들어가는 사다리를 얻었다.우리 이 두 가지 영향을 계산합시다.
우선, 우리는 GLSL 코드의 단축 버전을 보고 무슨 일이 일어났는지 이해할 것이다.너는 이곳에서 새로운 언어와 수학을 볼 수 있지만, 걱정하지 마라!우리는 천천히 그것들을 통과할 것이다.

// Create three static colors
vec3 colorA = vec3(0.5, 0., 0.5); // Purple
vec3 colorB = vec3(1.0, 0.41, 0.71); // Pink
vec3 colorC = vec3(0.0, 1.0, 1.0); // Teal blue

// Create three dynamic colors
vec3 color1 = mix(colorA, colorB, fract(x*fr+cos(u_time)));
vec3 color2 = mix(colorB, colorC, (y-sin(u_time))*0.5);
vec3 color3 = mix(color1, color2, x*cos(u_time+2.));

// Our color output
gl_FragColor = vec4(color3, 1.0);

먼저 해결해야 할 것은 GLSL은 유형화된 언어이기 때문에 변수를 설명할 때 그 유형을 설명해야 한다.
우리에게 있어서 Afloat는 소수점을 가진 숫자로 여겨질 수 있다.
우리로서는 vec3 세 개의 값을 가진 특수한 자바스크립트 그룹과 비슷하다.vec4비vec3보다 한 값이 많고 착색기main() 함수의 출력에 필요한 값입니다.이 네 가지 값은 빨간색, 녹색, 파란색, 알파와 일치합니다.
우선ilithya창설colorA,colorB과colorC.모든 색깔은 정적이어서 변하지 않는다.

그런 다음 이 색상과 다른 변수를 사용하여 변경될 동적 색상을 만듭니다.우리 먼저 수직선을 봅시다.

수직선

수직선에 대해 확대하여 이곳에 도대체 무슨 일이 일어났는지 봅시다.

이 선들은 실제로 어두움에서 밝음까지의 반복 사다리꼴이다.
GLSL을 사용하여 사다리를 생성하려면 mix 함수를 사용합니다.mix: 범위의 시작, x: 범위의 끝, y: a와 x 사이의 점 세 가지 파라미터를 받아들인다.

// vec3 mix(vec3 x, vec3 y, vec3 a)
vec3 color1 = mix(colorA, colorB, fract(x*fr+cos(u_time)));

아이리샤는 보라색과 핑크색 사이에서 점차적으로 변하고 있다는 것이 그녀의 앞의 두 가지 논점이다.y의 값에 근거하여 색깔은 서로 다른 양으로 혼합되며, 이 값은 a부터 0까지의 값이다.만약 1 이 a 라면, 우리는 첫 번째 색깔의 백 퍼센트를 볼 수 있을 것이다.만약 0 이 a 라면, 우리는 두 번째 색깔의 백 퍼센트를 볼 수 있을 것이다.둘 사이의 어떤 것도 우리는 하나의 융합을 얻을 수 있다.

이것은 우리에게 사다리를 줄 수 있지만, 우리는 어떻게 중복된 사다리를 얻을 수 있습니까?
사다리를 다시 1 정지하고 시작하기 위해 ilithya는 0 라는 GLSL 함수를 사용했다.이것은 숫자의 점수를 되돌려주고 정수를 삭제합니다.fract는 JavaScript의 fract(x) 또는 x - Math.floor(x)와 동일합니다.따라서 x % 1이 증가함에 따라 x 은 시종 0과 1 사이의 변동이 될 것이다.
나는 그것을 그녀의 문장에 없는 부분으로 간소화하여 fract(x) 함수가 어떻게 작동하는지 보여줄 것이다.

보시다시피 fract가 끊임없이 증가해도 x의 결과는 소수점 뒤의 점수나 그 어떠한 소수점 뒤의 숫자만 되돌아와 우리에게 같은 보라색을 준다.이 말을 전체 문장으로 번역하면 일리시아의 멋진 세로줄을 얻을 수 있다!
잠시 후에 우리는 이 부분들의 애니메이션에 대해 토론할 것이다.

분홍색과 파란색 그라데이션

지금 우리는 fract(x)로 넘어간다.

vec3 color2 = mix(colorB, colorC, (y - sin(u_time)) * 0.5);

또 다른 혼합은 이번에는 분홍색과 파란색 사이에 있다.이번에는 color2이 없어서 우리는 매끄러운 사다리를 얻었다.fract 값을 사용하여 아래에서 위로 색상을 변경합니다.우리는 곧 y위에 대해 이야기할 것이다.

그것들을 한데 모으다

그리고 그녀는 sin(u_time)과color1를 조합하여 사용한 혼합량은 오른쪽color2에 가깝다.수평 변화는 1값으로 인한 것이다.x 애니메이션에 사용됩니다.

vec3 color3 = mix(color1, color2, x*cos(u_time+2.));

다음은 음영처리기 섹션 및 최종 색상 출력의 단순화 버전입니다.

너는 우리의 간소화 버전이 완성된 착색기와 유사해 보이지만, 애니메이션이 부족할 뿐이다.

애니메이션

여름 스크린에는 세 가지 주요 애니메이션이 있다.

봉은 cos(u_time+2)에서 좌우로 이동한다

분홍색과 파란색이 점차적으로 color1 위아래로 이동

color2 좌우이동

의 혼합값
그중 하나하나는 현재 시간의 값과 익숙한 수학 함수color3와sin를 사용한다.

vec3 color1 = mix(colorA, colorB, fract(x*fr+cos(u_time)));
vec3 color2 = mix(colorB, colorC, (y-sin(u_time))*0.5);
vec3 color3 = mix(color1, color2, x*cos(u_time+2.));

이 cos 값은 3입니다.jstime, 이것이 바로 ilithya가 대부분의 착색기를 위해 애니메이션을 설정하는 방식이다.페이지가 로드된 이후elapsed time로 돌아갑니다.
만약 네가 세 가지를 모른다면 걱정하지 마라.js.ilithya가 사용하는 코드는 다시 사용할 수 있는 샘플 파일로 착색기 코드를 더욱 간단하게 합니다.우리는 세 개의 코드 중 조금이 아니라 더 많은 GLSL 코드를 가지고 있어야 한다.js.이것은 편리한 WebGL 추상이다.
ilithya가 Clock 또는 sin(u_time) 를 호출할 때, 그녀는 -1과 1 사이의 값을 되돌려주고, 그것은 안정적으로 과도할 것이다.만약 당신이 CSS 애니메이션에 익숙하다면, 매우 비슷하다 cos(u_time).
초고속 정현파 리셋기:
우리가 수평축을 따라 값을 늘릴 때, 정현파는 우리를 위로 이동시키고, ease-in-out 에서 최고치에 도달하고, 우리를 아래로 이동시키고, 1 에서 바닥에 닿은 후에 다시 기어오르게 한다.수평치가 높든 높든 이 값의 정현은 시종 0 과 -1 사이에 있다.여현의 작업 원리는 유사하지만 서로 다른 값을 제시했다.

여기 있다!세 개의 다른 부분을 혼합하여 애니메이션을 만들어 좋은 애니메이션을 만든다.

네가 깨.

그녀가 나를 도와 그것을 이해할 때, ilithya는 나에게 착색기 코드의 값을 교환하도록 격려했다.나는 네가 이 일을 하도록 강력히 건의한다.
분리된 수직 막대를 보려면 다음 행으로 음영처리기 코드의 마지막 행을 변경합니다.

gl_FragColor = vec4(color1, 1.0);

수직 분홍색과 파란색 그라데이션을 보려면:

gl_FragColor = vec4(color2, 1.0);

또는 단색 화면을 보려면 -1, 1 또는 colorA로 변경할 수 있습니다.그것을 가지고 놀아라, 즐겁게 놀아라, 그것이 어떻게 일을 하는지 똑똑히 알아라.
Check out Summer Screen →

부푸러캔디

나는 이 착색기가 어떻게 작동하는지 깊이 토론하지 않을 것이다. 그러나 그것을 보면 정말 마음이 탁 트이고 기분이 상쾌하다. 나는 어쩔 수 없이 그것을 공유해야 한다.만약 당신이 다음 호에서 읽고 싶다면 저에게 알려주세요.
Check out Bubble Gum →

음영처리기 리소스

Ilithya는 착색기를 배울 수 있는 좋은 자원을 공유했다blog.여러분이 추천하는 자원은 The Book of Shaders 입니다. 관심이 있다면 꼭 보세요.