Wprowadzenie do WebGL 1.0

July 18, 2018WebGL Standard

WebGL – co to jest?

Najprościej mówiąc: WebGL to narzędzie, które umożliwia nam tworzenie scen i obiektów graficznych w przeglądarce. Format bazuje na standardzie OpenGL, a za jego renderowanie odpowiada bezpośrednio GPU. Z użyciem wbudowanych w HTML-a funkcjonalności (takich jak <canvas>) pozwala nam umieszczać na stronach internetowych rozbudowane elementy 2D i 3D. Nasz kod oparty na WebGL-u będzie składać się z dwóch części: wysokopoziomowej JavaScriptowej oraz niskopoziomowej, napisanej w GLSL (zarządzającej shaderami).

Którą wersję WebGL wybrać – 1.0 czy 2.0?

Na początek rozważmy popularny dylemat: z której wersji WebGL-a najlepiej skorzystać. Zazwyczaj warto opierać się na najnowszych aktualizacjach narzędzi, ale na chwilę obecną (lipiec 2018) caniuse niestety radzi inaczej:

Wersja 1.0 jest wspierana w niemal wszystkich przeglądarkach, podczas gdy wersja 2.0 prezentuje się nieco mniej zielono:

Wynika to tak naprawdę z dwóch kwestii. Po pierwsze: WebGL nie jest standardem W3C – stworzyła go i zarządza nim prywatna firma Khronos Group. Po drugie: stabilna wersja 2.0 została wypuszczona dopiero w kwietniu tego roku, dlatego nie wszyscy producenci przeglądarek zdążyli ją u siebie wdrożyć.

Biorąc pod uwagę powyższe argumenty, niniejszy tutorial oprę na WebGL 1.0.

Oczywiście wersję 2.0 jak najbardziej warto poznać, szczególnie że zawiera wiele przydatnych feature’ów (np. lepsze zarządzanie teksturami, tekstury 3D (!), zaawansowane operacje na macierzach itp), więc tak czy inaczej zachęcam do korzystania z niej w indywidualnych/niekomercyjnych projektach:).

Pierwszy render

Dość teoretyzowania – przejdźmy do praktyki!

Najpierw stwórzmy prosty dokument HTML z pojedynczym obiektem <canvas> i zaincludowanym skryptem:

<!DOCTYPE HTML>
<html>
   <head>
      <title>WebGL example</title>
   </head>
   <body>
      <canvas id="webgl" width="400" height="400"></canvas>
      <script src="script.js"></script>
   </body>
</html>

<!DOCTYPE HTML>

<html>

<head>

<title>WebGL example</title>

</head>

<body>

</body>

</html>

Oraz plik script.js:

class Drawing {
  constructor(options) {
    this.canvas = options.canvas;
    this.gl = options.gl;
  }

  drawBackground() {
      this.gl.clearColor(0.2,0.2,0.2,1);
      this.gl.clear(this.gl.COLOR_BUFFER_BIT);
  }
}

function createGl() {
    const canvas = document.getElementById('webgl');
    const gl = canvas.getContext('webgl');
    if (gl === null) {
        alert("Your browser does not support WebGL.");
        return;
    }
    const drawing = new Drawing({
        canvas: canvas,
        gl: gl
    });

    drawing.drawBackground();
}

createGl();

class Drawing {

constructor(options) {

this.canvas = options.canvas;

this.gl = options.gl;

}

drawBackground() {

this.gl.clearColor(0.2,0.2,0.2,1);

this.gl.clear(this.gl.COLOR_BUFFER_BIT);

}

function createGl() {

const canvas = document.getElementById('webgl');

const gl = canvas.getContext('webgl');

if (gl === null) {

alert("Your browser does not support WebGL.");

return;

}

const drawing = new Drawing({

canvas: canvas,

gl: gl

});

drawing.drawBackground();

}

createGl();

Do utworzenia WebGL-owego kontekstu przygotowałam funkcję createGl(). Najpierw pobiera ona element <canvas> utworzony w HTML-u (jako obszar, w którym będziemy rysować) oraz uruchamia samego WebGL-a. Jeżeli korzystamy z przeglądarki, która nie obsługuje tej technologii, pod stałą gl przypisany zostanie null – możemy wtedy zrezygnować z wykonywania dalszej części kodu. W sytuacji, gdy kontekst WebGL załadował się poprawnie, tworzymy nowy obiekt klasy Drawing.

W metodzie drawBackground() znajdują się dwie linijki kodu, które pozwolą nam wyświetlić szary prostokąt w przeglądarce. Pierwsza z nich jest wywołaniem metody clearColor(), określającej preset (w tym wypadku kolor) użyty następnie przez clear() do wypełnienia obszaru. Parametr drugiej metody (czyli w naszym kodzie gl.COLOR_BUFFER_BIT) to maska określająca który z buforów będziemy konfigurować ustawionymi wstępnie wartościami. Najczęściej skorzystamy właśnie z bufora koloru.

Po uruchomieniu kodu w przeglądarce powinieneś zobaczyć taki oto widok:

Gratulacje – to Twoja pierwsza grafika z wykorzystaniem WebGL-a :).

Menu

Wprowadzenie do WebGL 1.0

WebGL – co to jest?

Którą wersję WebGL wybrać – 1.0 czy 2.0?

Pierwszy render

WebGL:

Facebook

Kontakt

Kategorie