WebGL - Контекст

Чтобы написать приложение WebGL, первым делом необходимо получить объект контекста визуализации WebGL. Этот объект взаимодействует с буфером рисования WebGL и может вызывать все методы WebGL. Для получения контекста WebGL выполняются следующие операции:

Создайте холст HTML-5
Получить идентификатор холста
Получить WebGL

Создание элемента холста HTML-5

В главе 5 мы обсудили, как создать элемент холста HTML-5. В теле документа HTML-5 напишите холст, дайте ему имя и передайте его в качестве параметра идентификатору атрибута. Вы можете определить размеры холста, используя атрибуты ширины и высоты (необязательно).

пример

В следующем примере показано, как создать элемент холста размером 500 × 500. Мы создали границу холста, используя CSS для видимости. Скопируйте и вставьте следующий код в файл с именемmy_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>

Это даст следующий результат -

Получите идентификатор холста

После создания холста вы должны получить контекст WebGL. Первое, что нужно сделать для получения контекста рисования WebGL, - это получить идентификатор текущего элемента холста.

Идентификатор холста получается путем вызова метода DOM (объектная модель документа) getElementById(). Этот метод принимает строковое значение в качестве параметра, поэтому мы передаем ему имя текущего холста.

Например, если имя холста my_canvas, то получается идентификатор холста, как показано ниже:

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

Получить контекст отрисовки WebGL

Чтобы получить объект WebGLRenderingContext (или объект контекста чертежа WebGL, или просто контекст WebGL), вызовите getContext() метод текущего HTMLCanvasElement. Синтаксис getContext () следующий:

canvas.getContext(contextType, contextAttributes);

Передайте струны webgl или же experimental-webgl как contentType. ВcontextAttributesпараметр не является обязательным. (Продолжая этот шаг, убедитесь, что ваш браузер поддерживает WebGL версии 1 (OpenGL ES 2.0)).

В следующем фрагменте кода показано, как получить контекст отрисовки WebGL. Вотgl является ссылочной переменной на полученный объект контекста.

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

WebGLContextAttributes

Параметр WebGLContextAttributesне обязательно. Этот параметр предоставляет различные параметры, которые принимают логические значения, как указано ниже -

Sr.No.	Атрибуты и описание
1	Alpha Если его значение истинно, он предоставляет холст альфа-буфер. По умолчанию его значение истинно.
2	depth Если его значение истинно, вы получите буфер рисования, который содержит буфер глубины не менее 16 бит. По умолчанию его значение истинно.
3	stencil Если его значение истинно, вы получите буфер рисования, который содержит буфер трафарета не менее 8 бит. По умолчанию его значение ложно.
4	antialias Если его значение истинно, вы получите буфер рисования, который выполняет сглаживание. По умолчанию его значение истинно.
5	premultipliedAlpha Если его значение истинно, вы получите буфер рисования, который содержит цвета с предварительно умноженным альфа-каналом. По умолчанию его значение истинно.
6	preserveDrawingBuffer Если его значение истинно, буферы не будут очищены и сохранят свои значения до тех пор, пока автор не очистит или не перезапишет их. По умолчанию его значение ложно.

В следующем фрагменте кода показано, как создать контекст WebGL с буфером трафарета, который не будет работать. anti-aliasing.

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

Во время создания WebGLRenderingContext создается буфер рисования. Объект Context управляет состоянием OpenGL и выполняет рендеринг в буфер рисования.

WebGLRenderingContext

Это основной интерфейс в WebGL. Он представляет контекст рисования WebGL. Этот интерфейс содержит все методы, используемые для выполнения различных задач в буфере чертежа. Атрибуты этого интерфейса приведены в следующей таблице.

Sr.No.	Атрибуты и описание
1	Canvas Это ссылка на элемент холста, создавший этот контекст.
2	drawingBufferWidth Этот атрибут представляет фактическую ширину буфера рисования. Он может отличаться от атрибута ширины HTMLCanvasElement.
3	drawingBufferHeight Этот атрибут представляет фактическую высоту буфера рисования. Он может отличаться от атрибута высоты HTMLCanvasElement.