Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Web Development
Code

Keperluan WebGL: Bahagian I

by
Length:LongLanguages:
This post is part of a series called WebGL Essentials.
WebGL Essentials: Part II

Malay (Melayu) translation by Seurion (you can also view the original English article)

WebGL adalah penghantar 3D dalam pelayar berdasarkan OpenGL, yang membolehkan anda memaparkan kandungan 3D anda terus ke laman HTML5. Dalam tutorial ini, saya akan merangkumi semua keperluan yang anda perlukan untuk memulakan menggunakan rangka kerja ini.


Pengenalan

Ada beberapa perkara yang perlu anda ketahui sebelum kita memulakannya. WebGL adalah API JavaScript yang menjadikan kandungan 3D pada kanvas HTML5. Ia melakukan ini dengan menggunakan dua skrip yang diketahui dalam 'dunia 3D' sebagai Shaders. Kedua-dua shader adalah:

  • Shader vertex
  • Shader serpihan

Sekarang jangan terlalu gugup apabila anda mendengar nama-nama ini; ia hanya satu cara untuk mengatakan, 'kalkulator kedudukan' dan 'pemilihan warna' masing-masing. Shader fragmen adalah yang mudah difahami; ia hanya memberitahu WebGL apa warna yang diberikan pada model anda. Shader vertex adalah sedikit lebih teknikal, tetapi pada dasarnya ia menukar mata dalam model 3D anda menjadi koordinat 2D. Kerana semua monitor komputer adalah permukaan 2D yang rata, dan apabila anda melihat objek 3D pada skrin anda, itu hanyalah ilusi perspektif.

Jika anda ingin mengetahui dengan tepat bagaimana pengiraan ini berfungsi, anda perlu bertanya kepada seorang ahli matematik, kerana menggunakan perkalian matriks 4 x 4 maju, yang sedikit di luar tutorial 'Essentials'. Untungnya, anda tidak perlu tahu bagaimana ia berfungsi kerana WebGL akan menjaga sebahagian besarnya. Jadi mari kita mulakan.


Langkah 1: Menyediakan WebGL

WebGL mempunyai banyak tetapan kecil yang perlu anda persiapkan hampir setiap kali anda menarik sesuatu ke skrin. Untuk menjimatkan masa dan membuat kod anda kemas, saya akan membuat objek JavaScript yang akan mengandungi semua perkara 'di belakang tempat kejadian' dalam fail berasingan. Untuk bermula, buat fail baru bernama ''WebGL.js'' dan letakkan kod berikut di dalamnya:

Fungsi pembina ini mengambil ID-kanvas dan dua objek shader. Pertama, kita dapat mendapatkan elemen kanvas dan pastikan ia menyokong WebGL. Sekiranya ia berlaku, maka kami memberikan konteks WebGL kepada pembolehubah tempatan yang dipanggil 'GL'. Warna yang jelas hanyalah warna latar belakang, dan perlu diperhatikan bahawa dalam kebanyakan parameter WebGL, dari 0.0 hingga 1.0, jadi anda perlu membahagikan nilai rgb anda sebanyak 255. Jadi dalam contoh kami 1.0, 1.0, 1.0, 1.0 bermakna latar belakang putih dengan penglihatan 100% (tiada ketelusan). Dua baris berikutnya memberitahu WebGL untuk mengira kedalaman dan perspektif supaya objek yang lebih dekat kepada anda akan menyekat objek di belakangnya. Akhirnya, kami menetapkan nisbah aspek yang dikira dengan membahagikan lebar kanvas dengan ketinggiannya.

Sebelum kita meneruskan dan memuatkan dua shaders, mari kita tuliskannya. Saya akan menulis ini dalam fail HTML di mana kita akan meletakkan elemen kanvas sebenar. Buat fail HTML dan letakkan dua elemen skrip yang berikut sebelum tag tubuh ditutup:

Shader vertex dibuat terlebih dahulu, dan kami mentakrifkan dua atribut:

  • kedudukan puncak, yang merupakan lokasi dalam koordinat x, y dan z dari puncak semasa (Titik dalam Model anda)
  • koordinat tekstur; lokasi dalam imej tekstur yang perlu diberikan pada titik ini

Seterusnya, kami membuat pembolehubah untuk matriks transformasi dan perspektif. Ini digunakan untuk menukar model 3D ke dalam imej 2D. Baris seterusnya mencipta pembolehubah bersama kepada shader fragmen, dan dalam fungsi utama kami mengira gl_Position (kedudukan akhir 2D). Kami kemudian menetapkan ''koordinat tekstur semasa'' kepada pembolehubah yang dikongsi bersama.

Dalam shader fragmen kita hanya mengambil koordinat yang kita tetapkan di shader sudut dan kita 'sampel' tekstur pada koordinat itu. Pada asasnya kita hanya mendapat warna dalam tekstur yang sepadan dengan titik semasa pada geometri kita.

menyesuaikanDrawingBufferSize sebenarnya mengubah saiz penampan lukisan, dan menetapkan dimensi viewport baru semasa padanya. Jadi ganti ''// Load Shaders Here'' dengan kod berikut:

Tekstur anda perlu berada dalam saiz byte atau anda akan mendapat ralat ... seperti 2x2, 4x4, 16x16, 32x32 ...

Kami mula-mula memastikan bahawa shaders wujud, dan kemudian kami bergerak untuk memuatkan mereka satu demi satu. Prosesnya pada dasarnya mendapat kod sumber shader, mengkompilinya, dan melekatkannya ke program shader tengah. Terdapat fungsi, yang dipanggil LoadShader, yang mendapat kod shader dari fail HTML; kita akan mendapat yang kedua. Kami menggunakan program 'shader' untuk menghubungkan kedua-dua shader bersama-sama, dan ia memberikan kita akses kepada pemboleh ubah mereka. Kami menyimpan dua atribut yang kami jelaskan dalam shaders; jadi kami boleh memasukkan geometri kami ke dalamnya kemudian.

Sekarang mari lihat fungsi LoadShader, Anda harus meletakkan fungsi ini di luar fungsi WebGL:

Ia pada asasnya hanya berpacu melalui shader dan mengumpul kod sumber.


Langkah 2: Cube ''Mudah''

Untuk menarik objek dalam WebGL, anda memerlukan tiga array berikut:

  • vertices; mata yang membentuk objek anda
  • segi tiga; memberitahu WebGL bagaimana untuk menyambungkan simpang ke permukaan
  • koordinat tekstur; mentakrifkan bagaimana simpulan dipetakan pada imej tekstur

Ini dirujuk sebagai pemetaan UV. Untuk contoh kami, mari buat kiub asas. Saya akan memecahkan kiub ke 4 simpang per tepi yang menyambungkan dua segi tiga. mari kita membuat pemboleh ubah yang akan memegang array kiub.

Ia mungkin kelihatan seperti banyak data untuk kiub ringkas, bagaimanapun, dalam bahagian dua tutorial ini, saya akan membuat skrip yang akan mengimport model 3D anda supaya anda tidak perlu bimbang untuk mengira ini.

Anda juga mungkin tertanya-tanya mengapa saya membuat 24 mata (4 untuk setiap sisi), apabila terdapat hanya lapan mata unik pada kiub? Saya melakukan ini kerana anda hanya boleh menetapkan satu koordinat tekstur setiap titik; jadi jika kita hanya akan dimasukkan ke dalam 8 mata, maka kiub keseluruhan harus melihat sama kerana ia akan membungkus tekstur di sekeliling semua sisi yang menyentuh vertex. Tetapi dengan cara ini, setiap sisi mempunyai mata sendiri supaya kita boleh meletakkan bahagian tekstur yang berbeza di setiap sisi.

Kami kini mempunyai pembolehubah kiub ini dan bersedia untuk mula melukisnya. Mari kembali ke kaedah WebGL dan tambah fungsi Draw.


Langkah 3: Fungsi Cabutan

Prosedur untuk menarik objek dalam WebGL mempunyai banyak langkah; jadi, ia adalah idea yang baik untuk membuat fungsi untuk mempermudahkan proses. Idea asas adalah untuk memuat tiga tatasusunan ke dalam buffer WebGL. Kami kemudian menyambung penampan ini kepada sifat-sifat yang kami jelaskan dalam shaders bersama dengan matriks transformasi dan perspektif. Seterusnya, kita perlu memuatkan tekstur ke dalam memori, dan, akhirnya, kita boleh memanggil arahan menarik. Jadi mari kita mulakan.

Kod berikut masuk ke dalam fungsi WebGL:

Kedudukan shader vertex, berputar, dan skala objek anda berdasarkan matriks transformasi dan perspektif. Kami akan pergi lebih mendalam ke dalam transformasi di bahagian kedua siri ini.

Saya telah menambah dua fungsi: MakePerspective () dan MakeTransform (). Ini hanya menghasilkan Matriks 4x4 yang diperlukan untuk WebGL. Fungsi MakePerspective () menerima medan pandangan menegak, nisbah aspek, dan titik terdekat dan terjauh sebagai argumen. Apa-apa sahaja yang lebih dekat daripada 1 unit dan lebih daripada 10000 unit tidak akan dipaparkan, tetapi anda boleh mengedit nilai ini untuk mendapatkan kesan yang anda cari. Sekarang mari kita perhatikan kedua-dua fungsi ini:

Kedua matriks ini memberi kesan terakhir kepada objek anda, tetapi matriks perspektif mengedit 'dunia 3D' seperti medan paparan dan objek yang kelihatan manakala matriks transformasi menyunting objek individu seperti skala putaran dan kedudukannya. Dengan ini kita hampir bersedia untuk menarik, semua yang tersisa adalah satu fungsi untuk menukar imej menjadi tekstur WebGL.


Langkah 4: Memuatkan Tekstur

Memuatkan tekstur adalah proses dua langkah. Mula-mula kita perlu memuatkan imej seperti yang anda lakukan dalam aplikasi JavaScript standard, dan kemudian kita perlu mengubahnya menjadi tekstur WebGL. Oleh itu mari kita mulakan dengan bahagian kedua kerana kita sudah berada di fail JS. Tambahkan yang berikut di bahagian bawah fungsi WebGL sejurus selepas perintah Draw:

Perlu diingat bahawa tekstur anda perlu berada dalam saiz kecil, atau anda akan menerima ralat; jadi mereka perlu dimensi, seperti 2x2, 4x4, 16x16, 32x32, dan sebagainya. Saya menambah baris untuk menyelaraskan koordinat Y hanya kerana koordinat Y aplikasi 3D saya adalah mundur, tetapi ia bergantung kepada apa yang anda gunakan. Ini disebabkan oleh beberapa program yang membuat 0 pada paksi Y sudut kiri atas dan beberapa aplikasi menjadikannya sudut kiri bawah. Sifat penskalaan yang saya tetapkan hanya memberitahu WebGL bagaimana imej tersebut harus berskala tinggi dan menurun. Anda boleh bermain-main dengan pilihan yang berbeza untuk mendapatkan kesan yang berbeza, tetapi saya fikir ini berfungsi dengan baik.

Sekarang bahawa kita telah selesai dengan fail JS, mari kita kembali ke fail HTML dan melaksanakan semua ini.


Langkah 5: Wrapping It Up

Seperti yang saya nyatakan sebelum ini, WebGL menyampaikan kepada elemen kanvas. Itulah yang kita perlukan dalam bahagian badan. Selepas menambah elemen kanvas, halaman html anda harus kelihatan seperti berikut:

Ia adalah halaman yang sangat mudah. Di kawasan kepala saya telah dikaitkan dengan fail JS kami. Sekarang mari kita laksanakan fungsi Siap sedia, yang akan dipanggil apabila halaman dimuat:

Jadi kita buat objek WebGL baru dan lulus dalam ID untuk kanvas dan shader. Seterusnya, kami memuat imej tekstur. Setelah dimuatkan, kami memanggil kaedah Draw () dengan Cube dan Texture. Jika anda mengikuti, skrin anda harus mempunyai kiub statik dengan tekstur di atasnya.

Sekarang walaupun saya berkata kita akan menutup transformasi pada masa akan datang, saya tidak boleh meninggalkan anda dengan persegi statik; ia tidak cukup 3D. Mari kita kembali dan tambah giliran kecil. Dalam fail HTML, tukar fungsi onload supaya kelihatan seperti itu:

Ini akan memanggil fungsi yang disebut Update () setiap 33 milliseconds yang akan memberi kita kadar bingkai sebanyak 30 fps. Berikut adalah fungsi kemas kini:

Ini adalah fungsi yang agak mudah; ia membersihkan skrin dan kemudian menarik Cube yang dikemas kini. Sekarang, mari pergi ke fail JS untuk menambah kod putaran.


Langkah 6: Menambah Beberapa Spin

Saya tidak akan melaksanakan transformasi sepenuhnya, kerana saya menyimpannya untuk masa yang akan datang, tetapi mari kita tambah putaran di sekitar paksi Y. Perkara pertama yang perlu dilakukan adalah menambah pembolehubah Putaran kepada objek Cube kami. Ini akan menjejaki sudut semasa, dan membolehkan kami terus meningkatkan putaran. Jadi bahagian atas pembolehubah Cube anda harus kelihatan seperti ini:

Kini mari kita mengemas kini fungsi MakeTransform () untuk memasukkan giliran:


Kesimpulan

Dan itu sahaja! Dalam tutorial seterusnya, kami akan menampung model pemuatan dan melakukan transformasi. Saya harap anda menikmati tutorial ini; berasa bebas untuk meninggalkan apa-apa soalan atau komen yang anda mungkin ada di bawah.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.