Rumah > hujung hadapan web > tutorial js > [WebGL] [asas] model bukan berkulit

[WebGL] [asas] model bukan berkulit

Linda Hamilton
Lepaskan: 2024-11-04 07:00:31
asal
734 orang telah melayarinya

[WebGL] [basic] non-skinned model

1. gl_Position = unjuran * pandangan * model * kedudukan;

        dari kedudukan tempatan/model kepada kedudukan ruang klip akhir

Tiga Transformasi Maxtrix:

  • Unjuran: Matriks Transformasi Unjuran

    ubah lihat sistem koordinat kepada klip sistem koordinat ruang

  • Lihat: Lihat Matriks Transformasi

    ubah sistem koordinat model kepada lihat sistem koordinat(gerakkan kedudukan kamera)

  • Model: Matriks Transformasi Model

    ubah koordinat tempatan menjadi model sistem koordinat/sistem koordinat dunia permainan(koordinat mutlak)

  • Kedudukan: Koordinat setempat bucu

sistem koordinat tempatan(sistem koordinat relatif)

  • Nota:
  • asal usul sistem koordinat kedudukan dan model ditakrifkan oleh pembangun berdasarkan keperluan.

  • sistem koordinat dunia dan model yang bertindak balas dengan model dan data matriks kedudukan dengan hormat:


            Absolute(World) Y+ axis
                 Y (0, 1, 0)
               |
               |                           Local(Model) Y+ axis
               |                             |  /
               |                             | /
               |                             |
               |                  ---------- o (1, 0, 1)  ← Local(Model) Origin ---- Local X+ axis
               |                           / |  
               |                          /  |
               |                         /   |
               |                        /    |
               |                       /     | 
               |______________________/______|__________ X (1, 0, 0)  Absolute(World) X+ axis
              /                     Local(Model) Z+ axis
             /
            /
           /
          Z (0, 0, 1)
   Absolute(World) Z+ axis
Salin selepas log masuk
Salin selepas log masuk

2. WebGL menggunakan susunan utama Lajur secara lalai manakala C menggunakan susunan utama Baris secara lalai.

Dalam WebGL, matriks disimpan dalam urutan lajur-utama, yang mempengaruhi susunan matriks dan susunan pengiraan. Kaedah storan ini mempengaruhi cara matriks ditakrifkan dan digunakan dalam WebGL. Berikut ialah beberapa amalan biasa apabila bekerja dengan matriks lajur utama dalam WebGL:

  1. Definisi dan Susunan Matriks ## Definisi dan Susunan Matriks Dengan storan lajur utama, lajur matriks disimpan secara berurutan. Contohnya, matriks 4x4 M dalam susunan lajur-utama kelihatan seperti ini:

M = | m11 m21 m31 m41 | | m12 m22 m32 m42 | | m13 m23 m33 m43 | | m14 m24 m34 m44 |

Dalam WebGL, matriks ini diwakili sebagai tatasusunan satu dimensi dalam susunan lajur utama:

   const matrix = [
     m11, m21, m31, m41,  // First column
     m12, m22, m32, m42,  // Second column
     m13, m23, m33, m43,  // Third column
     m14, m24, m34, m44   // Fourth column
   ];
Salin selepas log masuk
  1. Format Matriks dan Tatasusunan Konsisten Apabila menghantar data matriks kepada pelorek WebGL, adalah penting untuk menggunakan format yang konsisten. Sebagai contoh, apabila melepasi matriks transformasi 4x4, fungsi uniformMatrix4fv WebGL menjangkakan tatasusunan dalam susunan utama lajur:
   gl.uniformMatrix4fv(location, false, matrix);
Salin selepas log masuk

Di sini, palsu menunjukkan bahawa matriks tidak boleh ditukar. Memandangkan WebGL menggunakan susunan lajur utama secara lalai, pastikan format data sepadan dengan keperluan ini, kerana perpustakaan Matematik standard JavaScript mungkin menggunakan susunan baris utama secara lalai.

  1. Turutan Pendaraban Matriks Dalam amalan, susunan lajur-utama mempengaruhi urutan pendaraban matriks. Dalam sistem ini, matriks didarabkan dari kanan ke kiri, bermakna penjelmaan terakhir digunakan dahulu. Contohnya:

Matriks terhasil M boleh dinyatakan sebagai hasil darab matriks transformasi T, R dan S:

M = TRS

Dalam persamaan ini:

  • S ialah matriks penskalaan,
  • R ialah matriks putaran,
  • T ialah matriks terjemahan.

Dalam susunan lajur utama, jujukan ini mula-mula menggunakan penskalaan, kemudian putaran, dan akhirnya terjemahan.

  1. Menggunakan Perpustakaan Utiliti Menggunakan perpustakaan seperti glMatrix memudahkan operasi matriks dalam WebGL. Perpustakaan ini biasanya mengikut susunan lajur utama, selaras dengan keperluan WebGL dan mengelakkan keperluan untuk pelarasan format matriks manual. Contohnya:

biar modelMatrix = mat4.create();// buat matriks Identiti


            Absolute(World) Y+ axis
                 Y (0, 1, 0)
               |
               |                           Local(Model) Y+ axis
               |                             |  /
               |                             | /
               |                             |
               |                  ---------- o (1, 0, 1)  ← Local(Model) Origin ---- Local X+ axis
               |                           / |  
               |                          /  |
               |                         /   |
               |                        /    |
               |                       /     | 
               |______________________/______|__________ X (1, 0, 0)  Absolute(World) X+ axis
              /                     Local(Model) Z+ axis
             /
            /
           /
          Z (0, 0, 1)
   Absolute(World) Z+ axis
Salin selepas log masuk
Salin selepas log masuk
  1. Nyahpepijat dan Penukaran Memahami storan utama lajur membantu semasa menyahpepijat pengiraan matriks. Jika hasil matriks tidak dijangka, pastikan susunan data dalam shader sepadan dengan susunan lajur utama.

Atas ialah kandungan terperinci [WebGL] [asas] model bukan berkulit. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan