Kisah satu animasi

Suatu ketika perancang menelepon ujung depan dan meminta membuat "sarang laba-laba" di balik kaca berkabut. Tapi kemudian ternyata ini bukan "jaring laba-laba", tapi kisi heksagonal, dan bukan di belakang kaca, tetapi masuk ke kejauhan, dan front-endender tidak mengenal WebGL, dan saya harus mempelajari semua animasi dalam proses menggambar. Front-end itu adalah Yuri Artyukh ( akella ).



Yuri telah terlibat dalam penyusunan huruf untuk waktu yang lama, dan pada hari Minggu merekam aliran dengan analisis proyek nyata. Dia bukan pro di WebGL, tidak membuat peta di atasnya, tidak menulis di assembler Web, tetapi dia suka belajar sesuatu yang baru. Di FrontendConf RIT ++, Yuri mengatakan bagaimana melakukan satu animasi dari tata letak ke pengiriman ke klien sehingga semua orang senang dan mempelajari WebGL di sepanjang jalan. Cerita ini berasal dari perspektif orang pertama dan termasuk: Three.js, GLSL, Canvas 2D, grafik dan sedikit matematika.

Jaring laba-laba di balik kaca berkabut

Entah bagaimana saya duduk dan mengerjakan proyek penting. Kemudian desainer dari studio, yang memiliki efek khusus sangat disukai, menelepon dan bertanya: "Bisakah Anda membuat sarang laba-laba, seolah-olah di balik kaca berkabut?"

Ini, tentu saja, segera menggambarkan keseluruhan masalah. Ternyata kemudian, "sarang laba-laba" di balik kaca berkabut adalah ini.



Ini adalah kotak heksagonal, tetapi untuk perancang, untuk beberapa alasan, "sarang laba-laba". Gelas kaca - kotak ini masuk ke kejauhan Kesulitan komunikasi. Bayangkan betapa sulitnya menjadi seorang introvert dan membuat animasi? Tapi saya hanya seperti itu dan ini yang saya lakukan.

"Web" ini tidak terlihat seperti animasi, setelah itu Anda dapat menulis laporan tentang kasus yang sukses, membuka startup, mendapatkan investasi miliaran, memiliki banyak penggemar dan meluncurkan roket ke luar angkasa. Tentang apa semua ini? Garis coklat pada latar belakang putih-abu-abu, seolah-olah digambar oleh tikus. Kemudian ternyata dia harus berjalan di sepanjang tepi, tetapi lebih pada nanti. Secara umum, nama kode adalah "web di balik kaca berkabut."

Di situs dengan animasi ini ada beberapa opsi lagi untuk "web laba-laba": pada latar belakang abu-abu di atas, pada putih di bawah. Itu perlu untuk membuatnya interaktif sehingga merespons pergerakan mouse pengguna.

Hal pertama yang ditanyakan oleh perancang kepada saya adalah seberapa sulit dan berapa biayanya. Beberapa pemikiran melintas di benak saya: cara menggambar garis dan Grid seperti itu, bagaimana membuatnya tidak melambat, bagaimana cara kerjanya sama sekali. Saya belum pernah mengalami ini sebelumnya. Tetapi, sebagai orang yang terlibat dalam pengembangan, dia menjawab: " Itu, mudah, kita akan melakukannya ..."

Saya suka terlibat dalam petualangan aneh, karena ketika saya melakukan ini, saya biasanya menderita.

Melalui penderitaan datanglah pertumbuhan. Ini tidak dapat dihindari terkait dengan penderitaan - Anda tidak bisa bahagia dengan segalanya, hidup bahagia, dan pada saat yang sama berkembang secara profesional.

Three.js

Saya segera mulai berpikir bagaimana menyelesaikan masalah. Karena semuanya dalam 3D, saya ingat Three.js . Ini adalah perpustakaan paling populer yang dibicarakan di semua konferensi. Perpustakaan ini membuat WebGL lebih sederhana, lebih nyaman dan lebih menyenangkan daripada hanya WebGL asli.

Three.js memiliki banyak objek siap pakai. PlaneGeometry adalah objek pertama yang tampak sempurna bagi saya. Ini adalah bidang primitif. Perpustakaan memiliki segala macam segi enam, dodecahedron, icosahedron, silinder, tetapi ada pesawat sederhana dari banyak segitiga.


Ada banyak segitiga, karena saya membutuhkan ombak yang terperinci - permukaannya harus khawatir.

Jika Anda melihat ke dalam Three.js, maka sebenarnya pesawat ini adalah objek JS sederhana dengan daftar semua koordinat titik.



Dalam kasus saya, saya memiliki bidang 50x50 kotak, jadi saya membutuhkan 2601 simpul. Mengapa 50 × 50 = 2601? Ini matematika sekolah. Koordinat z = 0, karena bidang, y = 1, karena ini adalah baris pertama dari simpul 50 buah, dan x berubah.

Tetapi mengapa saya membutuhkan pesawat, apakah saya perlu menekuknya? Hal pertama yang dapat Anda lakukan dengan array adalah melakukan operasi matematika di dalamnya. Misalnya, buka for each loop dan tetapkan koordinat z ke nilai sinus koordinat x.



Ternyata sesuatu yang mirip dengan gelombang sinus, karena nilai tinggi setiap simpul akan sama dengan sinus nilai ini sepanjang sumbu x. Untuk menyulitkan ini entah bagaimana (sekarang akan menjadi momen matematika yang sulit, bersiap-siaplah) - Saya akan menambahkan waktu ke sinus, dan kanvas ini akan bergerak, hanya karena matematika bekerja seperti ini. Jika Anda menambahkan waktu ke koordinat x, grafik bergerak secara horizontal. Jika untuk mengoordinasikan y - akan bergerak secara vertikal. Saya tertarik dengan gerakan horisontal - saya ingin lautan saya khawatir.

Perancang itu tidak berharap saya memiliki sinusoid yang merayap dari kiri ke kanan. Dia ingin itu indah, seperti sarang laba-laba, samudra, atau apa pun yang ada di kepalanya. Karena itu, opsi dengan sinusoid tidak cocok. Butuh semacam keacakan. Pesawat seharusnya tidak dapat diprediksi sebagai gelombang sinus. Tetapi jika Anda menyebut secara acak untuk masing-masing puncak ini, maka kami mendapatkan sangat tidak terduga.

Inti dari keacakan adalah bahwa itu acak dan independen. Setiap simpul acak tidak bergantung pada tetangganya dengan cara apa pun. Secara acak, tidak ada parameter yang dilewatkan, tidak peduli tentang tetangga.



Hasilnya adalah kurva patah yang menyerupai laut atau web hanya dari jarak jauh. Lebih cocok sebagai ilustrasi untuk film tentang "peretas" dan pencurian cyber.

Jika Anda melihat secara acak dari sudut pandang setiap titik di layar, sepertinya suara putih - banyak titik putih dan hitam kecil. Setiap titik berwarna hitam dan putih - 0 atau 1.

Tetapi apa yang saya butuhkan untuk menciptakan lautan ombak seharusnya terlihat seperti ini.


Itu menyerupai kabut, dan awan, dan gunung.

Ada fungsi acak yang mengembalikan gambar tersebut. Mereka disebut suara atau kebisingan : kebisingan Simplex, kebisingan Perlin. Perlin dalam nama noise adalah nama pencipta algoritma gradient noise, yang mengembalikan acak yang indah. Dia menciptakannya dengan mengerjakan efek khusus dari bagian pertama film "Tron." Algoritma matematika ini ada sebelumnya, tetapi sekarang secara aktif digunakan dalam film dan permainan.

Ketika peta acak dihasilkan dalam "Heroes of Might and Magic III" (untuk mereka yang berusia di atas 30) atau dalam strategi., Anda biasanya dapat melihat sesuatu yang serupa. Itu selalu fungsi yang sama yang mengembalikan suara-suara ini.

Ada seluruh gerakan "Seni generatif". Peserta menghasilkan karya seni, lanskap, menggunakan fungsi noise. Misalnya, pada gambar di bawah ini, lanskap pseudo-natural dari salah satu seniman. Tidak segera jelas apakah itu matematika atau topografi gunung. Tugas seni Generatif adalah secara matematis menghasilkan lanskap yang tidak dapat dibedakan dari masa kini.



Ternyata, tidak seperti keacakan, fungsi ini mengambil parameter, karena titik harus bergantung pada tetangga terdekat. Jika Anda menggunakan fungsi noise alih-alih keacakan yang biasa, Anda mendapatkan sesuatu seperti ini.


Hitam dan putih adalah tinggi: 0 adalah lembah hitam, 1 adalah puncak putih. Ternyata permukaannya bergelombang.

Fungsi ini ada di semua PL karena itu hanya sebuah algoritma - sinus, cosinus, perkalian.

Saya dapat melakukan distorsi dengan cara yang sama dengan melalui semua simpul dari objek PlaneGeometry saya, menetapkan setiap nilai ke fungsi noise:

 geometry.vertices.forEach(v => { vz = noise(vx, vy, time); }); 

Fungsi ini hanya memakan 30-40 baris, tetapi secara matematis rumit.

Ada fungsi noise dari semua dimensi: satu dimensi, dua dimensi, tiga dimensi. Dalam kasus saya, ini adalah noise tiga dimensi, karena tiga parameter dilewatkan ke sana. Selain koordinat spasial bidang x dan y, saya mentransmisikan waktu - permukaan akan terus berputar, mengubah posisinya.

Three.js! == GPU

Ketika saya memulai algoritme, ombak mulai bergerak. Ketika saya melakukan sesuatu untuk Web, saya selalu mencari di profiler, dan sekarang saya juga melihat ke dalamnya.



Di layar adalah satu bingkai yang ditarik oleh browser. Bingkai ditunjukkan oleh garis putus-putus vertikal abu-abu. Di dalam bingkai, 2/3 dari waktu ditempati oleh pelaksanaan fungsi kebisingan. Saat Anda menghidupkan sesuatu di Web, Anda menggunakan bingkai animasi permintaan, yang berjalan setiap 16 ms, paling banter. Frame setiap 16 ms menghitung fungsi noise untuk 2600 simpul. Untuk setiap simpul, gerakan naik dan turun dipertimbangkan. Pada setiap kerangka berikutnya, nilai-nilai dihitung ulang, karena permukaan harus hidup tepat waktu.

Ternyata fungsi noise, yang berubah 2600 kali, sudah mengambil 2/3 dari frame di komputer saya. Dan ini bukan keseluruhan kerangka. Saat mengembangkan animasi, ini sudah merupakan bendera merah.

Tidak boleh ada animasi yang menempati lebih dari setengah bingkai.

Jika lebih, maka ada risiko tinggi kehilangan bingkai selama interaksi apa pun, tombol apa saja, mouseover apa pun.

Karena itu, itu adalah bendera merah yang sulit. Saya menyadari bahwa Three.js belum tentu WebGL. Terlepas dari kenyataan bahwa saya tampaknya menggunakan Three.js, saya menggambar semuanya dalam 3D, itu diberikan di WebGL, saya tidak mendapatkan kinerja yang fantastis dari WebGL. Saya hanya memiliki 2.600 simpul - ini tidak cukup untuk WebGL. Misalnya, pada setiap peta ada ribuan objek, masing-masing terdiri dari puluhan segitiga. Perkirakan skalanya: ratusan ribu adalah normal, tetapi hanya ada 2600 puncak.

Vertex Shader

Setelah masalah dengan bingkai, saya menemukan bahwa ada shader. Hanya ada dua jenis:

• Vertex Shader;
  
• Shader fragmen.
  

Saya tertarik pada vertex shader - Vertex Shader. Jika kami menulis ulang animasi di atasnya, maka tampilannya akan seperti ini:

 position.z = noise( vec3(position.x, position.y, time) ); 

Position.z - komponen z koordinat setiap titik dengan tipe datanya sendiri. vec3 menunjukkan bahwa akan ada tiga parameter.

Tidak ada lingkaran di shader.

Sebelum itu, dalam skrip, saya meletakkan for each loop, dan untuk setiap vertex, perhitungan berlangsung dalam satu loop. Perbedaan antara shader dan non-shader adalah tidak adanya siklus.

Shader - inilah siklusnya.

Ini dijalankan secara paralel untuk semua simpul sekaligus. Inilah makna, misi, chip, dan misi utamanya.

GPU pada kartu video memiliki inti yang lebih besar, tidak seperti CPU prosesor utama. Pada prosesor ada jauh lebih sedikit, tetapi mampu melakukan perhitungan universal lebih cepat. Perhitungan yang sangat sederhana tersedia pada kartu video, tetapi ada banyak inti, sehingga memungkinkan Anda untuk memaralelkan banyak perhitungan. Inilah yang biasanya terjadi pada shader. Arti dari vertex shader adalah kebisingan akan dihitung secara paralel untuk 2600 simpul dalam shader pada kartu video.

Jika Anda melihat profiler, tampilan animasi tidak akan berubah, tetapi akan terlihat seperti ini.



Tidak ada yang dijalankan pada CPU sama sekali . Tentu saja, utas lain pada GPU ditambahkan di bawah ini. Ada juga utas pada GPU, CPU, Web-pekerja, tetapi perhitungan ini akan dilakukan di utas terpisah pada kartu video.

Tentu saja ini tidak gratis. Kartu video di tempat kerja dipanaskan lebih dari prosesor utama. Karenanya, sering kali ketika Anda mengunjungi situs dengan animasi yang serupa, penggemar mulai bekerja untuk Anda. Ini karena ketika kartu video dihidupkan, itu membutuhkan pendinginan, tidak seperti sisa waktu. Pada perangkat seluler, ini lebih penting daripada pada komputer desktop - ponsel hanya berjalan lebih cepat. Tetapi pada saat yang sama Anda mendapatkan peningkatan kinerja, cukup radikal.


Hasilnya adalah permukaan seperti itu - ini adalah perlin-noise biasa. Jika Anda memulainya dan hanya mengubah waktu, gelombang dingin diperoleh.

Tapi itu belum semuanya. Saya masih diminta untuk "jaring laba-laba" - sebuah kisi heksagonal di permukaan. Memiliki pengalaman dalam tata letak, cara paling sederhana dan paling jelas adalah memilih fragmen yang dapat diulang. Menariknya, untuk kotak heksagonal, tidak persegi, tetapi persegi panjang. Jika Anda mengulangi polanya sebagai persegi panjang, Anda mendapatkan kisi. Pustaka Three.js memungkinkan Anda untuk menampilkan png dan tidak mempelajari semua WebGL sebelumnya. Saya memotong png dan meletakkannya di permukaan, ternyata sesuatu seperti itu.



Sekilas, apa yang Anda butuhkan! Tapi baru pada awalnya. Ini tidak cocok untuk saya, karena animasi diperlukan untuk situs cryptocurrency - semuanya harus "mahal, kaya".

Ketika Anda menggunakan tekstur png dan dekat dengan kamera, Anda dapat melihat bahwa tepi elemen terdekat buram. Tidak ada perasaan bahwa gambarnya jelas. Png tampaknya telah membentang di browser. Masalahnya adalah bahwa di WebGL tidak ada cara untuk menggunakan tekstur vektor dalam arti kata sepenuhnya. Jadi saya menangis, dan kemudian membaca di Internet bahwa GLSL menyelesaikan masalah ini.

GLSL adalah bahasa mirip-C di mana shader ditulis. Semua orang takut menggunakannya, karena ini adalah shader, WebGL - tidak ada yang jelas! Tapi saya menemukan bahwa adalah mungkin untuk membuat gambar yang jelas di atasnya, dan beralih ke shader tipe kedua.

Shader fragmen

Shader ini melakukan hal yang sama dengan vertex. Tetapi, jika vertex membangun permukaan polyline, melakukan perhitungan untuk setiap vertex, maka shader Fragment menghitung warna untuk setiap piksel permukaan.

Fungsi fragment shader – step(a,b) paling dasar fragment shader – step(a,b) . Hanya mengembalikan 0 dan 1:

• jika a> b, maka 0;
  
• jika a <b, maka 1.
  

Saya membuat implementasi semu di JS untuk memperjelas betapa sederhananya fungsi ini.

 function step(a, b) { if (a < b) return 0 else return 1 } 

Ketika Anda bekerja di WebGL, biasanya pada objek apa pun ada sistem koordinat. Jika itu adalah objek kuadrat, maka sistem koordinatnya adalah primitif: titik (0,0), (0,1), (1,0), (1,1).

Fragmen Shader dijalankan untuk setiap piksel. Jika Vertex Shader adalah 2600 kali per frame, maka Fragment Shader dieksekusi sebanyak piksel. Mungkin satu juta kali untuk setiap frame, jika permukaannya 1000 × 1000 px. Kedengarannya menakutkan, tetapi hanya karena sedikit orang yang akrab dengan sumber daya kartu video di zaman kita.

Jika Anda menggunakan fungsi langkah (a, b) dengan koordinat piksel ini, Anda dapat menjalankan fungsi langkah dengan parameter 0.4 dan meneruskan koordinat x dari setiap piksel ke setiap titik.

Ternyata semua yang kurang dari 0,4 akan menjadi 0, segala sesuatu yang lebih besar dari 1. Di WebGL, angka dan warna adalah satu dan sama. Setiap warna adalah satu angka. Putih - 1, hitam - 0. Ada tiga dari mereka di RGB, tetapi masih 0.0.0 dan 1.1.1.



Jika kita menjalankan langkah fungsi ini lebih rumit, kita menjadi putih di sebelah kiri. Fungsi ini akan dieksekusi untuk setiap titik di layar dan akan mempertimbangkan bahwa itu adalah 0 atau 1. Ini normal, jangan khawatir tentang ini.

Jika Anda mengalikan dua ekspresi ini, Anda mendapatkan garis putih vertikal. Jika Anda melakukan hal yang sama pada sumbu yang berbeda, Anda bisa menggambar kotak putih:


Itu harus menjadi klimaks - kami menggambar kotak putih!

Dengan menggunakan kombinasi hanya satu fungsi, Anda dapat menggambar apa pun yang Anda inginkan.

Jika Anda ingat, elemen-elemen pola itu miring. Jika Anda membuat permukaan miring, yang hanya terdiri dari warna hitam dan putih, maka akan berusuk, tidak dihaluskan. Ribbing menangkap mata Anda - itu jelek. Untuk membuat permukaan terlihat halus untuk mata, tidak hanya piksel hitam dan putih yang diperlukan, tetapi juga abu-abu abu-abu.

Smoothstep

Shader memiliki fungsi smoothstep. Itu melakukan hal yang sama seperti langkah, tetapi interpolasi antara 0 dan 1 sehingga ada gradien.


Dari kiri ke kanan, setelah kompresi maksimum.

Jika Anda memampatkan fungsi ini sebanyak mungkin, Anda mendapatkan garis gradien minimal. Ini adalah apa yang Anda butuhkan untuk menghasilkan garis yang sangat halus di setiap sudut dalam shader Fragment.

Jadi saya bisa membuat kotak putih dengan tepi yang halus. Jika ada satu kotak putih, Anda bisa membuat 3 kotak putih.


Kotak dapat diputar, gunakan fungsi sinus dan cosinus.

Kemudian saya harus menggunakan kertas dan daun untuk memecahkan pola saya.


Tangkapan layar dari produksi.

Di sana semuanya terhubung dengan 23 derajat multiplisitas yang berbeda, jadi tidak terlalu sulit untuk menghitung koordinat semua titik ini. Dan kemudian Anda bisa mendapatkan pola seperti itu.



Saya menggambar satu fragmen dan mengulanginya berkali-kali. Anda dapat dengan jelas melihat mode debug, di mana polanya berulang. Semua fragmen dilakukan menggunakan step fungsi parametrik dan smoothstep . Ini berarti bahwa dengan membuat satu pola untuk memiringkan pesawat, Anda dapat menghasilkan jumlah yang tidak terbatas dari pola-pola ini. Jika di dalam fragmen kita mengubah ketebalan garis atau ukuran segi enam, maka kita mendapatkan banyak pola lainnya.

Saya memutar parameter dan menemukan sejumlah pola yang tak terbatas. Ini seperti "Seni generatif" - tidak jelas apa yang telah dilakukan, tetapi indah.

SDF

Lalu saya menemukan bahwa ada juga bidang jarak yang ditandatangani - menghasilkan gambar dengan peta jarak . SDF digunakan dalam kartu atau permainan komputer untuk menggambar teks dan objek, karena optimal. Di WebGL, sulit untuk menggambar teks dengan cara yang berbeda, terutama mulus dan diuraikan.



Ini adalah format matematika yang sulit digunakan di luar WebGL. Idenya sederhana, namun elegan dan memberi efek indah.

Jika kita ingin menggambar bintang yang jelas, maka untuk itu kita perlu menyimpan gambar di sebelah kanan - ini adalah gambar yang dihasilkan dari gambar. Sudah ada algoritma yang mengubah gambar yang jelas menjadi buram. Setelah itu, dapat digunakan untuk menghasilkan versi yang jelas, tetapi pada saat yang sama kita tidak mendapatkan satu gambar, tetapi banyak. Dari gambar yang jelas dengan ukuran yang sama, Anda bisa menghasilkan yang sama, tetapi lebih besar. Itu akan dengan kesalahan, tetapi pendekatan ini menarik secara matematis.

Misalnya, jika Anda mengambil gambar dengan ukuran 128 × 128 px, maka dari gambar dalam ukuran kecil Anda bisa mendapatkan gambar yang jelas beberapa kali lebih besar dari sumbernya. Ini adalah salah satu alasan mengapa mereka menggunakan SDF - font buram sering berbobot kurang dari dalam format vektor yang dioptimalkan.

Tentu saja ada batasannya. Tidak mungkin untuk meningkatkan huruf hingga 1000 px, bahkan 100 px akan terlihat jelek. Tetapi seberapa sering font dengan ukuran ini dibutuhkan?

Shader fragmen, menggambar persegi panjang, menyebar - dengan bantuan gangguan ini, saya akhirnya berhasil menemukan permukaan yang diinginkan.

Kondisi baru

Dia memang seharusnya: menggeliat, semua elemen jelas. Segalanya seperti yang saya inginkan, tetapi ternyata ada lebih dari itu:

- Dan biarkan dia bergerak dengan mouse dan jalan baru sedang diletakkan. Dan sarang madu disorot!

Diasumsikan bahwa ketika pengguna menggerakkan mouse, ia secara metaforis membuka jalan berduri di sepanjang "sarang laba-laba" yang rusak menggunakan layanan.



Tidak sulit untuk menggambarkan tugas dengan kata-kata, tetapi bagaimana cara mengimplementasikannya? Hal pertama yang saya pikirkan - karena saya memiliki kisi heksagonal, mungkin sudah dipelajari. Kemudian saya menemukan artikel yang menarik " Referensi grid heksagonal dan panduan implementasi ". Di dalamnya, penulis mengumpulkan materi selama 20 tahun. Dia keren tanpa pertanyaan, dan artikelnya adalah ilahi bagi mereka yang gemar algoritma dan matematika. Ini berisi banyak data menarik tentang jerat heksagonal.

Artikel ini panjang, tetapi berisi pendekatan matematika yang menarik: bagaimana membangun sistem koordinat pada kisi heksagonal, bagaimana memberi nomor pada heksagon ini, dan kemudian merujuknya di mana ia digunakan. Ternyata ini selalu di depan mata saya, karena di game komputer lama jaring heksagonal digunakan di mana-mana.


Jika Anda sudah menyetel fret heksagonal - lihatlah kastil. Pada tekstur lain, kisi heksagonal juga dapat ditebak.


Dalam "Peradaban" semuanya umumnya jelas.

Sangat menarik untuk mengetahui bahwa jika Anda membuat penampang sepanjang diagonal kubus tiga dimensi, yang terdiri dari banyak kubus kecil, maka, di satu sisi, ini adalah kubus, dan di sisi lain, segi enam reguler.



Penampang kubus tiga dimensi menghasilkan kisi heksagonal dua dimensi. Sangat menyenangkan mengetahui bahwa kubus tiga dimensi entah bagaimana terhubung dengan segi enam dua dimensi.

Dalam artikel tersebut, termasuk, ada algoritma untuk menemukan jalur di sepanjang kisi heksagonal. Saya harus mencari cara untuk ketinggian melalui mouse.

Algoritma pencarian jalur sangat kompleks dan sederhana. Yang paling primitif adalah menggambar garis di antara titik-titik dan melihat segi enam yang termasuk dalam garis ini. Jadi ternyata seperti di masa lalu, unit berubah dari titik A ke titik B.


Saya membutuhkan sesuatu seperti itu.

Tapi bukan itu yang saya butuhkan. Di sini jalan diletakkan di sepanjang segi segi enam, dan saya perlu di sepanjang tepiannya. Saya harus menyelesaikan masalah secara berbeda.

Canvas2d

Mungkin ada cara yang lebih baik, tetapi cara saya lebih menarik. Pada awalnya saya hanya menggambar Canvas2D untuk debug saya - langkah # 1.



Sebelum itu, ada WebGL, Three.js, shader, dan ini hanya Canvas2D! Saya menggambar semua poin dari hex grid di atasnya. Jika Anda melihat lebih dekat, ini adalah segi enam yang sama. Kemudian saya ingat grafik yang menyimpan informasi tentang bagaimana titik-titik terhubung satu sama lain, dan menghubungkan setiap titik dengan tiga titik yang berdekatan dan mendapat grafik - langkah nomor 2. Untuk ini saya menggunakan Open Source Beautiful Graphs .

Grafik hanyalah kumpulan poin dan informasi tentang bagaimana mereka terhubung. Mereka dipelajari dengan baik, ada banyak algoritma yang baik untuk setiap selera untuk menemukan jalur dari titik A ke titik B di dalam grafik. Semua kartu menggunakan algoritma semacam ini.

Itu terlihat seperti ini.

 graph = createGraph( ); graph.addNode(..); // 1000 nodes graph.addLink(..); // 3000 links graph.pathFinder(Start, Finish); //0.01s 

Kami membangun grafik, menambahkan 1000 poin dan semua koneksi di antara mereka, Selanjutnya kami melewati id setiap titik - yang pertama terhubung ke yang ketiga, ketiga ke kelima. Tidak perlu menemukan apa pun, ada algoritme yang dioptimalkan dengan fungsi yang sudah jadi yang akan memungkinkan Anda menemukan jalur ini.

Algoritma ini berjalan kurang dari satu frame. Tentu saja, dibutuhkan semacam sumber daya, tetapi Anda tidak perlu menjalankannya setiap 16 ms, tetapi hanya ketika jalurnya berubah.

Jadi saya bisa membangun rute ini pada langkah nomor 3. Di Canvas2D, mulai terlihat seperti ini: jalur terpendek dari titik A ke titik B - semuanya, seperti dalam kehidupan. Pada pandangan pertama tampaknya ini bukan jalur terpendek, tetapi ternyata ada banyak jalur terpendek dari titik A ke titik B di sepanjang kisi heksagonal.

Di WebGL, semua gambar adalah angka. Di sana Anda dapat mentransfer tekstur di shader, misalnya, saya mencoba mentransfer png. Tidak ada perbedaan untuk browser - dilewatkan png atau Canvas2D. Untuk browser Canvas2D, itu sama dengan gambar yang sudah jadi, bitmap. Karena itu, saya pertama menggambar gambar ini dalam bentuk ular. № 4.

Canvas2D . Canvas2D , — . , . , Canvas2D 3D, , .

, , WebGL — , «, », .

, , Canvas2D, , , . Canvas2D , WebGL, .


: , , .

, --. , , «» .

?

: « ? ?» , : «, !». , . .

, WebGL. , . , WebGL. 2 — , .

, , . , .

, . , , , 3D — .

, . , , .

FrontendConf . , Canvas , RxJS JSX React .

30 . , , .