WebGL (Web Graphics Library; ქართ. ვებგრაფიკის ბიბლიოთეკა) წარმოადგენს JavaScript API-ს, რომელიც გამოიყენება ინტერაქტიული ორ და სამგანზომილებიანი გრაფიკული გამოსახვისთვის თავსებად ბრაუზერებში, ყოველგვარი დამატებითი მოდულების გარეშე. WebGL ამას აკეთებს API-ს მეშვეობით, დაფუძნებულ OpenGL ES 2.0 ტექნოლოგიაზე, რომელიც გამოიყენება HTML5-ის <canvas> ელემენტებში.

WebGL-ის მხარდაჭერა წარმოდგენილია Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+, Internet Explorer 11+ და Microsoft Edge ანაწყობის 10240+ ვერსიებში; თუმცა, მომხმარებელს ასევე უნდა გააჩნდეს სათანადო აპარატურული მხარდაჭერაც.

<canvas> ელემენტი ასევე გამოიყენება Canvas 2D-ში ორგანზომილებიანი გრაფიკისთვის ვებგვერდებზე.

ცნობარი

ძირითადი სამუშაო გარსები

გაფართოებები

ხდომილებები

მუდმივი სიდიდეები და სახეობები

WebGL 2

WebGL-ის ძირითად განახლებას წარმოადგენს WebGL 2, რომელიც უზრუნველყოფილია WebGL2RenderingContext გარსით. იგი ეფუძნება OpenGL ES 3.0-ს და მოიცავს შემდეგ შესაძლებლობებს:

ასევე იხილეთ სვეტის სტატია  „WebGL 2 გამოჩნდა Firefox-ში“ და webglsamples.org/WebGL2Samples უკეთ გასაცნობად.

სახელმძღვანელოები და გაკვეთილები

ქვემოთ შეგიძლიათ იხილოთ მრავალი სახის სახელმძღვანელო, რომელიც დაგეხმარებათ გაეცნოთ WebGL-ის საფუძვლებს და ასევე გაკვეთილები, სადაც მოცემულია ნაბიჯ-ნაბიჯ მითითებები მაგალითებთან ერთად.

სახელმძღვანელოები

მონაცემები WebGL-ში
სახელმძღვანელო ცვლადების, ბუფერისა და სხვა სახის მონაცემების გამოყენების შესახებ, WebGL-ის კოდის წერისას.
WebGL-ის ოსტატურად გამოყენება
რჩევები და შემოთავაზებები თქვენი WebGL-ის შიგთავსის მაღალი ხარისხის, წარმადობისა და შეუფერხებლად მუშაობის უზრუნველსაყოფად.
გაფართოებების გამოყენება
სახელმძღვანელო WebGL-ის გაფართოებების გამოყენების შესახებ.

გაკვეთილები

WebGL-ის გაკვეთილები
დამწყების სახელმძღვანელო WebGL-ის ძირითადი საკითხების შესახებ. მეტად გამოსადეგი საშუალება დასაწყებად, თუ არ გაქვთ გამოცდილება WebGL-თან მუშაობის.

მაგალითები

მარტივი ორგანზომილებიანი WebGL-ის ანიმაციის მაგალითი
მაგალითში ნაჩვენებია მარტივი ანიმაცია ერთფერიანი ფიგურის. განხილული საკითხები მოიცავს მოხაზულობის ფარდობის განსაზღვრას, ფუნქციას გრაფიკული გამოსახვის პროგრამების ასაწყობად და WebGL-ში ხატვის საწყისებს.

გამოცდილთათვის

WebGL-ის მოდელი, ხედი, გამოსახვა
ვრცელი ახსნა სამი ძირითდი მატრიცის, რომლებიც ჩვეულებრივ გამოიყენება სამგანზომილებიანი ობიექტის საჩვენებლად: მოდელის, ხედისა და გამოსახვსი მატრიცებ.
Matrix math ვებგვერდებისთვის
გამოსადეგი სახელმძღვანელო სადაც მოცემულია, თუ როგორ მუშაობს სამგანზომილებიანი მატრიცის გარდაქმნა და როგორ არის შესაძლებელი ამის გამოყენება ვებსივრცეში — როგორც WebGL-ის გამოთვლებისთვის, ასევე CSS3 გარდაქმნებისთვის.

სასარგებლო მასალები

  • ნედლი WebGL: შესავალი WebGL-ში ნიკ დესოლნირსის სიტყვით გამოსვლა, რომელიც ეხება WebGL-ის საფუძვლებს. საუკეთესო საშუალება სწავლის დასაწყებად მათთვის, ვისაც არასდროს უმუშავია დაბალი დონის გრაფიკულ პროგრამირებაზე.
  • Khronos WebGL-ის საიტი მთავარი ვებსაიტი WebGL-ზე Khronos-ის ჯგუფში.
  • WebGL-ის შესწავლა საიტი გაკვეთილებით, თუ როგორ უნდა გამოიყენოთ WebGL.
  • WebGL-ის საფუძვლები მარტივი გაკვეთილები WebGL-ის ძირითად საკითხებზე.
  • WebGL-ის სათამაშო მოედანი ვებხელსაწყო WebGL-ის პროექტების შესაქმნელად და გასაზიარებლად. გამოსადეგია საჩვენებელი და საცდელი ნიმუშების სწრაფი შექმნისთვის.
  • WebGL-ის აკადემია HTML/JavaScript ხელსაწყო webgl-ის დაპროგრამების საფუძვლების შესასაწავლი გაკვეთილებით.
  • WebGL-ის სტატისტიკა საიტი სტატისტიკური მონაცემებით WebGL-ის შესაძლებლობების შესახებ ბრაუზერებსა და სხვადასხვა სისტემებზე.

ბიბლიოთეკები

  • glMatrix JavaScript-ის მატრიცული და ვექტორული ბიბლიოთეკა, მაღალი წარმადობის WebGL-ის პროგრამებისთვის
  • Sylvester ღია წყაროს მქონე ბიბლიოთეკა ვექტორების და მატრიცების დასამუშავებლად. არაა განკუთვნილი უშუალოდ WebGL-ისთვის, თუმცა საკმაოდ მძლავრია.

ვერსიები

ვერსია მდგომარეობა შენიშვნა
WebGL 1.0 Recommendation საწყისი მნიშვნელობა. დაფუძნებულია OpenGL ES 2.0-ზე
WebGL 2.0 Editor's Draft ანაწყობები WebGL 1-ის. დაფუძნებულია OpenGL ES 3.0-ზე.
OpenGL ES 2.0 Standard  
OpenGL ES 3.0 Standard  

ბრაუზერთან თავსებადობა

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

შესაძლებლობა Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
ძირითადი მხარდაჭერა 9 (Yes) 4.0 (2.0) 11 12 5.1
WebGL 2 56 No support 51 (51) No support 43 No support
შესაძლებლობა Chrome  Android-ზე Edge Firefox მობილურისთვის (Gecko) IE მობილურისთვის Opera მობილურისთვის Safari მობილურისთვის
ძირითადი მხარდაჭერა 25 (Yes) 4 No support 12 8.1
WebGL 2 ? ? ? ? ? ?

თავსებადობის შენიშვნები

გარდა ბრაუზერისა, თავად გრაფიკული პროცესორიც (GPU) უნდა უჭერდეს მხარს ამ ტექნოლოგიას. ასე რომ, მაგალითად, S3-ტექსტურების შედგენა (S3TC) ხელმისაწვდომია მხოლოდ Tegra-ზე დაფუძნებულ პლანშეტებზე. ბრაუზერების უმეტესობაში WebGL ხელმისაწვდომია webgl დასახელებით, მაგრამ ძველებზე ასევე საჭიროა მიეთითოს experimental-webgl. ამასთან, WebGL 2 ვერსია დასახელებით webgl2 სრულად თავსებადია წინა ვერსიასთან.

Gecko-ძრავასთან დაკავშირებული შენიშვნები

WebGL-ის გამართვა და შემოწმება

დაწყებული Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7) ვერსიიდან, ორი პარამეტრია ხელმისაწვდომი, რომელიც იძლევა WebGL-ის შესაძლებლობების გამოყენების საშუალებას საცდელი მიზნებით:

webgl.min_capability_mode
ბულის მონაცემი, რომელიც თუ ჭეშმარიტია (true), რთავს უმცირესი შესაძლებლობების რეჟიმს. ამ რეჟიმში, WebGL-ით მხარდაჭერილია მხოლოდ აუცილებელი შესაძლებლობების ნაკრები, რომელსაც საჭიროებს WebGL-ის შესაბამისი ვერსია. ეს გამოსადეგია იმის განსაზღვრისთვის, რომ WebGL-ის კოდი აუცილებლად იმუშავებს ნებისმიერ მოწყობილობასა და ბრაუზერში, არსებული შესაძლებლობების მიუხედავად. ნაგულისხმევად დაყენებულია „მცდარი“ (false).
webgl.disable_extensions
ბულის მონაცემი, რომელსაც თუ მიეთითება true, გათიშავს WebGL-ის ყველა გაფართოებას. ნაგულისხმევად მითითებულია false.

ასევე იხილეთ

დოკუმენტების ჭდეები და წვლილის შემტანები

ამ გვერდის შექმნაში, წვლილის შემტანები: Georgianizator
ბოლო განახლების ავტორი: Georgianizator,