Gltf and Sprite use FPS very low, he will continue to drop frames

Questions
1

When I only load gltf, my FPS can reach 60, and it is stable, but as long as I add any sphere or sprite, my FPS will slowly drop down, and finally only about 1.5, can someone help me to solve it
image

I don’t know what is looping all the time. If only gltf or sprites are loaded, there is no such loop

image
image833×485 42.8 KB

2

Hey can you share a repro in the PG? (I think there is a leak, like you are recreating the sprites per frame or something along those lines)

3

I also want to share, but I don’t know where to share my demo

I use Vue. Here is my initialization method to load gltf and sprite

inittest () {

let canvas = document.getElementById('renderCanvas')

let engine = new BABYLON.Engine(canvas, true, {

  preserveDrawingBuffer: true,

  stencil: true,

  disableWebGL2Support: false

})

let target = new BABYLON.Vector3.Zero()

let position = new BABYLON.Vector3(0, 260, 300)

let scene1 = new BABYLON.Scene(engine)

scene1.useRightHandedSystem = true

// This creates and positions a free camera1 (non-mesh)

let arcCamera1 = new BABYLON.ArcRotateCamera('arcCamera1', 0, Math.PI / 2, 10, target, scene1)

// This positions the camera1

arcCamera1.setPosition(position)

// This targets the camera1 to scene1 origin

// arcCamera1.setTarget(BABYLON.Vector3.Zero());

// This attaches the camera1 to the canvas

arcCamera1.attachControl(canvas, true)

arcCamera1.allowUpsideDown = false

// arcCamera1.upperRadiusLimit = 400

// arcCamera1.lowerRadiusLimit = 5

// arcCamera1.maxCameraSpeed = 10

arcCamera1.panningSensibility = 50 

arcCamera1.panningInertia = 0 

// This creates a light, aiming 0,1,0 - to the sky (non-mesh)

let light1 = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0, 1, 0), scene1)

// let light2 = new BABYLON.HemisphericLight('hemi', new BABYLON.Vector3(0, 1, 0), _that.scene2);

// Default intensity is 1. Let's dim the light a small amount

// light1.intensity = 0.7;

let importMeshs = []

let gltfArr = [

  'static/gltf/testGltf/scene.gltf'

]

// _that.createCameraSprite()

gltfArr.forEach(item => {

  importMeshs.push(

    BABYLON.SceneLoader.ImportMeshAsync(null, item, '', scene1).then(res => {

      res.meshes.forEach(item => {

        item.freezeWorldMatrix()

      })

    }))

})

Promise.all(importMeshs).then(res => {

  scene1.freezeActiveMeshes()

})

scene1.debugLayer.show({

  embedMode: true

})

const spriteManagerTrees = new BABYLON.SpriteManager('camerasManager', '/static/gltf/image/camera.png', 100, {

  width: 1024,

  height: 1024

}, scene1)

spriteManagerTrees.isPickable = true

for (let i = 0; i < 20; i++) {

  // Mutliple trees

  const myCamera = new BABYLON.Sprite('cameras', spriteManagerTrees)

  // myCamera.width = 2

  // myCamera.height = 4

  myCamera.isPickable = true

  myCamera.useAlphaForPicking = true

  myCamera.position.x = i

  myCamera.position.y = 0

  myCamera.position.z = i

  myCamera.actionManager = new BABYLON.ActionManager(scene1)

}

engine.runRenderLoop(function (res) {

    scene1.render()

})

}

4

If you use Vue this thread may help - Very low FPS with Vue

1 Like
5

Ok guys, so for anyone interested in this thread: we’ve solved in with @babylonjs197, his model performed very poorly in BJS but a simple join all meshes in Blender solved the situation. It’s quite a good practice to join the meshes which doesn’t need to be operated separatelly (moving them, picking them, etc…) for performance reasons.

4 Likes
6

@roland king of the forum :slight_smile:

2 Likes