Cложность Web меняется ежедневно, и его возможности растут так же быстро, особенно с 3D-рендерингом. Кто только начинает вливаться в тему 3D — добро пожаловать под кат.
Рубрика «WebGL» - 2
Введение в 3D: основы Three.js
2020-03-30 в 13:31, admin, рубрики: 3d-моделирование, javascript, three.js, WebGL, Работа с 3D-графикойПарле ву багет? Выиграйте топовую карту NVidia RTX: 145 строчек кода или шейдеры на пальцах
2020-03-22 в 15:53, admin, рубрики: WebGL, геометрия для пятого класса, компьютерная графика, математика, Программирование, Работа с 3D-графикой, разработка игрОбъявляю пятиминутку без разговоров о некомпьютерных вирусах на IT-сайте! А ведь без шуток. Если вы говорите по-французски или живёте во Франции, то вы можете участвовать в конкурсе, который я организую в нашем НИИ в рамках конференции jFIG2020 (французские дни компьютерной графики). Но даже если вы не можете участвовать, читайте про рейтрейсинг на пальцах. Моя основная задача — нести свет культуры компьютерной графики в ширнармассы!
Итак, как сделан этот шейдер, который анонсирует сам конкурс?
Системы частиц это одни из самых простых способов сделать 3D сцену визуально богаче. В одном из наших Android приложений 3D Buddha Live Wallpaper достаточно простая сцена, которой было бы неплохо добавить чуть больше деталей. И когда мы думали как добавить разнообразия изображению то самым очевидным решением заполнить пустое пространство вокруг статуи Будды стало добавление клубов дыма или тумана. Благодаря использованию мягких частиц мы достигли довольно хорошего результата. В этой статье мы детально опишем реализацию мягких частиц на чистом WebGL / OpenGL ES без использования сторонних библиотек и готовых 3D-движков.
Разница между старым и обновленным приложением даже превзошла наши ожидания. Простенькие частицы дыма существенно улучшили сцену, сделали ее богаче и полнее. Клубы дыма это и дополнительные детали за которые “цепляется глаз”, а также способ сделать переход между основными объектами и фоном более плавным:
Имитационная модель процесса обработки материала резанием на токарном станке с ЧПУ
2020-02-19 в 14:10, admin, рубрики: CAD/CAM, fanuc, gcode, simulator, WebGL, верификация, код, математика, обеспечение, обработка, обучение, программа, Программирование, проектирование, симулятор, система, Софт, стандарт, станок, технология, токарный, управление, формообразование, цикл, чпуВведение
Методология разработки имитационных моделей и симуляторов по различным техническим дисциплинам в основном ориентирована на снижение уровня абстракции учебного материала. Наряду с теоретическим учебным материалом наглядное имитационное моделирование того или иного технологического процесса или операции позволяет учащемуся в более полной мере освоить преподаваемый материал с максимальным приближением к естественным условиям. При этом имитационные модели и симуляторы могут рассматриваться только как вспомогательный инструмент учебного процесса. Основное назначение данной категории образовательных ресурсов – базовое (начальное) ознакомление с принципами работы сложных технических объектов в условиях отсутствия возможности использования реального промышленного оборудования, либо в целях предварительного повышения компетенции учащегося перед прохождением производственной практики.
Читать полностью »
Моя первая html5 игра, от Алисы Яндекса и победах в премии до мобильных приложений
2020-01-25 в 13:10, admin, рубрики: html5, javascript, php, WebGL, разработка игр, разработка игр для iOS, разработка игр под android, яндекс алиса, яндекс игрыПредыстория
До начала работы с Алисой мне уже приходилось сталкиваться с разработкой чат-ботов для telegram, viber, вконтакте.
Чат-бот с расписаниями автобусов без Алисы
Чат-бот был разработан как дополнительный сервис к информационному порталу.
Продвигался через существующее мобильное приложение с расписанием.
Статистика использования была очень скучной: 1-20 чел. в день, при активныx ~2000 в моб. приложении. Как минимум? был один человек, для которого бот был нужен.
Three.js и геометрия
2020-01-14 в 12:17, admin, рубрики: javascript, WebGL, математика, Работа с 3D-графикойПри использовании для отображения в браузере библиотеки ThreeJS в качестве первого примера обычно выступает куб или какой-либо другой простейший объект, и он создается при помощи предустановленных специальных классов BoxGeometry или SphereGeometry. Затем обычно рассматривается использование импортируемых готовых моделей и работа с ними.
Но иногда требуется создать трехмерный объект для отображения в браузере полностью с нуля – только используя аналитическую геометрию. В данной статье рассматривается именно такой подход к построению интерактивно настраиваемых моделей и последующего их отображения в браузере.
Алгоритм взаимодействия сотен тысяч уникальных частиц на GPU, в GLES3 и WebGL2
2019-11-06 в 15:35, admin, рубрики: gles, glsl, Godot, gpgpu, OpenGL, WebGL, игростроение, разработка игрОписание алгоритма логики, и разбор рабочего примера в виде техно-демки-игры
WebGL2 версия этой демки https://danilw.itch.io/flat-maze-web остальные ссылки смотрите в статье.
Статья разбита на две части, сначала про логику, и вторая часть про применение в игре, первая часть:
- Ключевые особенности.
- Ссылки и краткое описание.
- Алгоритм работы логики.
- Ограничения логики. Баги/особенности, и баги Angle.
- Доступ к данным по индексу.
Дальше описание игровой-демки, вторая часть:
- Используемые возможности этой логики. И быстрый рендеринг миллиона частиц-пикселей.
- Реализация, немного комментариев к коду, описание работы коллизии в две стороны. И взаимодействие с игроком.
- Ссылки на используемую графику с opengameart, и шейдер теней.
Новая игра со старой атмосферой на Three.js. Часть 2
2019-10-20 в 15:18, admin, рубрики: canvas, javascript, nw.js, three.js, WebGL, игры, разработка игрВ первой части я рассказал о проблемах, с которыми я столкнулся в процессе создания 3D игры под браузер c использованием Three.js. Теперь я хотел бы подробно остановиться на решении некоторых важных задач при написании игры, типа конструирования уровней, определения столкновений и адаптации изображения под любые пропорции окна браузера.
Схемы уровней
Собственно, сами уровни создаются в 3D редакторе, а именно, их геометрия, наложение текстур, запекание теней и т.д. Все это я описал в первой части. Зачем нужны еще какие-то схемы? Дело в том, что Three,js не предлагает какого-то физического движка, и я использую схемы уровней для определения препятствий.
Читать полностью »
Интерактивная лаборатория термодинамики как эффективное средство имитационного обучения
2019-10-03 в 16:02, admin, рубрики: WebGL, виртуальная лаборатория, дистанционное обучение, имитационное моделирование, математика, математическое моделирование, Научно-популярное, образование, симуляция, Софт, термодинамика, физикаВведение
Имитационное обучение с использованием мультимедийных образовательных ресурсов является одним из перспективных направлений информатизации современного образования. Под имитационным обучением мы будем понимать такую модель обучения, в которой посредством программного обеспечения виртуально воспроизводятся физические процессы и условия, аналогичные реальным, но имеющие ряд идеализированных качеств. Возможность интерактивного взаимодействия с виртуальной моделью того или иного физического процесса позволяет существенно понизить уровень абстракции знаний о данном процессе, в результате чего повышается эффективность получения и усвоения этих знаний человеком [1].
Объект изучения и постановка задачи
В качестве объекта изучения рассмотрим один из наиболее важных разделов общей физики – классическую термодинамику. В контексте образовательной деятельности знания по данной дисциплине преподаются в нескольких формах, Читать полностью »
Новая игра со старой атмосферой на Three.js
2019-09-20 в 19:41, admin, рубрики: canvas, javascript, nw.js, three.js, WebGL, игры, разработка игрСуществует множество поклонников старых игр. И они не прочь пустить скупую ностальгическую слезу и нет-нет, да сыграть в «Арканоид», «Пакмана» или «Принца Персии», как двадцать, тридцать, сорок или — подставьте нужное число — лет назад. DOS-box и эмуляторы — им в помощь. Да, что там, я недавно смотрел стрим самого первого 2D «Принца Персии» на Ютьюбе, где довольно молодой «стример» после прохождения очередного смертельного препятствия, смахнув со лба пот рукой, изрек: «Мне еще никогда не было так страшно в компьютерной игре». То есть, даже молодежь способна оценить хардкорность и крутизну старых игр.
Я подумал, а почему бы не создать новую игру в подобном стиле? Да, существуют различные ремейки и клоны. Также, радуют современные игры в стиле пиксель-арт. Однако, все они, как правило, повторяют квесты, механики и иногда вообще полностью левел-дизайн старых игр, по мотивам которых они сделаны. Ну либо, наоборот, предлагают совершенно новый сюжет и локации, являя собой просто визуальную стилизацию «под старину». А что, если представить, какой была бы новая часть старой игры, выйди она следом за последней из серии? Я решил такую создать.
Читать полностью »