Рубрика «three.js»
«Йо-хо-хо»-2 или перевозка рабов и трупов оппозиционеров
2022-10-02 в 20:25, admin, рубрики: cannon.js, canvas, javascript, three.js, WebGL, браузерная игра, игра про пиратов, разработка игрКак создать игру Tetris с помощью Three.js
2022-08-14 в 10:00, admin, рубрики: javascript, ruvds_перевод, tetris, three.js, Блог компании RUVDS.com, веб-приложения, Работа с 3D-графикой, разработка игр, трёхмерная графика
Вспомните, как мы играем в «Тетрис». При движении блока мы свободно перемещаем и вращаем его. Кубы, из которых состоят блоки, соединены, поэтому должно быть соединено и их описание в коде. С другой стороны, когда мы завершаем горизонтальный срез (в 2D это строка), кубы удаляются и блок, к которым они принадлежали, на этом этапе уже не важны. На самом деле, они и не должны быть важны, ведь некоторые кубы из блока могут удалиться, а другие остаться на поле.
Для отслеживания начальной точки куба пришлось бы постоянно разделять и объединять геометрию, и поверьте мне, это был бы сущий хаос. В оригинальном двухмерном «Тетрисе» показателем исходного блока был цвет квадрата. Однако в 3D нам нужен удобный способ демонстрации оси Z, и лучше всего для этого подходит цвет.
В нашей игре кубы будут соединены, когда они динамичны и разделены, когда они статичны.
Читать полностью »
Браузерная игра про пиратов
2022-07-16 в 16:18, admin, рубрики: cannon.js, canvas, javascript, three.js, WebGL, игра про пиратов, разработка игр
«Йо-хо-хо!» - невольно приходит на ум при любом взаимодействии с морем, передвигаешься ли на речном трамвайчике или же сидишь в баре круизного корабля. В последнем случае еще можно приобрести бутылку рому. Море привлекает своими волнами, закатами и рассветами. А особенно прикольно, когда на море завелись злые пираты. Ну... если это мы, конечно же.
Море, пираты — 3D онлайн игра в браузере
2020-07-09 в 12:44, admin, рубрики: node.js, three.js, WebSocket, игры, разработка игр, реал-таймПриветствую пользователей Хабра и случайных читателей. Это история разработки браузерной многопользовательской онлайн игры с low-poly 3D графикой и простейшей 2D физикой.
Позади немало браузерных 2D мини-игр, но подобный проект для меня в новинку. В gamedev решать задачи, с которыми ещё не сталкивался, может быть довольно увлекательно и интересно. Главное — не застрять со шлифовкой деталей и запустить рабочую игру пока есть желание и мотивация, поэтому не будем терять время и приступим к разработке!
Введение в 3D: основы Three.js
2020-03-30 в 13:31, admin, рубрики: 3d-моделирование, javascript, three.js, WebGL, Работа с 3D-графикойCложность Web меняется ежедневно, и его возможности растут так же быстро, особенно с 3D-рендерингом. Кто только начинает вливаться в тему 3D — добро пожаловать под кат.
Новая игра со старой атмосферой на Three.js. Часть 2
2019-10-20 в 15:18, admin, рубрики: canvas, javascript, nw.js, three.js, WebGL, игры, разработка игрВ первой части я рассказал о проблемах, с которыми я столкнулся в процессе создания 3D игры под браузер c использованием Three.js. Теперь я хотел бы подробно остановиться на решении некоторых важных задач при написании игры, типа конструирования уровней, определения столкновений и адаптации изображения под любые пропорции окна браузера.
Схемы уровней
Собственно, сами уровни создаются в 3D редакторе, а именно, их геометрия, наложение текстур, запекание теней и т.д. Все это я описал в первой части. Зачем нужны еще какие-то схемы? Дело в том, что Three,js не предлагает какого-то физического движка, и я использую схемы уровней для определения препятствий.
Читать полностью »
Новая игра со старой атмосферой на Three.js
2019-09-20 в 19:41, admin, рубрики: canvas, javascript, nw.js, three.js, WebGL, игры, разработка игрСуществует множество поклонников старых игр. И они не прочь пустить скупую ностальгическую слезу и нет-нет, да сыграть в «Арканоид», «Пакмана» или «Принца Персии», как двадцать, тридцать, сорок или — подставьте нужное число — лет назад. DOS-box и эмуляторы — им в помощь. Да, что там, я недавно смотрел стрим самого первого 2D «Принца Персии» на Ютьюбе, где довольно молодой «стример» после прохождения очередного смертельного препятствия, смахнув со лба пот рукой, изрек: «Мне еще никогда не было так страшно в компьютерной игре». То есть, даже молодежь способна оценить хардкорность и крутизну старых игр.
Я подумал, а почему бы не создать новую игру в подобном стиле? Да, существуют различные ремейки и клоны. Также, радуют современные игры в стиле пиксель-арт. Однако, все они, как правило, повторяют квесты, механики и иногда вообще полностью левел-дизайн старых игр, по мотивам которых они сделаны. Ну либо, наоборот, предлагают совершенно новый сюжет и локации, являя собой просто визуальную стилизацию «под старину». А что, если представить, какой была бы новая часть старой игры, выйди она следом за последней из серии? Я решил такую создать.
Читать полностью »
Оптимизируем ассеты для WebGL правильно
2019-06-18 в 8:36, admin, рубрики: 3d-моделирование, e-commerce, glTF, html, html5, three.js, verge3d, web-разработка, WebGL, веб-дизайн, оптимизация, Разработка веб-сайтов, Разработка под e-commerceТак часто бывает, что техники оптимизации, хорошо работающие для обычной десктопной или мобильной графики, не всегда дают нужный эффект в случае WebGL. В этой статье я собрал (а точнее перевёл на русский язык и изложил в текстовом виде нашу презентацию с Verge3Day) те методы повышения производительности, которые хорошо себя зарекомендовали при создании интерактивных веб-приложений.
3D игра на three.js, nw.js
2019-05-07 в 20:13, admin, рубрики: canvas, javascript, nw.js, three.js, WebGL, игры, разработка игрЯ решил выпустить новую версию своей старой браузерной игры, которая на протяжении пары лет пользовалась успехом в качестве приложения в социальных сетях. На этот раз я задался целью оформить ее также и в виде приложения под Windows (7-8-10) и разместить в различных магазинах. Конечно, в дальнейшем можно сделать сборки и под MacOS и Linux.
Код игры написан полностью на чистом javascript. Для отображения 3D графики в качестве связующего звена между скриптом и WebGL используется библиотека three.js. Однако, так было и в старой, браузерной версии. Самым главным в этом проекте для меня стал повод параллельно с игрой дописать собственную библиотеку, призванную дополнить three.js средствами удобной работы с объектами сцены, их анимацией и многими другими возможностями. Я тогда забросил ее на длительное время. Пришла пора к ней вернуться.
Читать полностью »
Ускоряем WebGL-Three.js с помощью OffscreenCanvas и веб-воркеров
2019-04-04 в 5:27, admin, рубрики: canvas, javascript, JS, offscreencanvas, three.js, web workers, WebGL, Работа с 3D-графикой, Разработка веб-сайтов, разработка игр
В этом руководстве я расскажу как с помощью OffscreenCanvas мне удалось вынести весь код работы с WebGL и Three.js в отдельный поток веб-воркера. Это ускорило работу сайта и на слабых устройствах исчезли фризы во время загрузки страницы.
Статья основана на личном опыте, когда я добавил вращающуюся 3D-землю на свой сайт и это забрало 5 очков производительности в Google Lighthouse — слишком много для лёгких понтов.Читать полностью »