WebGL

WebGL (Web Graphics Library) to API języka JavaScript służące do renderowania (rysowania) interaktywnej grafiki 3D i 2D poprzez kompatybilną przeglądarkę bez używania pluginów. WebGL został oparty na API OpenGL ES 2.0 i może zostać wykorzystany do pracy z elementem <canvas>.

Aktualnie Jest wspierany przez Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+ i Internet Explorer 11+; ponad to urządzenie użytkownika musi także spełniać odpowiednie warunki sprzętowe, aby móc obsłużyć WebGL (przede wszystkim obsługiwać OpenGL co najmniej w wersji 2.0).

Tematy

Rozpocznij pracę z WebGL: Czyli jak stworzyć pierwszy kontekst WebGL.
Dodawanie grafiki 2D do kontekstu WebGL: Czyli jak wyświetlić proste kształty używając WebGL.
Nakładamy kolory używając shaderów w WebGL: Czyli jak dodać nieco koloru naszym figurom w WebGL
Animacja obiektów w WebGL: Pokażemy jak zmieniać i przekształcać obiekty na potrzeby prostej animacji.
Tworzenie obiektów 3D używając WebGL: Pokażemy jak tworzyć i animować obiekty 3D (w tym przykładzie, sześcian).
Tworzenie tekstur w WebGL: Zademonstrowanie tworzenia map tekstur, na obiektach.
Światła w WebGL: Jak zasymulować efekty świetlne w twoim kontekście WebGL.
Animacja tekstur w WebGL: Pokaz, jak animować tekstury, w tym przypadku mapowanie strumienia Ogg na obracającym się sześcianie.
WebGL - najlepsze praktyki: Porady i sugestie na wdrożenie zawartości WebGL.
Cross-domain textures: Informacje na temat załadowania tekstur dla domen innych niż aktualne informacje, które są przetwarzane.
Używanie rozszerzeń: Jak używać rozszerzeń aby włączyć je w WebGL.

Zasoby

Raw WebGL: An introduction to WebGL: Rozmowa z Nick Desaulniers o wprowadzająca do podstaw WebGL. To jest idealne miejsce aby zacząć jeśli nigdy nie programowałeś grafiki niskopoziomowej.
WebGL - Specyfikacje: Specyfikacja WebGL.
Strona Khronos WebGL: Strona domowa WebGL w Khronos Group.
Learning WebGL: Strona z tutorialami na temat jak używać WebGL.
WebGL Fundamentals: Tutorial z podstawami WebGL.
WebGL Matrices: Wprowadzenie metryk używając 2D WebGL. Ta seria wyjaśnia także matematyczne zależności perspektyw 3D.
The WebGL Cookbook: Strona z poręcznymi przykładami kodu WebGL.
Planet WebGL: Agregat dla ludzi zaangażowanych w społeczność WebGL.
ewgl-matrices: Biblioteka 'blazing fast matrix' dla WebGL
glMatrix: Biblioteka JavaScript Matrix and Vector dla wysoko wydajnych app WebGL.
mjs: A JavaScript vector and matrix math library, optimized for WebGL usage.
Sylvester: Biblioteka Open Source do manipulowania wektorami i metrykami. Nie zoptymalizowana pod WebGl (eksperymentalna).
WebGL playground: Narzędzia online do twoarzenia i dzielenia się projektami WebGL. Dobra dla szybkich prototypów i eksperymenotwania.
WebGL Academy: HTML/Javascript edytor z tutorialami do nauki podstaw programowania WebGL.

Browser compatibility

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!

Pulpit
Mobile

Feature	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari
Basic support	4.0 (2.0)	9	11	12 (experiment)	5.1 (experiment)
`OES_texture_float`	6.0 (6.0)	?	?	?	?
`OES_standard_derivatives`	10.0 (10.0)	?	?	?	?
`EXT_texture_filter_anisotropic`	13.0 (13.0)	?	?	?	?
`WEBGL_compressed_texture_s3tc`	15.0 (15.0)	?	?	?	?
`drawingBufferWidth` and `drawingBufferHeight` attributes	9.0 (9.0)	?	?	?	?

Feature	Firefox Mobile (Gecko)	Chrome for Android	IE Mobile	Opera Mobile	Safari Mobile
Basic support	4	25 (experiment)	No support	12 (experiment)	8.1
`drawingBufferWidth` and `drawingBufferHeight` attributes	9.0 (9.0)	25	?	?	?
`OES_texture_float`	6.0 (6.0)	25	?	?	?
`OES_standard_derivatives`	10.0 (10.0)	25	?	?	?
`EXT_texture_filter_anisotropic`	13.0 (13.0)	25	?	?	?
`OES_element_index_uint`	?	25	?	?	?
`OES_vertex_array_object`	?	25	?	?	?
`WEBGL_compressed_texture_s3tc`	15.0 (15.0)	25 prefixed with WEBKIT_	?	?	?
`WEBKIT_EXT_texture_filter_nisotropic`	No support	25	No support	No support	?

Compatibility notes

In addition to the browser, the GPU itself also needs to support the feature. So, for example, S3 Texture Compression (S3TC) is only available on Tegra-based tablets. Most browsers make the WebGL context available through the webgl context name, but older ones need experimental-webgl as well. In addition, the upcoming WebGL 2 is fully backwards-compatible and will have the context name experimental-webgl2 in the future for testing.

Gecko notes

WebGL debugging and testing

Starting with Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7), there are two preferences available which let you control the capabilities of WebGL for testing purposes:

webgl.min_capability_mode: Boolean-owska stała, oznaczająca tryb w którym włączenie jej na true, przyczynia się do włączenia minimum kompatybilności. Kiedy ten tryb jest włączony, WebGL jest skonfigurowany w taki sposób, aby wspomagał w minimalnym zakresie jego możliwości, wymagane przez specyfikacje. Tryb ten zapewnia możliwość pracy kodu WebGL na urządzeniach i przeglądarkach niezależnie od ich kompatybilności. Opcja false jest ustawiona domyślnie.

webgl.disable_extensions: Boolean-owska stała, oznaczająca tryb w którym ustawienie jej na true, powoduje zamknięcie wszystkich rozszerzeń WebGL. Wartość false jest ustawiona domyślnie.