WebGL - Пример приложения: Пособие для начинающих

Привет, будущие маги WebGL! Я рад быть вашим проводником в этом захватывающем путешествии в мир WebGL. Как учитель компьютерных наук с многолетним опытом, я видел, как无数的 студенты загораются, когда создают свои первые 3D-графики в Интернете. Сегодня мы отправимся в такое же приключение вместе. Так что пристегнитесь и погружайтесь!

WebGL - Sample Application

Что такое WebGL?

Прежде чем мы начнем программировать, давайте поймем, что такое WebGL. WebGL (Web Graphics Library) - это API на JavaScript, который позволяет нам рендерить интерактивные 3D и 2D графики в веб-браузерах без использования плагинов. Это как дать вашим веб-страницам суперсилы для создания потрясающих визуальных эффектов!

Структура приложения WebGL

Приложение WebGL typically consists из нескольких ключевых компонентов. Давайте их рассмотрим:

1. HTML Canvas

Кanvas - это наша доска для рисования. Это место, где происходит все魔法!

<canvas id="myCanvas" width="640" height="480">
Ваш браузер не поддерживает тег HTML5 canvas.
</canvas>

Это создает canvas размером 640x480 пикселей на вашей веб-странице. Представьте его как对你的 easel, готовый для вашего шедевра!

2. JavaScript Code

Здесь мы пишем наши команды WebGL. Это как давать инструкции вашему виртуальному художнику.

3. Vertex Shader и Fragment Shader

Это особые программы, которые работают на GPU. Они как кисти и палитры для наших 3D графиков.

4. Buffers

Буферы хранят данные для наших 3D объектов. Представьте их как сырьевые материалы для наших скульптур 3D.

Теперь, когда мы знаемingredient, давайте приготовим美味的 WebGL приложение!

Пример приложения

Давайте создадим простое приложение WebGL, которое рисует цветной треугольник. Мы рассмотрим каждый шаг подробно.

Шаг 1: Настройка HTML

Сначала нам нужно создать HTML файл с элементом canvas:

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="640" height="480">
Ваш браузер не поддерживает тег HTML5 canvas.
</canvas>
<script src="webgl-demo.js"></script>
</body>
</html>

Это создает наш canvas и ссылается на JavaScript файл, который мы создадим下一步.

Шаг 2: Инициализация WebGL

Теперь создадим наш файл webgl-demo.js и настроим WebGL:

function main() {
const canvas = document.getElementById("myCanvas");
const gl = canvas.getContext("webgl");

if (!gl) {
alert("WebGL не поддерживается вашим браузером!");
return;
}

// WebGL готов к использованию!
}

window.onload = main;

Эта функция получает наш canvas, инициализирует WebGL и проверяет, поддерживается ли он. Это как проверка, все ли у нас есть для начала рисования.

Шаг 3: Создание шейдеров

Теперь создадим наши vertex и fragment шейдеры:

function createShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);

if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error('Произошла ошибка компиляции шейдеров: ' + gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}

return shader;
}

const vertexShaderSource = `
attribute vec4 a_position;
void main() {
gl_Position = a_position;
}
`;

const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1, 0, 0.5, 1);
}
`;

const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);

Эти шейдеры определяют, как наш треугольник будет positioned и colored. Vertex шейдер позиционирует наш треугольник, а fragment шейдер gives ему красивый розовый цвет.

Шаг 4: Создание программы

Теперь свяжем наши шейдеры в программу:

function createProgram(gl, vertexShader, fragmentShader) {
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.error('Не удалось инициализировать шейдерную программу: ' + gl.getProgramInfoLog(program));
return null;
}

return program;
}

const program = createProgram(gl, vertexShader, fragmentShader);

Это как собирать наши инструменты для рисования и готовиться к рисованию!

Шаг 5: Создание буфера

Теперь создадим буфер для хранения是我们的 triangle's vertices:

const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

const positions = [
0, 0,
0, 0.5,
0.7, 0,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

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

Шаг 6: Рендеринг треугольника

Наконец, нарисуем наш треугольник:

gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);

gl.useProgram(program);

const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

gl.drawArrays(gl.TRIANGLES, 0, 3);

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

Заключение

Поздравления! Вы только что создали свое первое приложение WebGL. Вы сделали первый шаг в болееlarge мир 3D графиков в Интернете. Помните, как и в любом искусстве, овладение WebGL требует практики и терпения. Но с каждой строкой кода вы создаете более vibrant и интерактивный веб. Продолжайте исследовать, продолжайте создавать и, что самое главное, получайте удовольствие!

Вот таблица, резюмирующая основные методы, которые мы использовали:

Метод	Описание
`getContext("webgl")`	Инициализирует WebGL
`createShader()`	Создает шейдер
`shaderSource()`	Определяет исходный код шейдера
`compileShader()`	Компилирует шейдер
`createProgram()`	Создает программу
`attachShader()`	Прикрепляет шейдер к программе
`linkProgram()`	Связывает программу
`createBuffer()`	Создает буфер
`bindBuffer()`	Привязывает буфер
`bufferData()`	Заполняет буфер данными
`viewport()`	Устанавливает viewport
`clearColor()`	Устанавливает цвет очистки
`clear()`	Очищает canvas
`useProgram()`	Использует программу
`getAttribLocation()`	Получает местоположение атрибута
`enableVertexAttribArray()`	Включает массив атрибутов
`vertexAttribPointer()`	Указывает раскладку顶点 данных
`drawArrays()`	Рендерит примитивы

Держите эту таблицу под рукой, когда продолжите свое путешествие в WebGL. Счастливо кодить!

Credits: Image by storyset

Предыдущий учебник:

WebGL - Графический конвейер

Следующий учебник:

WebGL - Контекст