Three.js Частицы разных размеров

Я новичок в three.js и пытаюсь найти лучший способ добавить 1000 частиц, каждая из которых имеет разный размер и цвет. Текстура для каждой частицы создается путем рисования холста. При использовании ParticleSystem все частицы имеют одинаковый цвет и размер. Создание ParticleSystem для каждой частицы очень неэффективно. Есть ли эффективный способ справиться с этим?


javascript three.js particles
person wwwuser    schedule 15.08.2013    source источник
comment
Я нечасто использовал Three, но я почти уверен, что видел примеры с одной ParticleSystem, имеющей несколько цветов.   -  person Asad Saeeduddin    schedule 15.08.2013
comment
У вас есть какой-нибудь существующий код? Кажется, я знаю, как это можно сделать.   -  person Asad Saeeduddin    schedule 15.08.2013
comment
См. threejs.org/examples/webgl_custom_attributes_particles2.html.   -  person WestLangley    schedule 15.08.2013

Ответы (1)


arrow_upward
4
arrow_downward

По моему опыту, лучший способ сделать это — создать индивидуальный шейдерный материал; затем вы можете включить атрибуты, которые являются свойствами, которые варьируются от частицы к частице. Код вашего шейдера будет выглядеть примерно так:

Вершинный шейдер:

attribute vec3 customColor;
attribute float customSize;
varying vec3 vColor;
void main() 
{
    vColor = customColor; // set color associated to vertex; use later in fragment shader
    vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
    gl_PointSize = customSize * ( 300.0 / length( mvPosition.xyz ) );
    gl_Position = projectionMatrix * mvPosition;
}

Фрагментный шейдер:

uniform sampler2D texture;
varying vec3 vColor; // colors associated to vertices; assigned by vertex shader
void main() 
{
    // calculates a color for the particle
    gl_FragColor = vec4( vColor, 1.0 );
    // sets particle texture to desired color
    gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );
}

Для аналогичного живого примера, проверьте:

http://stemkoski.github.io/Three.js/ParticleSystem-Attributes.html

person Lee Stemkoski    schedule 17.08.2013
comment
также см. ShaderParticleEngine, основанный на работе @lee-stemkoski. - person dennis; 28.08.2013
comment
+1: ссылка в комментарии выше работает в 10 раз быстрее благодаря грамотному использованию графического процессора. - person Lee Stemkoski; 29.08.2013
comment
Между тем, threejs больше не поддерживает атрибуты материала, теперь они в геометрии, и, кроме того, Geometry.colors — это стандартный массив, который можно заполнить, в результате чего шейдеру передается атрибут color. - person N4ppeL; 21.01.2021