Question

我正在尝试优化我编写的一个微小的WebGL项目，（显然）缺乏对优化Javascript或WebGL的具体了解。

我创建了一个规模最小的项目，希望我能在我的代码中找到导致很多性能问题的问题。

我以https://www.goodboydigital.com/pixijs/bunnymark/为例，说明正确编写WebGL应该如何使用/执行。我不太了解渲染是如何完成的，我认为这是我库中的问题。

这可能是突出问题的最相关的代码，这是我不知道如何更有效地使用WebGL时遇到的性能问题。

Square.prototype.run = function ()
{
    this.rot+=this.spin*_tscale;
    this.buffer();
};

Square.prototype.draw = function ()
{
    let gl = Gra.gl;

    // attributes
    gl.bindBuffer( gl.ARRAY_BUFFER, this.gBff );
    gl.vertexAttribPointer( Gra.a_pos, 2, gl.FLOAT, 0, 0, 0 );

    gl.bindBuffer( gl.ARRAY_BUFFER, SprSquare.TCB );
    gl.vertexAttribPointer( Gra.a_tex, 2, gl.FLOAT, 0, 0, 32*this.sub );

    // texture
    gl.bindTexture( gl.TEXTURE_2D, SprSquare.gTex );

    let c = this.col;
    gl.uniform4f( Gra.u_color, c[0], c[1], c[2], 1.0 );
    gl.uniform1f( Gra.u_alpha, 0.15 );

    gl.drawArrays( gl.TRIANGLE_STRIP, 0, 4 );
};

Square.prototype.buffer = function ()
{
    // get rotation information
    let   x = this.x;
    let   y = this.y;
    let  wd = this.wd;
    let  ht = this.ht;
    let han = 0.5; // anchor
    let van = 0.5;
    let rot = this.rot;

    // calculate coordinates
    let hvx = Math.cos( rot );
    let hvy = Math.sin( rot );
    let vvx = Math.cos( Math.PI*0.5 + rot );
    let vvy = Math.sin( Math.PI*0.5 + rot );

    let c1x = x + hvx*-(wd*han) + vvx*-(ht*van);
    let c1y = y + hvy*-(wd*han) + vvy*-(ht*van);

    let c2x = c1x + hvx*wd;
    let c2y = c1y + hvy*wd;

    let c3x = c1x + vvx*ht;
    let c3y = c1y + vvy*ht;

    let c4x = c2x + vvx*ht;
    let c4y = c2y + vvy*ht;

    // buffer
    let fl32 = Gra.fl32;

    fl32[0] = c1x;
    fl32[1] = c1y;
    fl32[2] = c2x;
    fl32[3] = c2y;
    fl32[4] = c3x;
    fl32[5] = c3y;
    fl32[6] = c4x;
    fl32[7] = c4y;

    let gl = Gra.gl;
    gl.bindBuffer( gl.ARRAY_BUFFER, this.gBff );
    gl.bufferData( gl.ARRAY_BUFFER, fl32, gl.DYNAMIC_DRAW );


    return this;
};

这些是我的着色器：顶点：

attribute vec2 a_tex;

uniform vec2 u_offset;
uniform vec2 u_scale;

varying vec2 v_tex;

void main (void)
{
    gl_Position = vec4( (a_pos.x + u_offset.x) * u_scale.x, (a_pos.y + u_offset.y) * u_scale.y, 1.0, 1.0 );
    v_tex = a_tex;
}

片段：

precision mediump float;

uniform sampler2D u_smp;

uniform  vec4 u_color;
uniform float u_alpha;

varying vec2 v_tex;

void main (void)
{
    gl_FragColor = texture2D( u_smp, v_tex ) * u_color * u_alpha;
}

这是我写的一个小例子的实时例子（单击画布以生成正方形）：http://ssjstash.net/squares

这是zip文件中的项目：http://ssjstash.net/squares.zip

因此，在大约15,000平方英寸处，帧速率大幅下降，使用性能工具显示脚本确实使页面超载，而https://www.goodboydigital.com/pixijs/bunnymark/可以毫无问题地处理15,000，而且更轻巧。

谢谢。

优化Tiny WebGL示例

0 个答案: