Jump to content

Low fps even with very simple scene


Tomm Huth
 Share

Recommended Posts

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 }

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...