How to connect HTML5 / JS UI with Houdini

[sebkaine]

Hi Guys !

I was wondering if someone know how we could control houdini with a html5 / javascript UI.

Something similar to this :

http://www.sidefx.com/docs/houdini/hom/rpc

https://www.youtube.com/watch?v=n2G0phKUKnk

But with a javascript interface like this.

http://idflood.github.io/ThreeNodes.js/index_optimized.html#example/particle2.json

Thanks for your lights !

Cheers.

E

 

 

[Mandrake0]

whats your main target?

if you want to make a gui on top of houdini where you can create nodes and create setups i see the biggest challenge in the 3D viewport part. for the nodes you can get it thru the RPC or PYTHON as you noted.

if you want to edit some function in a hip file for that i can sent you a simple setup.  

[lukeiamyourfather]

Use a web framework based on Python.

https://docs.python.org/2/library/xmlrpclib.html

There are many Python web frameworks to choose from depending on the complexity of the project.

https://wiki.python.org/moin/WebFrameworks

If you don't want to use Python you could simply open a port and pass whatever data you want but you'll have to do more legwork.

[sebkaine]

Well guys thanks a lot for your feeback !

There is nothing really serious for the moment, but i was curious to know how we could connect houdini with a webgl canvas.

trigger write sop / read geo pop cache directly in a webgl canvas ... stuff like that.

basically at the core of this i guess the best bet is to rely on pyrpc and use python for the backend and js in the front end.

I have heard good thing about this one :

https://github.com/pallets/flask

or maybe node.js could also be an option ?

https://nodejs.org/api/child_process.html

 

EDIT 

Actually francis i've just realised that you are the guy who already make it work

 

 

 

Edited July 18, 2017 by sebkaine

[Mandrake0]

yes, that's me :-)

i sent you the file hope it helps. 

 

 

 

[sebkaine]

Thanks a lot francis that's definitly great to have a starting point !

I would be curious to know what geo format you use with three.js ?

I'm tear apart beetween

- Three Json -> https://github.com/mrdoob/three.js/wiki/JSON-Object-Scene-format-4

- glTF -> https://github.com/KhronosGroup/glTF

- sea -> https://github.com/sunag/sea3d

 

For the moment it looks that

- json support lot of feature but compression / size suck ,

- glTF 2.0 is the theoretical good choice , agnostic / webgl oriented / pbr etc ... but specs are not final and compression with Open3DGC is not implemented yet ... so still wip !

- sea looks at the moment the best choice, lot of supported features / best compression with Open3DGC / instancing support etc ... but need 3dsmax to export geo

Thanks again for your feedback guys !

 

Edited July 19, 2017 by sebkaine

[Mandrake0]

Custom implementation i guess 

For the mesh i like realy realy PLY it's easy to read and small. 

But texture and specialy bones uffff thats a good challenge. Instancing i find not that hard (simple one).

When i have got some time i write the idea what i have got in my head. 

 

[sebkaine]

Thanks Francis !

Well .ply is a little too academic for me.

i would prefer to use a full equiped format with scene description / bones / morph etc ...

for the moment sea has the edge with all feature supported / best compression. But the Max exporter while working perfectly is really not sexy imo.

when i see this thread i'm also afraid glTF could become the next collada 

https://github.com/KhronosGroup/glTF/issues/696

the guys are debatting to support spec/gloss workflow, lot of big brain like cedric pinson / eric haines advise to support both metallic and specular but they doesn't look to listen so much ...

[Mandrake0]

sea3d looks very interesting i just haven't found the document specification.

only what i have found is this: http://community.poonya.com/152

it looks like they use FBX as base and then they convert it to sea3D thats fine for a file conversion but not ideal if you want to make streaming data on the fly.  

for gITF you have got at least a specification even when it's not final there is one. 

https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md

it looks like there is no c++ lib for export or i haven't seen one. for the FBX->gITF converter would be not the fastest path but for a prototype the way to go.

[Stalkerx777]

If you want your JS UI run outside of Houdini, the way to go is a client/server REST approach. You have to write server side code to run in Houdini. Similar, you can write standalone server app running outside of Houdini and communicate with Houdini via hrpyc.

One more interesting approach I used in the past is using QtWebKit based widget to render HTML inside Houdini and using Qt Signals/Slots to fire events from JS callbacks. Works good, but only if you have access to JS source code, or write your own with this integration purpose in mind.

Edited August 5, 2017 by Stalkerx777