فتحت WebGL عصرًا جديدًا من عرض صفحات الويب ثلاثية الأبعاد ، والذي يتيح تقديم محتوى ثلاثي الأبعاد مباشرة في قماش دون مساعدة من أي مكونات إضافية. مثل Canvas 2D API ، يعالج WebGL الكائنات من خلال البرامج النصية ، وبالتالي فإن الخطوات متشابهة بشكل أساسي: قم بإعداد سياق العمل ، وإعداد البيانات ، ورسم الكائن في القماش وتقديمه. على عكس ثنائي الأبعاد ، يتضمن ثلاثي الأبعاد المزيد من المعرفة ، مثل العالم والضوء والملمس والكاميرا والمصفوفة وغيرها من المعرفة المهنية. يحتوي WebGL على برنامج تعليمي صيني جيد ، وهو الرابط الأول في المرجع أدناه ، لذلك لن أظهر مهاراتي هنا. المحتوى التالي هو مجرد ملخص موجز لما تعلمته.
دعم المتصفحنظرًا لأن Microsoft لديها خطة تطوير الرسومات الخاصة بها ولم تدعم WebGL ، لا يمكن تشغيل IE WebGL باستثناء تثبيت الإضافات. يتم تثبيت المتصفحات السائدة الأخرى مثل Chrome و Firefox و Safari و Opera ، وما إلى ذلك ، مع أحدث إصدار. بالإضافة إلى تثبيت أحدث المتصفح ، يجب عليك أيضًا التأكد من أن برنامج تشغيل بطاقة الرسومات محدّثة أيضًا.
بعد تثبيت هذه ، يمكنك فتح المتصفح وإدخال عنوان URL التالي للتحقق من دعم المتصفح لـ WebGL: http://webglreport.sourceforge.net/.
بعد تثبيت المتصفح أعلاه بشكل طبيعي ، لا يزال بإمكانك تشغيل WebGL ، بحيث يمكنك تمكين دعم الويب وتجربته بقوة. طريقة تمكينها هي كما يلي:
متصفح الكروم نحتاج إلى إضافة بعض معلمات بدء التشغيل إلى Chrome. يتم اتخاذ خطوات التشغيل المحددة التالية كمثال: ابحث عن اختصار متصفح Chrome ، وانقر بزر الماوس الأيمن فوق الاختصار ، وحدد الخصائص ؛ في المربع الهدف ، بعد عروض الأسعار بعد chrome.exe ، أضف المحتوى التالي: -تمكين webgl-ignore-gpu-blacklist-allow-file-access-files-filesانقر فوق "موافق" لإغلاق Chrome ، ثم استخدم هذا الاختصار لإطلاق متصفح Chrome.
معاني العديد من المعلمات هي كما يلي:
-الكناء webgl يعني تمكين دعم webgl ؛
-ignore-gpu-blacklist تعني تجاهل قائمة GPU Blacklist ، مما يعني أن بعض وحدات معالجة الرسومات لبطاقات الرسومات لا ينصح بتشغيل WebGL لأنها قديمة جدًا وأسباب أخرى. تتيح هذه المعلمة للمتصفح تجاهل هذه القائمة السوداء وإجبار WebGL على التشغيل ؛
-يعني الوصول إلى ملفات التوصيل من الملفات إلى أنك تسمح بتحميل الموارد من محليًا. إذا لم تكن مطور WebGL ولا تحتاج إلى تطوير وتصحيح WebGL ، ولكنك تريد فقط إلقاء نظرة على عرض WebGL ، فلا يمكنك إضافة هذه المعلمة.
متصفح Firefox مستخدمو Firefox ، يرجى الإدخال حول: Config in the Browser Address Bar ، ودخل ، ثم البحث عن WebGL في الفلتر (Filter) ، وضبط webgl.force- تعيين webgl.disabled على false ؛ ابحث عن security.fileuri.strict_origin_policy في المرشح (مرشح) ، تعيين security.fileuri.strict_origin_policy إلى false ؛ ثم أغلق جميع نوافذ Firefox حاليًا وإعادة تشغيل Firefox.يهدف الإعدادان الأوليان إلى إجبار دعم الويب ، وآخر أمان. إذا لم تكن مطور WebGL ولا تحتاج إلى تطوير وتصحيح WebGL ، ولكنك تريد فقط إلقاء نظرة على عرض WebGL ، فلا يمكنك تعيين هذا العنصر.
متصفح سفاري ابحث عن الخصائص → متقدمة في القائمة ، وحدد قائمة التطوير ، ثم انتقل إلى قائمة التطوير ، وحدد تشغيل WebGL. خطوات التنميةالكود التالي هو مجرد ملخص موجز للمفاهيم ذات الصلة. إنه يأتي من البرنامج التعليمي الصيني في المرجع ويتضمن الكثير من المعرفة في ثلاثية الأبعاد. يمكن للطلاب المهتمين الانتقال مباشرة إلى البرنامج التعليمي الصيني في الإشارة العملية للتعلم ، وهو أكثر تفصيلاً ودقيقًا مما أوضحت هنا. يمكن للطلاب الذين ينضمون إلى المرح إلقاء نظرة ، دون الخوض في معنى كل سطر من الكود.
تحضير وغني عن القول ، إنه إضافة عنصر قماش إلى الصفحة كحاوية عرض. على سبيل المثال:<bodyonload = "start ()">
<canvasid = "glcanvas" width = "640" height = "480">
yourbrowserdoes notappartosupport thehtml5canvaselement.
</canvas>
</body>
هذا هو الوقت المناسب للبدء رسميا في كتابة البرامج النصية. أولاً ، دعونا نلقي نظرة على مدخل البرنامج والهيكل العام:
FunctionStart () {
varcanvas = document.getElementById ("glcanvas") ؛
initgl (قماش) ؛
initshaders () ؛
initbuffers () ؛
GL.CLEARCOLOR (0.0،0.0،0.0،1.0) ؛
gl.enable (gl.depth_test) ؛
DrawScene () ؛
}
تمثل عدة طرق هنا خطوات رسم WebGL النموذجية:
الخطوة 1: تهيئة بيئة عمل الويب - initgl رمز هذه الطريقة على النحو التالي:vargl
functionInitgl (canvas) {
GL = NULL ؛
يحاول{
//trytograbthestandardContext.ifitfails ، FallbackToexperimental.
gl = canvas.getContext ("webgl") || canvas.getContext ("التجريبي webgl") ؛
}
catch (e) {} // ifwedon'ThaveAglContext ، goopupnow
إذا (! gl) {
ALERT ("unabletoinitializewebgl.yourbrowsermaynotsupportit.") ؛
}
}
هذه الطريقة بسيطة للغاية ، وهي الحصول على بيئة رسم الويب. تحتاج إلى تمرير المعلمة WebGL إلى طريقة canvas.getContext. ومع ذلك ، نظرًا لأن معيار WebGL الحالي لم يتم الانتهاء منه ، فإن المعلمات المستخدمة في المرحلة التجريبية هي webgl التجريبية. بالطبع ، لا بأس أيضًا في استدعاء Canvas.getContext (Weblggl التجريبي). بعد تعيين المعايير ، يمكنك تعديل رمز آخر.
الخطوة 2: تهيئة التظليل - initshaders مفهوم تظليل تظليل بسيط نسبيًا ، لوضعه بصراحة ، إنه أمر تشغيل بطاقة الرسومات. يتطلب بناء مشهد ثلاثي الأبعاد الكثير من حسابات اللون والموضع والمعلومات الأخرى. إذا تم تنفيذ هذه الحسابات بواسطة البرنامج ، فستكون السرعة بطيئة للغاية. لذلك إذا سمحت لبطاقة الرسومات بحساب هذه العمليات ، فإن السرعة سريعة جدًا ؛ يتم تحديد كيفية تنفيذ هذه الحسابات بواسطة التظليل. يتم كتابة رمز التظليل بلغة تظليل تسمى GLSL ، ولن نتحدث عن هذه اللغة بعد الآن.يمكن تعريف التظليلات في HTML واستخدامها في الكود. بالطبع ، هو نفسه بالنسبة لك لتحديد تظليل مع سلسلة في البرنامج الخاص بك.
دعونا نلقي نظرة على التعريف أولاً:
<scriptId = "tader-fs" type = "x-shader/x-fragment">
precisionmediumpfloat.
varyingvec4vcolor ؛
voidmain (void) {
gl_fragcolor = vcolor ؛
}
</script>
<scriptId = "tader-vs" type = "x-shader/x-vertex">
attributeVeC3Avertexposition ؛
attributeVEC4AvertexColor ؛
uniformmat4umvmatrix ؛
UniformMat4upmatrix ؛
varyingvec4vcolor ؛
voidmain (void) {
gl_position = upmatrix*umvmatrix*vec4 (avertexposition ، 1.0) ؛
vcolor = avertexcolor ؛
}
</script>
فيما يلي اثنين من التظليل: تظليل الوجه وتظليل قمة الرأس.
فيما يتعلق بهذين التظليل ، من الضروري أن نوضح هنا أن النماذج ثلاثية الأبعاد في أجهزة الكمبيوتر قد تم وصفها بشكل أساسي من خلال النقاط جنبًا إلى جنب مع وجوه مثلث. يقوم تظليل Vertex بمعالجة بيانات هذه النقاط ، ويعالج تظليل السطح بيانات النقاط على المثلث من خلال الاستيفاء.
يحدد تظليل Vertex المحدد أعلاه طريقة حساب الموضع واللون من الرؤوس ؛ بينما يحدد تظليل السطح طريقة حساب الألوان للنقاط المحرف. في سيناريوهات التطبيق الفعلية ، سيتضمن أيضًا معالجة الضوء والتأثيرات الأخرى في التظليلات.
تحديد التظليل ، يمكنك العثور عليها في البرنامج واستخدامها:
VarshaderProgram ؛
FunctionInitshaders () {
varfragmentShader = getShader (gl ، "tader-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)) {
في حالة تأهب ("لا يمكن أن لا يمكن أن يتجاوزوا") ؛
}
GL.USEPROGRAM (ShaderProgram) ؛
ShaderProgram.VertexPositionAttribute = gl.getattriblocation (TAMERProgram ، "avertexposition") ؛
GL.ENABLEVERTEXATTRIBARRAY (ShaderProgram.VertexPositionAttribute) ؛
ShaderProgram.VertexColorAttribute = gl.getattriblocation (TAMERProgram ، "avertexcolor") ؛
GL.ENABLEVERTEXATTRIBARRAY (TAMERPROGRAM.VERTEXCOLORATTRIBUTE) ؛
ShaderProgram.pmatrixuniform = gl.getUniformLocation (ShaderProgram ، "upmatrix") ؛
ShaderProgram.MvMatrixUniform = gl.getUniformLocation (ShaderProgram ، "umvmatrix") ؛
}
هناك تظليل ، ولكن كيفية جعل بطاقة الرسومات تنفذ؟ البرنامج مثل هذا الجسر. إنه رمز ثنائي أصلي لـ WebGL. وظيفتها هي في الأساس السماح لبطاقة الرسومات بتشغيل رمز التظليل لتقديم بيانات النموذج المحددة.
فيما يلي أيضًا طريقة مساعدة GetShader. هذه الطريقة هي اجتياز مستند HTML ، والعثور على تعريف التظليل ، وإنشاء التظليل بعد الحصول على التعريف. لن أخوض في التفاصيل هنا:
FunctionGetShader (GL ، ID) {
Varshaderscript ، Thesource ، CurrentChild ، Shader ؛
Shaderscript = document.getElementById (id) ؛
إذا (! ShaderScript) {
العودة
}
Thesource = "" ؛
CurrentChild = ShaderScript.firstchild ؛
بينما (CurrentChild) {
if (currentchild.nodeType == currentchild.text_node) {
thesource+= currentchild.textContent ؛
}
CurrentChild = currentchild.nextsibling ؛
}
if (TANDERSCRIPT.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
العودة
}
Gl.Shadersource (Shader ، Thesource) ؛
// CompiletheShaderProgram
gl.compileshader (Shader) ؛
// seefitCompileDsuccuccicscic
if (! gl.getShaderParameter (Shader ، gl.compile_status)) {
ALERT ("anerroroCcurredCompilingTheshaders:"+gl.getShaderInfolog (Shader)) ؛
العودة
}
Returnshader
}
الخطوة 3: إنشاء/تحميل بيانات النموذج - initbuffers في هذه الأمثلة الصغيرة ، يتم إنشاء بيانات النموذج بشكل أساسي مباشرة. في البرامج الفعلية ، يجب الحصول على هذه البيانات من تحميل النموذج:startrianleglevertexpositionbuffer ؛
startrianleglevertexcolorbuffer ؛
وظيفة bunctionBuffers () {
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 (vertices) ، 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 (colors) ، gl.static_draw) ؛
trianglevertexcolorbuffer.itemsize = 4 ؛
trianglevertexcolorbuffer.numitems = 3 ؛
}
يقوم الرمز أعلاه بإنشاء رؤوس وبيانات ملونة للمثلث ويضعها في المخزن المؤقت.
الخطوة 4: التقديم - DrawScene بعد إعداد البيانات ، ما عليك سوى تسليمها إلى WebGL لتقديمها. يتم استدعاء طريقة GL.Drawarrays هنا. انظر إلى الكود: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 (TAMERPROGRAM.VERTEXCOLORATTRIBUTE ، TrianglevertexColorBuffer.ItemSize ، gl.float ، false ، 0،0) ؛
setMatrixuniforms () ؛
gl.drawarrays (Gl.triangles ، 0 ، TrianglevertexpositionBuffer.Numitems) ؛
}
تقوم هذه الوظيفة أولاً بتعيين خلفية العالم ثلاثي الأبعاد إلى الأسود ، ثم تقوم بتعيين مصفوفة الإسقاط ، وتعيين موضع الكائن المراد رسمه ، ثم يرسم الكائن وفقًا لبيانات الرأس واللون في المخزن المؤقت. هناك أيضًا بعض الطرق الإضافية لتوليد مصفوفة الإسقاط ومستطيلات عرض النموذج (باستخدام طريقة المصفوفة الإضافية في مكتبة رسومات OAK3D) والتي لا علاقة لها بالموضوع ، لذلك لن أشرحها بالتفصيل هنا.
في الأساس هناك الكثير من العمليات. يتم تنفيذ قوام أكثر تعقيدًا ، وضوء ، وما إلى ذلك بناءً على هذه. يرجى الرجوع إلى البرنامج التعليمي الصيني أدناه ، والذي يحتوي على أمثلة مفصلة.
ماذا عن ذلك؟ كيف يبدو استخدام تطوير الويب الأصلي؟ لا تحتاج فقط إلى معرفة عميقة ثلاثية الأبعاد ، ولكن تحتاج أيضًا إلى معرفة تفاصيل التنفيذ المختلفة. تقوم WebGL بذلك للتكيف مع سيناريوهات التطبيق المختلفة بمرونة ، ولكن بالنسبة لمعظم غير المحترفين مثلي ، لا تحتاج إلى معرفة العديد من التفاصيل. وقد أدى ذلك إلى ظهور العديد من المكتبات الفصول الدراسية للمساعدة في التطوير ، مثل مكتبة OAK3D المستخدمة في هذا القسم (من أجل إظهار تطوير WebGL ، تم استخدام طرق مساعدة المصفوفة فقط في الأمثلة). سيقدم القسم التالي مكتبة رسومات Three.JS على نطاق أوسع.
المرجع العملي:البرنامج التعليمي الصيني: http://www.hiwebgl.com/؟p=42
مركز التطوير: https://developer.mozilla.org/en/webgl