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

Posted 2023-04-14

【中文标题】javascript中的高效粒子系统？ (WebGL)

【英文标题】：Efficient particle system in javascript? (WebGL)

【发布时间】：2013-02-19 09:24:05

【问题描述】：

我正在尝试编写一个程序，对粒子进行一些基本的重力物理模拟。我最初使用标准 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>

我为这冗长而道歉。同样，任何朝着正确方向提出的建议或推动都将是巨大的。

【参考方案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、coloredPoint.fs）

【讨论】：

非常感谢你们两位的回答。我现在已经成功地重写了我的代码，所以我只将一个包含每个点粒子初始位置的长向量传递到顶点着色器中。然后我重写了顶点着色器，以便它将粒子的位置计算为时间的函数。我唯一的问题是我的加速度是距离的函数。有什么方法可以访问顶点着色器中顶点的最后写入位置？过去几个小时我一直在绞尽脑汁想弄清楚这一点。

你可以尝试2遍。在第一遍中，您更改着色器“positions.vs”内的顶点位置，然后使用“positions.fs”将它们保存到纹理“fboPositions1”中。要渲染到纹理中，您必须使用 FBO（帧缓冲区对象）。在第二遍中，您使用“particles.vs”从纹理“fboPositions1”中读取位置，并使用“particles.fs”将它们渲染到显示帧缓冲区。

然后，在下一帧中，使用 fboPositions1 作为输入，使用 fboPositions2 作为第一遍的输出。您必须切换 fboPositions1 和 fboPositions2 作为输入或输出每个连续的帧，因为您不能同时读取和写入纹理。

你能指出我描述这种技术的任何资源吗？似乎我能找到的只是详细说明如何纹理对象的资源。我对片段着色器和纹理着色器之间的联系以及着色器的输入和输出有点模糊。再次感谢您的时间和帮助。

【参考方案2】：

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

如果是后者，那么您可以在着色器中进行所有数学运算。例子在这里

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

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

local_position（用于单位四边形） 纹理坐标 终生 起始位置 开始时间 速度 加速 start_size end_size 方向（四元数） 颜色倍增器

给定时间，您可以计算粒子的本地时间（自启动以来的时间）

 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 几乎什么都不做。