안녕하세요.
인생 최초의 어드벤트 캘린더 집필이므로, 매우 긴장하고 있습니다.
개선점・잘못된 점등 있으면 바시바시 지적해 주세요.

데모

이번에는 이것을 만듭니다.


소스는 여기 👈

정점 텍스처 페치(VTF)란?

참고 : 정점 텍스처 페치(VTF)
위의 페이지에서 설명한 것처럼 정점 텍스처 페치는 텍스처의 각 픽셀의 RGBA에 데이터를 저장하고 정점 셰이더 내에서 참조하는 것입니다.

파동 방정식 계산

그러면 먼저 파동 방정식을 계산하고 그 결과를 저장하는 텍스처를 만들어 갑니다.
이 텍스처에 저장하는 데이터는
R = 파도 높이
G = 속도
합니다.

노드는 다음과 같이 구성됩니다.
feedback1의 Target TOP은 null1입니다.
constant1은 검정색으로 설정하고 Common>Pixel Format을 16-bit float(RGBA)로, Common>Resolution을 500, 500으로 설정합니다.

여기서 constant1은 초기 값을 나타냅니다.
R = 0, G = 0이므로 파도 높이의 초기값 = 0, 속도의 초기값 = 0이 됩니다.
또, Feedback TOP를 사용하는 것으로, GLSL내에서 1프레임 전의 계산 결과를 참조할 수 있게 됩니다.

이제 glsl1의 Pixel Shader를 작성해 보겠습니다.
참고 : [WebGL] 파동 방정식을 공부해 본다

precision mediump float;

uniform vec2 resolution;
uniform vec2 mouse;
uniform int isActive;

float k = 0.5;
float attenuation = 0.99;
float range = 0.01;
float force = 0.00003;

out vec4 fragColor;

void main()
{
    vec4 pre_data = texture(sTD2DInputs[0], vUV.st); 
    vec2 pixel = 1.0/resolution;
    float accel = texture(sTD2DInputs[0], vUV.xy + pixel*vec2(0,-1)).x
                + texture(sTD2DInputs[0], vUV.xy + pixel*vec2(0,1)).x
                + texture(sTD2DInputs[0], vUV.xy + pixel*vec2(-1,0)).x
                + texture(sTD2DInputs[0], vUV.xy + pixel*vec2(1,0)).x
                - texture(sTD2DInputs[0], vUV.xy).x * 4.0;

    accel *= k;
    float vel = (pre_data.y + accel) * attenuation;
    float u = pre_data.x + vel;

    if(isActive == 1){
        float len = distance(vUV.xy, mouse);
        if(len < range) u += 1.0/len*force;
    }

    fragColor = TDOutputSwizzle(vec4(u, vel, 0, 1.0));
}

fragColor의 R에는 파도 높이(u), G에는 속도(vel)를 저장합니다.

uniform 변수는 다음과 같이 설정합니다.
resolution은 constant1의 해상도에 맞춥니다.


mouse, isActive의 경우 Panel CHOP의 insideu, insidev, select 채널을 내보냅니다.


이제 마우스를 드래그한 포인트에서 파문이 나오게 되었습니다.

Particle을 움직여보세요

Particle을 움직여 계산 결과를 확인하고 싶습니다.

다음과 같이 노드를 구성합니다.
grid1의 Rows, Columns를 이전의 constant1 해상도와 동일한 500으로 설정합니다.
또한 convert1의 Convert to를 Particles로 설정하고 geo1의 Render>Material에 glsl2를 설정합니다.


다음으로, 이전에 구현한 파동 방정식의 결과를 glsl2의 정점 쉐이더로 참조해 봅시다.
glsl2의 uniform 변수에 계산 결과를 저장하는 null1을 넣습니다.


Vertex Shader는 다음과 같이 설명합니다.
텍스처의 R에 저장된 파도의 높이를 파티클의 z에 할당합니다.

uniform sampler2D result;
void main() 
{
    float height = texture(result, uv[0].xy).x;
    gl_Position = TDWorldToProj(TDDeform(vec3(P.xy, height)));
}

Pixel Shader는 적절한 색상을 지정합니다.

out vec4 fragColor;
void main()
{
    TDCheckDiscard();
    vec4 color =  vec4(0.0, 0.25, 1.0, 1.0);
    TDAlphaTest(color.a);
    fragColor = TDOutputSwizzle(color);
}

마지막으로 카메라의 위치를 ​​조정하고 Open Viewer에서 파동의 움직임을 확인해 보십시오.

참고

htps //wgld. rg / d / u bgl / w071. HTML
h tps:// 퀵했다. 작은 m/에도_m18/있어 MS/그림 8 에파 C43 아 93641c37 아 d2
h tps:// 퀵했다. 소 m/토요시 모리오카/있어 MS/91C4 그림 1427c2b4296c2아4

마지막으로

저를 포함한 대학생 4명이 미디어 아트 크리에이티브 팀 Reflect Initial (리플렉트 이니셜)을 시작하여 제작 활동을 하고 있습니다.



우리는 모두 대학에서 미디어 아트를 전공하고 있는 것은 아니고, 단지 오로지 미디어 아트를 정말 좋아한다는 생각으로부터 독학으로 배우고 제작을 하고 있습니다. 더 많은 Reflect Initial을 알고 싶어 여기에서 소개했습니다. 부디 응원 잘 부탁드립니다.

Reflect Initial의 Twitter 꼭 팔로우해 주세요!
Check it out 👉 @refect_toe