জিএলএসএল ফ্রেগমেন্ট শেডার দিয়ে এই ধরণের রিপলগুলি কীভাবে প্রয়োগ করা যায়?

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প্রথমটি অফসেট দিয়ে শুরু করব এবং কীভাবে আরও কার্যকরভাবে সামঞ্জস্য করতে পারি তা দেখুন।

— teodron

এই ইঙ্গিতগুলির জন্য আপনাকে অনেক ধন্যবাদ। @ লেফাউয়ের বাস্তবায়নের চেষ্টা করার পরে এটিই আমার প্রয়োজন।

— সিপ্রো

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 স্থানাঙ্কটিকে উল্টাতে হয়েছিল, তবে এটি আপনি রেজোলিউশন.অ্যাক্সেসে যা পাস করেছেন তার উপর নির্ভর করে; যদি ফলাফলটি আপনার জন্য উল্টানো হয় তবে কেবল uv.y আনইভার্ট করুন
• আমি আপনার অভিন্ন ঘোষণা পরিবর্তন করেছি যাতে এটি শেডারটোয়ের সাথে কাজ করে y আপনি এই পরিবর্তনগুলি উপেক্ষা করতে পারেন।
• আপনার প্রয়োজন সময় দেওয়ার সাথে সাথে একটি ইউনিফর্ম যুক্ত করতে এবং এটি আইগ্লোবালটাইমের জায়গায় ব্যবহার করতে হবে (যা সেকেন্ডের মধ্যে সময়)
• আমি একটি জোয়ার প্রভাব যুক্ত করেছি যেহেতু দেখে মনে হচ্ছে আপনার উদাহরণে এটি রয়েছে তবে এটি বলা শক্ত (সেপওফেট পরিবর্তনশীল দেখুন)। আপনি যদি এটি পছন্দ না করেন তবে এটি সরিয়ে ফেলতে পারেন
• ওভারলে রঙটি ভাল দেখাচ্ছে না বলে এটি অপসারণ করেছি এবং আপনার উদাহরণটির কোনওটি নেই
• আপনার স্বাদে প্রভাবটি ঝাপটানোর জন্য:
  • আইগ্লোবালটাইমের গুণককে গতিবেগ / স্লোডাউন এফেক্টে পরিবর্তন করুন (আপনি চাইলে এগুলির প্রত্যেককে আলাদাভাবে পরিবর্তন করতে পারেন, যাক এক্স আন্দোলনকে ত্বরান্বিত করুন এবং y আন্দোলনকে ধীর করে দিন)
  • কোস () ফ্যাক্টরটি প্রভাবকে প্রশস্ত করতে / বাড়িয়ে তুলুন change

সম্পাদনা: আমি @cepro থেকে পরিবর্তন অন্তর্ভুক্ত করার জন্য yoffset পরিবর্তন করেছি

Comments

মহান প্রচেষ্টা! +1

— টিওড্রন

আপনার সাহায্যের জন্য ধন্যবাদ :). এটি সত্যিই একটি খুব কাছাকাছি ফলাফল দেয়। তবে আমি মনে করি এটি একটি শেষ উপাদানকে মিস করে। ছবিটিতে লক্ষ্য করুন, দেখুন যে রিপলগুলি ক্যামেরার নিকটে (পর্দার নীচে) তারা যত বড় হয় (উল্লম্বভাবে প্রসারিত)। সুতরাং আমরা আমাদের uv.y দ্বারা অফসেট স্কেল প্রয়োজন? ফ্লাট ইয়ফসেট = ((০.০ - uv.y) /0.3) * 0.05 * (1.0 + কোস (iGlobalTime * 3.0 + 50.0 * uv.y)) ;. আমি এটি চেষ্টা করেছি এবং ফলাফলটি পছন্দ করি।

— সিপ্রো

নিকটতম রিপলগুলি @cepro এর জন্য ভাল ক্যাচ। আমি এটি মিস করেছি

— লেফাউভ

আইএমওতে পরিবর্তিত তরঙ্গ পেট্রনটিতে কিছু সমস্যা আছে। আমার জন্য তরঙ্গগুলি বাড়ার সময়, তারা তাদের মধ্যে সেই বিজোড় "মিররড" প্যাটার্ন পেয়েছে (সর্বশেষ ক্রোমে জিটিএক্স 680)।

— মারিও