Low fps even with very simple scene

[Tomm Huth]

Hi,

I'm a total noob at Babylonjs, but I'm playing around with remaking a previous raw Threejs project in Babylonjs. It's a physics based stacking game, and is really very simple (nothing but boxes), but I still seem to get really bad framerates. The thing is, when I made this in Threejs I had no such problems.

I’m using 3.1.0-beta3 (which seems to be the default through NPM). I’ve tried switching to the previous release but that gives me the error TypeError: Cannot assign to read only property 'RGBA16F' of object '#<WebGL2RenderingContext>'. I’ve also played around with anti-aliasing and adaptToDeviceRatio on/off but that seems to make little difference. Also SceneOptimizerOptions causes a bug in CSG for me, where it errors out on finding position of null of my mesh.

My project consists of 2 files, scene.js and app.js

(sorry about the formatting, why isn't here a code tag)

// app.js

import { Vector3, Animation, MeshBuilder, CSG, PhysicsImpostor, StandardMaterial, Color3 } from "babylonjs"
import { scene } from "./scene"

const stack = []

function makeGround() {
    var ground = MeshBuilder.CreateBox('ground1', { height: 40, depth: 35, width: 35, subdivisions: 1 }, scene)

    ground.position.y = -22.5
    ground.physicsImpostor = new PhysicsImpostor(ground, PhysicsImpostor.BoxImpostor, { mass: 0 })

    stack.push(ground)
}

function makeBox() {
    let top = stack[stack.length - 1]
    var boundingBx = top.getBoundingInfo() 
  
    let boundingBox = boundingBx.boundingBox
    var box = MeshBuilder.CreateBox('box1', { height: 5, depth: boundingBox.extendSize.z * 2, width: boundingBox.extendSize.x * 2, subdivisions: 1 }, scene)

    box.position =  boundingBx.boundingBox.centerWorld.clone()
    box.position.y = (stack.length - 1) * 5

    box.material = new StandardMaterial("xx", scene)
    box.material.diffuseColor = new Color3(Math.random(), Math.random(), Math.random())
    box.physicsImpostor = new PhysicsImpostor(box, PhysicsImpostor.BoxImpostor, { mass: 0 })

    stack.push(box)

    animateBox(box)
}

function makeFirstBox() {
    var box = MeshBuilder.CreateBox('box1', { height: 5, depth: 35, width: 35, subdivisions: 1 }, scene)

    box.position.y = 0
    box.physicsImpostor = new PhysicsImpostor(box, PhysicsImpostor.BoxImpostor, { mass: 0 })

    stack.push(box)

    animateBox(box)
}

function animateBox(box) {
    let lefty = (stack.length - 1) % 2 == 0
    let prop = lefty ? "x" : "z"
    var animation = new Animation("anm", "position." + prop, 60, Animation.ANIMATIONTYPE_FLOAT, Animation.ANIMATIONLOOPMODE_CYCLE)

    var keys = [
        {
            frame: 0,
            value: 60  
        },
        {
            frame: 200,
            value: -60  
        },
        {
            frame: 400,
            value: 60  
        }
    ]

    animation.setKeys(keys)

    box.animations = [animation]
    box.animation = scene.beginAnimation(box, 0, 400, true)
}

function match() {
    let top = stack[stack.length - 1]

    top.animation.stop()
    top.position.y -= 5

    let a = CSG.FromMesh(top)
    let b = CSG.FromMesh(stack[stack.length - 2])
    let intersection = a.intersect(b)
    let subtraction = a.subtract(b)
 
    if (!intersection.polygons.length) {
        top.physicsImpostor.setMass(5)
        top.position.y += 5

        console.log("Missed - game over!")
    } else {
        let box = intersection.toMesh("s", top.material, scene, false)
        let leftover = subtraction.toMesh("ss", top.material, scene, false)

        box.position.y += 5
        box.physicsImpostor = new PhysicsImpostor(box, PhysicsImpostor.BoxImpostor, { mass: 0 })

        leftover.position.y += 5
        leftover.physicsImpostor = new PhysicsImpostor(leftover, PhysicsImpostor.BoxImpostor, { mass: 5 })
 
        stack.splice(stack.length - 1, 1) 
        
        stack.push(box)
        top.dispose()

        makeBox()
    }
}

document.addEventListener("click", () => {
    match()
})

makeGround()
makeFirstBox()

 

// scene.js

import { Engine, FreeCamera, Scene, CannonJSPlugin, HemisphericLight, Vector3, Camera, Color3, PointLight } from "babylonjs"

const frustumSize = 100
const aspect = window.innerWidth / window.innerHeight

const canvas = document.getElementById("app")
const engine = new Engine(canvas, false, { deterministicLockstep: true, lockstepMaxSteps: 4 }, false)
const scene = new Scene(engine)
const camera = new FreeCamera("camera", new Vector3(-45, 45, -45), scene)
const light = new HemisphericLight('light1', new Vector3(0, -1, 0), scene)  
const physEngine = new CannonJSPlugin(false)

physEngine.setTimeStep(1/60)

scene.enablePhysics(new Vector3(0, -9.81, 0), physEngine)
scene.gravity = new Vector3(0, -9.81, 0)

camera.mode = Camera.ORTHOGRAPHIC_CAMERA
camera.orthoTop =  frustumSize / 2
camera.orthoBottom = frustumSize / - 2
camera.orthoLeft = frustumSize * aspect / - 2
camera.orthoRight = frustumSize * aspect / 2
camera.setTarget(Vector3.Zero()) 

light.groundColor = new Color3(0, .5, 0)
light.diffuse = Color3.White()
light.intensity = .4;
 
engine.runRenderLoop(() => scene.render()) 

window.addEventListener('resize', () => {
    const aspect = window.innerWidth / window.innerHeight

    camera.orthoTop =  frustumSize / 2
    camera.orthoBottom = frustumSize / - 2
    camera.orthoLeft = frustumSize * aspect / - 2
    camera.orthoRight = frustumSize * aspect / 2
    engine.resize()
})

export { scene, camera }

[Pryme8]

remake this on:
https://www.babylonjs-playground.com/

and people will help, not many are guru enough to just read through script and know whats happening.

[Tomm Huth]

I'll see if I can duplicate it on the playground within the day. 

[max123]

 

14 hours ago, Tomm Huth said:

(sorry about the formatting, why isn't here a code tag)

[Tomm Huth]

seems like this might have been a passing thing, everyhthing runs nicely now. 

@max123  aha! thanks