Русский

Учебник WebGL

Приложение WebGL

Примеры WebGL

WebGL - Рисование точек

Здравствуйте,野心勃勃的程序设计师们! Сегодня мы отправимся в увлекательное путешествие в мир WebGL, конкретно focusing на рисовании точек. Как ваш доброжелательный сосед-учитель компьютера, я буду вести вас через это приключение шаг за шагом. Не волнуйтесь, если вы никогда раньше не писали код - мы начнем с самых основ и будем подниматься. Так что возьмите свои виртуальные карандаши и погружайтесь с нами!

WebGL - Drawing Points

Что такое WebGL?

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

Необходимые шаги

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

Шаг Описание
1 Получить элемент canvas
2 Получить контекст рендеринга WebGL
3 Определить геометрию (вершины)
4 Создать вершины шейдера
5 Создать фрагмент шейдера
6 Создать шейдерную программу
7 Загрузить данные в GPU
8 Установить viewport
9 Очистить canvas
10 Нарисовать точки

Теперь давайте разберем каждый шаг и посмотрим, как они собираются вместе, чтобы создать наше произведение искусства!

Пример - Нарисовать три точки с помощью WebGL

Давайте рассмотрим пример, где мы нарисуем три цветные точки на нашем canvas. Я объясню каждую часть кода подробно, чтобы вы поняли exactly, что происходит.

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Мои первые точки WebGL</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400">
        Ваш браузер не поддерживает элемент canvas.
    </canvas>
    <script src="webgl-points.js"></script>
</body>
</html>

Это создает canvas, который будет是我们的 мольбертом. JavaScript-файл, который мы создадим下一步, будет выполнять все чудеса!

Шаг 2: Создание JavaScript-файла

Теперь создадим файл с именем webgl-points.js и начнем программировать нашу WebGL-приложение:

// Шаг 1: Получить элемент canvas
const canvas = document.getElementById('myCanvas');

// Шаг 2: Получить контекст рендеринга WebGL
const gl = canvas.getContext('webgl');

if (!gl) {
    console.error('WebGL не поддерживается');
    throw new Error('WebGL не поддерживается');
}

// Шаг 3: Определить геометрию (вершины)
const vertices = new Float32Array([
    0.0, 0.5,    // Точка 1
    -0.5, -0.5,  // Точка 2
    0.5, -0.5    // Точка 3
]);

// Шаг 4: Создать вершины шейдера
const vertexShaderSource = `
    attribute vec2 a_position;
    void main() {
        gl_Position = vec4(a_position, 0.0, 1.0);
        gl_PointSize = 10.0;
    }
`;

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

// Шаг 5: Создать фрагмент шейдера
const fragmentShaderSource = `
    precision mediump float;
    void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
`;

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

// Шаг 6: Создать шейдерную программу
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

// Шаг 7: Загрузить данные в GPU
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

// Шаг 8: Установить viewport
gl.viewport(0, 0, canvas.width, canvas.height);

// Шаг 9: Очистить canvas
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

// Шаг 10: Нарисовать точки
gl.drawArrays(gl.POINTS, 0, 3);

Теперь давайте разберем этот код и поймем, что делает каждая часть:

Понимание кода

Шаги 1 и 2: Настройка WebGL

const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');

Здесь мы получаем наш элемент canvas и получаем контекст рендеринга WebGL. Это как подготовка нашей кисти и палитры!

Шаг 3: Определение геометрии

const vertices = new Float32Array([
    0.0, 0.5,    // Точка 1
    -0.5, -0.5,  // Точка 2
    0.5, -0.5    // Точка 3
]);

Мы определяем три точки в 2D пространстве. Координаты варьируются от -1 до 1 в обоих направлениях x и y. Представьте наш canvas разделенным на четыре четверти, с (0,0) в центре.

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

Шейдеры - это особые программы, которые работают на GPU. У нас есть два типа:

  1. Вершинный шейдер: Определяет положение наших точек.
  2. Фрагментный шейдер: Определяет цвет наших точек.
const vertexShaderSource = `
    attribute vec2 a_position;
    void main() {
        gl_Position = vec4(a_position, 0.0, 1.0);
        gl_PointSize = 10.0;
    }
`;

const fragmentShaderSource = `
    precision mediump float;
    void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
`;

Вершинный шейдер устанавливает положение и размер наших точек. Фрагментный шейдер устанавливает цвет в красный (1.0, 0.0, 0.0 в RGB).

Шаги 6 и 7: Создание программы и загрузка данных

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

Шаги 8 и 9: Настройка вида

Мы устанавливаем viewport, чтобы он соответствовал размеру нашего canvas, и очищаем canvas до черного цвета.

Шаг 10: Рисование точек

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

Наконец, мы рисуем наши три точки!

Заключение

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

Помните, учиться WebGL - это как учиться рисовать - это требует практики и терпения. Не расстраивайтесь, если все не сработает идеально с первого раза. Продолжайте экспериментировать, и скоро вы будете создавать цифровые шедевры!

В следующем уроке мы рассмотрим, как добавить разные цвета нашим точкам и создавать более сложные формы. До тех пор,快乐编码!

Credits: Image by storyset

Предыдущий учебник:
WebGL - Рисование модели
Следующий учебник:
WebGL - нарисовать треугольник