Moving from THREEjs to BABYLONjs

Demos and projects
21

Hi.
I’m trying to use shader code to animate the shape of a box (using sin and cos)
I can’t get the time uniform to work properly.

I’ve been reading and wondering if the time should be started in javascript inside the “engine.runRenderLoop” function?

Could you please point me in the right direction?

Simple vertex shader | Babylon.js Playground (babylonjs.com)

22

You called your uniform uTime but used time and you are trying to sum a date with numbers :slight_smile:

This should get you unblocked: https://playground.babylonjs.com/#1OH09K#1407

2 Likes
23

New demo: I created trippy flowers ( using the shader code from the previous example )

5 Likes
24

New demo: Game of Life
Fully working. Grabbed the algorithm from Dan Shiffman’s The Nature of Code book.
I may update the look and feel… add some shader spice :smiley:

2 Likes
25
26

Hey Jade! nice to see you back!
You may have shared the wrong link though

27

Hi @Deltakosh, it’s a WIP.
I’ll add an explanation when it’s ready, but didn’t want to miss the playground URL.

Cheers!

1 Like
28

Hi.

I’m trying to use the intersectMesh on a TransformNode to detect collisions on two elements, but it doesn’t seem to work. Are there other alternatives to collision detection?

Please check line 165 on this PG if (element.intersectsMesh(pacMan, false)) {

Thans a lot

29

That’s because createBone returns a TransformNode not a Mesh so you are pushing TransformNodes to the fallingElements array:

image
image1614×490 99.8 KB

Here you are trying to call intersectsMesh on a TransformNode. This call obviously fails.

image
image1158×310 62.9 KB

I recommend you to use Typescript for type safety if you want to prevent this kind of errors in the future. TS will warn you that there is something wrong. :wink:

GO GO PACMAN!

1 Like
30

Here is a fixed version of your PG.

  • Resources (TransformNodes, meshes, materials) are properly disposed.
  • An onAnimationEnd callback was added to dispose of the bone.
  • Variables were renamed to make the code clearer.
  • Bone parts were merged into a single mesh.
  • Possibly some other tweaks I’ve already forgotten :grinning_face_with_smiling_eyes:

Changes marked with // CHANGE!

There’s still room for improvement, but this should be a solid step forward.

1 Like
31

Hey @roland thanks for your quick response.
I carefully read all your changes and it really improved my code to achieved what I was aiming for regarding mesh collision detection.

On the createBone function, the return you added, was amazing. It really opened my mind with this

    return {
        transformNode: bone,
        mesh: finalMesh,
        material: finalMesh.material
    };

I see now why merged the meshes and returned 3 separated elements.

Thanks a lot for your help.

1 Like
32

You are welcome! Dont hesitate to ask if you get stuck again!