Gambaran keseluruhan WebGL 3D dalam HTML5 (Bahagian 1)—Pembangunan asli WebGL membuka era baharu kemahiran tutorial rendering_html5 halaman web

WebGL membuka era baharu pemaparan 3D pada halaman web, yang membolehkan kandungan 3D dipaparkan terus dalam kanvas tanpa sebarang pemalam. WebGL adalah sama dengan API kanvas 2D Ia memanipulasi objek melalui skrip, jadi langkah-langkahnya pada asasnya serupa: sediakan konteks kerja, sediakan data, lukis objek dalam kanvas dan buatkannya. Perbezaan daripada 2D ialah 3D melibatkan lebih banyak pengetahuan, seperti dunia, cahaya, tekstur, kamera, matriks dan pengetahuan profesional yang lain. Terdapat tutorial bahasa Cina yang bagus tentang WebGL, yang merupakan pautan pertama dalam rujukan penggunaan di bawah, jadi saya tidak akan berbuat apa-apa mengenainya di sini Kandungan berikut hanyalah ringkasan ringkas kandungan pembelajaran.

Sokongan penyemak imbas
Memandangkan Microsoft mempunyai rancangan pembangunan grafiknya sendiri dan tidak menyokong WebGL, IE pada masa ini tidak dapat menjalankan WebGL kecuali untuk memasang pemalam. Untuk penyemak imbas arus perdana lain seperti Chrome, FireFox, Safari, Opera, dsb., cuma pasang versi terkini. Selain memasang pelayar terkini, anda juga perlu memastikan pemacu kad grafik juga dikemas kini.
Selepas memasang ini, anda boleh membuka penyemak imbas dan masukkan URL berikut untuk mengesahkan sokongan penyemak imbas untuk WebGL: http://webglreport.sourceforge.net/.

Jika anda masih tidak dapat menjalankan WebGL selepas memasang penyemak imbas di atas seperti biasa, anda boleh cuba memaksa sokongan WebGL untuk dihidupkan. Kaedah pembukaan adalah seperti berikut:
Pelayar Chrome
Kami perlu menambah beberapa parameter permulaan pada Chrome Langkah khusus berikut mengambil sistem pengendalian Windows sebagai contoh: Cari pintasan Chrome pelayar, klik kanan Kaedah pintasan, pilih sifat dalam kotak sasaran, selepas tanda petikan di belakang chrome.exe, tambah kandungan berikut:

--dayakan-webgl--abaikan-gpu-senarai hitam--benarkan-akses-fail-daripada-fail

Tutup Chrome selepas mengklik OK, kemudian gunakan pintasan ini untuk melancarkan penyemak imbas Chrome.
Maksud beberapa parameter adalah seperti berikut:
--enable-webgl bermaksud untuk mendayakan sokongan WebGL
--ignore-gpu-blacklist bermaksud mengabaikan senarai hitam GPU, yang bermaksud terdapat beberapa grafik; kad dan GPU Kerana ia terlalu lama dan sebab lain, tidak disyorkan untuk menjalankan WebGL Parameter ini membenarkan penyemak imbas mengabaikan senarai hitam ini dan memaksa WebGL untuk dijalankan
--benarkan-fail-akses-dari-fail untuk membenarkan sumber dimuatkan secara setempat Jika anda bukan pembangun WebGL dan tidak perlu membangunkan dan menyahpepijat WebGL, tetapi hanya ingin melihat Demo WebGL, maka anda tidak perlu menambah parameter ini.

Pelayar Firefox
Pengguna Firefox sila masukkan "about:config" dalam bar alamat penyemak imbas, tekan Enter, dan kemudian cari "webgl" dalam penapis (penapis) dan gantikan webgl Tetapkan .force-enabled kepada true; tetapkan webgl.disabled kepada false; cari "security.fileuri.strict_origin_policy" dalam penapis dan tetapkan security.fileuri.strict_origin_policy kepada false, kemudian tutup semua tetingkap Firefox yang sedang dibuka , mulakan semula Firefox.
Dua tetapan pertama adalah untuk memaksa sokongan WebGL dihidupkan, dan tetapan security.fileuri.strict_origin_policy yang terakhir adalah untuk membenarkan sumber dimuatkan daripada sumber tempatan Jika anda bukan pembangun WebGL, anda tidak perlu melakukannya membangun dan menyahpepijat WebGL, tetapi hanya ingin melihat Demo WebGL, maka anda tidak perlu menetapkan item ini.

Pelayar Safari
Cari "Properties" → "Advanced" dalam menu, pilih "Show Development Menu", kemudian pergi ke menu "Develop" dan pilih "Hidupkan WebGL".

Langkah Pembangunan

Kod berikut hanya meringkaskan konsep yang berkaitan Ia datang daripada tutorial bahasa Cina dalam rujukan dan melibatkan lebih banyak pengetahuan 3D. Pelajar yang berminat boleh melompat terus ke tutorial Bahasa Cina dalam Rujukan Praktikal, yang jauh lebih terperinci dan tepat daripada apa yang saya terangkan di sini. Pelajar yang menyertai keseronokan hanya boleh melihatnya tanpa menyelidiki maksud setiap baris kod.

Persediaan
Tidak perlu dikatakan, ini adalah untuk menambahkan elemen kanvas pada halaman sebagai bekas rendering. Contohnya:

Salin kod

Kodnya adalah seperti berikut:

Pelayar anda tidak dapat menyokong HTML5canvaselement.
;<🎜 /body>

Sudah tiba masanya untuk mula menulis skrip secara rasmi Pertama, lihat entri program dan struktur keseluruhan:

<.>Salin kod Kod adalah seperti berikut:

functionstart(){

varcanvas=document.getElementById("glcanvas");
initGL(kanvas);
initShaders() ;
initBuffers();
gl.clearColor(0.0,0.0,0.0,1.0);
gl.enable(gl.DEPTH_TEST);
drawScene();
}


Beberapa kaedah di sini mewakili langkah lukisan WebGL biasa:

Langkah 1: Mulakan persekitaran kerja WebGL - initGL
Kod untuk kaedah ini adalah seperti berikut:

Salin kod

Kod adalah seperti berikut:

vargl;
functioninitGL(kanvas) {
gl=null;
cuba{
//Trytograbthestandardcontext.Ifitfails,fallbacktoexperimental.
gl=canvas.getContext("webgl")||canvas.getContext("experimental-webgl");
}
tangkap(e){} //Ifwedon'thaveaGLcontext,giveupnow
if(!gl){
alert("UnabletoinitializeWebGL.Yourbrowsermaynotsupportit.");
}
}

Kaedah ini sangat mudah untuk mendapatkan persekitaran lukisan WebGL Anda perlu menghantar parameter "webgl" kepada kaedah canvas.getContext dimuktamadkan, parameter yang digunakan dalam peringkat eksperimen semuanya ialah "experimental-webgl". Sudah tentu, anda juga boleh menghubungi canvas.getContext("experimental-webgl") secara terus Selepas standard ditetapkan, anda boleh mengubah suai kod lain.

Langkah 2: Mulakan Shaders - initShaders
Konsep shader adalah agak mudah, ini adalah arahan operasi kad grafik. Membina pemandangan 3D memerlukan sejumlah besar pengiraan warna, kedudukan dan maklumat lain Jika pengiraan ini dilakukan oleh perisian, kelajuannya akan menjadi sangat perlahan. Oleh itu, membiarkan kad grafik mengira operasi ini adalah sangat pantas; cara melakukan pengiraan ini ditentukan oleh shader. Kod shader ditulis dalam bahasa shader yang dipanggil GLSL, yang tidak akan kami terangkan di sini.
Shaders boleh ditakrifkan dalam html dan digunakan dalam kod. Sudah tentu, perkara yang sama berlaku jika anda menggunakan rentetan untuk menentukan shader dalam program anda.
Mari kita lihat bahagian definisi dahulu:

Salin kod

Kodnya adalah seperti berikut:

precisionmediumfloat;
varyingvec4vColor;
voidmain(void){
gl_FragColor =vColor;
}


attributevec3aVertexPosition;
attributevec4aVertexColor
uniformmat4uMVMatrix;
uniformmat4uPMatrix;
varyingvec4vColor;
voidmain(void){
gl_Position=uPMatrix*uMVMatrix*vec4(a1VertexPosition) >}
< /skrip>


Terdapat dua lorek di sini: lorek muka dan lorek puncak.

Mengenai kedua-dua shader ini, adalah perlu untuk menerangkan di sini bahawa model 3D dalam komputer pada asasnya diterangkan oleh titik digabungkan dengan tampalan segi tiga Penolok puncak adalah untuk memproses data titik ini, dan peneduh permukaan adalah Melalui interpolasi, iaitu data titik pada tampalan segi tiga diproses.
Pelorek bucu yang ditakrifkan di atas mentakrifkan kedudukan dan kaedah pengiraan warna bucu manakala pelorek permukaan mentakrifkan kaedah pengiraan warna titik interpolasi. Dalam senario aplikasi sebenar, kesan seperti pemprosesan cahaya dalam shader juga akan terlibat.
Mentakrifkan shader, anda boleh mencarinya dalam program dan menggunakannya:

Salin kod Kod tersebut adalah sebagai berikut:

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("Couldnotinitialiseshaders");
}
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute=Logl. shaderProgram, "aVertexPosition");
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute) derProgram, "uPMatrix");
shaderProgram.mvMatrixUniform=gl.getUniformLocation(shaderProgram,"uMVMatrix");
}


Pelorek ada di sana, tetapi bagaimana anda membiarkan kad grafik melaksanakannya? data model yang ditentukan.
Kaedah tambahan getShader juga digunakan di sini untuk melintasi dokumen HTML, mencari definisi shader dan mencipta shader selepas mendapat definisi saya tidak akan pergi ke butiran di sini:

Salin kod

Kod tersebut adalah seperti berikut:

functiongetShader(gl,id){
varshaderScript,theSource,currentChild,shader;
shaderScript=document.getElementById(id);
if(!shaderScript){
returnnull;
}
theSource="";
currentChild =shaderScript.firstChild;
while (currentChild){
if(currentChild.nodeType==currentChild.TEXT_NODE){
theSource =currentChild.textContent;
}}
jika( 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);
}lain{
//Unknownshadertype
returnnull;
}
gl .shaderSource(shader,theSource);
//Compiletheshaderprogram
gl.compileShader(shader);
//Seeifitcompiledberjaya
if(!gl.getShaderParameter(shader,gl.COMPILE)🎜alert("Anerroroccurredcompilingtheshaders:" gl. getShaderInfoLog(shader));
returnnull;
}
returnshader;
}

Langkah 3: Buat/Langkah 3: muatkan data model - initBuffers
Dalam contoh kecil ini, pada asasnya data model dijana secara langsung Dalam program sebenar, data ini harus dimuatkan daripada model:


.

Salin kodKod tersebut adalah seperti berikut:

vartriangleVertexPositionBuffer;

vartriangleVertexColorBuffer;
{fungsi
{init🎜()> triangleVertexPositionBuffer=gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexPositionBuffer);
varvertices=[
0.0,1.0,0.0,
-1.0,.-1. >1.0,-1.0,0.0
];
gl.bufferData(gl.ARRAY_BUFFER,newFloat32Array(vertices),gl.STATIC_DRAW);
triangleVertexPositionBuffer.itemSize=3;temSize=3; ;
triangleVertexColorBuffer=gl.createBuffer( );
gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexColorBuffer);
varcolors=[
1.0,0.0,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);
ColorizeBuffer4.Texs 🎜>triangleVertexColorBuffer.numItems=3;
}


Kod di atas mencipta bucu segitiga dan data warna bucu dan meletakkannya dalam penimbal.


Langkah 4: Rendering - drawScene

Selepas menyediakan data, hanya serahkan kepada WebGL untuk rendering Kaedah gl.drawArrays dipanggil di sini. Lihat kod:



Salin kod

Kodnya adalah seperti berikut:

functiondrawScene(){gl.viewport(0,0,gl.viewportWidth,gl.viewportHeight);gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);

pMatrix=okMat4Proj(45 .viewportWidth/gl.viewportHeight ,0.1,100.0);

mvMatrix=okMat4Trans(-1.5,0.0,-7.0);

gl.bindBuffer(gl.ARRAY_BUFFER, segitigaVertexPositionBuffer>);gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexColorBuffer);
gl.vertexAttribPointer(shanger.vertexAttribPointer(shakertem.VertexAttribPointer,ColletemColorBuffer) Saiz, gl. FLOAT,false,0,0 );
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLES,0,triangleVertexPositionBuffer.numItems);
}


Fungsi ini mula-mula menetapkan latar belakang dunia 3D kepada hitam, kemudian menetapkan matriks unjuran, menetapkan kedudukan objek yang hendak dilukis, dan kemudian melukis objek berdasarkan data bucu dan warna dalam penimbal. Terdapat juga beberapa kaedah tambahan untuk menjana matriks unjuran dan segi empat tepat paparan model (menggunakan kaedah tambahan matriks dalam perpustakaan grafik Oak3D) yang mempunyai sedikit kaitan dengan topik dan tidak akan diterangkan secara terperinci di sini.
Pada asasnya, itu sahaja proses tekstur, lampu, dll. yang lebih kompleks semuanya dilaksanakan dengan menambahkan beberapa ciri WegGL berdasarkan ini. Sila rujuk tutorial bahasa Cina berikut untuk contoh terperinci.

Bagaimana pula? Bagaimanakah rasanya membangun menggunakan WebGL asli? Bukan sahaja anda perlu mempunyai pengetahuan 3D yang mendalam, anda juga perlu mengetahui pelbagai butiran pelaksanaan. WebGL melakukan ini untuk menyesuaikan diri secara fleksibel kepada pelbagai senario aplikasi, tetapi bagi kebanyakan bukan profesional seperti saya, banyak butiran tidak perlu diketahui. Ini telah menimbulkan pelbagai perpustakaan kelas yang membantu pembangunan, seperti perpustakaan Oak3D yang digunakan dalam bahagian ini (untuk menunjukkan pembangunan WebGL, hanya kaedah tambahan matriks digunakan dalam contoh). Bahagian seterusnya akan memperkenalkan perpustakaan grafik Three.js yang biasa digunakan.

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

Pusat Pembangunan: https://developer.mozilla.org/en/WebGL