javascript - JavaScript 中的高效粒子系统？ (WebGL)

Question

我正在尝试编写一个程序，对粒子进行一些基本的重力物理模拟。我最初使用标准 Javascript 图形(具有 2d 上下文)编写程序，并且我可以通过这种方式获得大约 25 fps w/10000 粒子。我在 WebGL 中重写了该工具，因为我假设我可以通过这种方式获得更好的结果。我还使用 glMatrix 库进行矢量数学运算。但是，通过此实现，我只能获得 10000 个粒子的大约 15fps。

我目前是 EECS 本科生，我有相当多的编程经验，但从未接触过图形，而且我对如何优化 Javascript 代码一无所知。 关于 WebGL 和 Javascript 的工作原理，我有很多不明白的地方。使用这些技术时哪些关键组件会影响性能？是否有更有效的数据结构可用于管理我的粒子(我只是使用一个简单的数组)？使用 WebGL 的性能下降有什么解释？也许是 GPU 和 Javascript 之间的延迟？

如有任何建议、解释或帮助，我们将不胜感激。

我会尽量只包含代码的关键区域以供引用。

这是我的设置代码:

gl = null;
try {
    // Try to grab the standard context. If it fails, fallback to experimental.
    gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
    gl.viewportWidth = canvas.width;
    gl.viewportHeight = canvas.height;
}
catch(e) {}

if(gl){
        gl.clearColor(0.0,0.0,0.0,1.0);
        gl.clearDepth(1.0);                 // Clear everything
        gl.enable(gl.DEPTH_TEST);           // Enable depth testing
        gl.depthFunc(gl.LEQUAL);            // Near things obscure far things

        // Initialize the shaders; this is where all the lighting for the
        // vertices and so forth is established.

        initShaders();

        // Here's where we call the routine that builds all the objects
        // we'll be drawing.

        initBuffers();
    }else{
        alert("WebGL unable to initialize");
    }

    /* Initialize actors */
    for(var i=0;i<NUM_SQS;i++){
        sqs.push(new Square(canvas.width*Math.random(),canvas.height*Math.random(),1,1));            
    }

    /* Begin animation loop by referencing the drawFrame() method */
    gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
    gl.vertexAttribPointer(vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
    requestAnimationFrame(drawFrame,canvas);

绘制循环:

function drawFrame(){
    // Clear the canvas before we start drawing on it.
    gl.clear(gl.COLOR_BUFFER_BIT);

    //mvTranslate([-0.0,0.0,-6.0]);
    for(var i=0;i<NUM_SQS;i++){
        sqs[i].accelerate();
        /* Translate current buffer (?) */
        gl.uniform2fv(translationLocation,sqs[i].posVec);
        /* Draw current buffer (?) */;
        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    }
    window.requestAnimationFrame(drawFrame, canvas);
}

这是 Square 继承自的类:

function PhysicsObject(startX,startY,size,mass){
    /* Class instances */
    this.posVec = vec2.fromValues(startX,startY);
    this.velVec = vec2.fromValues(0.0,0.0);
    this.accelVec = vec2.fromValues(0.0,0.0);
    this.mass = mass;
    this.size = size;

    this.accelerate = function(){
            var r2 = vec2.sqrDist(GRAV_VEC,this.posVec)+EARTH_RADIUS;
            var dirVec = vec2.create();
            vec2.set(this.accelVec,
                G_CONST_X/r2,
                G_CONST_Y/r2
            );

        /* Make dirVec unit vector in direction of gravitational acceleration */
        vec2.sub(dirVec,GRAV_VEC,this.posVec)
        vec2.normalize(dirVec,dirVec)
        /* Point acceleration vector in direction of dirVec */
        vec2.multiply(this.accelVec,this.accelVec,dirVec);//vec2.fromValues(canvas.width*.5-this.posVec[0],canvas.height *.5-this.posVec[1])));

        vec2.add(this.velVec,this.velVec,this.accelVec);
        vec2.add(this.posVec,this.posVec,this.velVec);
    };
}

这些是我正在使用的着色器:

 <script id="shader-fs" type="x-shader/x-fragment">
        void main(void) {
        gl_FragColor = vec4(0.7, 0.8, 1.0, 1.0);
        }
    </script>

    <!-- Vertex shader program -->

    <script id="shader-vs" type="x-shader/x-vertex">
        attribute vec2 a_position;

        uniform vec2 u_resolution;

        uniform vec2 u_translation;

        void main() {
        // Add in the translation.
        vec2 position = a_position + u_translation;
        // convert the rectangle from pixels to 0.0 to 1.0
        vec2 zeroToOne = position / u_resolution;

        // convert from 0->1 to 0->2
        vec2 zeroToTwo = zeroToOne * 2.0;

        // convert from 0->2 to -1->+1 (clipspace)
        vec2 clipSpace = zeroToTwo - 1.0;

        gl_Position = vec4(clipSpace*vec2(1,-1), 0, 1);
        }
    </script>

我为这冗长而抱歉。同样，在正确方向上的任何建议或插入都将是巨大的。

Answer 1

你永远不应该单独绘制图元。尽可能一次性全部画出来。创建一个包含所有粒子的位置和其他必要属性的 ArrayBuffer，然后通过调用 gl.drawArrays 绘制整个缓冲区。 我无法给出确切的说明，因为我在移动设备上，但在 opengl 中搜索 vbo、交错数组和粒子肯定会帮助您找到示例和其他有用的资源。

我正在以 10fps 的速度渲染 500 万个静态点。动态点会比较慢，因为您必须不断向显卡发送更新的数据，但对于 10000 点，它会比 15fps 快得多。

编辑:

您可能想使用 gl.POINT 而不是 TRIANGLE_STRIP。这样，您只需为每个正方形指定位置和 gl_PointSize(在顶点着色器中)。 gl.POINT 被渲染为正方形!

可以看看这两个点云渲染器的源码:

https://github.com/asalga/XB-PointStream

http://potree.org/wp/download/ (由我提供，以下文件可能对您有所帮助:WeightedPointSizeMaterial.js、pointSize.vs、colouredPoint.fs)