Рубрика «WebGL» - 2

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

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

Во-первых, нужно поблагодарить создателя использованного мной туториала. Взяв его за основу, я избавлялся от всех абстракций, пока не получил «minimal viable program». Надеюсь, она поможет вам начать освоение современного OpenGL. Вот что мы будем делать:

Минимальный WebGL в 75 строках кода - 1

Равносторонний треугольник, зелёный сверху, чёрный в нижнем левом углу и красный в нижнем правом, с интерполированными между точками цветами. Чуть более яркая версия чёрного треугольника [перевод на Хабре].
Читать полностью »

image

Год 1 | вдохновение

В этом месяце я очень долго пыталась определиться с датасетом и идеей для его обработки. Хотя я начала думать о нем еще в мае, по факту законить удалось только через 8 месяцев (черт, я плоха), а описать проект мне удалось еще спустя месяц (оу, я чертовски плоха).

Идея проекта пришла ко мне после просмотра фильма Безумно богатые азиаты. Мне очень понравилась актриса Мишель Йео, но идея оформилась только после того, как я прочитала больше о ней и узнала, насколько она была выдающейся и крутой. Это заставило меня задуматься выдающихся женщинах, о которых я понятия не имею. И вот — возникла идея как-то это визуализировать.
Читать полностью »

Cложность Web меняется ежедневно, и его возможности растут так же быстро, особенно с 3D-рендерингом. Кто только начинает вливаться в тему 3D — добро пожаловать под кат.

Введение в 3D: основы Three.js - 1

Читать полностью »

Объявляю пятиминутку без разговоров о некомпьютерных вирусах на IT-сайте! А ведь без шуток. Если вы говорите по-французски или живёте во Франции, то вы можете участвовать в конкурсе, который я организую в нашем НИИ в рамках конференции jFIG2020 (французские дни компьютерной графики). Но даже если вы не можете участвовать, читайте про рейтрейсинг на пальцах. Моя основная задача — нести свет культуры компьютерной графики в ширнармассы!

Итак, как сделан этот шейдер, который анонсирует сам конкурс?

Парле ву багет? Выиграйте топовую карту NVidia RTX: 145 строчек кода или шейдеры на пальцах - 1

Читать полностью »

Системы частиц это одни из самых простых способов сделать 3D сцену визуально богаче. В одном из наших Android приложений 3D Buddha Live Wallpaper достаточно простая сцена, которой было бы неплохо добавить чуть больше деталей. И когда мы думали как добавить разнообразия изображению то самым очевидным решением заполнить пустое пространство вокруг статуи Будды стало добавление клубов дыма или тумана. Благодаря использованию мягких частиц мы достигли довольно хорошего результата. В этой статье мы детально опишем реализацию мягких частиц на чистом WebGL / OpenGL ES без использования сторонних библиотек и готовых 3D-движков.

Разница между старым и обновленным приложением даже превзошла наши ожидания. Простенькие частицы дыма существенно улучшили сцену, сделали ее богаче и полнее. Клубы дыма это и дополнительные детали за которые “цепляется глаз”, а также способ сделать переход между основными объектами и фоном более плавным:

Мягкие частицы в WebGL и OpenGL ES - 1

Читать полностью »

Введение

Методология разработки имитационных моделей и симуляторов по различным техническим дисциплинам в основном ориентирована на снижение уровня абстракции учебного материала. Наряду с теоретическим учебным материалом наглядное имитационное моделирование того или иного технологического процесса или операции позволяет учащемуся в более полной мере освоить преподаваемый материал с максимальным приближением к естественным условиям. При этом имитационные модели и симуляторы могут рассматриваться только как вспомогательный инструмент учебного процесса. Основное назначение данной категории образовательных ресурсов – базовое (начальное) ознакомление с принципами работы сложных технических объектов в условиях отсутствия возможности использования реального промышленного оборудования, либо в целях предварительного повышения компетенции учащегося перед прохождением производственной практики.
Читать полностью »

Предыстория

До начала работы с Алисой мне уже приходилось сталкиваться с разработкой чат-ботов для telegram, viber, вконтакте.

Чат-бот с расписаниями автобусов без Алисы

Чат-бот был разработан как дополнительный сервис к информационному порталу.

Продвигался через существующее мобильное приложение с расписанием.
Статистика использования была очень скучной: 1-20 чел. в день, при активныx ~2000 в моб. приложении. Как минимум? был один человек, для которого бот был нужен.

Читать полностью »

При использовании для отображения в браузере библиотеки ThreeJS в качестве первого примера обычно выступает куб или какой-либо другой простейший объект, и он создается при помощи предустановленных специальных классов BoxGeometry или SphereGeometry. Затем обычно рассматривается использование импортируемых готовых моделей и работа с ними.

Но иногда требуется создать трехмерный объект для отображения в браузере полностью с нуля – только используя аналитическую геометрию. В данной статье рассматривается именно такой подход к построению интерактивно настраиваемых моделей и последующего их отображения в браузере.

Читать полностью »

Описание алгоритма логики, и разбор рабочего примера в виде техно-демки-игры

WebGL2 версия этой демки https://danilw.itch.io/flat-maze-web остальные ссылки смотрите в статье.

Статья разбита на две части, сначала про логику, и вторая часть про применение в игре, первая часть:

  • Ключевые особенности.
  • Ссылки и краткое описание.
  • Алгоритм работы логики.
  • Ограничения логики. Баги/особенности, и баги Angle.
  • Доступ к данным по индексу.

Дальше описание игровой-демки, вторая часть:

  • Используемые возможности этой логики. И быстрый рендеринг миллиона частиц-пикселей.
  • Реализация, немного комментариев к коду, описание работы коллизии в две стороны. И взаимодействие с игроком.
  • Ссылки на используемую графику с opengameart, и шейдер теней.

Читать полностью »

В первой части я рассказал о проблемах, с которыми я столкнулся в процессе создания 3D игры под браузер c использованием Three.js. Теперь я хотел бы подробно остановиться на решении некоторых важных задач при написании игры, типа конструирования уровней, определения столкновений и адаптации изображения под любые пропорции окна браузера.

Новая игра со старой атмосферой на Three.js. Часть 2 - 1

Схемы уровней

Собственно, сами уровни создаются в 3D редакторе, а именно, их геометрия, наложение текстур, запекание теней и т.д. Все это я описал в первой части. Зачем нужны еще какие-то схемы? Дело в том, что Three,js не предлагает какого-то физического движка, и я использую схемы уровней для определения препятствий.
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js