Как использовать объекты буфера вершин в webgl для размещения частиц

Здравствуйте, я немного новичок в программировании на 3d. Я пытаюсь улучшить эффективность системы частиц, которую я имитирую с помощью жидкой забавы. В настоящее время я рисую систему частиц таким образом:Как использовать объекты буфера вершин в webgl для размещения частиц

for (var j = 0; j < maxParticleSystems; j++) { 
    var currentParticleSystem = world.particleSystems[j]; 

    var particles = currentParticleSystem.GetPositionBuffer(); 

    var maxParticles = particles.length; 

    for (var k = 0; k < maxParticles; k += 2) { 
     context.drawImage(particleImage, (particles[k] * mToPx) + offsetX, (particles[k + 1] * mToPx) + offsetY); 
     context.fill(); 
    } 
}

Это в основном черпает каждую частицу поштучно, которая очень медленно. Я читал о позициях Buffer в webGL. Как я могу использовать их?

источник

2016-01-26 xerotolerant

WebGL это совершенно отдельный контекст от 2d контекста холста, и они не могут работать вместе. (вы используете 2d canvas из context.drawImage). Если вы абсолютно ничего не знаете о webgl, то трудно предложить что-либо, кроме взгляда на учебные пособия по webgl, или найти библиотеку webgl, которая сделает все, что вам нужно. Может быть, pixi.js? –

Возможно, дубликат http://stackoverflow.com/questions/15215968/efficient-particle-system-in-javascript-webgl – gman

@WaclawJasper Эй, я смотрел учебники по webgl. Я видел, как они делают то, что рекомендует gman ниже. Кажется, что все они демонстрируют позиционирование вычисляющих частиц, основанное только на времени в шейдере или что-то в этом роде. Другие, похоже, позиционируют частицы последовательно, что не то, что я читал, было бы идеальным. Я читал, что «примитивы не следует создавать последовательно, а все сразу использовать объекты буфера позиции». Я пытаюсь понять, как это сделать. – xerotolerant

Это, возможно, слишком широкий вопрос для переполнения стека. WebGL is just a rasterization API, что означает, что существует бесконечное количество способов визуализации и/или вычисления частиц с ним.

Некоторые распространенные способы

позиции частиц Compute в JavaScript, Рендер с POINTS в WebGL
позиции частиц Compute в JavaScript, Рендер с каре в WebGL (рендеринг каре позволяет ориентировать частицы)
Вычислять позиции частиц, основанные только на времени в шейдере, визуализировать POINTS.
позиции частиц Compute на основе только раз в шейдер, render quads
позиции частиц Compute в шейдеров с состоянием на чтение и запись состояния в текстуру через фреймбуфером

И сотни другие варианты.

Particle system using webgl

Efficient particle system in javascript? (WebGL)

источник

2016-01-27 05:38:42 gman