Create Something like Room Sketcher

[swaztx]

Hi,

Can anyone explain to me. Is it possible to create something like Room Sketcher http://planner.roomsketcher.com/?ctxt=rs_com#/?pid=493174 with Babylonjs ?

Thank you,

[Wingnut]

Hi Swaztx, welcome to the forum.

  In my opinion, I say YES!   Understand that BabylonJS would be handling only the "Live 3D" portion.  The rest is done in 2D.  So each 3D model... also has a 2D image associated with it (for when doing floorplan layout).  A careful model-scaling plan will be needed.  Possibly, our friends at Phaser could help with the 2D. 

Many web 2D toys (such as Phaser)... use a HTML canvas with 'context2D'.  The BabylonJS HTML canvas uses 'context3D'.  You will need to figure out a 'sync' method.  Your 2D floor plan is the boss, and when it's time to render a Live 3D view with BabylonJS, your floor plan will "marshall" which 3D models need to be imported, scaled how, rotated how, and positioned where.  If you are in proper 'sync', your 3D scene will look perfect.

You can see how a room with furniture will look... by visiting these:

http://www.babylonjs.com/Demos/Flat2009/
http://www.babylonjs.com/Demos/WCafe/
https://www.wanaplan.com/
http://www.babylonjs.com/Demos/Retail/ 

Although wanaplan is a third party website, their site is listed on our BabylonJS main website.  So, I suspect they use BJS for their 3D views.

Ask more, as wanted.  Perhaps others will comment.  Maybe they will have more experience and better thoughts. 

[Kesshi]

Its definitely possible. I'm working on a framework for applications like this at the moment.
What i have so far (only BabylonJs related things):
- support for multiple views
- custom camera control for better multiple view and orthographic camera support
- move and rotate operations which work in all views (2D, 3D, orthographic, perspective ...)
- everything works on desktop and mobile/touch devices
In my case i don't need to sync 2D and 3D because everything is done in 3D anyway.

attached a screenshot of my debug application (everything still in very early stage, thats why the UI is ugly  )

[swaztx]

Hi Wingnut and Kesshi,

Thank you for the great information. It helps me a lot. I really appreciate it. 

Kind regards

[Wingnut]

@Kesshi - I think it's beautiful!  Would you be willing to zip-up some/all of your project, and offer it to the public?  If not, I understand.  I think lots of people would love to have a copy of it just the way it is... with the basics complete.  Kesshi's Scene Layout Editor Starter Kit v1.0.    I would be glad and honored to have a copy, and perhaps @swaztx would like a copy, too.  Possible?  Thanks either way, good luck on your project.

[Kesshi]

@Wingnut sorry i can't make it public. This is a commercial project. If the project is more evolved we will create a public demo for our customers. I can post the link here in the forum then, so you can play around with it.
In the meantime if someone has some questions about how i solved some things i try to help and maybe could post some small code snippets.

[Boz]

It's always nice to see good babylon projects magically appearing in some topics

[wayan]

@Kesshi

Hi alll,

i'm still new in babylonjs, and i see some interesting thing here and i think i need it.
Mr kesshi, it's so nice to see your project, i am interested with how you could sync every action in three canvas (perspective, top, front) in one page html.

is there some simple playground example maybe how to sync every action in more than one canvas like in the picture you show above ?

what i mean is, if you do some event(like rotate) of some object(chair) at "top" section, the other two section(perspective & front) will change too (chair at perspective & front section rotate too)

 

thanks a lot,
wayan

[Kesshi]

@wayan I have only one canvas. I don't need to sync anything.
With babylonJs you can create multiple viewports to show multiple cameras in the same canvas. Here two examples:

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

http://www.babylonjs-playground.com/#13TVWJ#0

The only thing i'm doing special is the camera navigation/control. Because all pointer/mouse events are attached to the canvas, all of the cameras will react at the same time. You need to add some special handling to make sure that only the camera/viewport which is currently under the mouse will handle the events.

 

[wayan]

@Kesshi

Thank You Mr Kesshi, your playground is exactly what i mean,

although i still can't get what you mean by: "add some special handling to make sure that only the camera/viewport which is currently under the mouse will handle the events" 

 

[Kesshi]

@wayan Maybe you don't need that special handling. It depends on your use case.
In my case all views have a controllable camera but i want to control only one camera at a time. So added some handling to disable/enable the camera controls depending on the position of the mouse/pointer.