Javascript 3d: Three.js – JavaScript 3D Library

создание одной и той же 3D-игры на обоих языках

Рассказывает автор блога Irrlicht3d 

---

Я написал один и тот же шутер от первого лица на JavaScript, а потом на C++. В этой статье опишу, как все это происходило.

Несколько лет назад, когда WebGL начал свое шествие по браузерам, у меня возникла идея — написать шутер от первого лица на JavaScript и HTML. Абсолютно безумная затея, но она сработала, и даже не очень лагала (попробуйте сами). В свободное время я понемногу модифицировал код, со временем игра обросла фичами и стала интересной.

JavaScript-версия: работает в браузере

Тем временем появился Electron (если кратко, инструмент, позволяющий соединить веб-приложение с браузером и запускать как нативное приложение). И я задумался: «Опа! Может, сделать настоящее нативное приложение из моей игры на WebGL? Засуну его в Electron, и дело в шляпе».

Я так и сделал. Получилось на удивление неплохо, настоящее приложение. Но результат работал не очень: хоть я и приложил много усилий, чтобы приложение работало именно как приложение, а не веб-сайт, но все равно недостатков была масса — большие задержки, отсутствие нормальной аппаратной поддержки, 3D, настроек полноэкранного режима, плохая блокировка курсора и еще куча всего.

Поэтому я решил переписать свою игру на C++. И правда — а почему нет-то? Наверное, и не слишком сложно будет — JavaScript-код моей игры основывался на 3D-движке CopperLicht (я его сам написал), у которого API почти как у 3D-движка IrrLicht (его тоже написал я), на котором и так основан мой игровой движок Framework CopperCube. Работы вроде не очень много — нужно только переписать игровую логику. Все остальное — окно, интерфейс, коллизии, шрифты, текстуры, звук, картинки, обработка файлов и другое — уже было написано, еще и API использовало очень похожее.

На портирование ушли недели, но в результате игра стала нативным Win32-приложением на C++. Можете скачать ее здесь.

Нативная версия на C++

Сравнение

Теперь у меня есть редкая возможность сравнить ход разработки одного и того же приложения на C++ и JavaScript. Разберу по пунктам.

Производительность

Сейчас вы очень удивитесь: производительность обеих реализаций не сильно различается (прим. перев.: А вот на компьютере без дискретной видеокарты разница огромна — в браузере игра почти не играбельна, а вот в C++-версии отсутствуют даже малейшие лаги).

Даже самая ресурсоемкая часть — процедурная генерация домов и обнаружение столкновений физическим движком — не сильно лагали на JavaScript. Тормозит буквально раза в два больше, чем в C++-версии. Оптимизация выполнения JavaScript в Chrome меня очень впечатлила. К несчастью, все равно JavaScript-версия ощущается куда более медленной. Далее я объясню, почему.

Дьявол кроется в деталях

В реализации на C++ я мог контролировать любую деталь выполнения, любую мелочь. В JavaScript-версии во многих вещах я полагался на браузер — в этом и крылась проблема. На JavaScript процедурная версия едва заметно подлагивала из-за того, что некоторые вызовы WebGL имеют свойство ненадолго вешать браузер. Буквально на миллисекунды, но их очень много — поэтому игра «плыла», ощущалась очень медленной по ритму. Я написал несколько обходов для основных проблем, но с другими ничего сделать, увы, было нельзя. На C++ же контролировать можно все — и если возникают проблемы, можно придумать способ их решить.

Версия на JavaScript на моем компьютере выдавала тот же FPS, что и на C++ — около 120 кадров в секунду. Но ощущалась она очень, очень медленной. В зависимости от используемой ОС и железа компьютера браузер ведет себя сильно по-разному, и даже ввод иногда лагает.

Даже если сцена отрисуется очень быстро — управление мышкой сильно отставало, для шутера от первого лица такое отставание критично. Из-за этого игра тоже казалось очень заторможенной.

В игровом коде есть два способа исполнения «игрового цикла»: requestAnimationFrame() и setInterval(). Одна из версий частично решает проблему скорости ввода на одних системах, другая — на других. От этого ситуация запутывается еще сильнее.

Таких мелких проблем было много, но у всех была одна причина — в JavaScript-версии все очень сильно зависит от реализации браузера, который часто делает не то, что вы от него хотите. В C++ такой проблемы не было в принципе.

Скорость разработки

И JavaScript, и C++ я знаю достаточно хорошо, поэтому скорость была примерно одинаковой. В C++ иногда возникает нужда реализовать вещи, о которых в JavaScript думать не надо, но зато система типов C++ помогает в отлове багов и опечаток. «Хвала» современным браузерам — JavaScript отлаживать так же удобно, как C++ двадцать лет назад.

Лично я думаю, у обоих языков есть и плюсы, и минусы. В конце концов, оба они — просто инструменты для достижения цели.

Итог

Если вы решите вдруг написать свой трехмерный шутер от первого лица, я настоятельно рекомендую делать это не на JavaScript/HTML/WebGL. Для встроенных в сайты мелких игрушек или прототипов они хороши, но сделать на них полноценный, да еще и нативный продукт нереально. Ну, по крайней мере, сейчас. Кто знает, вдруг через несколько лет все станет резко наоборот. Знаю много людей, которые с таким инструментарием делают двухмерные игры, и получается прекрасно. Но для трехмерной игры от первого лица это так не работает.

Я решил продолжить работу над C++-версией. Надеюсь, что закончу в ближайшие месяцы. Вот тут можно понаблюдать за прогрессом: сайт игры.

Источник: блог Irrlicht3d

Потрясающая 3D Tilt анимация на JavaScript. Видеоурок и учебные материалы

Всем привет! Сегодня мы создадим сложную 3D Tilt анимацию — от дизайна до готового результата на JavaScript, с использованием инновационной платформы GSAP. В данном уроке мы довольно плотно поработаем с OptimizedHTML 5 и на реальном примере рассмотрим настройку, оптимизацию ресурсов и другие аспекты работы со стартером.

Смотреть урок на YouTube

Результат

1. Готовый результат (демо): Смотреть
2. Исходники, дизайн, демо: Скачать с GitHub

Важные обновления!

I. «perspective: 1000px» теперь следует задавать непосредственному родителю того класса, к которому применяем GSAP («app. js», строка 36). В нашем случае непосредственным родителем блока .content является класс .card-header. Класс .preserve должен находиться на каждом уровне цепочки DOM при сложной вложенной структуре сцены, начиная от класса с «perspective: 1000px» до непосредственных родителей элементов, размещённых в 3D-пространстве (см. index.html). Рекомендую скачать исходники с GitHub и ознакомиться более детально с демонстрационным проектом.

II. Теперь стартер работает с JavaScript модульно, посредством webpack и babel. Вот какие изменения следует учитывать в процессе обучения:

1. Следует явно определять все основные переменные проекта через let и импортировать GSAP в проект как модуль в «app.js», а не файлом в Gulpfile. В проекте-примере данного урока, в самом начале файла «app.js» добавьте:

   import { gsap } from 'gsap'
   let cx, cy, mouseX, mouseY, posX, posY, clientX, clientY, dx, dy, tiltx, tilty, request, radius, degree
   

2. Стартер был значительно переработан и упрощен. Было удалено дерево переменных, теперь все настройки следует выполнять непосредственно в функциях задач. Удалены лишние переменные настроек, усложняющие восприятие и работу со стартером.
3. Был удален файл ht.access, теперь содержимое для вашего .htaccess файла можно найти на странице стартера на GitHub в описании.
4. Теперь папка изображений имеет подпапку dist, куда выгружаются оптимизированные картинки, а исходники следует размещать в «images/src/».
5. Добавлена возможность инклуда html parts. Верхняя часть «index.html» была вынесена в файл «parts/header.html», а нижняя в «parts/footer.html». Весь основной код остался в «index.html» между этими инклудами. Файлы инклудятся виртуально на стороне сервера, поэтому проект необходимо собирать командой build. Готовый проект размещается в папке «dist/».
6. В Gulpfile.js добавлена переменная preprocessor, предоставляющая опциональный выбор препроцессора (sass, less, styl). Все препроцессоры и подготовленные для них настройки находятся в папке «styles/». Обратите внимание, ‘sass’ работает также и с синтаксисом Scss в директории «styles/sass/blocks/». Директория «blocks/» полностью подключается в основной файл и именно в этой директории следует создавать новые стили проекта с расширением *.sass или *.scss, в зависимости от того, какой синтаксис вы предпочитаете. При использовании любого другого препроцессора, новые файлы в директории «styles/{preprocessor}/blocks/» будут автоматически импортированы в файл «styles/{preprocessor}/main.*», скомпилированы и сжаты.
7. В остальном, используйте стартер как это было показано в уроках.

Сопутствующие уроки

1. Следующий урок по созданию курсора: Изучить
2. Gulp 4 — Руководство для самых маленьких
3. OptimizedHTML 5 — Стартер для верстки сайтов (урок)
4. OptimizedHTML 5 на GitHub
5. Настройка окружения с использованием WSL
6. Настройка окружения без WSL (рекомендую)
7. Редактор кода, используемый в уроке
8. Молниеносная верстка с EMMET

Дополнительные ресурсы

1. Lazy Load Placeholder Generator: webdesign-master. ru/services/lazy/
2. google-webfonts-helper: gwfh.mranftl.com/fonts/ubuntu
3. GSAP .to() Documentation: gsap.to()
4. Color Picker: Instant Eyedropper

Премиум уроки от WebDesign Master

Создание сайта от А до Я. Комплексный курс

Создание современного интернет-магазина от А до Я

Я — фрилансер! Базовый курс для начинающих

Другие уроки по теме «Верстка»

• Создание сайта с крутой анимацией скролла (GSAP) | Материалы урока
• Создание красивого сайта с горизонтальным Parallax эффектом | Материалы урока
• Создание сайта портфолио с крутой анимацией | Материалы урока
• Создание красивого сайта с Parallax эффектом при скролле | Материалы урока
• Создание Parallax эффекта на сайте при движении мыши | Материалы урока
• Создание красивого сайта с поддержкой темной темы (HTML, CSS, GSAP) | Материалы урока

3D-игры в Интернете — Разработка игр

Для насыщенного игрового процесса в Интернете предпочтительным оружием является WebGL, отображаемый на HTML . WebGL — это, по сути, OpenGL ES 2.0 для Интернета — это API JavaScript, предоставляющий инструменты для создания богатой интерактивной анимации и, конечно же, игр. Вы можете создавать и визуализировать динамическую 3D-графику с помощью JavaScript с аппаратным ускорением.

Документация и спецификация проекта WebGL поддерживаются Khronos Group, а не W3C, как в случае с большинством веб-API. Поддержка в современных браузерах очень хорошая, даже на мобильных устройствах, так что вам не нужно об этом слишком беспокоиться. Все основные браузеры поддерживают WebGL, и все, на чем вам нужно сосредоточиться, — это оптимизация производительности на используемых вами устройствах.

Ведутся работы по выпуску WebGL 2.0 (на основе OpenGL ES 3.0) в ближайшем будущем, который принесет множество улучшений и поможет разработчикам создавать игры для современной сети с использованием современного мощного оборудования.

Основы трехмерной теории сосредоточены на формах, представленных в трехмерном пространстве, с системой координат, используемой для расчета их положения. Всю необходимую информацию см. в нашей статье «Объяснение базовой теории 3D».

С WebGL вы можете делать гораздо больше. Есть некоторые продвинутые концепции, в которые вам следует погрузиться и узнать больше — например, шейдеры, обнаружение столкновений или последняя горячая тема: виртуальная реальность в Интернете.

Шейдеры

Отдельно стоит упомянуть шейдеры, это отдельная история. Шейдеры используют GLSL, специальный язык шейдеров OpenGL, с синтаксисом, похожим на C, который выполняется непосредственно графическим конвейером. Их можно разделить на вершинные шейдеры и фрагментные шейдеры (или пиксельные шейдеры) — первые преобразуют положения фигур в реальные координаты 3D-рисования, а вторые вычисляют цвета рендеринга и другие атрибуты. Вы обязательно должны прочитать статью о шейдерах GLSL, чтобы узнать о них больше.

Обнаружение столкновений

Трудно представить игру без обнаружения столкновений — нам всегда нужно отрабатывать, когда что-то сталкивается с чем-то другим.

У нас есть информация, которую вы можете получить:

• Обнаружение столкновений 2D
• Обнаружение столкновений 3D

WebVR

Концепция виртуальной реальности не нова, но она бурно распространяется в сети благодаря аппаратным достижениям, таким как Oculus Rift, и (в настоящее время экспериментальному) WebVR API для сбора информации с оборудования VR и предоставления ее для использования в JavaScript-приложениях. Чтобы узнать больше, прочитайте WebVR — виртуальная реальность для Интернета.

Также есть статья Создание базовой демонстрации с A-Frame, в которой показано, как легко создавать 3D-среды для виртуальной реальности с помощью A-Frame framework.

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

Самой популярной 3D-библиотекой JavaScript является Three.js, многоцелевой инструмент, упрощающий реализацию распространенных 3D-методов. Стоит проверить и другие популярные библиотеки и фреймворки для разработки игр; A-Frame, PlayCanvas и Babylon.js являются одними из самых узнаваемых с богатой документацией, онлайн-редакторами и активными сообществами.

Создание базовой демонстрации с помощью A-Frame

A-Frame — это веб-платформа для создания 3D- и VR-приложений. Под капотом это фреймворк Three.js с декларативным шаблоном сущность-компонент, что означает, что мы можем создавать сцены только с помощью HTML. См. подстраницу «Создание базовой демонстрации с помощью A-Frame», чтобы узнать о пошаговом процессе создания демонстрации.

Создание базовой демонстрации с помощью Babylon.

js

Babylon.js — один из самых популярных движков 3D-игр, используемых разработчиками. Как и любая другая 3D-библиотека, она предоставляет встроенные функции, помогающие быстрее реализовывать стандартные 3D-функции. См. подстраницу Создание базовой демонстрации с помощью Babylon.js, чтобы узнать об основах использования Babylon.js, включая настройку среды разработки, структурирование необходимого HTML и написание кода JavaScript.

Создание базовой демонстрации с помощью PlayCanvas

PlayCanvas — популярный игровой движок 3D WebGL с открытым исходным кодом на GitHub, редактором, доступным онлайн, и хорошей документацией. Подробные сведения см. на подстранице Создание базовой демонстрации с помощью PlayCanvas, а также в других статьях, показывающих, как создавать демонстрации с помощью библиотеки PlayCanvas и онлайн-редактора.

Создание базовой демонстрации с помощью Three.js

Three.js, как и любая другая библиотека, дает вам огромное преимущество: вместо того, чтобы писать сотни строк кода WebGL для создания чего-либо интересного, вы можете использовать встроенные вспомогательные функции для сделать это намного проще и быстрее. См. подстраницу «Создание базовой демонстрации с помощью Three.js», чтобы узнать о пошаговом процессе создания демонстрации.

Другие инструменты

И Unity, и Unreal могут экспортировать вашу игру в WebGL с помощью asm.js, поэтому вы можете свободно использовать их инструменты и методы для создания игр, которые будут экспортироваться в Интернет.

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

Исходный код

Весь исходный код демонстраций этой серии можно найти на GitHub.

API

• Canvas API
• API WebGL
• API веб-VR

Фреймворки

• Three.js
• PlayCanvas
• Babylon.js
• А-образная рама

Учебные пособия

• Создание базовой демонстрации с помощью Three. js
• Создание базовой демонстрации с помощью PlayCanvas
• Создание базовой демонстрации с помощью Babylon.js
• Создание базовой демонстрации с A-Frame

Обнаружили проблему с содержанием этой страницы?

• Отредактируйте страницу на GitHub.
• Сообщить о проблеме с содержимым.
• Посмотреть исходный код на GitHub.

Хотите принять более активное участие?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена 23 февраля 2023 участниками MDN.

Three.js — 3D-библиотека JavaScript | Адарш Гупта

3D внутри браузера.

Опубликовано в

·

5 минут чтения

·

8 января 2022 г.

Возможно, вы задавались вопросом о некоторых крутых веб-сайтах с трехмерным видом, верно?

С помощью WebGL.

Так что же такое WebGL?

WebGL — это API JavaScript для рендеринга интерактивной 2D- и 3D-графики. WebGL полностью интегрирован с другими веб-стандартами, что позволяет использовать физику, обработку изображений и эффекты с ускорением графического процессора как часть холста веб-страницы. (открытое определение)

Проще говоря, вы можете использовать творческий подход для создания 3D-эффекта на своем веб-сайте.

Это потому, что Three.js использует WebGL для создания веб-сайтов с трехмерной анимацией.

Three.js на самом деле проще, чем мы думаем, но для рендеринга небольшого куба требуется много шаблонного кода.

Изучая новый язык программирования, мы изучаем его, печатая самое известное слово Hello World!

Здесь, в Three.js, мы начинаем с создания куба. Давайте начнем.

Наш файл package.json выглядит следующим образом.

Не смущайтесь из-за этих многочисленных зависимостей, мы используем Webpack, который является сборщиком модулей JavaScript.

Вы можете получить начальный код из этого репозитория GitHub . вы можете клонировать репозиторий и запустить npm/yarn install для установки зависимостей. Это выглядит как много кода, верно? ну, ответ таков: Three.js нужен локальный сервер разработки для локального запуска.

Наш файл HTML чист и прост, все, что нам нужно, это тег canvas для рендеринга нашего 3D внутри него.

Но наш файл JavaScript тяжелый.

На самом деле это не так. Это просто первоначальная настройка Three.js, давайте разберем ее

Во-первых, мы импортируем то, что необходимо.

Итак, теперь у нас есть доступ к файлам Three.js с ключевым словом THREE .

Orbitcontrols помогает настроить окно, которое мы рассмотрим позже. dat.gui поможет вам настроить такие значения, как высота цвета и многое другое.

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

Наш куб — это boxGeometry поэтому мы используем это. Вы можете увидеть другие геометрические фигуры здесь.

Boxgeometry

Теперь мы можем добавить наши материалы.

И добавляем в меш.

Mesh=Geometry+Material

Но мы не можем видеть наш Box, потому что теперь у нас есть куб, но он не знает, где его показать. Вот почему нам нужна сцена .

Часть сцены

Вот наша сцена, и теперь мы можем добавить нашу коробку к нашей сцене.

Если бы вы сделали эти шаги правильно, вы бы никогда не увидели куб. Это потому, что наша сцена готова, но нам нужна камера и свет и рендерер , чтобы увидеть куб, камера дает снимок, свет будет обеспечивать свет (очевидно), рендерер будет отображать ваше искусство с помощью WebGL.

Часть камеры.

Доступно так много типов камер, здесь мы используем PerspectiveCamera. Первый аргумент — это поле зрения, которое определяет вертикальное поле зрения камеры, затем у нас есть соотношение сторон, затем ближняя и дальняя точка (вы можете подумать так же, как наш глаз). Наконец, мы добавляем камеру в сцену

Да будет свет…

Доступно много источников света, таких как HemisphereLight , ambientLight и более мы используем PointLight , который можно представить как фонарик. Мы устанавливаем позицию по умолчанию, она находится в начале координат, а затем добавляем ее в нашу сцену

Теперь последняя часть

Мы создали функцию тик , которая является своего рода рекурсивной функцией, и мы получаем вывод, подобный этому

Но причем здесь 3D? Вы правильно поняли, мы хотим анимировать его, чтобы мы могли сделать вращение.