WebGL - Рисование квадрата
Здравствуйте,野心勃勃的网页开发者们！Сегодня мы отправимся в увлекательное путешествие в мир WebGL, где мы узнаем, как рисовать четырехугольник (или简称 "квадрат"). Не волнуйтесь, если вы новички в программировании - я буду вести вас шаг за шагом с терпением опытного учителя, который уже помог countless студентам, как вы.
Что такое WebGL?
Прежде чем мы погрузимся в рисование квадратов, давайте на минутку поймем, что такое WebGL. WebGL (Web Graphics Library) - это мощный API на JavaScript, который позволяет нам создавать потрясающие 2D и 3D graphics в веб-браузерах. Это как иметь магическую кисть, которая может оживить вашу фантазию на веб-странице!
Шаги для рисования четырехугольника
Теперь давайте разберем процесс рисования квадрата на управляемые шаги. Представьте это как строительство дома - мы начнем с фундамента и будем подниматься выше.
Шаг 1: Настройка HTML Canvas
Во-первых, нам нужно полотно для рисования. В HTML мы используем тег <canvas>. Это какsetup мольберта для绘画.
<canvas id="myCanvas" width="600" height="400">
Ваш браузер не поддерживает тег HTML5 canvas.
</canvas>Шаг 2: Инициализация контекста WebGL
Следующий шаг - получить наш контекст WebGL. Это как взять в руки нашу магическую кисть WebGL.
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
console.log('WebGL не поддерживается, переходим на experimental-webgl');
gl = canvas.getContext('experimental-webgl');
}
if (!gl) {
alert('Ваш браузер не поддерживает WebGL');
}Шаг 3: Создание vertex shader
Теперь создадим vertex shader. Это告诉我们, где рисовать углы нашего квадрата.
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
}
`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);Шаг 4: Создание фрагментного шейдера
Фрагментный шейдер решает, какого цвета будет наш квадрат. Давайте сделаем его快乐的蓝色!
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
}
`;
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);Шаг 5: Создание и привязка программы
Теперь создадим программу и свяжем с ней наши шейдеры. Это как собрать кисть и краску вместе.
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);Шаг 6: Создание буфера и загрузка вершинных данных
Пора определить углы нашего квадрата!
const positions = [
-0.7, -0.5,
0.7, -0.5,
0.7, 0.5,
-0.7, 0.5
];
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);Шаг 7: Подключение буфера позиции к атрибуту
Нам нужно сказать WebGL, как читать наши данные позиции.
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);Шаг 8: Рисование квадрата
Наконец, тот момент, на который мы ждали - давайте нарисуем наш квадрат!
gl.useProgram(program);
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);Пример - Рисование квадрата
Теперь давайте соберем все вместе в один完整的 пример:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebGL Quad</title>
</head>
<body>
<canvas id="myCanvas" width="600" height="400">
Ваш браузер не поддерживает тег HTML5 canvas.
</canvas>
<script>
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
alert('Ваш браузер не поддерживает WebGL');
}
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
}
`;
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
}
`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
const positions = [
-0.7, -0.5,
0.7, -0.5,
0.7, 0.5,
-0.7, 0.5
];
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
gl.useProgram(program);
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
</script>
</body>
</html>И вот он! Ваш собственный квадрат WebGL. When вы откроете этот HTML-файл в браузере, вы должны увидеть красивный синий четырехугольник на холсте.
Заключение
Поздравляю с нарисованным первым квадратом WebGL! Мы сегодня covered много ground, от настройки холста до создания шейдеров и finally рисования нашей фигуры. Помните, учиться WebGL - это как учиться рисовать - это требует практики и терпения. Не отчаивайтесь, если это не сразу срабатывает. Продолжайте экспериментировать, и скоро вы будете создавать потрясающие 3D-графики в вебе!
В следующем уроке мы рассмотрим, как добавить интерактивность в наши творения WebGL. Пока что, счастливого кодирования!
Credits: Image by storyset