Три игровых эффекта JS

Я разрабатываю многопользовательскую веб-игру с использованием трех JS. Пока что я сделал игровую логику (клиентская и серверная), импорт сетки, анимацию, панель навыков, панель здоровья ... Игроки действительно могут сражаться. (Подумайте об игре в стиле MMORPG)

Одна вещь, которую я упускаю и с трудом могу найти какую-либо информацию, - это то, что я называю «игровым эффектом» (я говорю о снарядах, стрелах, огненном шаре, взрывах, ауре ...): Примерно так: https://www.youtube.com/watch?v=1C6JW1QRLsk

Итак, у меня есть 2 вопроса по этому поводу:

  • Как именно это называется? VFX? Эффект игры? Шейдер? Думаю, если бы я использовал движок Unreal, это называлось бы системой частиц, верно?

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

(Прошу прощения, если сделаю грамматическую ошибку, английский не мой родной язык)


РЕДАКТИРОВАТЬ:

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

https://puu.sh/zjThg/fb36369e00.gif

В этом есть 2 заклинания и 4 эффекта.

  1. Анимация заклинания с двумя вращающимися ледяными шарами
  2. Эффект заклинания, добавляющий к цели ледяные блоки и туман.
  3. Вторая анимация кастинга с кольцом воды
  4. Эффект второго заклинания, создающий "цилиндр" воды для цели.

https://puu.sh/zjTJF/73c04f4672.gif

А вот анимация применения навыка лука, вы можете увидеть, как много всего происходит, и я абсолютно не знаю, как это можно сделать с помощью кода, поскольку я новичок в разработке 3D ...

Я надеюсь, что эти два примера прояснят мой первоначальный вопрос.


person Keyle    schedule 06.02.2018    source источник
comment
может быть, вы думаете об эффекте цветения? демонстрация three.js здесь   -  person synj    schedule 06.02.2018
comment
@synj Я не думаю, что это связано с цветением, я хочу сделать что-то вроде этого: youtu .be / RO8hQC-_zBo? t = 2 мин. 50 сек.   -  person Keyle    schedule 06.02.2018


Ответы (2)


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

Вы можете заглянуть на этот веб-сайт, чтобы найти вдохновение и образцы кода по шейдерам, там много сумасшедших вещей: https://www.shadertoy.com

Ищите «взрыв», «свечение», «ореол» ... удачи!

person Philippe    schedule 06.02.2018
comment
И для некоторых примеров вам понадобится чудовищный графический процессор :) Вот причина, по которой этот веб-сайт имеет игрушку в своем названии. - person prisoner849; 06.02.2018
comment
Спасибо за ссылку, дома попробую посмотреть, подходит ли она моим потребностям, мой рабочий компьютер с этим не справится. - person Keyle; 06.02.2018
comment
На этом сайте есть интересные вещи! Но я думаю, что это может быть немного излишним для того, что я пытаюсь сделать, я обновил свой первоначальный вопрос с примерами. Как вы думаете, они связаны с шейдером? - person Keyle; 09.02.2018
comment
Ну, шейдеры - это определенно подход, который приведет к лучшей производительности, потому что они обрабатываются графическим процессором. Так что это зависит от того, насколько тяжелая ваша игровая логика и какой FPS вам нужно достичь, только вы можете ответить на этот вопрос и поэкспериментировать с разными подходами. Другой способ, который я могу придумать, - это добавить в сцену трехмерные объекты / сетки Three.js, применить какой-то прозрачный материал и обновить их с помощью логики js. К сожалению, я не могу привести вам конкретный пример. - person Philippe; 09.02.2018
comment
поэтому я хочу реализовать один из этих шейдеров на трех js, как я могу это сделать? - person shamaseen; 23.02.2020

Вам следует изучить движок эффектов частиц на основе Three.js по адресу: http://squarefeet.github.io/ShaderParticleEngine/

person Lee Stemkoski    schedule 02.06.2018