Questions about using Sprite with SnapshotRendering

[ljzc002]

Hello all,

I want to draw a map like Stellaris with the WebGPU fast SnapshotRendering mode.The demo can be visit on the map.

To get faster,I use thinInstance to create the stars and sprite to display the name of the stars.Then I found some questions.

The first,after the window open the fps will continual decline until I manually resize the window with the mouse.After the resize processing the render become normality.The following are records in the Performance tool:

Before resizeWindow the cost of renderSprites will increase to 280ms,after resize the cost reduce to 0.79ms.I don’t know why it happen.

Second question is:if the SpriteManager‘s renderingGroupId is not equal to the thinInstance‘s renderingGroupId,one of them will disappear in the scene,after manually resize the window they appear agine.

It’s the record from the Performance tool:

I found a GC before the disappear,is this phenomenon related to it?

[ljzc002]

Although I don’t know why,after add another enableSnapshotRendering() before the first render call solved the two problems.

Now the code before render looks like this:

function MyBeforeRender()
{
    sr_global= new BABYLON.SnapshotRenderingHelper(scene);

    console.log("MyBeforeRender");
    
    engine.hideLoadingUI();
    sr_global.enableSnapshotRendering();

    requestAnimationFrame(function(){
       
        sr_global.enableSnapshotRendering();

    })

It seems like both of the two enableSnapshotRendering() are necessary!

[sebavan]

cc @Evgeni_Popov to have a look. He ll be fully back Monday

[Evgeni_Popov]

The link doesn’t work, it’s a local link (if you are able to setup a repro in the Playground it will be easier for us to help).

@ljzc002

Second question is:if the SpriteManager‘s renderingGroupId is not equal to the thinInstance‘s renderingGroupId,one of them will disappear in the scene

I tried to reproduce the problem in the Playground, but it works:

Babylon.js Playground

[ljzc002]

Thank you for your reply.I changed it to the right link:

https://fluffy-crostata-18da4f.netlify.app/qunxing2

I tried the Playground,when objects come to more things become difference:

Babylon.js Playground

The fps reduce to single digits,and the thinInstance boxs are not rendered.
This’s the code I tried on the Playground:

var createScene = function () {
    var scene = new BABYLON.Scene(engine);

    var light = new BABYLON.HemisphericLight("hemiLight", new BABYLON.Vector3(0, 1, 0), scene);

    // Create camera and light
    new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 8, new BABYLON.Vector3(0, 0, 0), scene);

    var spriteManagerPlayer = new BABYLON.SpriteManager("playerManager", "textures/player.png", 50000, 64, scene);
    

    spriteManagerPlayer.renderingGroupId = 1;

    var box = BABYLON.MeshBuilder.CreateBox("box", {size: 1}, scene);
    box.position.y = 1;

    //box.thinInstanceAddSelf();
    //box.thinInstanceAdd(BABYLON.Matrix.Compose(new BABYLON.Vector3(1, 1, 1), new BABYLON.Quaternion(), new BABYLON.Vector3(-2, 0, 0)));
    node_temp=new BABYLON.TransformNode("node_temp");
    var arr_box=[];
    for(var i=0;i<1600;i++)
    {
        var pos=new BABYLON.Vector3(Math.floor(i/40),0,i%40);
        var player = new BABYLON.Sprite("player_"+i, spriteManagerPlayer);
        player.size = 2;
        player.cellIndex = 15;
        player.position = pos;
        node_temp.position=pos;
        var matrix=node_temp.getWorldMatrix();
        arr_box.push(matrix.clone());
    }
    var len_box=arr_box.length;
    var matricesData = new Float32Array(16 * len_box);
    for(var i=0;i<len_box;i++){
        var m=arr_box[i]
        m.copyToArray(matricesData, i * 16);
    }
    box.thinInstanceSetBuffer("matrix", matricesData, 16);

    const sr = new BABYLON.SnapshotRenderingHelper(scene);

    sr.enableSnapshotRendering();

    return scene;
}

[Evgeni_Popov]

In fact, sprite rendering wasn’t supported in fast snapshot mode. This PR will add support:

WebGPU: Adds support for sprite rendering in fast snapshot rendering mode

Also, you see a single thin instance because there’s a bug in your code. Here’s the fixed PG:

Babylon.js Playground