Matematika fakulteti

3D vizualizatsiyaga Web GL orqali tayyorgarlik

3D ko'rinishida ko'rsatish uchun WebGL-dan foydalanishingiz kerak bo'lgan birinchi narsa - bu tuval element. Quyidagi HTML parcha tuval elementini o'z ichiga oladi va bizning WebGL kontekstimizni ishga tushiradigan yuklash hodisalarini boshqaruvchisini belgilaydi.

Ushbu qadam rangni tozalash, bufer bitini tozalash, chuqurlik sinovini yoqish, ko'rish portini sozlash va hokazo operatsiyalarni o'z ichiga oladi. Va nihoyat, siz kerakli usullardan birini chizishingiz kerak --rawArrays () yoki drawElines .

WebGL OpenGLES2-dan ko'chirilgan kutubxona bo'lib, OpenGLES2 OpenGL ning kichik guruhi. OpenGL API-dagi ro'yxatda vertex tamponlarini GPUga vertex tamponini markerni ko'rsatmasdan o'tishning yana bir yo'li mavjud. Misol uchun, OpenGL muhitida siz gl.begin, gl.Vertex, gl.end va boshqalarni qidirish orqali vertex bufer ma'lumotlarini yuborishingiz mumkin.

Bu erda qiladigan birinchi narsa - bu tuval elementiga mos yozuvlar olish, uni tuvalning o'zgaruvchisiga qo'yish. Shubhasiz, agar siz tuvalga havolani qayta-qayta olishingizga hojat bo'lmasa, ushbu qiymatni global miqyosda saqlashdan qochishingiz kerak, faqat uni mahalliy o'zgaruvchiga yoki ob'ekt maydoniga saqlashingiz kerak.

Tuvalga havolani olishimiz bilan, bizWebGL () funktsiyasini chaqiramiz; Biz bu funktsiyani darhol aniqlaymiz, uning vazifasi WebGL kontekstini boshlashdir.

Agar kontekst muvaffaqiyatli boshlangan bo'lsa, gl unga havolani o'z ichiga oladi. Bu holda biz rangni bufer tusini (fon rangi) qora rangga, so'ng kontekstni shu rang bilan tozalaydigan qilib belgilaymiz. Shundan so'ng, kontekst sozlamalar bilan tuzilgan. Bunday holda, biz chuqurlik tamponini yoqamiz va yaqinroq ob'ektlar uzoqroq narsalarga to'g'ri kelishini aniqlaymiz.

Yuqorida aytilganlarning barchasi faqat boshlang'ich boshlash uchun amalga oshirilishi kerak. Birozdan keyin biz uch o'lchovli ob'ektlarni vizualizatsiya qilish bo'yicha ishlarni ko'ramiz.

Shunday qilib, gl.enableVertexAttribArray deb nomlash shart emas.

Biroq WebGL-da eableVertexAttribArray-ni chaqirmasdan buferlarni aniqlashning hech qanday usuli yo'q. Shuning uchun siz hech qachon usulni chaqirishingiz shart emas, bu faqat tarixiy sababdir.

Va har bir freymda activVertexAttribArray deb nomlashingiz shart emas. Har bir freymga qo'ng'iroq qilishingiz shart emas, chunki u juda og'ir operatsiya. Faqat buferni ishga tushirgandan so'ng activVertexAttribArray deb nomlashingiz kerak.

WebGL-da disableVertexAttribArray deb atashga hojat yo'q. Bu usul aslida nima uchun avvalo mavjudligini bilib olaman.

Ma'lumingizcha, WebGL OpenGLES2-dan ko'chirilgan kutubxona bo'lib, OpenGLES2 OpenGL ning kichik guruhi. OpenGL API-dagi ro'yxatda vertex tamponlarini GPUga vertex tamponini markerni ko'rsatmasdan o'tishning yana bir yo'li mavjud. Misol uchun, OpenGL muhitida siz gl.begin, gl.Vertex, gl.end va boshqalarni qidirish orqali vertex bufer ma'lumotlarini yuborishingiz mumkin. Shunday qilib, gl.enableVertexAttribArray deb nomlash shart emas.

Biroq WebGL-da eableVertexAttribArray-ni chaqirmasdan buferlarni aniqlashning hech qanday usuli yo'q. Shuning uchun siz hech qachon usulni chaqirishingiz shart emas, bu faqat tarixiy sababdir.

Har bir freymda activVertexAttribArray deb nomlashingiz shart emas. Har bir freymga qo'ng'iroq qilishingiz shart emas, chunki u juda og'ir operatsiya. Faqat buferni ishga tushirgandan so'ng activVertexAttribArray deb nomlashingiz kerak.

WebGL 2006 yilda Canvas 3D prototipini ishlab chiqqan Mozilla vakili Vladimir Vukkievichning Canvas 3D-dagi tajribalaridan kelib chiqdi. 2007 yil oxirida Mozilla [19] va Opera [20] o'zlarining alohida dasturlarini yaratdilar.

2009 yil boshida Mozilla va Khronos WebGL ishchi guruhini tashkil qildilar [21] va 2009 yil 10 dekabrda konsorsium birinchi WebGL spetsifikatsiyasining qoralamasini nashr etdi [18] [22]. Guruh raisi Arun Ranganatan ta'kidlashicha, aniqlashtirish ishlari 2010 yilning birinchi choragida yakunlanishi kutilmoqda [18] [22]. Texnik xususiyatlarning birinchi nashri so'nggi tahriri 2011 yil 3 martda San-Frantsiskoda taqdim etildi [23] [24].

Texnikaning keyingi versiyasini ishlab chiqish 2013 yilda boshlangan. OpenGL ES 3.0-ga asoslangan WebGL 2.0 standarti 2017 yil yanvar oyida Khronos konsorsiumi tomonidan tasdiqlangan [25]. Standartning yangi versiyasi Firefox 51, Chrome 56 va Opera 4 brauzerlarida amalga oshirildi

2011 yil iyun oyida Microsoft WebGL texnologiyasi xavfsizligidan xavotirda bo'lib, uning uskunasiga haddan tashqari kirish huquqlarini va xizmatlarni ishonchli rad etish (DoS) himoya mexanizmlarini rad etdi. [27] Mozilla vitse-prezidenti Mark Schaver Microsoft kompaniyasining tanqidlarini rad etib, keltirilgan dalillarni bo'rttirib ko'rsatdi. Shuningdek, u Microsoft-ning WebGL bilan bir xil printsiplarga asoslangan o'zining 3D Silverlight 5 veb-texnologiyasiga ega ekanligini ta'kidladi. Keyinchalik, Microsoft Internet Explorer 11 brauzerida qo'llab-quvvatlash orqali WebGL texnologiyasiga bo'lgan munosabatini o'zgartirdi. [29]

Xavfsizlik nuqtai nazaridan Apple, Safari-da WebGL-ni qo'llab-quvvatlash qarorini kechiktirganiga qaramay, bu haqda 2014 yilgi WWDC-da e'lon qildi.

Kutubxonalar

WebGL dasturlarini ishlab chiqishni soddalashtirish uchun turli xil ramkalar va kutubxonalar mavjud. Birinchi ommaviy kutubxona WebGLU edi . WebGL uchun boshqa kutubxonalar GLGE, C3DL, Copperlicht , SpiderGL, gwt-g3d (GWT uchun o'rash).

• 
  Turbulenz, OSGJS [35] ni o'z ichiga oladi. ], XB PointStream va CubicVR.js
  

.

• 
  Blend4Web sizga 3DG modellashtirish va Blender animatsiyasining ochiq paketidagi WebGL uchun tarkibni vizual ravishda tahrirlash va uni bitta operatsiyada brauzerlarda ishlash uchun eksport qilishga imkon beradi .
  

• 
  Verge3D - sahnalarni to'g'ridan-to'g'ri standart muharrirlardan (Autodesk 3ds Max va Blender qo'llab-quvvatlanadi) dasturlashsiz interfaol skriptlarni qo'shish qobiliyati bilan eksport qiluvchi WebGL-renderer.
  

Tasvirlarga effektni kanvas filtrlari va svg filtrlardan qanday foydalanish haqida allaqachon gaplashdik. Keling, ushbu mavzuni davom ettiramiz va webGl-ni brauzerda rasmlarni filtrlash vazifalarini hal qilish usullaridan biri sifatida ko'rib chiqamiz.

WebGl - bu OpenGl printsiplarini meros qilib oluvchi va brauzerda grafik protsessor (GPU) ning barcha jozibalaridan foydalanishga imkon beruvchi brauzer API. Bizning vazifamizga muvofiq WebGl-ning asosiy ustunligi - bu barcha rasm piksellarini parallel ravishda qayta ishlash. Tuvaldan farqli o'laroq, biz butun rasmni ketma-ket aylanib chiqib, har bir piksel uchun hisob-kitoblarni amalga oshirishimiz shart emas.
Gap shundaki, GPU (grafik protsessor), protsessordan (markaziy protsessor) farqli o'laroq, parallel ravishda ishlashi mumkin bo'lgan o'n minglab yadrolarga ega.
Bu erda GPU va CPU o'rtasidagi ishlash farqini aniq tushuntiradigan yaxshi eski video.

Shunday qilib, rasmlarni filtrlash uchun WebGL-dan foydalanib, har bir rasmni biz aniqlagan qonunlarga muvofiq qayta ishlaydigan alohida GPU yadrosiga beramiz.

Ushbu shader GPU-dagi har bir piksel uchun ishlov berish algoritmini tavsiflovchi GLSL (OpenGL Shading Language) sintaksisiga mos keladigan kod qismidir.
3D-da vertikal va ko'pburchaklar bilan ishlash uchun Vektor (Vertex Shaders).

To'qimalar bilan ishlash uchun piksel (Fragment Shaders).

Rasmni filtrlash vazifasining bir qismi sifatida biz faqat pikselli soyalarni qiziqtiramiz.
Keling, sintaksis qo'rquvidan xalos bo'lamiz va yuqorida tavsiflangan shader faqat tasvirni teskari yo'naltiradi. Uning butun mohiyati mana shu chiziqda yotadi:
color.rgb = 1.0 - color.rgb;
Kodning qolgan qismi o'zgaruvchilar deklaratsiyasi, tasvir manbaini tavsifi va chiqishdagi qiymatlar.
GLSL tilining ba'zi xususiyatlari:

Barcha qiymatlar 0..1 oralig'ida

GLSL x, y, z, w va r, g, b, a harflari yordamida vektorlarning tarkibiy qismlariga kirishga imkon beradi. Shunday qilib, ikki o'lchovli rasm uchun (vec2) siz pos.x, pos.y.dan foydalanishingiz mumkin. Rang (vec4) uchun siz color.r, color.g, color.b, color.a dan foydalanishingiz mumkin

GLSL qisqartirilgan yozuvlarni qo'llab-quvvatlaydi. Masalan, color.rgb (darhol qizil, yashil va ko'k kanal bilan ishlating), color.ra (faqat qizil kanal va shaffoflik kanali) va boshqalar. Bu shunchaki yoqimli sintaktik shakar. Yozib olish

color.rgb = 1 - color.rgb;

yozuvga o'xshash

color.r = 1 - color.r; color.g = 1 - color.g; color.b = 1 - color.b;

Ko'pgina GLSL funktsiyalari bir necha turdagi kirish parametrlari (float, vec2, vec3 va vec4) bilan ishlashi mumkin.

GLSL nosozliklarni tuzatish oson ish emas, lekin Chroma JS konsoli ba'zi tafsilotlarda xatolar haqida xabar beradi va muammoni keltirib chiqaradigan shader chizig'iga ishora qiladi.
Bu yerda aniq ayta olaman: o'z velosipedingizni ixtiro qilmang. WebGl juda yuqori kirish chegarasiga ega. Bu muammolarni hal qilish uchun mo'ljallangan, 2D tasvirlarni filtrlashdan ko'ra kattaroqlik darajasi. Xuddi shu shaderni qo'llashdan oldin sahnani o'rnatish va sozlash uchun siz juda qimmatli vaqtni sarf qilasiz. Bu pulemyot pashshasini o'ldirish kabi narsa.
WebGL-ga asoslangan rasmlarni filtrlash uchun tayyor kutubxonalardan foydalanish ancha oson va yoqimli. Keling, ulardan ba'zilarini ko'rib chiqaylik.


WebGL yordamida rasmlarni filtrlashning afzalliklari:

Siz so'nggi 14 yil ichida (2001 yildan beri) OpenGL uchun GLSL-da yozilgan tayyor shaderlardan foydalanishingiz mumkin.

Jonli video oqimlar uchun foydalanish mumkin.