Animate / apply physics to HTML CSS DOM?

Questions
1

Hi,

I’m investigating using physics with normal HTML CSS DOM page elements for an interactive DJ tool that simulates physics of spinning vinyl. I’ve been trying to get away from the canvas/iframe/embed mentality. I already discovered CSS transformations ( here https://michaelzfreeman.org/ ) and really like the way you can have normal links on the 3D elements, select them, normal right click image save, etc, etc.

But CSS transformaions don’t have physics ! There is Matter.js - a 2D rigid body JavaScript physics engine · code by @liabru but that does not seem to be able to affect normal page DOM elements.

I also found Three.js CSS3dRenderer but, curiously it seems to strip out page interactvity …

1182OS_01_03
1182OS_01_03952×581 61.9 KB

You can’t select that text.

So can Babylon.js animate / apply physics to DOM elements ?

Cheers.

2

I imagine you could use the physics engine you linked by creating a physics object for each element of the html dom that you’ve also created and then updating the transform of the dom elements yourself in a tick handler - probably in requestAnimationFrame - if you only modify only the transform property the browser doesn’t have to recompute layout

You’re basically going to be recreating the core loops of a game engine if you want more stuff like not tying the physics to the frame rate though, I’d be surprised if there isn’t some obscure library that will do what you want

2 Likes
3

Have a look here for a demo:
https://brianzinn.github.io/react-babylonjs/?path=/story/gui--html-text

The code to do that is here:

Having said that if you don’t want a canvas then I don’t see the gain of running a real time 3d Engine like Babylon.js. What are you unable to accomplish with matter.js exactly? Have a look at this SO post:

That’s similar to how physics engines are integrated to 3D platforms.

2 Likes
4

Scrubbed.

5

OK, thanks everyone. Finally decided that its better to use Babylon.js. I got an initial Playground example going - https://playground.babylonjs.com/#JPM8PP#2 - But I need to rotate it properly as the code I’m using for that seems very expensive for something so simple (I get very high CPU usage). Probably needs - Mesh Rotation | Babylon.js Documentation

So this is the beginning of transferring what was originally a Blender Game Engine project to Babylon.js. After Blender lost official support for the game engine I continued developing in UPBGE …

The model is nice but performance is so critical with real time audio applications. The Virtual DVS is intended to use audio from an official timecode CD and send it direct to whatever DVS application. However UPBGE has restricted OS targets. No Android. Of course Babylon is a browser app so it pretty much can go anywhere :smiley: … Android and iPhone apps will be produced later as a paid option.

2 Likes