Pemrograman grafis mereplikasi transisi dari Chrono Trigger di dalam gerbang

Saya mulai memainkan game ini untuk pertama kalinya belakangan ini dan ini benar-benar memikat minat saya

Anda dapat melihat transisi dalam gerakan mulai dari ~ 12: 08

Tampaknya ada beberapa matematika menarik yang terjadi di sana. Tampaknya ada dua pandangan berbeda yang digabungkan menjadi satu. Riak-riak biru di-render terlebih dahulu di latar belakang dan kemudian gelombang-gelombang berosilasi ungu tampak di-render pada semacam proyeksi 3D semu.

Namun bagaimana tepatnya mereka sampai pada hasil ini berada di luar jangkauan saya dan rasa ingin tahu menjadi lebih baik dari saya.

Saya tidak berharap banyak orang akan tahu bagaimana ini dilakukan terutama tetapi jika ada yang telah melakukan beberapa pemrograman grafis yang luas, mungkin mereka dapat mencerahkan saya.

Saya mencoba menggandakan efek dengan menggunakan shader.

Pusat Shader00: https://www.shadertoy.com/view/XsXSz2

Sisi Shader01: https://www.shadertoy.com/view/4sXSz2

:) Anda bisa, seperti kata Byte56, mengatur tiga pesawat. Sebuah pesawat menghadap kamera langsung ke depan dengan Shader00, dan kemudian dua pesawat dengan Shader01, mungkin seperti yang disebutkan RandyGaul, atas / bawah tidak diskalakan dengan seragam untuk memberikan ilusi kedalaman.

Mereka harus, saya percaya, memberikan tampilan 3D yang cukup untuk meyakinkan.

Kedua shader tidak persis sama dengan di tautan youtube Anda (juga lebih kasar). Namun saya percaya shader ini dapat, semoga, memberi Anda tempat untuk mulai membangun versi Anda sendiri.

Tutorial: Cara membuat pola garis sederhana.

Setiap titik di pesawat memiliki koordinat. Mencoba membuat efek shader pada dasarnya memvisualisasikan matematika 2D ke pesawat. Di sini izinkan saya memperkenalkan contoh sederhana.

//This shader will visualize coordinates 
vec2 uv = gl_FragCoord.xy / iResolution.xy;
gl_FragColor = vec4(uv.x,uv.y,0,1);

Warna merah akan mewakili koordinat x dan rona hijau akan mewakili koordinat y. Untuk saat ini, kami ingin membuat efek shader paling sederhana; sebuah garis. Kami tidak memerlukan nilai uv.y untuk tutorial ini.

vec2 uv = gl_FragCoord.xy / iResolution.xy;
gl_FragColor = vec4(uv.x,0,0,1);

Anda dapat melihat bahwa rona merah menjadi intens karena mengarah ke sisi kanan. Itu karena nilai x koordinat semakin tinggi ketika Anda bergerak ke sisi kanan; ujung kiri x koordinat dimulai dari 0 dan ujung kanan x koordinat adalah 1.

Karena kita memiliki pemahaman dasar ini, mari kita coba sesuatu yang "intuitif"

vec2 uv = gl_FragCoord.xy / iResolution.xy;
float color = 0.0;
if(uv.x < .5 ) color= 1.0 ;
gl_FragColor = vec4(color,0,0,1);

Di sana Anda memiliki pola garis. Tunggu ... itu tidak beres. Ya ini hanya merah dan hitam. Pola garis terdiri dari lebih dari dua bagian warna saja. Sana...!

vec2 uv = gl_FragCoord.xy / iResolution.xy;
float color = 0.0;
if(uv.x < .2 ||(uv.x >.4 && uv.x < .6) || (uv.x > .8 && uv.x <1.0 )) color= 1.0 ;
gl_FragColor = vec4(color,0,0,1);

tetapi bagaimana jika kita ingin membuat N number of stripe?

Apa yang saya coba tampilkan adalah bahwa jika Anda mencoba mendekati pemrograman shader dengan lebih banyak "logika" pemrograman tradisional maka Anda cenderung gagal. Ketika berbicara tentang shader, ini semua tentang matematika.

Bicara soal matematika, pola apa yang paling menyerupai pola "strip"? Dengan kata lain, apa persamaan yang terlihat seperti garis? Iya. Y = sin (X). Namun nilai X kami berkisar dari 0,0 ~ 1,0 Jika kami ingin menggunakan Y = sin (X) kami ingin nilai x kami berkisar antara 0,0 ~ 6,28 (yang kira-kira 2 PI)

vec2 uv = gl_FragCoord.xy / iResolution.xy;
float x = uv.x * 2.0 *PI; 
float y = sin(x);
gl_FragColor = vec4(y,0,0,1);

Kami sekarang memiliki "stripe" dalam hal pola yang dihasilkan oleh suatu persamaan. Mengapa kita harus mengambil pendekatan ini? Tidak hanya ini bisa lebih cepat, tetapi juga menghilangkan kebutuhan menulis jelek "jika" syarat untuk memiliki N jumlah garis. Jika kita ingin memiliki lebih dari satu garis, kita dapat memperpanjang pola dengan meningkatkan nilai X maksimum lebih jauh.

vec2 uv = gl_FragCoord.xy / iResolution.xy;
float x = uv.x * (2.0 *PI * 10.0); //ta dan!
float y = sin(x);
gl_FragColor = vec4(y,0,0,1);

Anda mungkin mengatakan shader ini tidak menghasilkan garis sempurna seperti dari shader awal, tetapi sungguh, yang perlu Anda lakukan adalah menulis persamaan yang lebih pas!

vec2 uv = gl_FragCoord.xy / iResolution.xy;
float x = uv.x * (2.0 *PI * 10.0);
float y = sin(x) / abs(sin(x) );
gl_FragColor = vec4(y,0,0,1);

Weeee ~~~

Berikutnya: Cara membuat pola garis bergelombang.