Учебники

WebGL — Контекст

Январь 19, 2019

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

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

Создание HTML-5 Canvas Element

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

пример

В следующем примере показано, как создать элемент canvas с размерами 500 × 500. Мы создали границу для холста, используя CSS для наглядности. Скопируйте и вставьте следующий код в файл с именем my_canvas.html .

Live Demo

<!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, — это получить идентификатор текущего элемента canvas.

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

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

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

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

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

canvas.getContext(contextType, contextAttributes);

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

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

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

WebGLContextAttributes

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

Sr.No. Атрибуты и описание
1

Альфа

Если его значение равно true, он обеспечивает альфа-буфер для холста.

По умолчанию его значение равно true.

2

глубина

Если его значение равно true, вы получите буфер рисования, который содержит буфер глубины не менее 16 бит.

По умолчанию его значение равно true.

3

трафарет

Если его значение равно true, вы получите буфер рисования, который содержит буфер трафарета не менее 8 бит.

По умолчанию его значение равно false.

4

Сглаживание

Если его значение равно true, вы получите буфер рисования, который выполняет сглаживание.

По умолчанию его значение равно true.

5

premultipliedAlpha

Если его значение равно true, вы получите буфер для рисования, который содержит цвета с предварительно умноженной альфа.

По умолчанию его значение равно true.

6

preserveDrawingBuffer

Если его значение равно true, буферы не будут очищены и будут сохранять свои значения до тех пор, пока автор не очистит или не перезаписает их.

По умолчанию его значение равно false.

Альфа

Если его значение равно true, он обеспечивает альфа-буфер для холста.

По умолчанию его значение равно true.

глубина

Если его значение равно true, вы получите буфер рисования, который содержит буфер глубины не менее 16 бит.

По умолчанию его значение равно true.

трафарет

Если его значение равно true, вы получите буфер рисования, который содержит буфер трафарета не менее 8 бит.

По умолчанию его значение равно false.

Сглаживание

Если его значение равно true, вы получите буфер рисования, который выполняет сглаживание.

По умолчанию его значение равно true.

premultipliedAlpha

Если его значение равно true, вы получите буфер для рисования, который содержит цвета с предварительно умноженной альфа.

По умолчанию его значение равно true.

preserveDrawingBuffer

Если его значение равно true, буферы не будут очищены и будут сохранять свои значения до тех пор, пока автор не очистит или не перезаписает их.

По умолчанию его значение равно false.

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

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

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

WebGLRenderingContext

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

холст

Это ссылка на элемент canvas, который создал этот контекст.

drawingBufferWidth

Этот атрибут представляет фактическую ширину буфера рисования. Он может отличаться от атрибута ширины HTMLCanvasElement.

drawingBufferHeight

Этот атрибут представляет фактическую высоту буфера рисования. Он может отличаться от атрибута высоты объекта HTMLCanvasElement.

51
Share: