Webgl : 2D의 물 효과

Question

webgl에서 삼각형을 사용하여 간단한 다각형을 렌더링했습니다. 이제 파급 효과 나 굴절 효과가있는 푸른 물처럼 보이기를 바랍니다. 메쉬가 없으므로 조각 쉐이더 만 사용할 수 있습니다. 어떤 제안이 이것을 달성하는 방법?

Answer 1

물에는 푸른 빛, 부식제에는 검은 색과 흰색 바닥, 바닥에는 석재 질감과 같은 여러 가지 질감을 사용하십시오. 그런 다음 시간이 지남에 따라 텍스처를 왜곡하고 최대 다른 효과를 시뮬레이트하는 조각 셰이더를 작성하십시오.

희망이 도움이됩니다.

Answer 2

몇 년 전에이 VFX shadertoy Water2D demo을 조합했습니다. 그것은 반사를하지 않으며, 카메라는 곧바로 아래로 똑바로보고 있지만 어쩌면 시작하는 데 도움이 될 것입니다.

const float speed  = 0.2;      
const float frequency = 8.0;     

vec2 shift(vec2 p) 
{       
    float d = iGlobalTime*speed; 
    vec2 f = frequency * (p + d); 
    vec2 q = cos(vec2(      
     cos(f.x-f.y)*cos(f.y),      
     sin(f.x+f.y)*sin(f.y)));     
    return q;         
}            

void mainImage(out vec4 fragColor, in vec2 fragCoord) 
{         
    vec2 r = fragCoord.xy/iResolution.xy;      
    vec2 p = shift(r);    
    vec2 q = shift(r + 1.0);       
    float amplitude = 2.0/iResolution.x; 
    vec2 s = r + amplitude * (p - q); 
    s.y = 1. - s.y; // flip Y axis for ShaderToy 
    fragColor = texture(iChannel0, s); 
}