WebGL - kontekst

Aby napisać aplikację WebGL, pierwszym krokiem jest pobranie obiektu kontekstu renderowania WebGL. Ten obiekt współdziała z buforem rysowania WebGL i może wywoływać wszystkie metody WebGL. Aby uzyskać kontekst WebGL, wykonywane są następujące operacje -

Utwórz płótno HTML-5
Uzyskaj identyfikator kanwy
Uzyskaj WebGL

Tworzenie elementu Canvas HTML-5

W rozdziale 5 omówiliśmy sposób tworzenia elementu canvas HTML-5. W treści dokumentu HTML-5 napisz kanwę, nadaj jej nazwę i przekaż jako parametr do atrybutu id. Możesz zdefiniować wymiary płótna za pomocą atrybutów szerokości i wysokości (opcjonalnie).

Przykład

Poniższy przykład pokazuje, jak stworzyć element canvas o wymiarach 500 × 500. Utworzyliśmy obramowanie płótna za pomocą CSS dla widoczności. Skopiuj i wklej następujący kod w pliku o nazwiemy_canvas.html.

<!DOCTYPE HTML>
<html>
   <head>
      <style>
         #mycanvas{border:1px solid blue;}
      </style>
   </head>
   <body>
      <canvas id = "mycanvas" width = "300" height = "300"></canvas>
   </body>
</html>

To da następujący wynik -

Uzyskaj identyfikator Canvas

Po utworzeniu płótna musisz pobrać kontekst WebGL. Pierwszą rzeczą do zrobienia w celu uzyskania kontekstu rysunkowego WebGL jest pobranie identyfikatora bieżącego elementu canvas.

Identyfikator kanwy uzyskuje się przez wywołanie metody DOM (Document Object Model) getElementById(). Ta metoda przyjmuje wartość ciągu jako parametr, więc przekazujemy do niej nazwę bieżącej kanwy.

Na przykład, jeśli nazwa obszaru roboczego to my_canvas, to identyfikator płótna jest uzyskiwany, jak pokazano poniżej -

var canvas = document.getElementById('my_Canvas');

Pobierz kontekst rysowania WebGL

Aby uzyskać obiekt WebGLRenderingContext (lub obiekt kontekstu rysunku WebGL lub po prostu kontekst WebGL), wywołaj getContext() metoda prądu HTMLCanvasElement. Składnia metody getContext () jest następująca -

canvas.getContext(contextType, contextAttributes);

Podaj struny webgl lub experimental-webgl jako contentType. PlikcontextAttributesparametr jest opcjonalny. (Kontynuując ten krok, upewnij się, że Twoja przeglądarka obsługuje technologię WebGL w wersji 1 (OpenGL ES 2.0)).

Poniższy fragment kodu pokazuje, jak uzyskać kontekst renderowania WebGL. Tutajgl jest zmienną odniesienia do otrzymanego obiektu kontekstu.

var canvas = document.getElementById('my_Canvas');
var gl = canvas.getContext('experimental-webgl');

WebGLContextAttributes

Parametr WebGLContextAttributesnie jest obowiązkowe. Ten parametr udostępnia różne opcje, które akceptują wartości logiczne wymienione poniżej -

Sr.No.	Atrybuty i opis
1	Alpha Jeśli jego wartość jest prawdziwa, zapewnia bufor alfa do obszaru roboczego. Domyślnie jego wartość to true.
2	depth Jeśli jego wartość jest prawdziwa, otrzymasz bufor rysowania, który zawiera bufor głębi co najmniej 16 bitów. Domyślnie jego wartość to true.
3	stencil Jeśli jego wartość jest prawdziwa, otrzymasz bufor rysunkowy, który zawiera bufor szablonu o wielkości co najmniej 8 bitów. Domyślnie jego wartość to false.
4	antialias Jeśli jego wartość jest prawdziwa, otrzymasz bufor rysowania, który wykonuje wygładzanie. Domyślnie jego wartość to true.
5	premultipliedAlpha Jeśli jego wartość jest prawdziwa, otrzymasz bufor rysunkowy, który zawiera kolory ze wstępnie pomnożoną alfa. Domyślnie jego wartość to true.
6	preserveDrawingBuffer Jeśli jego wartość jest prawdziwa, bufory nie zostaną wyczyszczone i zachowają swoje wartości, dopóki nie zostaną wyczyszczone lub nadpisane przez autora. Domyślnie jego wartość to false.

Poniższy fragment kodu pokazuje, jak utworzyć kontekst WebGL z buforem wzornika, który nie będzie działać anti-aliasing.

var canvas = document.getElementById('canvas1');
var context = canvas.getContext('webgl', { antialias: false, stencil: true });

W czasie tworzenia WebGLRenderingContext tworzony jest bufor rysunkowy. Obiekt Context zarządza stanem OpenGL i renderuje do bufora rysunkowego.

WebGLRenderingContext

Jest to główny interfejs w WebGL. Reprezentuje kontekst rysowania WebGL. Ten interfejs zawiera wszystkie metody używane do wykonywania różnych zadań w buforze rysunku. Atrybuty tego interfejsu podano w poniższej tabeli.

Sr.No.	Atrybuty i opis
1	Canvas To jest odniesienie do elementu canvas, który utworzył ten kontekst.
2	drawingBufferWidth Ten atrybut reprezentuje rzeczywistą szerokość bufora rysunkowego. Może się różnić od atrybutu szerokości elementu HTMLCanvasElement.
3	drawingBufferHeight Ten atrybut przedstawia rzeczywistą wysokość bufora rysunkowego. Może się różnić od atrybutu wysokości HTMLCanvasElement.