Программирование игр, создание игрового движка, OpenGL, DirectX, физика, форум
GameDev.ru / Программирование / Форум / WebGL - системы частиц. Как они делаются с точки зрения WebGL?

WebGL - системы частиц. Как они делаются с точки зрения WebGL?

Поделиться

Страницы: 1 2 Следующая

pavelkolodinПостоялецwww4 окт. 201614:37#0
Технически это просто рисование тучи треугольников или какой-то особый режим рисования в WebGL?
robotcityПостоялецwww4 окт. 201616:58#1
Ага, есть особый режим, шейдерами.
pavelkolodinПостоялецwww4 окт. 201617:04#2
robotcity
Пояснения в студию.
robotcityПостоялецwww4 окт. 201617:38#3
pavelkolodin
https://www.shadertoy.com/view/4ss3DM
зачем тебе это, если такие простые вещи не можешь сам додумать? тем более интернет забит информацией, библиотеками, открой любую, pixi например и посмотри как там сделано.
pavelkolodinПостоялецwww4 окт. 201617:47#4
Додумать можно что угодно, что даже будет работать, но в итоге окажется не о том и не оптимально.
kiparПостоялецwww4 окт. 201622:41#5
В "1 million particles webgl" рисуются точками, при этом вся физика рассчитывается в пиксельном шейдере (из текстуры со старыми координатами рисуется в текстуру с новыми координатами). Но у такого подхода есть сильные ограничения - сложную физику в шейдер не запихнуть, ну и требуются расширения webgl которых в мобильных браузерах нет (но в основных десктопных есть).
foxesПостоялецwww5 окт. 20161:56#6
Все таки проще и надежней будет начать с тучи треугольников. Потом можно будет попробовать перейти к геометрическому шейдеру и тд. Но вариантов реализации у треугольников больше и возможностей тоже. Ни каких специальных систем с частицами нет, но примерчики поискать можно.

Правка: 5 окт. 2016 1:59

pavelkolodinПостоялецwww5 окт. 20162:00#7
foxes
С треугольников я уже начал. Ничего нового для себя, по-сути, не сделал.

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

foxesПостоялецwww5 окт. 20162:08#8
тут есть момент нагрузки на шину данных, когда ты слишком много вызываешь calldraw или слишком большой объем треугольников. По тому нужно найти примеры добивающиеся максимума производительности.

http://www.iamnop.com/particles/
http://nopjia.blogspot.ru/2014/06/webgl-gpu-particles.html

вот тут предлагают THREE.JS использовать.
https://threejs.org/examples/webgl_gpu_particle_system.html

Во всеx GL-ax делался массив треугольников и одним вызовом calldraw все отрисовывалось. Через шейдеры быстрее - не надо треугольники передавать можно их генерировать в шейдере или даже делать в место них точки, но тогда с текстурами возможно придется повозиться.

Правка: 5 окт. 2016 2:25

kiparПостоялецwww5 окт. 20169:14#9
foxes
Во всех этих ссылках технология одна и та же, отличаются только мелкие детали реализации (типа использовать Threejs для создания шейдера или напрямую webgl звать)

Суть такова: физику миллиона частиц на javascript в реалтайме просчитать невозможно, захлебнется, ну и перегонять с цпу на гпу каждый кадр тоже не вариант. Поэтому ее надо просчитывать на gpu. Для этого заводят текстуру, каждый пиксель которой соответствует частице. В пикселе 4 флоата, например два - позиция, два - скорость. Ну или по два пикселя на частицу, тогда простор больше.
Дальше в шейдере рисуют из этой текстуры в другую, а потом флипают их местами, при этом шейдер проводит обработку "физики", т.е. перемещает частицы и изменяет их скорость (ну и другие параметры).
И после этого остается нарисовать. Для этого можно использовать фиксированный массив точек (0,1,2,3...1000000), а в вершинном шейдере читать брать этот номер и читать из текстуры с данными координаты частицы. С тем же успехом можно рисовать не точками а треугольниками, просто придется брать массив вершин в 3\4\6 раз больше. Все равно он грузится один раз, а не каждый кадр, т.е. упирается в скорость gpu а не js.
Я так RTS пытался делать, правда на webgl стало лень переводить.

Теперь о недостатках:
- требует возможности расширений которых нет в стандарте webgl: float-текстуры(OES_texture_float) и чтение из текстур в вершинном шейдере(MAX_VERTEX_TEXTURE_IMAGE_UNITS>0). В обычном GL и то и то норма, а вот в WebGL на многих мобилках (во всяком случае в моей) отсутствует.
- геометрических шейдеров в webgl нет, поэтому либо рисовать точками (которые мелкие и не очень настраиваемые), либо делать буфер вершин в три-шесть раз больше. Но это в любом случае придется
- проблема с передачей параметров в шейдер. Если частицы должны взаимодействовать со сложным миром, то весь этот мир надо описать несколькими юниформами.

Ну а если миллион частиц не нужен то оставить кучу треугольников и вообще не заморачиваться.

kiparПостоялецwww5 окт. 20169:30#10
robotcity
> https://www.shadertoy.com/view/4ss3DM
а этот рейтрейс вообще не нужен:
> spark count between about 73-206 is known to crash Win7/Chrome
gammakerПостоялецwww5 окт. 201622:37#11
Решил портировать сегодня свою демку с частицами с C++ на HTML5 + WebGL. Сделал, но на ноутбуке они почему-то жутко тормозят. В Chrome и Firefox на 50000 частиц тормозят так, что браузер даже автоматически отключает WebGL, а на IE11 и Edge дела получше, но тоже тормозят. И выглядит как-то тускло почему-то, не очень похоже на то, что я портировал с винды. А на виндовой версии даже 10 000 000 частиц работают быстрее, чем 50000 в браузере, хотя обсчитываются они полностью в шейдере и производительность JavaScript не должна влиять.
А запускаю на телефоне, там всё летает и так же красиво, как в моей демке под винду.

Вот Web версия: http://gammaker.github.io/particles/
А это виндовая версия: https://github.com/gammaker/flying-particles/blob/master/exe/Flyi… .exe?raw=true

Правка: 5 окт. 2016 22:42

robotcityПостоялецwww5 окт. 201622:56#12
gammaker
портирование это плохо, надо писать для webgl.
посмотри примеры:
http://soulwire.github.io/WebGL-GPU-Particles/
https://github.com/squarefeet/ShaderParticleEngine -  этот самый хороший на данный момент.
gammakerПостоялецwww5 окт. 201623:15#13
robotcity
> портирование это плохо, надо писать для webgl.
Чем это плохо? Что плохого в том, чтобы переносить свои наработки на другие платформы?
Моя техника рисования и просчёта частиц очень быстрая на Windows и по фичам отлично ложится на OpenGL ES 2.0, а следовательно и на WebGL. Но почему отличия в производительности в десятки и сотни раз, я не могу понять, тем более, что на мобилках летает, в отличие от PC.

robotcity
> http://soulwire.github.io/WebGL-GPU-Particles/
И что это за тормозная фигня из белых пикселей? Ты мою демку смотрел?


В Linux в хроме те же тормоза, а вот в Firefox там всё работает быстро, даже 1000000 частиц почти не тормозит. Но почему-то эффект какой-то не такой красивый, частицы меньше друг на друга накладываются.

Правка: 5 окт. 2016 23:30

Blew_zcПостоялецwww5 окт. 201623:30#14
gammaker
Не тормозит на старом ноуте, вин7, классическая тема (может в ней дело), Radeon HD5470M, хром.
Лаги появляются, когда всплывает тултип, если навести например на заголовок вкладки.

Страницы: 1 2 Следующая

/ Форум / Программирование игр / 2D графика и изометрия

2001—2017 © GameDev.ru — Разработка игр