जीएलएसएल टुकड़ा shader के साथ इस तरह के तरंगों को कैसे लागू किया जाए?

Question

इसलिए मैंने पहले ही प्रतिबिंब भाग को लागू कर दिया है:

uniform sampler2D texture;
uniform vec2 resolution;
uniform vec3 overlayColor;

void main()
{
vec2 uv = gl_FragCoord.xy / resolution.xy;

if (uv.y > 0.3)// is air - no reflection or effect
{
    gl_FragColor = texture2D(texture, vec2(uv.x, uv.y));
}
else
{
    // Compute the mirror effect.
    vec4 color = texture2D(texture, vec2(uv.x, 0.6 - uv.y));
    // 
    vec4 finalColor = vec4(mix(color.rgb, overlayColor, 0.25), 1.0);
    gl_FragColor = finalColor;
}
}

स्रोत

अब सवाल यह है कि इन तरंगों को कैसे लागू किया जाता है?

Comments

यह कोई पूर्ण उत्तर नहीं है, लेकिन संकेत की एक श्रृंखला: आपको प्रभाव को "चेतन" करने के लिए एक समान की आवश्यकता है - अर्थात एक समय जैसा चर। उस timeमूल्य का उपयोग करके , आप uv.xyएक (sin(time),cos(time))ऑफसेट वेक्टर के साथ शिफ्ट कर सकते हैं । बेशक, आपको साइन और कोसाइन ऑफसेट के आयामों का पता लगाना चाहिए। मैं uv.yपहले ऑफसेट करने के साथ शुरू करता हूं और देखता हूं कि मैं कैसे प्रभाव को और अधिक समायोजित कर सकता हूं।

— तेयोद्रोन

इन संकेतों के लिए बहुत बहुत धन्यवाद। यह पता चला है कि @ LeFauve के कार्यान्वयन की कोशिश के बाद मुझे इसकी आवश्यकता है।

— सेप्रो

Answer 1

मैंने कोशिश की कि टेओड्रन ने क्या सुझाव दिया:

void main()
{
    vec2 uv = gl_FragCoord.xy / resolution.xy;
    float sepoffset = 0.005*cos(iGlobalTime*3.0);
    if (uv.y > 0.3 + sepoffset)// is air - no reflection or effect
    {
        gl_FragColor = texture2D(texture, vec2(uv.x, -uv.y));
    }
    else
    {
        // Compute the mirror effect.
        float xoffset = 0.005*cos(iGlobalTime*3.0+200.0*uv.y);
        //float yoffset = 0.05*(1.0+cos(iGlobalTime*3.0+50.0*uv.y));
        float yoffset = ((0.3 - uv.y)/0.3) * 0.05*(1.0+cos(iGlobalTime*3.0+50.0*uv.y));
        vec4 color = texture2D(texture, vec2(uv.x+xoffset , -1.0*(0.6 - uv.y+ yoffset)));
        // 
        //vec4 finalColor = vec4(mix(color.rgb, overlayColor, 0.25), 1.0);
        gl_FragColor = color;
    }
}

यह बहुत करीब दिखता है (यह आधार छवि के बिना बताना मुश्किल है) लेकिन आप मापदंडों को ट्विक कर सकते हैं।

आप इसे वहां कार्रवाई में देख सकते हैं: https://www.shadertoy.com/view/Xll3R7

कुछ टिप्पणी:

• जब मैं छवि को उल्टा कर रहा था, तो मुझे y निर्देशांक को पलटना पड़ा, लेकिन यह इस बात पर निर्भर हो सकता है कि आप रिज़ॉल्यूशन में क्या कर रहे हैं। यदि परिणाम आपके लिए उलटा है, तो बस यूएनवीटी पर जाएं
• मैंने आपकी वर्दी घोषणाओं को बदल दिया है इसलिए यह shadertoy के साथ काम करता है। आप उन परिवर्तनों को अनदेखा कर सकते हैं।
• हालांकि आपको समय प्रदान करने वाली वर्दी को जोड़ने और iGlobalTime के स्थान पर इसका उपयोग करने की आवश्यकता होगी (जो सेकंड में समय है)
• मैंने एक ज्वार प्रभाव जोड़ा क्योंकि ऐसा लगता है कि आपके उदाहरण पर एक है, लेकिन यह बताना मुश्किल है (सीपॉफ़सेट चर देखें)। यदि आप इसे पसंद नहीं करते हैं तो आप इसे हटा सकते हैं
• मैंने ओवरले रंग को हटा दिया क्योंकि यह अच्छा नहीं लग रहा था, और आपका उदाहरण एक नहीं था
• अपने स्वाद के लिए प्रभाव को ट्विक करने के लिए:
  • प्रभाव को गति / धीमा करने के लिए iGlobalTime के कारक को बदलें (यदि आप चाहें तो उनमें से प्रत्येक को अलग से बदल सकते हैं, मान लें कि x आंदोलन को तेज करें और y आंदोलन को धीमा करें)
  • प्रभाव को बढ़ाने / बढ़ाने के लिए cos () कारक को बदलें

संपादित करें: मैंने @cepro से संशोधन को शामिल करने के लिए यॉफसेट को बदल दिया

Comments

महान प्रयास! +1

— तेओद्रोन

आपके सहयोग के लिए धन्यवाद :)। यह वास्तव में एक बहुत करीब परिणाम देता है। लेकिन मुझे लगता है कि यह एक अंतिम घटक को याद करता है। ध्यान दें, तस्वीर में, कि कैमरे के करीब (स्क्रीन के नीचे) जितने बड़े होते हैं, उतने ही बड़े होते हैं (लंबवत स्ट्रेच)। तो शायद हमें uv.y द्वारा y ऑफसेट करने की आवश्यकता है? float yoffset = ((0.3 - uv.y) /0.3) * 0.05 * (1.0 + cos (iGlobalTime * 3.0 + 50.0 * uv.y)) ;; मैंने यह कोशिश की है और मुझे परिणाम पसंद आया है।

— 17

करीब लहरों के लिए अच्छा पकड़ @cepro। मैंने इसे याद किया

— LeFauve

IMO संशोधित तरंग पेटर्न के साथ कुछ गड़बड़ है। जब मेरे लिए लहरें बढ़ती हैं, तो उन्हें उन विषम "मिरर" पैटर्न (नवीनतम क्रोम में GTX 680) मिला है।

— मारियो