Как стать автором
Обновить
14.67

WebGL *

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

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

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

Время на прочтение10 мин
Количество просмотров10K

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

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

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

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

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

Время на прочтение2 мин
Количество просмотров4.7K

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

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

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

Время на прочтение5 мин
Количество просмотров9.9K

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

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

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

Время на прочтение2 мин
Количество просмотров4.2K

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

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

Истории

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

Время на прочтение3 мин
Количество просмотров3.9K

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

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

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

Время на прочтение1 мин
Количество просмотров4.7K

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

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

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

Время на прочтение7 мин
Количество просмотров8K

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

Запустить в браузере
Всего голосов 25: ↑24 и ↓1+32
Комментарии14

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

Время на прочтение3 мин
Количество просмотров2.7K

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

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

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

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

Время на прочтение3 мин
Количество просмотров12K

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

Читать далее
Всего голосов 6: ↑3 и ↓3+1
Комментарии5

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

Время на прочтение4 мин
Количество просмотров8.5K

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

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

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

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

Читать далее
Всего голосов 7: ↑6 и ↓1+7
Комментарии10

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

Время на прочтение9 мин
Количество просмотров12K

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

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

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

Время на прочтение5 мин
Количество просмотров4.4K

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

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

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

Ближайшие события

7 – 8 ноября
Конференция byteoilgas_conf 2024
МоскваОнлайн
7 – 8 ноября
Конференция «Матемаркетинг»
МоскваОнлайн
15 – 16 ноября
IT-конференция Merge Skolkovo
Москва
22 – 24 ноября
Хакатон «AgroCode Hack Genetics'24»
Онлайн
28 ноября
Конференция «TechRec: ITHR CAMPUS»
МоскваОнлайн
25 – 26 апреля
IT-конференция Merge Tatarstan 2025
Казань

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

Время на прочтение7 мин
Количество просмотров5.7K

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

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

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

Знакомство фронтендера с WebGL: почему WebGL? (часть 1)

Время на прочтение7 мин
Количество просмотров19K

Мне и моему коллеге дизайнеру была поставлена задача разработать новую версию сайта-визитки компании. Коллега полгода учился работать с 3D-редакторами (в нерабочее время на Maxon Cinema 4D), поэтому он хотел использовать свои новые навыки при создании новой версии сайта. Его идея заключалась в том, что на каждой странице на первом экране будет крутиться какая-нибудь непонятная фигура с каким-нибудь красивым текстом. Выглядеть это должно было примерно так:

Читать далее
Всего голосов 13: ↑12 и ↓1+15
Комментарии19

Часы и волны

Время на прочтение2 мин
Количество просмотров5.9K

Я показывал Хабру свою графику, хотя меня и заминусовали, я хочу показать снова то, над чем я работал, может кому то из большой аудитории Хабра понравится анимация, графика или идея, которая уже давно лежит на поверхности. Это прототип стрелочных часов, измеряющих время в 7300000-7320000 больших размерах, может столько и не нужно, но обычным 12-часовым часам явно не хватает делений для измерения хотя бы сегодняшней даты.

Я добавил красивую графику, чтоб было не слишком скучно: получилось что часы существуют в пространстве, зависящем от t1 (текущие дата и время), а окружающие фракталы в пространстве, вычисляя цвет пикселей, зависят от t2 (время прошедшее с момента запуска) - мне нравится эта особенность, она кажется странной.

Читать далее
Всего голосов 28: ↑15 и ↓13+7
Комментарии52

Я выпустил Grafar — JS-библиотеку для визуализации

Время на прочтение3 мин
Количество просмотров13K

После пяти лет в столе я готов представить свою библиотеку для визуализации — grafar. У нас есть: 3D, реактивные вычисления и самое простое АПИ для построения математических графиков прямо в браузере. В статье рассказываю, что я сделал и как этим пользоваться.

Читать далее
Всего голосов 81: ↑81 и ↓0+81
Комментарии11

Как я написал браузерный 3D FPS шутер на Three.js, Vue и Blender

Время на прочтение32 мин
Количество просмотров19K

На пути каждого коммерческого разработчика (не только кодеров, но, знаю, у дизайнеров, например, также) рано или поздно встречаются топкие-болотистые участки, унылые мрачные места, блуждая по которым можно вообще забрести в мертвую пустыню профессионального выгорания и/или даже к психотерапевту на прием за таблетками. Работодатели-бизнес очевидно задействует ваши наиболее развитые скилы, выжимая по максимуму, стек большинства вакансий оккупирован одними и теми же энтерпрайз-инструментами, кажется, не для всех случаев самыми удачными, удобными и интересными, и вы понимаете что вам придется именно усугублять разгребать тонну такого легаси… Часто отношения в команде складываются для вас не лучшим образом, и вы не получаете настоящего понимания и отдачи, драйва от коллег… Умение тащить себя «по-мюнхаузеновски за волосы», снова влюбляться в технологии, увлекаться чем-то новым [вообще и/или для себя, может быть - смежной областью], имхо, не просто является важным качеством профессионала, но, на самом деле, помогает разработчику выжить в капитализме, оставаясь не только внешне востребованным, конкурентоспособным с наступающей на пятки молодежи, но, прежде всего, давая энергию и движение изнутри. Иногда приходится слышать что-нибудь вроде: «а вот мой бывший говорил, что если бы можно было не кодить, он бы не кодил!». Да и нынешняя молодежь осознала что в сегодняшней ситуации «честно и нормально» зарабатывать можно только в айти, и уже стоят толпою на пороге HR-отдела... Не знаю, мне нравилось кодить с детства, а кодить хочется что-нибудь если не полезное, то хотя бы интересное. Короче, я далеко не геймер, но в моей жизни было несколько коротких периодов когда я позорно «загамывал». Да само увлечение компьютерами в детстве началось, конечно же, с игр. Я помню как в девяностые в город завезли «Спектрумы». Есть тогда было часто практически нечего, но отец все-таки взял последние деньги из заначки, пошел, отстоял невиданно огромную очередь и приобрел нам с братом нашу первую чудо-машину. Мы подключали его через шнур с разъемами СГ-5 к черно-белому телевизору «Рекорд», картинка тряслась и моргала, игры нужно было терпеливо загружать в оперативную память со старенького кассетного магнитофона [до сих пор слышу ядовитые звуки загрузки], часто переживая неудачи... Несмотря на то что ранние программисты и дизайнеры умудрялись помещать с помощью своего кода в 48 килобайт оперативной памяти целые миры с потрясающим геймплеем, мне быстро надоело играть и я увлекся программированием на Бейсике)), рисовал спрайтовую графику (и векторная «трехмерная» тогда тоже уже была, мы даже купили сложную книжку), писал простую музыку в редакторе... Так вот, некоторое время назад мне опять все надоело, была пандемийная зима и на велике не покататься, рок-группа не репетировала… Я почитал форумы и установил себе несколько более-менее свежих популярных игр, сделанных на Unity или Unreal Engine, очевидно. Мне нравятся РПГ-открытые миры-выживалки, вот это все... После работы я стал каждый вечер погружаться в виртуальные миры и рубиться-качаться, но хватило меня ненадолго. Игры все похожи по механикам, однообразный геймплей размазан по небольшому сюжету на кучу похожих заданий с бесконечными боями… Но самое смешное - это реально безбожно лагает в важных механиках. Лагают коммерческие продукты которые продают за деньги… А любой «баг», имхо, это сильное разочарование - он мгновенно выносит из виртуальной среды, цифровой сказки в реальный мир… Конечно, отличная графика, очень круто нарисовано. Но, утрируя, я понял что все эти поделки на энтерпрайзных движках, по сути - даже не кодят. Их собирают менеджеры и дизайнеры, просто «играясь с цветом кубиков», но сами кубики, при этом практически «не меняются»... Вообщем, когда стало совсем скучно, я подумал что «а я ведь тоже так могу», да прямо в браузере на богомерзком не предназначенным для экономии памяти серьезного программирования джаваскрипте. Решил наконец полностью соответствовать тому что все время с умным видом повторяю сыну: «уметь делать игры, намного интереснее чем в них играть». Одним словом, я задался целью написать свой кастомный браузерный FPS-шутер на открытых технологиях.

Читать далее
Всего голосов 19: ↑16 и ↓3+15
Комментарии37

Рендеринг шрифтов для WebGL при помощи инструмента msdf-bmfont-xml и технологии MSDF

Время на прочтение4 мин
Количество просмотров4.2K

18/3/2021 Наконец-то была закончена интеграция инструмента msdf-bmfont-xml для библиотеки openglobus. Текстовые метки стали выглядеть гораздо красивее! Мне помог инструмент msdf-bmfont-xml для создания атласов шрифтов и рендеринга текстур для (multichannel signed distance fields) MSDF.

Читать далее
Всего голосов 5: ↑5 и ↓0+5
Комментарии33

Есть ли жизнь без WebGL 2.0?

Время на прочтение11 мин
Количество просмотров9.5K

WebGL 2.0 вышел в далёком 2017ом году, принёс графический стек OpenGL ES 3.0 (2012го года), и, казалось бы, все современные браузеры давно должны были его поддерживать. Однако, среди лидеров затесались отстающие, и пользователи Safari до сих пор (начало 2021го) вынуждены ограничиваться возможностями WebGL 1.0, опубликованным в 2011ом году на основе OpenGL ES 2.0.

PBR освещение достаточно требовательно к вычислительным ресурсам графического процессора и обычно реализуется средствами WebGL 2.0. Возможно ли адаптировать PBR рендерер графического движка для работы в условиях ограничений WebGL 1.0 на iPad? В этой статье описывается опыт такой адаптации для графического движка открытого C++ фреймворка Open CASCADE Technology.

Читать далее
Всего голосов 12: ↑11 и ↓1+18
Комментарии17

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