Question

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

我目前是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渲染5m静态点。动态点将会变慢，因为您必须不断向显卡发送更新的数据，但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）

Answer 2

这取决于你想要做什么。当你说“重力”是指某种带碰撞的物理模拟，或者你只是指velocity += acceleration; position += velocity？

如果是后者那么你可以在着色器中完成所有数学运算。示例在这里

https://www.khronos.org/registry/webgl/sdk/demos/google/particles/index.html

这些粒子完全在着色器中完成。设置后唯一的输入是time。每个“粒子”由4个顶点组成。每个顶点包含

local_position（对于单位四元组）
texture_coord
寿命
starting_position
STARTING_TIME
速度
加速度
start_size
end_size
方向（quaterion）
色彩倍增器

给定时间你可以计算粒子的当地时间（自开始以来的时间）

 local_time = time - starting_time;

然后你可以用

计算一个位置

 base_position = start_position + 
                 velocity * local_time + 
                 acceleration * local_time * local_time;

那是加速*时间^ 2。然后将local_position添加到该base_position以获取渲染四边形所需的位置。

您还可以在粒子的生命周期内计算0到1的lerp

 lerp = local_time / lifetime;

这为您提供了一个可用于提取所有其他值的值

 size = mix(start_size, end_size, lerp);

如果粒子大小为0，如果它超出了它的生命周期

 if (lerp < 0.0 || lerp > 1.0) {
   size = 0.0;
 }

这将使GPU无法绘制任何内容。

使用渐变纹理（1xN像素纹理），您可以轻松地随时间改变粒子颜色。

 color = texture2D(rampTexture, vec4(lerp, 0.5));

等...

如果你follow through the shaders，你会看到其他同样处理过的事情，包括旋转粒子（点精灵会更难），在帧的纹理上制作动画，同时进行2D和3D定向粒子。 2D颗粒适用于烟雾，废气，火灾，爆炸。 3D粒子适用于涟漪，可能是轮胎痕迹，并且可以与2D粒子组合用于地面抽吸，以隐藏仅2D粒子的一些z问题。等。

还有一次射击（爆炸，喷射）以及小径的例子。按'P'进行抽吸。抓住'T'看一条小道。

AFAIK这些是相当高效的粒子，因为JavaScript几乎什么也没做。

javascript中的高效粒子系统？（WebGL的）

2 个答案:

javascript中的高效粒子系统？ （WebGL的）

2 个答案:

javascript中的高效粒子系统？（WebGL的）