วิธีการใช้ ripples ชนิดนี้ด้วยตัวแยกส่วน GLSL?


11

ดังนั้นฉันจึงได้นำส่วนการสะท้อนกลับมาใช้แล้ว:

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;
}
}

แหล่ง

ตอนนี้คำถามคือระลอกเหล่านี้มีการใช้งานอย่างไร?


3
นี่ไม่ใช่คำตอบที่สมบูรณ์ แต่มีชุดของคำแนะนำ: คุณต้องมีชุดเอฟเฟกต์ "เคลื่อนไหว" - นั่นคือตัวแปรแบบเวลา เมื่อใช้timeค่านั้นคุณสามารถเลื่อนuv.xyด้วย(sin(time),cos(time))เวกเตอร์ตรงข้าม แน่นอนคุณต้องหาแอมพลิจูดของไซน์และโคไซน์ออฟเซ็ต ฉันเริ่มด้วยการชดเชยสิ่งuv.yแรกและดูว่าฉันจะสามารถปรับเอฟเฟกต์เพิ่มเติมได้อย่างไร
Teodron

ขอบคุณมากสำหรับคำแนะนำเหล่านี้ ปรากฏว่านี่คือสิ่งที่ฉันต้องการหลังจากลองใช้งาน @ LeFauve
cepro

คำตอบ:


11

ฉันพยายามใช้สิ่งที่ Teodron แนะนำ:

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 (ซึ่งเป็นเวลาในหน่วยวินาที)
  • ฉันเพิ่มเอฟเฟกต์น้ำขึ้นน้ำลงเนื่องจากดูเหมือนว่ามีตัวอย่างอยู่ในตัวอย่างของคุณ แต่มันยากที่จะบอก (ดูตัวแปร sepoffset) คุณอาจลบมันหากคุณไม่ชอบมัน
  • ฉันลบสีที่ซ้อนทับออกเนื่องจากไม่ได้ดูดีและตัวอย่างของคุณไม่มี
  • ในการปรับแต่งเอฟเฟ็กต์ที่คุณชอบ:
    • เปลี่ยนปัจจัยของ iGlobalTime เพื่อเร่งความเร็ว / ลดเอฟเฟกต์ (คุณสามารถเปลี่ยนแต่ละส่วนแยกกันถ้าคุณต้องการสมมติว่าเร่งการเคลื่อนไหว x และชะลอการเคลื่อนไหว y)
    • เปลี่ยนค่า cos () เพื่อขยาย / ลดผลกระทบ

แก้ไข: ฉันเปลี่ยน yoffset เพื่อรวมการแก้ไขจาก @cepro


1
เยี่ยมมาก! +1
teodron

3
ขอขอบคุณสำหรับความช่วยเหลือของคุณ :). นี่จะให้ผลลัพธ์ที่ใกล้เคียงกันจริงๆ แต่ฉันคิดว่ามันพลาดส่วนประกอบสุดท้าย โปรดสังเกตว่าในภาพนั้นระลอกคลื่นที่อยู่ใกล้กับกล้องมากขึ้น (ด้านล่างของหน้าจอ) ยิ่งมีขนาดใหญ่เท่าไร (ยืดในแนวตั้ง) ดังนั้นเราอาจต้องปรับสเกล y ตรงข้ามโดย uv.y? float yoffset = ((0.3 - uv.y) /0.3) * 0.05 * (1.0 + cos (iGlobalTime * 3.0 + 50.0 * uv.y)); ฉันได้ลองแล้วฉันก็ชอบผลลัพธ์
cepro

จับได้ดีสำหรับระลอกคลื่นที่ใกล้ชิด @cepro ฉันพลาดมัน
LeFauve

IMO มีบางอย่างผิดปกติกับคลื่นที่ถูกดัดแปลง ในขณะที่คลื่นเพิ่มขึ้นสำหรับฉันพวกเขามีรูปแบบ "มิร์เรอร์" แปลก ๆ ในนั้น (GTX 680 ใน Chrome ล่าสุด)
Mario
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.