Браузърни игри с Three.js и WebGL

Браузърна игра с Three.js и WebGL е правилният избор, когато обхватът е по-важен от графичния таван. Играчът отваря линк и играе след секунди, без инсталация, без преглед в магазин за приложения и без регистрация. Тя пасва на рекламни и кампанийни игри, интерактивни продуктови страници, казуални игри и прототипи, които искате да пробват много хора. Цената е строг бюджет за размера на изтеглянето и за времето на кадър, защото играта трябва да се зарежда бързо и да върви гладко на обикновен лаптоп или на телефон от среден клас.

#Кога браузърната игра е правилният избор

Браузърът маха всяка стъпка между играча и първия кадър. Това тежи най-много в четири случая:

• Кампании и маркетинг. Кратка игра към пускане на продукт, сезон или марка живее като линк в реклама, имейл или публикация.
• Казуални игри, които се споделят. Ежедневен пъзел или аркада с класация се разпространява, защото приятелят ви отваря същия линк на устройството, което има подръка.
• Интерактивни продуктови страници. 3D конфигуратор или демо, което се играе направо в сайта, стъпва на същата технология като играта.
• Прототипи и тестове с играчи. Изпращането на линк е по-бързо от разпращането на билдове, а между сесиите обновявате играта, без някой да преинсталира.

Браузърът е по-слаб избор за дълги сесии в големи светове, за игри със стотици мегабайта ресурси и за заглавия, които от първия ден трябва да са в App Store и Google Play с покупки в приложението. За тях по-добрият път обикновено е нативна версия. Ако още решавате какво да влезе в първата версия, вижте статията за планиране на прототип и вертикален срез на игра.

#Какво всъщност правят WebGL и Three.js

WebGL е интерфейсът на браузъра, през който JavaScript достига до видеокартата. Той е на ниско ниво: сами подавате буфери с върхове, шейдърни програми и текстури. Поддържат го всички актуални настолни и мобилни браузъри. По-новите браузъри предлагат и WebGPU, по-модерен графичен интерфейс, но поддръжката му все още зависи от браузъра и устройството, затова проверете актуалното състояние, преди да разчитате на него.

Three.js е JavaScript библиотека с отворен код върху WebGL, а в последните версии и върху WebGPU. Тя дава граф на сцената, камери, светлини, материали, зареждане на glTF модели, анимации и пост-обработка. Three.js е библиотека за рендериране. В нея няма вградена физика, редактор на сцени, мрежов слой или правила за игровия цикъл. Тях добавяте сами: библиотека за физика като Rapier или cannon-es, собствено управление на състоянието, слой за звук и инструмент за сглобяване като Vite. Получавате пълен контрол и малък размер, а повече решения остават за вашия екип.

#Бюджет за изтеглянето още преди разработката

При браузърната игра зареждането е първото, което играчът преживява. Определете бюджет за ресурсите в самото начало и проверявайте всеки билд спрямо него.

• Модели: използвайте glTF в двоичния формат .glb и компресирайте геометрията с Draco или meshopt. Махнете стените, които камерата никога не вижда, и съобразете броя полигони с това колко близо стига камерата.
• Текстури: обикновено са най-тежките файлове. Ползвайте най-малкия размер, който изглежда добре на екрана, и обмислете KTX2 с компресия Basis Universal, която остава компресирана и във видеопаметта.
• Звук: компресирайте музиката и ефектите, а дългите парчета зареждайте поточно, вместо всичко наведнъж.
• Код: внасяйте само модулите на Three.js, които реално използвате, и оставете инструмента за сглобяване да изхвърли останалото.
• Ред на зареждане: заредете нужното за първия екран, оставете играча да започне и изтегляйте следващите нива във фонов режим.

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

#Кадри в секунда на обикновени лаптопи и телефони

Компютърът, на който разработвате, е най-бързото устройство, на което ще тествате. Тествайте рано на по-стар лаптоп с вградена графика и на Android телефон от среден клас. Ето най-честите разходи и как се намаляват:

• Извиквания за рисуване. Всеки отделен обект и материал струва процесорно време. Обединявайте статичната геометрия, споделяйте материали и използвайте инстанциране за повтарящи се обекти като дървета или монети.
• Брой пиксели. Ограничете pixel ratio на рендерера при телефоните с екрани с висока плътност.
• Сенки и пост-обработка. Сенките в реално време, bloom и ефектите в екранното пространство натоварват много. Където сцената позволява, запечете осветлението в текстурите и дайте настройка за по-ниско качество.
• Събиране на паметта. Създаването на нови обекти във всеки кадър води до накъсване. Преизползвайте вектори и дръжте пулове от обекти в игровия цикъл.
• Загряване. Телефоните намаляват производителността си, когато се загреят, така че игра, която върви добре две минути, може да започне да губи кадри след десет. Тествайте дълги сесии и обмислете таван на кадрите.

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

#Управление, намалено движение и достъпност

Линкът може да се отвори на всякакво устройство, затова планирайте управлението за няколко от тях от самото начало. Pointer Events обединяват мишка, писалка и докосване в един код. На сензорните екрани сложете бутони, достатъчно големи за палец и далеч от жестовете по ръба, които браузърът ползва сам. При клавиатурата дайте възможност за пренастройване на клавишите или поне разумни алтернативи. Gamepad API работи в съвременните браузъри. За управление от първо лице Pointer Lock API скрива и прихваща курсора, но се включва само след действие на потребителя, а браузърите чакат такова действие и преди да пуснат звук. Прост екран „Докоснете, за да започнете“ решава и двата проблема.

Тресенето на камерата, бързото панорамиране и проблясванията карат някои играчи да им се вие свят или да им прилошее. Операционните системи имат настройка за намалено движение, а браузърът я подава чрез медийната заявка prefers-reduced-motion. Прочетете я в JavaScript и реагирайте: омекотете движението на камерата, изключете тресенето и проблясванията, махнете паралакс фоновете. Добавете и превключвател в самата игра, защото не всеки е задал системната настройка. Където е възможно, правете менютата и HUD в HTML, за да е текстът четим, и не разчитайте на цветове, които се различават само по червено и зелено.

#Ограничения в сравнение с уеб експорт от Unity или Godot

Unity и Godot могат да експортират за уеб чрез WebAssembly. Този път има смисъл, когато същата игра излиза и на други платформи или когато екипът вече работи в някой от тези редактори.

	Three.js	Уеб експорт от Unity или Godot
Размер за изтегляне	Малка библиотека, всеки байт е под ваш контрол	Средата на енджина се добавя към всяко изтегляне
Инструменти	Работа предимно с код, без собствен визуален редактор	Пълен редактор с физика, анимации и инструменти за интерфейс
Връзка със сайта	Живее в страницата и споделя HTML, CSS и аналитиката ѝ	Работи в платно и говори със страницата през мост
Други платформи	Само уеб, освен ако не го опаковате в приложение	Един проект може да излезе за компютър, телефони и конзоли
Най-подходящ за	Кратки, леки игри и 3D в сайтове	По-големи игри, при които уебът е една от няколко платформи

Уеб експортът на енджините има и свои изисквания, например определени заглавки от сървъра за многонишковост или ограничения в мобилните браузъри. Те се променят между версиите, затова прочетете актуалната документация за експорт на енджина, който изберете. И при трите варианта таванът е по-нисък от този на нативна версия: браузърът ограничава паметта и не можете да разчитате на същите възможности на видеокартата като при игра за компютър.

#Как може да помогне PN Scripts

PN Scripts разработва игри на Unity, Unreal, Godot и WebGL с Three.js, заедно с онлайн услугите зад тях, когато играта има нужда от акаунти, класации или записи. При браузърна игра бюджетът за ресурси и целевите устройства влизат в писменото задание, преди да започне работа. Как водим такива проекти, ще видите на страницата за разработка на игри.