如何在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(); 
    } 
}

這基本上在同一時間，這是非常緩慢的繪製每個粒子之一。我一直在做一些閱讀，並且在webGL中閱讀了有關位置緩衝區對象的內容。我將如何使用它來繪製這些？

來源

2016-01-26 xerotolerant

WEBGL是從2D畫布上下文一個完全獨立的上下文和它們不能一起工作。（您正在使用context.drawImage中的2d畫布）。如果你對webgl完全一無所知，那麼除了看看webgl教程或找到一個能滿足你需要的webgl庫之外，很難再提出任何建議。也許pixi.js？ –

可能是http://stackoverflow.com/questions/15215968/efficient-particle-system-in-javascript-webgl – gman

@WaclawJasper嘿我一直在看webgl教程。我已經看到他們做的事情就像下面推薦的那樣。他們似乎都在基於單獨的着色器或類似的東西來演示計算粒子位置。其他人似乎是按順序定位粒子，這不是我所理解的那樣。我讀到：「原語不應該按順序創建，而應該全部使用位置緩衝區對象。」我試圖找出如何做到這一點。 – xerotolerant

對於堆棧溢出，這可以說是太寬泛了。這意味着有無數的方法來渲染和/或計算粒子。

一些常見的方式

在JavaScript中計算粒子位置，在WebGL的渲染與POINTS
在JavaScript
計算顆粒歸倉，在WebGL的四邊形渲染（渲染四邊形，您可以定向顆粒）
在着色器中基於時間計算粒子位置，渲染POINTS。
基於在着色器獨處的時間計算顆粒歸倉，render quads
符合國家着色器
計算粒子位置通過讀取並通過幀緩衝寫入狀態紋理

和數百個其他變化。

Particle system using webgl

Efficient particle system in javascript? (WebGL)

來源

2016-01-27 05:38:42 gman

如何在webgl中使用頂點緩衝對象來定位粒子

回答

相關問題