WebGL - Context: A Friendly Guide for Beginners

Здравствуйте, будущие маги WebGL! Я рад стать вашим проводником в этом захватывающем путешествии в мир WebGL. Как кто-то, кто teaches компьютерную науку уже много лет, я могу сказать, что WebGL похож на магическую кисть для вашего веб-браузера. Он позволяет вам создавать потрясающие 3D-графику прямо на ваших веб-страницах! Так что, давайте натянем рукава и окунемся, не так ли?

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

Сначала нам нужно полотно для рисования. В HTML5 у нас есть такая полезная штука, как элемент <canvas>. Это как чистый лист бумаги, на котором мы будем рисовать наши шедевры WebGL.

Давайте создадим наш canvas:

<canvas id="myWebGLCanvas" width="800" height="600">
Ваш браузер не поддерживает HTML5 canvas.
</canvas>

Этот код создает canvas шириной 800 пикселей и высотой 600 пикселей. Мы дали ему ID "myWebGLCanvas" - думайте об этом как о бейдже для нашего canvas. Текст внутри тегов - это запасной message для браузеров, которые не поддерживают canvas (но не волнуйтесь, большинство современных браузеров это делают).

Получение ID Canvas

Теперь, когда у нас есть наш canvas, мы должны получить его в нашем JavaScript коде. Мы делаем это с помощью метода getElementById. Это как звать наш canvas по его бейджу.

let canvas = document.getElementById('myWebGLCanvas');

Эта строка находит наш элемент canvas и хранит его в переменной, называемой canvas. Легко!

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

Теперь comesexcitingчасть - получение нашего контекста WebGL. Контекст - это как наш набор магических инструментов для рисования, который мы будем использовать на нашем canvas.

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

if (!gl) {
console.log('WebGL не поддерживается, переходим на experimental-webgl');
gl = canvas.getContext('experimental-webgl');
}

if (!gl) {
alert('Ваш браузер не поддерживает WebGL');
}

Давайте разберем это:

1. Мы пытаемся получить контекст WebGL с помощью getContext('webgl').
2. Если это не срабатывает (может быть, браузер немного старый), мы пробуем experimental-webgl.
3. Если мы все еще не получаем контекст, мы информируем пользователя, что их браузер не поддерживает WebGL.

WebGLContextAttributes

Когда мы создаем наш контекст WebGL, мы можем указать некоторые атрибуты, чтобы настроить его поведение. Это как выбирать настройки для нашей магической кисти. Вот таблица доступных атрибутов:

Атрибут	Описание	Значение по умолчанию
alpha	Canvas содержит буфер alpha	true
depth	Рисующий буфер имеет буфер глубины не менее 16 бит	true
stencil	Рисующий буфер имеет буфер шаблона не менее 8 бит	false
antialias	Рисующий буфер выполняет сглаживание	true
premultipliedAlpha	Композитор страницы будет предполагать, что рисующий буфер содержит цвета с умноженным alpha	true
preserveDrawingBuffer	Буферы не будут очищены и сохранят свои значения до их стирания или перезаписи	false
failIfMajorPerformanceCaveat	Создание контекста будет fail, если производительность системы низка	false

Чтобы использовать эти атрибуты, мы можем передать объект при получении контекста:

let contextAttributes = {
alpha: false,
depth: true,
stencil: true,
antialias: true,
premultipliedAlpha: false,
preserveDrawingBuffer: false,
failIfMajorPerformanceCaveat: false
};

let gl = canvas.getContext('webgl', contextAttributes);

WebGLRenderingContext

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

Вот простой пример, который очищает canvas красивым sky blue цветом:

if (gl) {
// Установить цвет очищения до sky blue
gl.clearColor(0.529, 0.808, 0.922, 1.0);

// Очистить буфер цвета с указанным цветом очищения
gl.clear(gl.COLOR_BUFFER_BIT);
}

Давайте разберем это:

1. gl.clearColor(0.529, 0.808, 0.922, 1.0): Это устанавливает цвет, которым мы будем очищать canvas. Числа представляют собой значения Red, Green, Blue и Alpha, которые варьируются от 0 до 1.
2. gl.clear(gl.COLOR_BUFFER_BIT): Это действительно очищает canvas с указанным цветом.

И вуаля! Вы только что нарисовали свой первый шедевр WebGL - красивый sky blue canvas!

Помните, это только начало. WebGL имеет множество функций, позволяющих создавать сложную 3D-графику. Это как учиться рисовать - мы начинаем с чистого canvas и одного цвета, но с практикой вы сможете создавать сложные 3D-миры в кратчайшие сроки!

Заканчивая это введение в контекст WebGL, я вспоминаю свой первый раз, когда я teaching этот концепт. У меня был студент, который был так взволнован, что очищает canvas разными цветами, что он провел целый день, создавая программу "color changing mood light". Это просто показывает, что даже простые концепты могут зажечь不可思议ное творчество!

В следующем уроке мы углубимся в WebGL и начнем рисовать некоторые фигуры. Пока что, счастливого кодирования, и пусть ваши canvas всегда будут цветными!

Credits: Image by storyset