Pemrograman grafis mereplikasi transisi dari Chrono Trigger di dalam gerbang

9

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.

oxysoft
sumber
2
Tampak seperti 3 pesawat, satu di atas, satu di bawah dan satu menghadap kamera.
MichaelHouse
Pesawat di atas / bawah juga diskalakan tidak seragam untuk memberikan ilusi kedalaman. Tidak ada "kamera", hanya beberapa hal scaling atau tidak. Yang "menghadap kamera" mungkin hanya sebuah animasi atau sesuatu, atau ubin animasi yang pintar.
RandyGaul
1
Lihatlah artikel Wikipedia ini: en.wikipedia.org/wiki/Mode_7
Neverender

Jawaban:

11

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

masukkan deskripsi gambar di sini

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

masukkan deskripsi gambar di sini

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

masukkan deskripsi gambar di sini

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

masukkan deskripsi gambar di sini

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

masukkan deskripsi gambar di sini

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

masukkan deskripsi gambar di sini

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

masukkan deskripsi gambar di sini Weeee ~~~

Berikutnya: Cara membuat pola garis bergelombang.

Tofu_Craving_Redish_BlueDragon
sumber
1
Chrono Trigger awalnya dirilis untuk SNES, yang tidak memiliki pesawat, tetapi memiliki Mode 7 . Konsep yang sama, hanya detail teknis.
Icy Defiance
2
Mungkin Anda bisa menambahkan jawabannya dengan menjelaskan bagaimana shader dibuat? Kalau tidak, jika tautannya mati, jawaban ini sebagian besar tidak berguna.
MichaelHouse
Setuju dengan Byte56, di mana seseorang dapat mempelajari pengetahuan untuk membuat glsl shaders seperti ini dan apa proses pemikiran Anda saat menuliskannya?
oxysoft
1
@oxysoft Jenis shader ini lebih merupakan variasi dari shader efek cahaya tradisional. Sespesifik mereka, tidak ada banyak sumber daya yang mencakup "bagaimana membuatnya". Namun itu tidak berarti Anda tidak dapat menemukan contoh. Coba shadertoy.com dan situs web "fun shader" lainnya untuk melihat banyak contoh hebat tentang apa yang dapat Anda lakukan dengan shader. Metode terbaik, bagi Anda untuk belajar cara membuatnya, (saya pikir) adalah mempelajari praktik shader umum dan mempelajari contoh "fun shader" yang ditemukan di internet.
Tofu_Craving_Redish_BlueDragon