ภาพรวม WebGL 3D ของ HTML5 (ตอนที่ 1) - การพัฒนา WebGL Native เปิดตัวยุคใหม่ของการแสดงผล 3 มิติบนหน้าเว็บ

WebGL ได้เปิด ERA ใหม่ของการแสดงผล 3 มิติของหน้าเว็บซึ่งช่วยให้เนื้อหา 3D แสดงผลโดยตรงในผืนผ้าใบโดยไม่ได้รับความช่วยเหลือจากปลั๊กอินใด ๆ เช่นเดียวกับ Canvas 2D API WebGL จะจัดการวัตถุผ่านสคริปต์ดังนั้นขั้นตอนนั้นคล้ายกันโดยทั่วไป: เตรียมบริบทการทำงานเตรียมข้อมูลวาดวัตถุในผ้าใบและแสดงผล แตกต่างจาก 2D, 3D เกี่ยวข้องกับความรู้มากขึ้นเช่นโลกแสงพื้นผิวกล้องเมทริกซ์และความรู้ระดับมืออาชีพอื่น ๆ WebGL มีบทช่วยสอนภาษาจีนที่ดีซึ่งเป็นลิงค์แรกในการอ้างอิงด้านล่างดังนั้นฉันจะไม่แสดงทักษะของฉันที่นี่ เนื้อหาต่อไปนี้เป็นเพียงบทสรุปสั้น ๆ เกี่ยวกับสิ่งที่ฉันเรียนรู้

เนื่องจาก Microsoft มีแผนพัฒนากราฟิกของตัวเองและไม่รองรับ WebGL เช่น IE ไม่สามารถเรียกใช้ WebGL ได้ยกเว้นการติดตั้งปลั๊กอิน เบราว์เซอร์กระแสหลักอื่น ๆ เช่น Chrome, Firefox, Safari, Opera ฯลฯ ได้รับการติดตั้งด้วยเวอร์ชันล่าสุด นอกเหนือจากการติดตั้งเบราว์เซอร์ล่าสุดคุณต้องตรวจสอบให้แน่ใจว่าไดรเวอร์กราฟิกการ์ดยังทันสมัย

หลังจากติดตั้งสิ่งเหล่านี้คุณสามารถเปิดเบราว์เซอร์และป้อน URL ต่อไปนี้เพื่อตรวจสอบการสนับสนุนของเบราว์เซอร์สำหรับ WebGL: http://webglreport.sourceforge.net/

หลังจากติดตั้งเบราว์เซอร์ด้านบนตามปกติคุณยังไม่สามารถเรียกใช้ WebGL ได้ดังนั้นคุณสามารถเปิดใช้งานการสนับสนุน WebGL และลองใช้งานได้อย่างแข็งขัน วิธีการเปิดใช้งานเป็นดังนี้:

เราจำเป็นต้องเพิ่มพารามิเตอร์การเริ่มต้นลงใน Chrome ขั้นตอนการดำเนินการที่เฉพาะเจาะจงต่อไปนี้เป็นตัวอย่าง: ค้นหาทางลัดไปยังเบราว์เซอร์ Chrome คลิกขวาที่ทางลัดและเลือกคุณสมบัติ; ในกล่องเป้าหมายหลังจากคำพูดหลังจาก chrome.exe เพิ่มเนื้อหาต่อไปนี้:

คลิกตกลงเพื่อปิด Chrome จากนั้นใช้ทางลัดนี้เพื่อเปิดเบราว์เซอร์ Chrome

ความหมายของพารามิเตอร์หลายตัวมีดังนี้:

-การเปิดใช้งาน Webgl หมายถึงการเปิดใช้งานการสนับสนุน WebGL;

-EGNORE-GPU-BlackList หมายถึงการเพิกเฉยต่อบัญชีดำ GPU ซึ่งหมายความว่า GPU การ์ดกราฟิกบางตัวไม่แนะนำให้เรียกใช้ WebGL เพราะพวกเขาเก่าเกินไปและเหตุผลอื่น ๆ พารามิเตอร์นี้อนุญาตให้เบราว์เซอร์เพิกเฉยต่อบัญชีดำนี้และบังคับให้ WebGL ทำงาน

-Lallow-File-Access-from-Files หมายความว่าคุณอนุญาตให้มีการโหลดทรัพยากรจากท้องถิ่น หากคุณไม่ใช่นักพัฒนา WebGL และไม่จำเป็นต้องพัฒนาและดีบัก WebGL แต่เพียงต้องการดูการสาธิต WebGL คุณไม่สามารถเพิ่มพารามิเตอร์นี้ได้

ผู้ใช้ Firefox โปรดป้อนเกี่ยวกับ: config ในแถบที่อยู่ของเบราว์เซอร์ป้อนแล้วค้นหา WebGL ในตัวกรอง (ตัวกรอง) ตั้งค่า WebGL.Force ที่เปิดใช้งานเป็น TRUE; ตั้งค่า webgl.disabled เป็น false; ค้นหาความปลอดภัย fileuri.strict_origin_policy ในตัวกรอง (ตัวกรอง) ตั้งค่าความปลอดภัย fileuri.strict_origin_policy เป็นเท็จ; จากนั้นปิดหน้าต่าง Firefox ทั้งหมดในปัจจุบันเปิดและรีสตาร์ท Firefox

การตั้งค่าสองครั้งแรกคือการบังคับให้การสนับสนุน WebGL และการรักษาความปลอดภัยครั้งสุดท้าย fileuri.strict_origin_policy คือการอนุญาตให้โหลดทรัพยากรจากพื้นที่ท้องถิ่น หากคุณไม่ใช่นักพัฒนา WebGL และไม่จำเป็นต้องพัฒนาและดีบัก WebGL แต่เพียงต้องการดูการสาธิต WebGL คุณไม่สามารถตั้งค่ารายการนี้ได้

ค้นหาคุณสมบัติ→ขั้นสูงในเมนูเลือกแสดงเมนูการพัฒนาจากนั้นไปที่เมนูการพัฒนาและเลือกเปิด WebGL

รหัสต่อไปนี้เป็นเพียงบทสรุปสั้น ๆ ของแนวคิดที่เกี่ยวข้อง มันมาจากการสอนภาษาจีนในการอ้างอิงและเกี่ยวข้องกับความรู้มากมายใน 3D นักเรียนที่สนใจสามารถข้ามไปยังบทช่วยสอนภาษาจีนได้โดยตรงในการอ้างอิงเชิงปฏิบัติเพื่อเรียนรู้ซึ่งมีรายละเอียดและแม่นยำกว่าที่ฉันอธิบายไว้ที่นี่ นักเรียนที่เข้าร่วมในความสนุกสามารถดูได้โดยไม่ต้องเจาะลึกลงไปในความหมายของแต่ละบรรทัดของรหัส

ไม่จำเป็นต้องพูดว่ามันคือการเพิ่มองค์ประกอบผ้าใบลงในหน้าเป็นคอนเทนเนอร์การเรนเดอร์ ตัวอย่างเช่น:

<bodyonload = "start ()">

<canvasid = "glcanvas" width = "640" ความสูง = "480">

YourBrowserDoes NotAppeartosupport thehtml5canvaselement

</sanvas>

</body>

นี่คือเวลาที่จะเริ่มเขียนสคริปต์อย่างเป็นทางการ ก่อนอื่นมาดูทางเข้าโปรแกรมและโครงสร้างโดยรวม:

functionStart () {

varcanvas = document.getElementById ("glcanvas");

initgl (ผ้าใบ);

initshaders ();

initbuffers ();

gl.clearcolor (0.0,0.0,0.0.0,1.0);

gl.enable (gl.depth_test);

drawscene ();

-

หลายวิธีที่นี่แสดงถึงขั้นตอนการวาดภาพของ WebGL ทั่วไป:

รหัสสำหรับวิธีนี้มีดังนี้:

Vargl;

functionInitgl (Canvas) {

gl = null;

พยายาม{

//TryTogRabthestandardContext.ifitfails,FallBacktoExperimental

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

-

catch (e) {} // ifwedon'ThaveAglContext

ถ้า (! gl) {

การแจ้งเตือน ("Unabletoinitializewebgl.yourbrowsermaynotsupportit.");

-

-

วิธีนี้ง่ายมากซึ่งคือการได้รับสภาพแวดล้อมการวาด WebGL คุณต้องผ่านพารามิเตอร์ WebGL ไปยังวิธี Canvas.getContext อย่างไรก็ตามเนื่องจากมาตรฐาน WebGL ปัจจุบันยังไม่ได้รับการสรุปพารามิเตอร์ที่ใช้ในขั้นตอนการทดลองจึงเป็นแบบทดลอง แน่นอนว่ามันก็โอเคที่จะโทรหา canvas.getContext (Experimental-Webgl) หลังจากตั้งค่ามาตรฐานแล้วคุณสามารถแก้ไขรหัสอื่นได้

แนวคิดของ Shader Shader นั้นค่อนข้างง่ายที่จะวางไว้อย่างตรงไปตรงมามันเป็นคำสั่งการทำงานของการ์ดกราฟิก การสร้างฉาก 3 มิติต้องใช้การคำนวณสีตำแหน่งและข้อมูลอื่น ๆ มากมาย หากการคำนวณเหล่านี้ดำเนินการโดยซอฟต์แวร์ความเร็วจะช้ามาก ดังนั้นหากคุณปล่อยให้การ์ดกราฟิกคำนวณการดำเนินการเหล่านี้ความเร็วจะเร็วมาก วิธีการคำนวณเหล่านี้ถูกระบุโดย Shader รหัส Shader เขียนด้วยภาษา Shader ที่เรียกว่า GLSL และเราจะไม่พูดถึงภาษานี้อีกต่อไป

Shaders สามารถกำหนดได้ใน HTML และใช้ในรหัส แน่นอนว่ามันเหมือนกันสำหรับคุณที่จะกำหนด shader ด้วยสตริงในโปรแกรมของคุณ

มาดูคำจำกัดความก่อน:

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

Precisionmediumpfloat;

daryingVec4VColor;

Voidmain (เป็นโมฆะ) {

gl_fragcolor = vColor;

-

</script>

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

AttributeVec3Avertexposition;

AttributeVec4AvertexColor;

Uniformmat4umvmatrix;

UniformMat4UpMatrix;

daryingVec4VColor;

Voidmain (เป็นโมฆะ) {

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

vColor = avertexColor;

-

</script>

นี่คือสอง shaders: face shader และ vertex shader

เกี่ยวกับสอง shaders นี้มีความจำเป็นที่จะต้องอธิบายที่นี่ว่ารุ่น 3 มิติในคอมพิวเตอร์นั้นถูกอธิบายโดยจุดรวมกับใบหน้าสามเหลี่ยม Vertex Shader ประมวลผลข้อมูลของจุดเหล่านี้และ Surface Shader จะประมวลผลข้อมูลของจุดบนสามเหลี่ยมใบหน้าผ่านการแก้ไข

จุดสุดยอด Shader ที่กำหนดไว้ด้านบนกำหนดวิธีการคำนวณตำแหน่งและสีของจุดยอด ในขณะที่ Surface Shader กำหนดวิธีการคำนวณสีของจุดที่ถูกแก้ไข ในสถานการณ์แอปพลิเคชันจริงมันจะเกี่ยวข้องกับการประมวลผลแสงและเอฟเฟกต์อื่น ๆ ใน shaders

กำหนด shaders คุณสามารถค้นหาได้ในโปรแกรมและใช้พวกเขา:

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)) {

การแจ้งเตือน ("Cannotinitialiseshaders");

-

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");

-

มี shader แต่จะทำให้การ์ดกราฟิกดำเนินการอย่างไร? โปรแกรมเป็นสะพาน มันเป็นรหัสไบนารีดั้งเดิมของ WebGL ฟังก์ชั่นของมันคือการให้การ์ดกราฟิกเรียกใช้รหัส shader เพื่อแสดงผลข้อมูลรุ่นที่ระบุ

นี่คือวิธีเสริม GetShader วิธีนี้คือการสำรวจเอกสาร HTML ค้นหาคำจำกัดความของ shader และสร้าง shader หลังจากได้รับการกำหนด ฉันจะไม่เข้าไปดูรายละเอียดที่นี่:

functiongetShader (gl, id) {

varshaderscript, thesource, currentchild, shader;

shaderscript = document.getElementById (id);

if (! shaderscript) {

returnnull;

-

thesource = "";

currentchild = shaderscript.firstchild;

ในขณะที่ (CurrentChild) {

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

thesource+= 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);

}อื่น{

// unknownshadertype

returnnull;

-

Gl.Shadersource (Shader, thesource);

// CompileThishaderProgram

gl.compileshader (shader);

// seeIfitcompiledsuccessingly

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

การแจ้งเตือน ("anerroroccurredcompilingtheshaders:"+gl.getshaderinfolog (shader));

returnnull;

-

returnshader;

-

ในตัวอย่างเล็ก ๆ เหล่านี้ข้อมูลแบบจำลองนั้นถูกสร้างขึ้นโดยตรง ในโปรแกรมจริงข้อมูลเหล่านี้ควรได้รับจากการโหลดแบบจำลอง:

vartriangelevertexpositionbuffer;

vartriangelevertexcolorbuffer;

functionInitBuffers () {

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 (จุดยอด), 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 (สี), gl.static_draw);

trianglevertexColorBuffer.ItemSize = 4;

trianglevertexcolorbuffer.numitems = 3;

-

รหัสด้านบนสร้างจุดยอดและข้อมูลสีของสามเหลี่ยมและวางไว้ในบัฟเฟอร์

หลังจากเตรียมข้อมูลเพียงแค่ส่งมอบให้กับ WebGL สำหรับการแสดงผล วิธี Gl.Drawarrays เรียกว่าที่นี่ ดูรหัส:

FunctionDrawscene () {

gl.viewport (0,0, gl.viewportwidth, gl.viewporteight);

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

pmatrix = okmat4proj (45.0, gl.viewportwidth/gl.viewporteight, 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);

-

ฟังก์ชั่นนี้ตั้งค่าพื้นหลังของโลก 3D เป็นสีดำจากนั้นตั้งค่าเมทริกซ์การฉายภาพตั้งตำแหน่งของวัตถุที่จะวาดจากนั้นดึงวัตถุตามข้อมูลจุดสุดยอดและสีในบัฟเฟอร์ นอกจากนี้ยังมีวิธีเสริมบางอย่างสำหรับการสร้างเมทริกซ์การฉายและรูปแบบมุมมองแบบจำลอง (ใช้วิธีการเสริมเมทริกซ์ในไลบรารีกราฟิก OAK3D) ที่มีส่วนเกี่ยวข้องกับหัวข้อเพียงเล็กน้อยดังนั้นฉันจะไม่อธิบายรายละเอียดที่นี่

โดยทั่วไปมีกระบวนการมากมาย พื้นผิวที่ซับซ้อนมากขึ้นแสง ฯลฯ จะถูกนำไปใช้ตามสิ่งเหล่านี้ โปรดดูบทช่วยสอนภาษาจีนด้านล่างซึ่งมีตัวอย่างโดยละเอียด

แล้วล่ะ? การใช้การพัฒนา WebGL แบบดั้งเดิมเป็นอย่างไร? ไม่เพียง แต่คุณจำเป็นต้องมีความรู้ 3 มิติลึก แต่คุณยังต้องรู้รายละเอียดการใช้งานที่หลากหลาย WebGL ทำสิ่งนี้เพื่อปรับให้เข้ากับสถานการณ์แอปพลิเคชันต่างๆที่มีความยืดหยุ่น แต่สำหรับผู้ที่ไม่ใช่มืออาชีพส่วนใหญ่เช่นฉันรายละเอียดจำนวนมากไม่จำเป็นต้องเป็นที่รู้จัก สิ่งนี้ได้ก่อให้เกิดห้องสมุดชั้นเรียนต่าง ๆ เพื่อช่วยเหลือการพัฒนาเช่นห้องสมุด OAK3D ที่ใช้ในส่วนนี้ (เพื่อแสดงการพัฒนา WebGL ใช้วิธีการช่วยเหลือเมทริกซ์เท่านั้นในตัวอย่าง) ส่วนถัดไปจะแนะนำไลบรารีกราฟิกสามชิ้นที่ใช้กันอย่างแพร่หลายมากขึ้น

การสอนภาษาจีน: http://www.hiwebgl.com/?p=42

ศูนย์พัฒนา: https://developer.mozilla.org/en/webgl