N00b questions about movement and animations

[kay]

I just started using Babylon.js for a proof of concept. So I'm a noob about everything 3D.

I tried the tutorials. Created a basic sceen. Loaded a texture and heightmap, created a ground with them and now I get position data over WebSockets.

Every 100ms I get all positions of all active objects. So sometimes I get positions that didn't change, sometimes objects are missing and sometimes new objects show up.

My update function looks something like this:

const spheres = {}

updates => {

  for (const sphereId in updates ) {

    const update = updates[sphereId]
    let sphere = spheres[sphereId]

    if(!sphere) {

      sphere = BABYLON.Mesh.CreateSphere("Sphere-" + sphereId, 5, 5, scene, true)
      sphere.material = new BABYLON.StandardMaterial("texture-" + sphereId, scene)
      sphere.material.diffuseColor = new BABYLON.Color3(
        Math.random(),
        Math.random(),
        Math.random()
      )

      spheres[sphereId] = sphere

    }

    const p = sphere.position

    if (p.x !== update.x) p.x = update.x 
    if (p.y !== update.z) p.y = update.z
    if (p.z !== update.y) p.z = update.y

  }

}

I think the better way to move them, so they don't jump is using an animation, but I haven't learned them yet.

Anyway, after I looked into the the timeline of Chrome dev-tools, I noticed bad frame-timings also bad garbage collection.

How do I do this right?

 

[kay]

My research has shown, that the GC isn't that of a problem. 

The canvas size is. If I go to 640x480 I get 59fps, but when I go higher the framerate starts to drop.

[GameMonetize]

Can you share an example on the playground?

[kay]

Okay, this is based on my latest iteration:

http://www.babylonjs-playground.com/#1RGOCQ#0

I think, I now understand how animations work and why they're designed that way. (starting based on frames and entity and not based on animations, etc.)

But I don't know if I still got everything right

Like, when I update the animation frames, I get the animation based on array index, which seems rather hacky.

[kay]

this is my new performance. getting better

[GameMonetize]

Looks good to me..

The GC may comes from the new Vector3 that you create every 100ms. (You also create a new array of keys)