Two months ago I was experimenting with light sources in SVG drawings. Although SVG is "very" useful for a lot of use cases, it immediately became clear to me that 2D drawings are just too limited for this kind of functionality.
Moreover our friend @dceejay had already passed me an article some time ago "the smart home gains another dimension". And indeed how cool would it be to turn on a light in your home, while the same light turns on in your 3D home on your Node-RED dashboard. So it was time that Node-RED goes 3D with node-red-contrib-ui-babylonjs-3d
May sound a bit fancy but I think there might a lot of use cases: suppose @scargill (sorry for mentioning, but couldn't resist ) is on his yacht in the middle of the sea, and for some reason the damn boat won't start anymore. Would be interesting to get a 3D wireframe view of the boat, where the sensors highlight in red where a malfunctioning has been detected. Because then the problem can be located immediately, withouth having to analyze multiple floorplans ...
I have always been impressed by the fancy (unreal) surveillance software being used in Mission Impossible, and CSI Miami ... Toys for boys . So here it is in your Node-RED dashboard. A burglar has been detected in a room, and by putting the entire building in wireframe mode and the room in red, you can immediately see what is going on:
I will need a surgery next friday and I won't be able to develop for a few months . But I wanted to announce this beta, so the community can meanwhile discuss about this node, report bugs, propose new features, ... However keep in mind that this node is FAR from finished due to my time constraint. And that I won't be able to program, so NO support this time!!!!!!!!!!!!!!!!!!
As always, all "constructive" feedback is very much appreciated!
P.S. For those wondering why I used BabylonJs instead of threejs, since the latter one is also very cool. Reason is simple: the threejs team changes their API from time to time, and I don't have time to rewrite my node over and over again. So BabylonJs was the best fit for me.
P.S. This beta version is NOT on NPM: see installation command on my Github readme page.
Make sense to me I am working very slowly, in another node, based on babylonjs also and for more than 3 years i barely needed to change the API, but it is very different in its design approach and usability, may the intended use as well, I am targeting doing some sort of web-based low code visual editor
so we can even build a game with it
My only concern is about naming, is it okay to have names that close
Hey Ahmed,
Node-RED as a 3D game engine:cool idea
Looks very nice!!
Personally I don't think there is an issue: I have a ...-ui-... so people know immediately that my node is a dedicated dashboard widget (since that is some kind of naming convention). While you have a ...-web-... node, similar to the worldmap node. So for me it is ok.
Hi Julian,
I'm not really an expert, so it was a bit of a battle to create my demo's...
BabylonJs offers following formats:
babylon
.gltf
.glb (binary GLTF)
.obj
.stl
Read somewhere that they advice to use gltf, but cannot find that page at the moment.
You can see in my issue list that they have a bug at the moment to load mtl (material) files fir obj, but I found the cause and they have fixed it. But not on npm yet...
So you need to use a 3D editor that can export one if these formats. E.g. the open source http://www.sweethome3d.com/
@TotallyInformation,
I have arranged my absence especially for you, to make sure you have a few months extra time to integrate BabylonJs into uiBuilder. It must be awful for you to see all those new fancy widgets arriving in the dashboard
OK, looks like Sketchup, Blender, Microsoft Paint3D, and TinkerCAD support the gltf format. I'm sure others do as well but that is most of the favourite and free options. OpenSCAD doesn't seem to directly support it but does support others in that list. Fusion360 also supports gltf.
I used to do a lot of 3d modelling and graphics back in the heady days of the Amiga (and bachelorhood!). Imagine 3D and Real3D mainly. Not so much in recent years, last things I did was a rough architectural model for some potential changes to our loft/attic spaces and then another model for what we actually did some years later. That was in Sketchup. I couldn't use something like sweethome3d because most of those tools didn't support angled walls and we have a house where one wall is 11 deg. out of true!
Actually, I feel sorry for those people who have to write a custom node to support things whereas I only have to say - "it already works with uibuilder!"
All I really need to do is win you over from the dark side Bart Or maybe retire so that I have enough time for all those ideas.
Anyway, absolutely trivial to use BabylonJS with uibuilder, with or without Vue
Hope your surgery goes well Bart and that you are able to recover quickly.
hopefully not to late - but how do I get the camera_update to work ? (with an arc camera) - what format should the message be ? As it's a rotation what are the properties needed ? Thanks
I have added a small fix on Github to allow the position of arc rotation camera's to be updatable afterwards.
Currently there is only few things that you can change via an update_camera command:
active: whether a camera is the active camera, i.e. look to the scene through this camera.
position: the current position where the camera is located. This is only available for camera's of types arcRotate and anaglyphArcRotate.
targetPosition: the current position of the target where the camera is looking at. This is not available for a followCamera.
You always need to specify the camera name or id. The name can be a single name, an array of names (as you requested some time ago), or a regex. The latter two options can be used to update multiple camera's with a single command...
A command can update the 3 properties, but it is also possible to update only a single property...
Here is a simple test flow that hopefully makes it a bit better to understand:
[{"id":"cda52145.34c6b","type":"ui_babylon_js","z":"2b6f5d19.202242","name":"BabylonJs (Cameras)","group":"3c00e495.ad69ec","order":0,"width":"12","height":"9","folder":"","filename":"","outputField":"payload","actions":[],"showBrowserErrors":true,"startupCommands":"[{\"command\":\"create_mesh\",\"type\":\"box\",\"name\":\"my_box\",\"meshOptions\":{\"width\":1,\"height\":1,\"depth\":1},\"position\":{\"x\":0,\"y\":0,\"z\":0}},{\"command\":\"create_mesh\",\"type\":\"sphere\",\"name\":\"my_sphere\",\"meshOptions\":{\"diameterX\":1,\"diameterY\":1,\"diameterZ\":1},\"position\":{\"x\":1.5,\"y\":1.5,\"z\":1.5}},{\"command\":\"create_camera\",\"type\":\"arcRotate\",\"name\":\"cam1\",\"position\":{\"x\":4,\"y\":3,\"z\":-3},\"targetPosition\":{\"x\":0,\"y\":0,\"z\":0},\"active\":true},{\"command\":\"create_camera\",\"type\":\"arcRotate\",\"name\":\"cam2\",\"position\":{\"x\":1,\"y\":5,\"z\":-1},\"targetPosition\":{\"x\":0,\"y\":0,\"z\":0}}]","x":1960,"y":200,"wires":[["20d1980f.855d68"]]},{"id":"20d1980f.855d68","type":"debug","z":"2b6f5d19.202242","name":"camera properties","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":2190,"y":200,"wires":[]},{"id":"41f73958.c7d008","type":"inject","z":"2b6f5d19.202242","name":"Activate cam1","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"command\":\"update_camera\",\"name\":\"cam1\",\"active\":true}","payloadType":"json","x":1690,"y":180,"wires":[["cda52145.34c6b"]]},{"id":"99f24b81.8d3d98","type":"inject","z":"2b6f5d19.202242","name":"Get camera(s) properties","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"command\":\"get_camera_properties\",\"name\":\"^.*\"}","payloadType":"json","x":1650,"y":440,"wires":[["cda52145.34c6b"]]},{"id":"210394c7.9e23cc","type":"inject","z":"2b6f5d19.202242","name":"Activate cam2","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"command\":\"update_camera\",\"name\":\"cam2\",\"active\":true}","payloadType":"json","x":1690,"y":220,"wires":[["cda52145.34c6b"]]},{"id":"347350ff.f24d2","type":"inject","z":"2b6f5d19.202242","name":"Move cam1 to top position","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"command\":\"update_camera\",\"name\":\"cam1\",\"position\":{\"x\":1,\"y\":3,\"z\":-1},\"active\":true}","payloadType":"json","x":1650,"y":280,"wires":[["cda52145.34c6b"]]},{"id":"a7ba0968.30be78","type":"inject","z":"2b6f5d19.202242","name":"Move cam2 target position to sphere","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"command\":\"update_camera\",\"name\":\"cam2\",\"targetPosition\":{\"x\":1.5,\"y\":1.5,\"z\":1.5},\"active\":true}","payloadType":"json","x":1620,"y":340,"wires":[["cda52145.34c6b"]]},{"id":"98beb081.00a09","type":"inject","z":"2b6f5d19.202242","name":"Move cam2 target position to box","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"command\":\"update_camera\",\"name\":\"cam1\",\"targetPosition\":{\"x\":0,\"y\":0,\"z\":0},\"active\":true}","payloadType":"json","x":1630,"y":380,"wires":[["cda52145.34c6b"]]},{"id":"3c00e495.ad69ec","type":"ui_group","z":"","name":"Cameras","tab":"ed46361d.448ae8","order":4,"disp":true,"width":"12","collapse":false},{"id":"ed46361d.448ae8","type":"ui_tab","z":"","name":"BabylonJs7","icon":"dashboard","disabled":false,"hidden":false}]
The "Startup" parameter on the config screen creates a scene with a sphere and a box, and two arc rotation camera's (with names "cam1" and "cam2").
The Active cam nodes can be used to activate a camera.
The Move cam to position can be used to change the position of a camera.
The Move cam target position can be used to change the target position of a camera.
The Get camera properties can be used to get the properties of 1 or more camera's. This is useful if you have moved the camera around e.g. using your mouse, and you want to know afterwards the current position of the camera (e.g. to hardcode it in an Inject node...)/
) is on his yacht in the middle of the sea, and for some reason the damn boat won't start anymore. Would be interesting to get a 3D wireframe view of the boat, where the sensors highlight in red where a malfunctioning has been detected. Because then the problem can be located immediately, withouth having to analyze multiple floorplans ...
. So here it is in your Node-RED dashboard. A burglar has been detected in a room, and by putting the entire building in wireframe mode and the room in red, you can immediately see what is going on:
I will need a surgery next friday and I won't be able to develop for a few months 
. But I wanted to announce this beta, so the community can meanwhile discuss about this node, report bugs, propose new features, ... However keep in mind that this node is FAR from finished due to my time constraint. And that I won't be able to program, so NO support this time!!!!!!!!!!!!!!!!!!
