Как стать автором
Обновить
0
Рейтинг

WebGL *

Программная библиотека для JavaScript

Сначала показывать
Порог рейтинга

«Йо-хо-хо»-2 или перевозка рабов и трупов оппозиционеров

Разработка игр *Canvas *WebGL *

Я продолжаю работу над своей браузерной игрой про пиратов на Three.js. Пришло время добавить торговлю. Я подумал, раз у нас тут век пиратов, то и в политическом смысле обстановка должна быть весьма фривольной, то есть, без всякой богомерзкой демократии. А чего стесняться? Заходим в порт, а там нам, пиратам, сразу же предлагают приобрести пушечные ядра и выполнить заказы на транспортировку трупов оппозиционеров и доставку рабов. Еще можно отвезти ром на Тортугу или подбросить губернаторскую дочь на вечеринку на Райский остров. Или тайно эвакуировать беглого губернатора за хорошую плату. Действительно, для подобных дел правительству идеально использовать пиратов. В конце концов, рабы сами себе билет на регулярный рейс не купят, а оппозиционеры сами себя не похоронят. А проблему решать надо... Короче говоря, перевозить древесину и шелк, как в обычных играх - это скучно. Пусть будут этакие «девяностые», но в эпоху пиратов. Пираты выполняют не совсем законные задания правительства, а последнее закрывает глаза на их не совсем законные методы обогащения.

Читать далее
Всего голосов 105: ↑95 и ↓10 +85
Просмотры 35K
Комментарии 59

Новости

Three.js, квантовый спин, сфера Блоха и квантовые вращения

Canvas *Математика *WebGL *Физика
Tutorial

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

Читать далее
Всего голосов 12: ↑12 и ↓0 +12
Просмотры 2.4K
Комментарии 0

Unity: Выбор и загрузка файлов пользователем на WebGL сборке

Разработка веб-сайтов *Разработка игр *Unity *WebGL *
Tutorial

В этой статье мы рассмотрим способ как дать пользователю возможность загружать какие-либо файлы, к примеру текстуры. И немного затронем тему запуска JS функций из C# в рамках Unity. В результате мы сможем открывать окно выбора файлов всего одним вызовом функции.

Читать далее
Всего голосов 3: ↑3 и ↓0 +3
Просмотры 1.1K
Комментарии 0

Эволюция игрового фреймворка. Клиент 2. Менеджеры и другие классы

Разработка под iOS *Разработка игр *Разработка под Android *WebGL *Haxe *
Tutorial

Рассмотрев компоненты в общем виде, можно приступить к построению полноценного приложения на их основе. Первым делом нам нужно реализовать смену экранов и показ диалогов. Потом мы добавим возможность конфигурировать приложение и легко подставлять измененные реализации классов с помощью инверсии управления (IoC). Используя IoC-контейнер как контекст приложения создадим возможность запускать параллельно несколько игр в одном приложении, что позволит проводить сеансы одновременной игры, как это делается, например, в шахматах или в онлайн-покере. Под конец мы добавим централизованный доступ к ресурсам, локализации и управлению звуками, а также сделаем свою реализацию для логов и сигналов как более экономичную замену событиям.

Все вместе уже можно будет считать вполне оформившимся игровым фреймворком.

Читать далее
Рейтинг 0
Просмотры 1.7K
Комментарии 0

Браузерная игра про пиратов

Разработка игр *Canvas *WebGL *

«Йо-хо-хо!» - невольно приходит на ум при любом взаимодействии с морем, передвигаешься ли на речном трамвайчике или же сидишь в баре круизного корабля. В последнем случае еще можно приобрести бутылку рому. Море привлекает своими волнами, закатами и рассветами. А особенно прикольно, когда на море завелись злые пираты. Ну... если это мы, конечно же.

Возьмем шейдер неба и шейдер воды - атмосфера готова! Что может быть проще. И да, я буду писать игру под браузер на Javascript с использованием библиотек Three.js и Cannon.js. Первую я использую для отображения 3D графики, а вторую - в качестве легковесного скриптового физического движка.

Я заставил небесную сферу и плоскость воды двигаться вместе с кораблем. Это обеспечивает практически бесконечный мир - только по мере движения будут подгружаться разные острова. Волны привязаны к началу координат, а сама плоскость воды передвигается. В этом примере уменьшен размер плоскости, чтобы было видно, как это работает.

Читать далее
Всего голосов 39: ↑39 и ↓0 +39
Просмотры 9K
Комментарии 35

Футбольный симулятор в 30 строк кода

Ненормальное программирование *Разработка игр *WebGL *
Tutorial

Привет, я увлекаюсь программированием шейдеров. Сегодня это мини-футбол, которым я хочу поделиться.

Читать далее
Всего голосов 15: ↑5 и ↓10 -5
Просмотры 4.2K
Комментарии 15

Вангеры 3D: пример использования Emscripten в Rust

WebGL *Rust *WebAssembly *

Вангеры в 2022 году продолжают удивлять, прежде всего людьми которые когда-то полюбили эту игру, но сегодня не забывают и вкладывают много сил, делая её лучше, современнее. Оригинальная игра получила обновление с поддержкой полноценного 3D, да не абы какого, а кросс платформенного - работающего на всех системах и даже в браузере. Статья о том, как нетипичная связка технологий помогла запустить обновление в браузере.

Читать далее
Всего голосов 22: ↑22 и ↓0 +22
Просмотры 8.5K
Комментарии 7

Аутентичный фрактальный город или программируем вид за окном

Ненормальное программирование *WebGL *
Tutorial

Экспериментируя с фрактальными функциями, я визуализировал 2д изображение, которое внешне мне очень напоминало мне обычный спальный район или строительные леса. Для glsl это будет примерно такая функция:

Читать далее
Всего голосов 27: ↑20 и ↓7 +13
Просмотры 3.9K
Комментарии 2

Как сегодня делают игры в браузере? Часть 3

Разработка игр *WebGL *ReactJS *
Tutorial

Две предыдущие части (первая и вторая) были своего рода мануалами о том, как загружать модели и передвигать их. В этот раз я расскажу о том, как добавить больше интерактивности. В частности, статистику в реальном времени и столкновения.

Читать далее
Всего голосов 7: ↑4 и ↓3 +1
Просмотры 3.1K
Комментарии 0

Оживляем картинку шейдерами или программирование абстрактного текста

Ненормальное программирование *WebGL *
Recovery mode
Tutorial

Пару лет назад я наткнулся на одну картинку с простой геометрией:

Читать далее
Всего голосов 14: ↑13 и ↓1 +12
Просмотры 4.2K
Комментарии 4

Vange-rs: взгляд на реализацию WebAssembly в Rust

WebGL *Rust *WebAssembly *
✏️ Технотекст 2021

Вангеры одна из самых почитаемых и технологичных игр своего времени, продолжает жить и развиваться. Благодаря сплоченному сообществу игра получила множество усовершенствований: HD, 60 FPS, новые сетевые режимы и много другое. Vange-rs один из интереснейших проектов по Вангерам. Это rust версия игры, основной изюминкой которой является 3D рендер основанный на wgpu.

Запустить в браузере
Всего голосов 34: ↑33 и ↓1 +32
Просмотры 7.1K
Комментарии 12

Как сегодня делают игры в браузере? Часть 2

JavaScript *WebGL *ReactJS *
Tutorial

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

Как вообще-то передвигать персонажа (который есть набор отдельных 3D-объектов) в пространстве? Я уже рассказывал ранее в 4 шаге о том, об объединении объектов в группу. Еще раз: вы можете перемещать группу с линейной скоростью; в сумме с подходящей анимацией это будет выглядеть как ходьба или бег, в зависимости от вашей задумки.

Читать далее
Всего голосов 6: ↑5 и ↓1 +4
Просмотры 2.3K
Комментарии 0

Как я спарсил WebGL карту с Федерального сайта

Python *JavaScript *HTML *WebGL *
Из песочницы

Как я спарсил WebGL карту с Федерального сайта. Написал эту статью для тех, у кого похожая задача.

Читать далее
Всего голосов 7: ↑4 и ↓3 +1
Просмотры 3.9K
Комментарии 5

Как сегодня делают игры в браузере? Часть 1

JavaScript *WebGL *ReactJS *
Tutorial

Игра в браузере на React и Three.js!

Я занимаюсь фронтендом уже очень давно, порядка 10 лет. И как любой уважающий себя фронтендер, я люблю тащить javascript туда, где обычно его не используют: на сервер, в мобильные приложения, в геймдев. С тех пор как я увидел первые WebGL демосцены в 2013-м, я мечтал сделать что-то похожее, скажем, на это.

Так что я провел немало времени экспериментируя и читая документацию, и вот что у меня получилось.

Дисклеймер: я не претендую на абсолютные знания того, как делают игры, я всего лишь описываю свой наивный подход к поиску ответа на вопрос, который задает заголовок. Поэтому это будет не совсем игра, а скорее концепт, интерактивная демо-сцена.

Читать далее
Всего голосов 9: ↑8 и ↓1 +7
Просмотры 6.5K
Комментарии 8

Истории

Различные виды алгебраических кривых

Математика *WebGL *

Привет, Хабр!

Вспоминая свои программы, которые я делал во времена обучения в вузе, решил поделиться ими с Вами. Насколько я припоминаю, их делал на занятиях по графике.

В чем их отличие от тех, которые я Вам представлю, они были написаны на Delphi. Конечно время идет и прогресс не стоит на месте, в том числе и мои навыки в новых инструментах разработки.

Теперь перейдем к сути статьи.

На википедии есть страница с их списком.

Насколько я знаю ими занимались различные известные и не очень математики. Часть из них я смог реализовать в программах на webgl. Это будет экспериментальная статья, так что прошу любить и жаловать. Рассмотрим 5 примеров алгебраических кривых разных порядков.

Читать далее
Всего голосов 8: ↑1 и ↓7 -6
Просмотры 2.5K
Комментарии 17

Уравнения математической физики в действии

Веб-дизайн *Математика *WebGL *Физика
Из песочницы

Доброе утро!

Сегодня поговорим о примерах в дисциплине урматфиз общими словами без погружения в сухой, академический язык и множества формул.

По шкале сложности для чистой математики эта дисциплина на мой субъективный взгляд получает 7/10. Но это не значит что эти формулы легки для зазубривания и запоминания. Тем более говорить о том, что я могу сделать открытие в данной области которое попадет в учебники, например объясняя физику какого - либо нового процесса или уточняя уже существующий. Если подумать, то например выбирая какой-либо параграф учебника по данному предмету, то он исписан формулами которые если провести аналогию похож на модуль по программированию. Скажу сразу мне преподавали данный предмет очень плохо, не объясняя что данные формулы значат, точнее заглавие было например: "Уравнение волны" или "Колебание мембраны", а дальше переписывали все формулы в параграфе с короткими комментариями что откуда, весьма скудными в полной тишине. Препод перелистывал страницы презентации и ходил туда-обратно пока мы переписывали. Видно что не ему, ни мне это было не нужно, как бы для общего развития. Скорее всего надо было читать дополнительную литературу чтобы понять, но там уровень для подкованного студента, предметов было много и где-то были пробелы и особо не было времени на все распылиться. Ну это так к слову. К слову чем больше людей надо учить в промежутке времени, тем меньше времени уделяется каждому студенту и тем хуже уровень знаний у каждого студента, ну это в пределе.

Ну это было уже давно, лекций не осталось, практика забылась, из головы все выветрилось как талая вода. Вот пример волны наглядный:

Читать далее
Всего голосов 11: ↑8 и ↓3 +5
Просмотры 5.6K
Комментарии 16

Как на Three.Js сделать анимированный туннель из частиц

Блог компании SkillFactory Разработка веб-сайтов *Программирование *Работа с 3D-графикой *WebGL *
Перевод
Tutorial

Один из организаторов митапов для креативных разработчиков в Бельгии Creative Front-end Belgium в двух постах на CodePen рассказывает и показывает, как шаг за шагом сделать туннель из частиц с эффектом движения в нём. К старту курса по Frontend-разработке делимся сокращённым переводом этих статей об анимации, которая, по словам автора, нравится ему больше всего; вы увидите эксперименты с параметрами анимации, поэтому легко поймёте, как адаптировать код для своих нужд, например, для эффекта на сайте или в вашей игре.

Читать далее
Всего голосов 20: ↑20 и ↓0 +20
Просмотры 10K
Комментарии 3

Знакомство фронтендера с WebGL: четкие линии (часть 3)

JavaScript *WebGL *

Третья часть серии статей о том как фронт писал свой микродвижок для рендера моделей, ради экономии байтов. Ссылка на прошлую.

Пишем свой парсер и погружаемся в некоторые функции webGL для красивых линий.

Читать далее
Всего голосов 18: ↑18 и ↓0 +18
Просмотры 3.2K
Комментарии 1

Знакомство фронтендера с WebGL: первые наброски (часть 2)

JavaScript *WebGL *

Вторая часть серии статей о том как фронт писал свой микродвижок для рендера моделей, ради экономии байтов. Ссылка на прошлую.

Тут я приступил к попыткам отрендерить красиво яблоко.

Читать далее
Всего голосов 12: ↑11 и ↓1 +10
Просмотры 3.6K
Комментарии 1

Вклад авторов