WebGL 3D Tinjauan HTML5 (Bagian 1) - Pengembangan Native WebGL Membuka Era Baru Rendering 3D di Halaman Web

WebGL telah membuka era baru rendering halaman web 3D, yang memungkinkan konten 3D diterjemahkan langsung di kanvas tanpa bantuan plug-in apa pun. Seperti API Canvas 2D, WebGL memanipulasi objek melalui skrip, sehingga langkah -langkahnya pada dasarnya serupa: persiapkan konteks kerja, siapkan data, gambarkan objek di kanvas dan render. Tidak seperti 2D, 3D melibatkan lebih banyak pengetahuan, seperti dunia, cahaya, tekstur, kamera, matriks dan pengetahuan profesional lainnya. WebGL memiliki tutorial Cina yang bagus, yang merupakan tautan pertama dalam referensi di bawah ini, jadi saya tidak akan memamerkan keterampilan saya di sini. Konten berikut hanyalah ringkasan singkat dari apa yang saya pelajari.

Karena Microsoft memiliki rencana pengembangan grafis sendiri dan belum mendukung WebGL, IE tidak dapat menjalankan WebGL kecuali untuk menginstal plugin. Browser mainstream lainnya seperti Chrome, Firefox, Safari, Opera, dll., Semuanya diinstal dengan versi terbaru. Selain menginstal browser terbaru, Anda juga harus memastikan bahwa driver kartu grafis juga mutakhir.

Setelah menginstal ini, Anda dapat membuka browser dan memasukkan URL berikut untuk memverifikasi dukungan browser untuk WebGL: http://webglreport.sourceForge.net/.

Setelah menginstal browser di atas secara normal, Anda masih tidak dapat menjalankan WebGL, sehingga Anda dapat secara paksa mengaktifkan dukungan WebGL dan mencobanya. Metode untuk mengaktifkannya adalah sebagai berikut:

Kita perlu menambahkan beberapa parameter startup ke Chrome. Langkah-langkah operasi spesifik berikut diambil sebagai contoh: Temukan jalan pintas ke browser Chrome, klik kanan jalan pintas, dan pilih Properties; Di kotak target, setelah kutipan setelah chrome.exe, tambahkan konten berikut:

Klik OK untuk menutup Chrome, dan kemudian gunakan pintasan ini untuk meluncurkan Browser Chrome.

Arti beberapa parameter adalah sebagai berikut:

--enable-webgl berarti mengaktifkan dukungan WebGL;

--ignore-gpu-blacklist berarti mengabaikan Blacklist GPU, yang berarti bahwa beberapa GPU kartu grafis tidak disarankan untuk menjalankan WebGL karena mereka terlalu tua dan alasan lainnya. Parameter ini memungkinkan browser untuk mengabaikan daftar hitam ini dan memaksa WebGL untuk dijalankan;

--Annow-File-Access-From-Files berarti Anda mengizinkan pemuatan sumber daya dari lokal. Jika Anda bukan pengembang WebGL dan tidak perlu mengembangkan dan men -debug WebGL, tetapi hanya ingin melihat demo WebGL, maka Anda tidak dapat menambahkan parameter ini.

Pengguna Firefox, silakan masukkan tentang: konfigurasi di bilah alamat browser, masukkan, dan kemudian cari WebGL di filter (filter), atur WebGL.Force-Enabled ke True; atur webgl.disabled ke false; Cari untuk Security.fileuri.strict_origin_policy di filter (filter), atur security.fileuri.strict_origin_policy ke false; Kemudian tutup semua jendela Firefox saat ini terbuka dan restart Firefox.

Dua pengaturan pertama adalah untuk memaksa dukungan WebGL, dan pengaturan keamanan terakhir.fileuri.strict_origin_policy adalah untuk memungkinkan pemuatan sumber daya dari area lokal. Jika Anda bukan pengembang WebGL dan tidak perlu mengembangkan dan men -debug WebGL, tetapi hanya ingin melihat demo WebGL, maka Anda tidak dapat mengatur item ini.

Temukan Properti → Advanced di menu, pilih Show Development Menu, lalu buka menu pengembangan, dan pilih Nyalakan WebGL.

Kode berikut hanyalah ringkasan singkat dari konsep yang relevan. Itu berasal dari tutorial Cina dalam referensi dan melibatkan banyak pengetahuan dalam 3D. Siswa yang tertarik dapat langsung melompat ke tutorial Cina dalam referensi praktis untuk belajar, yang jauh lebih rinci dan akurat daripada apa yang saya jelaskan di sini. Siswa yang bergabung dalam kesenangan hanya bisa melihatnya, tanpa mempelajari arti dari setiap baris kode.

Tak perlu dikatakan, itu adalah menambahkan elemen kanvas ke halaman sebagai wadah rendering. Misalnya:

<bodyonload = "start ()">

<canvasid = "glCanvas" lebar = "640" tinggi = "480">

Yourbrowserdoes notpeartosport theHTML5CanVasElement.

</ Canvas>

</body>

Inilah waktu untuk secara resmi mulai menulis skrip. Pertama, mari kita lihat pintu masuk program dan struktur keseluruhan:

functionStart () {

varcanvas = document.getElementById ("glCanvas");

initgl (kanvas);

initshaders ();

initbuffer ();

Gl.ClearColor (0,0,0,0,0,0,1,0);

gl.enable (gl.Depth_test);

drawscene ();

}

Beberapa metode di sini mewakili langkah -langkah gambar WebGL yang khas:

Kode untuk metode ini adalah sebagai berikut:

vargl;

functionInitgl (canvas) {

gl = null;

mencoba{

//Trytograbthestandardcontext.ifitfails,fallbacktoExperimental.

gl = canvas.getContext ("WebGL") || canvas.getContext ("Experimental-Webgl");

}

Catch (e) {} // ifwedon'thaveageaglContext, GiveUpnow

if (! gl) {

alert ("unabletoinitializewebgl.yourbrowsermaynotsupportit.");

}

}

Metode ini sangat sederhana, yaitu untuk mendapatkan lingkungan gambar WebGL. Anda perlu meneruskan parameter WebGL ke metode canvas.getContext. Namun, karena standar WebGL saat ini belum selesai, parameter yang digunakan dalam tahap eksperimental adalah Eksperimental-Webgl. Tentu saja, tidak apa-apa untuk memanggil canvas.getContext (eksperimental-webgl). Setelah standar ditetapkan, Anda dapat memodifikasi kode lain.

Konsep shader shader relatif sederhana, untuk membuatnya terus terang, itu adalah perintah operasi kartu grafis. Membangun adegan 3D membutuhkan banyak perhitungan warna, posisi, dan informasi lainnya. Jika perhitungan ini dilakukan oleh perangkat lunak, kecepatannya akan sangat lambat. Jadi, jika Anda membiarkan kartu grafis menghitung operasi ini, kecepatannya sangat cepat; Cara melakukan perhitungan ini ditentukan oleh shader. Kode shader ditulis dalam bahasa shader yang disebut GLSL, dan kami tidak akan berbicara tentang bahasa ini lagi.

Shader dapat didefinisikan dalam HTML dan digunakan dalam kode. Tentu saja, sama bagi Anda untuk mendefinisikan shader dengan string di program Anda.

Mari kita lihat definisi terlebih dahulu:

<scriptId = "shader-fs" type = "x-shader/x-fragment">

precisionmediumpfloat;

varyingvec4vcolor;

voidMain (void) {

GL_FRAGCOLOR = VCOLOR;

}

</script>

<scriptId = "shader-vs" type = "x-shader/x-vertex">

attributeVec3averTexposition;

attributeVec4averTexColor;

UniformMat4UMVMatrix;

UniformMat4Upmatrix;

varyingvec4vcolor;

voidMain (void) {

gl_position = upmatrix*umvmatrix*vec4 (AvertExposition, 1.0);

vcolor = AvertExcolor;

}

</script>

Berikut adalah dua shader: face shader dan vertex shader.

Mengenai dua shader ini, perlu untuk menjelaskan di sini bahwa model 3D di komputer pada dasarnya dijelaskan oleh titik -titik yang dikombinasikan dengan wajah segitiga. Vertex Shader memproses data titik -titik ini, dan permukaan shader memproses data titik pada segitiga menghadap melalui interpolasi.

Vertex shader yang didefinisikan di atas menentukan posisi dan metode perhitungan warna simpul; sedangkan permukaan shader mendefinisikan metode perhitungan warna titik interpolasi. Dalam skenario aplikasi yang sebenarnya, ini juga akan melibatkan pemrosesan cahaya dan efek lainnya dalam shader.

Tentukan shader, Anda dapat menemukannya dalam program dan menggunakannya:

VarshaderProgram;

functionInitshaders () {

varfragmentshader = getshader (GL, "shader-fs");

varvertexshader = getshader (GL, "shader-vs");

shaderprogram = gl.createProgram ();

gl.attachshader (shaderprogram, vertexshader);

Gl.Attachshader (ShaderProgram, Fragmentshader);

Gl.LinkProgram (ShaderProgram);

if (! Gl.getProgramparameter (shaderprogram, gl.link_status)) {

alert ("Cannotinitialishaders");

}

gl.useprogram (shaderprogram);

shaderprogram.vertExpositionAttribute = gl.getattriblocation (shaderprogram, "AvertExposition");

gl.enableVerTexattribArray (shaderprogram.vertexpositionAttribute);

ShaderProgram.VertExColorAttribute = Gl.Getattriblocation (ShaderProgram, "AvertExcolor");

gl.enableVerTexattribArray (shaderprogram.vertexcolorattribute);

shaderprogram.pmatrixuniform = gl.getuniformLocation (shaderprogram, "upmatrix");

shaderprogram.mvmatrixuniform = gl.getuniformLocation (shaderprogram, "uMvmatrix");

}

Ada shader, tapi bagaimana membuat kartu grafis dieksekusi? Program adalah jembatan. Ini adalah kode biner asli WebGL. Fungsinya pada dasarnya adalah untuk membiarkan kartu grafis menjalankan kode shader untuk membuat data model yang ditentukan.

Berikut ini juga metode pembantu. Metode ini adalah untuk melintasi dokumen HTML, menemukan definisi shader, dan membuat shader setelah mendapatkan definisi. Saya tidak akan masuk ke detail di sini:

functionGetShader (GL, id) {

Varshaderscript, Sumber, Currentchild, Shader;

shaderscript = document.geteLementById (id);

if (! shaderscript) {

Returnnull;

}

ini sumber = "";

CurrentChild = Shaderscript.FirstChild;

while (currentChild) {

if (currentchild.nodetype == currentchild.text_node) {

ini sumber+= currentChild.TextContent;

}

CurrentChild = CurrentChild.NextSibling;

}

if (shaderscript.type == "x-shader/x-fragment") {

shader = gl.createShader (gl.fragment_shader);

} elseif (shaderscript.type == "x-shader/x-vertex") {

shader = Gl.CreateShader (GL.VERTEX_SHADER);

}kalau tidak{

// unknownshaderType

Returnnull;

}

Gl.Shadersource (Shader, Thesource);

// CompileTheshaderProgram

GL.Compileshader (shader);

// seeifitcileScessly

if (! gl.getshaderparameter (shader, gl.compile_status)) {

alert ("anerroroccurredCompilingShaders:"+gl.getshaderinfolog (shader));

Returnnull;

}

Returnshader;

}

Dalam contoh -contoh kecil ini, data model pada dasarnya dihasilkan secara langsung. Dalam program aktual, data ini harus diperoleh dari pemuatan model:

vartrianglevertexpositionBuffer;

vartrianglevertexcolorbuffer;

functionInitBuffer () {

TriangleVertExpositionBuffer = GL.CreateBuffer ();

Gl.BindBuffer (Gl.Array_Buffer, TriangleVertExpositionBuffer);

varvertices = [

0.0.1.0.0.0,

-1.0, -1.0.0.0,

1.0, -1.0.0.0

];

gl.bufferData (gl.Array_buffer, newfloat32Array (simpul), gl.static_draw);

TriangleVertExpositionBuffer.ItemSize = 3;

TriangleVertExpositionBuffer.numitems = 3;

TriangleVertExColorBuffer = Gl.CreateBuffer ();

Gl.BindBuffer (Gl.Array_Buffer, TriangleVertExcolorBuffer);

varcolors = [

1.0.0.0.0.0.1.0,

0.0.1.0.0.0.1.0,

0.0.0.0.1.0.1.0

];

Gl.BufferData (Gl.Array_Buffer, newfloat32Array (warna), gl.static_draw);

TriangleVertExColorBuffer.ItemSize = 4;

TriangleVertExColorBuffer.numitems = 3;

}

Kode di atas membuat simpul dan data warna segitiga dan menempatkannya di buffer.

Setelah menyiapkan data, serahkan saja ke WebGL untuk rendering. Metode Gl.Drawarrays disebut di sini. Lihat kodenya:

functionDrawscene () {

Gl.Viewport (0,0, Gl.Viewportwidth, Gl.ViewPortheight);

gl.clear (gl.color_buffer_bit | gl.depth_buffer_bit);

pMatrix = okmat4proj (45.0, gl.viewportwidth/gl.ViewPortheight, 0,1.100.0);

mvmatrix = okmat4trans (-1.5, 0.0, -7.0);

Gl.BindBuffer (Gl.Array_Buffer, TriangleVertExpositionBuffer);

Gl.VertExattribPointer (shaderprogram.vertexpositionattribute, trianglevertexpositionBuffer.itemsize, gl.Float, false, 0,0);

Gl.BindBuffer (Gl.Array_Buffer, TriangleVertExcolorBuffer);

Gl.VertExattribpointer (shaderprogram.vertexcolorattribute, trianglevertexcolorbuffer.itemsize, gl.Float, false, 0,0);

setMatrixuniforms ();

Gl.Drawarrays (Gl.Triangles, 0, TriangleVertExpositionBuffer.numitems);

}

Fungsi ini pertama kali menetapkan latar belakang dunia 3D menjadi hitam, kemudian mengatur matriks proyeksi, mengatur posisi objek yang akan ditarik, dan kemudian menggambar objek sesuai dengan vertex dan data warna dalam buffer. Ada juga beberapa metode tambahan untuk menghasilkan matriks proyeksi dan model tampilan persegi panjang (menggunakan metode matriks tambahan di pustaka grafis OAK3D) yang tidak ada hubungannya dengan topik, jadi saya tidak akan menjelaskannya secara rinci di sini.

Pada dasarnya ada begitu banyak proses. Tekstur, cahaya, dll yang lebih kompleks diimplementasikan berdasarkan ini. Silakan merujuk ke tutorial Cina di bawah ini, yang berisi contoh terperinci.

Bagaimana dengan itu? Bagaimana rasanya menggunakan pengembangan WebGL asli? Anda tidak hanya perlu memiliki pengetahuan 3D yang mendalam, tetapi Anda juga perlu mengetahui berbagai detail implementasi. WebGL melakukan ini untuk beradaptasi dengan berbagai skenario aplikasi secara fleksibel, tetapi bagi sebagian besar non-profesional seperti saya, banyak detail tidak perlu diketahui. Ini telah memunculkan berbagai perpustakaan kelas untuk membantu pengembangan, seperti pustaka OAK3D yang digunakan di bagian ini (untuk menunjukkan pengembangan WebGL, hanya metode bantuan matriks yang digunakan dalam contoh). Bagian selanjutnya akan memperkenalkan perpustakaan grafis Three.js yang lebih banyak digunakan.

Tutorial Cina: http://www.hiwebgl.com/?p=42

Pusat Pengembangan: https://developer.mozilla.org/en/webgl