Основы WebGL

Отличная новость! Я закончил перевод Основ WebGL на русский язык! Это отличный ресурс, где можно найти массу полезного и актуального материала по WebGL — особенно для тех, кто только начинает своё знакомство с WebGL.


1. Основы WebGL.

Если вы только начинаете изучение WebGL, то вам определённо стоит начать с этого раздела.

Основы WebGL

Основы WebGL. Своего рода Hello, world! на WebGL. Статья на самом базовом уровне расскажет о том, что такое WebGL, шейдеры, атрибуты, varying- и uniform-переменные и как это всё связано между собой.

Как работает WebGL

Как работает WebGL. Продолжение Основ WebGL. Более подробное освещение шейдеров, атрибутов, varying- и uniform-переменных. Статья предполагает, что вам уже известны самые базовые концепции WebGL, и теперь вы хотите узнать больше.

Шейдеры и GLSL в WebGL

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

2. Обработка изображений.

Обработка изображений в WebGL

Обработка изображений в WebGL. Обработка изображений средствами WebGL на примере реализации фильтров Гауса, резкости, эмбоссирования и других. Знакомство с текстурой.

Продолжаем обработку изображений в WebGL

Продолжаем обработку изображений в WebGL. Применение одновременно нескольких фильтров за счёт использования нескольких текстур.

3. Трансформации.

2D-перенос в WebGL

2D-перенос в WebGL. Статья познакомит с переносом объекта на новое местоположение. Значение переноса задаёт пользователь с помощью ползунков — то есть появляется интерактивность сцены.

2D-поворот в WebGLL

2D-поворот в WebGL. В статье к функционалу переноса добавляется ещё одна трансформация — поворот.

2D-масштабирование в WebGL

2D-масштабирование в WebGL. В конце этой статьи у нас будут все три трансформации — перенос, поворот и масштабирование.

2D-матрицы WebGL

2D-матрицы WebGL. Статья познакомит вас с матрицами и объяснит, почему они подходят лучше всего для реализации математики трансформаций.

4. 3D.

Уходим от плоских фигур и начинаем работу с настоящим 3D.

WebGL 3D - Ортогональ

WebGL 3D — Ортогональ. В этой статье у нас не просто добавляется координата z, происходит гораздо больше — у нас появляется объём! А вместе с ним появятся проблемы, связанные с направлением обхода вершин и буфером глубины. Конечно же, все они решатся к концу статьи.

WebGL 3D - Перспектива

WebGL 3D — Перспектива. Что заставляет далёкие объекты выглядеть маленькими, а близкие — большими? Конечно же перспектива. Без неё наш 3D очень сложно будет назвать реалистичным.

WebGL 3D - Камеры

WebGL 3D — Камеры. Эта статья расскажет про камеру. Хотя если быть точным, статья расскажет, что в WebGL вообще нет камер, а также расскажет, что нам с этим всем делать.

5. Освещение.

WebGL 3D - Направленное освещение

WebGL 3D — Направленное освещение. Здесь вы познакомитесь с самым простым освещением — направленным. Также вы узнаете, что такое нормали и какова их роль в освещении.

WebGL 3D - Точечное освещение

WebGL 3D — Точечное освещение. В отличие от направленного освещения, где свет падал равномерно на все объекты, в точечном освещении у нас появляется источник света, положение которого необходимо учитывать при расчёте освещения. Кроме того, освещение больше не будет равномерным — у нас появятся блики.

6. Структура и устройство.

WebGL - Меньше кода, больше веселья

WebGL — Меньше кода, больше веселья. WebGL является достаточно низкоуровневым, поэтому приходится писать много кода. Можно ли сделать код проще и компактней? В этой статье мы поговорим об организации кода.

WebGL - Отрисовка нескольких объектов

WebGL — Отрисовка нескольких объектов. Статья расскажет, как отрисовать несколько объектов на одной сцене, чтобы у каждого объекта при этом была независимая анимация.

WebGL - Графы сцены

WebGL — Графы сцены. Задумывались ли вы когда-либо, как можно смоделировать солнечную систему или как устроена скелетная анимация? Ответы на оба этих вопроса вы найдёте в данной статье.

7. Текстуры.

WebGL 3D - Текстуры

WebGL 3D — Текстуры. Текстуры, текстурные координаты, модели фильтрации, мип-маппинг… Эти слова ничего для вас не значат? Значит, вам сюда.

Использование 2 и более текстур в WebGL

Использование 2 и более текстур в WebGL. Статья расскажет об особенностях использования двух и более текстур, а также об тонкостях асинхронной загрузки изображений для текстур.

WebGL - Кросс-доменные изображения

WebGL — Кросс-доменные изображения. Как использовать изображение со стороннего источника для своей текстуры и что такое CORS.

8. 2D-приёмы.

Реализация DrawImage в WebGL

Реализация DrawImage в WebGL. В составе API Canvas есть замечательная функция drawImage, которая покроет львиную долю всех запросов при разработке игры. В данной статье мы рассмотрим, как можно реализовать эту функцию через средства WebGL.

WebGL 2D - стек матриц

WebGL 2D — стек матриц. Реализация ещё одной техники из 2D-canvas под названием стек матриц.

9. Текст.

Довольно часто возникает необходимость вывести на сцену текст. Это может быть статус какого-либо процесса, значение скорости в игре или имя ММО-персонажа. Какие же средства находятся в нашем распоряжении для вывода текста?

WebGL текст - HTML

WebGL текст — HTML. Пожалуй, первое, что приходит в голову при необходимости вывести текст — использовать HTML-элементы. В конце концов, мы находимся в браузере, почему бы не использовать его возможности?..

WebGL текст - Canvas 2D

WebGL текст — Canvas 2D. Более гибким способом будет использование 2D-canvas для вывода надписей, поскольку помимо вывода текста мы можем создавать произвольные двумерные значки.

WebGL текст - текстуры

WebGL текст — текстуры. Использование HTML для вывода текста реализуется довольно просто, но оно не лишено недостатков. Один из них — текст не является частью сцены, это просто HTML-элемент поверх сцены. В этой статье мы выведем текст в текстуру внутри сцены.

WebGL текст - Используем глиф-текстуру

WebGL текст — Используем глиф-текстуру. Что делать, если нужно выводить довольно большой объём текста, который к тому же часто меняется? А чтобы при этом получить ещё приемлемую частоту кадров? В такой ситуации обычно применяют текстурный атлас, состоящий из символов. О нём и пойдёт речь в данной статье.

10. Разное.

Здесь собрано всё, чему не нашлось раздела

WebGL Установка и настройка. Подготовка окружения для разработки приложений на WebGL.

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

Изменение размера Canvas в WebGL. Статья покажет, что не всё так просто с размером canvas, и что размеры буфера отрисовки и HTML-элемента могут не совпадать. А также покажет, как правильно задавать размеры.

WebGL — Анимация. Для создания анимации сцены мы используем функцию requestAnimationFrame. Например, каждый кадр объекту добавляется немного вращения. Но тогда на медленных компьютерах объект будет вращаться медленнее. В онлайн-играх это приведёт к очень неприятным последствиям. Данная статья расскажет, что можно сделать в этом случае.

WebGL и прозрачность. Настройка прозрачности, смешивания, работа с предумноженной прозрачностью, а также особенности окружения браузера.

WebGL — Растеризация или 3D-библиотека. Почему WebGL — это не библиотека работы с 3D, а скорей API растеризации.

WebGL — Антипаттерны. Набор практик, которых стоит избегать, почему их нужно избегать и что стоит использовать вместо них при работе с WebGL.

Основы WebGL
Метки:

One thought on “Основы WebGL

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *