Home > HTML5 > [PL] WebGL – jak go ugryźć

[PL] WebGL – jak go ugryźć

October 26, 2013 Leave a comment Go to comments

WebGL_logoNie ma co ukrywać, HTML5 jest coraz częściej wykorzystywany w aplikacjach webowych dla różnych celów. W poszczególnych wydaniach przeglądarek implementacja wzbogacana jest o kolejne elementy ze specyfikacji. Jednym z takich elementów jest WebGl – udostępniający API dla grafiki trójwymiarowej. Jednak w jaki sposób się do niego dobrać ?

Czym jest WebGL

Cytując wikipedię: jest rozszerzeniem możliwości języka JavaScript, zapewniającym dostęp do trójwymiarowego API. Nigdy nie widziałem trójwymiarowego API – jednak zdanie to oddaje swoje znaczenie. Nie ma tutaj żadnej magii – jeżeli ktoś używał OpenGLa to już załapie podstawy WebGla.

Gdzie jest dostępny

Praktycznie jest już dostępny w każdej przeglądarce desktopowej – również w IE począwszy od wersji 11. Aktualny stan implementacji w poszczególnych przeglądarkach można odnaleźć na stronie Can I Use – WebGl. Raport przedstawiający aktualne dostępne funkcjonalności można odnaleźć na stronach: Browser Leaks oraz Does my browser suport webgl.

Jak się do niego dobrać?

Zakładając, że na stronie znajduje się element canvas (bo na nim będzie wykonywane renderowanie) …

 <canvas 
  id="webglCanvas" 
  width="256" height="256"></canvas>

… przy pomocy JavaScript odpytujemy o ‘trójwymiarowe API’:

01. if (!window.WebGLRenderingContext) {  return; }   
02. var webglCanvas = document.getElementById('webglCanvas'); 
03. var contextNames = ['webgl','experimental-webgl','moz-webgl','webkit-3d']; 
04. var gl;
05. for(var i = 0; i < contextNames.length; i++){  
06.   try {   
07.     gl = webglCanvas.getContext(contextNames[i]);  
08.   } catch(e) { } 
09.   if (gl) { break; } 
10. }
11. if (!gl) { return; }

Zauważyć należy, że dostęp jest dwuetapowy. Najpierw sprawdzamy czy obiekt window udostępnia WebGLRenderingContext, a następnie z elementu canvas na stronie pobieramy odpowiedni kontekst. Tutaj zauważyć należy, że jeszcze nie wszystkie przeglądarki udostępniają WebGla pod tą samą nazwą, dlatego sprawdzamy kilka możliwości.

W linii jedenastej jedynie sprawdzamy, czy udało nam się znaleźć odpowiedni kontekst. Dalej możemy dopytać się o szczegóły i parametry implementacji.

12. ... gl.getParameter(gl.VERSION) ...
13. ... gl.getParameter(gl.VENDOR) ...
14. ... gl.getParameter(gl.RENDERER) ...
15. ... gl.getParameter(gl.SHADING_LANGUAGE_VERSION) ...

Narzędzia i przykłady

Na chwilę obecną to tyle.  Wiele przykładów i samouczków znajduje się na necie, poniżej podaję jedynie parę linków, gdzie można zassać więcej szczegółów:

Tags: , ,
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: