WebSocket+WebGL combined: a real-world app built with Autobahn/Crossbar.io

#1

Hi,

I'd like to share a real-world app that is built on Autobahn/Crossbar.io:

http://showroomdummy.com/

This combines WebSocket/WAMP and WebGL to provide real-time synched 3D models on the web for presentation and collaboration.

I think that's nice showcase of what's possible with latest HTML5 web technologies ..

/Tobias

PS: currently Chrome/Firefox only. Safari (and possibly IE11) coming. This is due to WebGL support required.

Disclaimer: the app is a beta product of Tavendo for which I work.

0 Likes

#2

Hi Tobias,

That’s pretty neat indeed! I think the possibilities provided by HTML5 are indeed awesome. I had, for instance, toyed around websocket and android sensors. Here’s an idea of the little demo I had setup (not my video):

https://www.youtube.com/watch?v=baD-rShmZcM

The android device drives the canvas on the browser through websocket (ws4py stack).

Good times :slight_smile:

···

On 12 November 2013 11:11, Tobias Oberstein tobias.o...@gmail.com wrote:

Hi,

I’d like to share a real-world app that is built on Autobahn/Crossbar.io:

http://showroomdummy.com/

This combines WebSocket/WAMP and WebGL to provide real-time synched 3D models on the web for presentation and collaboration.

I think that’s nice showcase of what’s possible with latest HTML5 web technologies …

/Tobias

PS: currently Chrome/Firefox only. Safari (and possibly IE11) coming. This is due to WebGL support required.

Disclaimer: the app is a beta product of Tavendo for which I work.

You received this message because you are subscribed to the Google Groups “Autobahn” group.

To unsubscribe from this group and stop receiving emails from it, send an email to autobahnws+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/groups/opt_out.

0 Likes

#3

Hi Sylvain,

> are indeed awesome. I had, for instance, toyed around websocket and

android sensors. Here's an idea of the little demo I had setup (not my
video):

https://www.youtube.com/watch?v=baD-rShmZcM

The android device drives the canvas on the browser through websocket
(ws4py stack).

Nice! So the reading out of Android accelerometers is also via HTML5 API? Is that Chrome Mobile? Works on Firefox Mobile too?

/Tobias

0 Likes

#4

Sadly not. The reading are done by a Python script I wrote that is running on the device itself and the communicates to my websocket server which, in turn, broadcasts those measurements to the web frontend using websocket as well.

I’m hopeful that android browsers will soon become websocket ready but it’s not there yet.

http://caniuse.com/websockets

···

On 12 November 2013 11:39, Tobias Oberstein tobias.o...@gmail.com wrote:

Hi Sylvain,

are indeed awesome. I had, for instance, toyed around websocket and
android sensors. Here’s an idea of the little demo I had setup (not my

video):

https://www.youtube.com/watch?v=baD-rShmZcM

The android device drives the canvas on the browser through websocket

(ws4py stack).

Nice! So the reading out of Android accelerometers is also via HTML5 API? Is that Chrome Mobile? Works on Firefox Mobile too?

/Tobias

You received this message because you are subscribed to the Google Groups “Autobahn” group.

To unsubscribe from this group and stop receiving emails from it, send an email to autobahnws+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/groups/opt_out.

0 Likes

#5

I'm hopeful that android browsers will soon become websocket ready but
it's not there yet.

http://caniuse.com/websockets

fwiw, the WebSocket Flash-based polyfill here

https://github.com/gimite/web-socket-js

works on nearly all devices in "native" Android browser.

All other (major) browsers on Android have it: Chrome, Firefox, Opera.

Also, beginning with 4.3, Chrome ships with Android, but user must still choose/change (on non-Nexus).

But yeah, it's not perfect yet .. which would be: Chrome == default on _all_ devices (Samsung, HTC, ..), not only Nexus (where it is already).

/Tobias

0 Likes

#6

I wasn’t aware of that Flash-based websocket provider. I also see that Fx 25 for Android does suport WebSocket natively and Chrome for android will do too from 4.4. There is hope :slight_smile:

···

On 12 November 2013 12:35, Tobias Oberstein tobias.o...@gmail.com wrote:

I’m hopeful that android browsers will soon become websocket ready but

it’s not there yet.

http://caniuse.com/websockets

fwiw, the WebSocket Flash-based polyfill here

https://github.com/gimite/web-socket-js

works on nearly all devices in “native” Android browser.

All other (major) browsers on Android have it: Chrome, Firefox, Opera.

Also, beginning with 4.3, Chrome ships with Android, but user must still choose/change (on non-Nexus).

But yeah, it’s not perfect yet … which would be: Chrome == default on all devices (Samsung, HTC, …), not only Nexus (where it is already).

/Tobias

You received this message because you are subscribed to the Google Groups “Autobahn” group.

To unsubscribe from this group and stop receiving emails from it, send an email to autobahnws+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/groups/opt_out.

0 Likes

#7

Just to be sure I didn't say something that could be misunderstood:

Chrome for Android _already_ supports WebSocket since long time.

The point is: Chrome for Android can't be even manually installed < 4.0.

But you should be able to install Chrome for Android on anything >= 4.0 and have a decent browser with WebSocket _and_ WebGL (depending on HW/driver).

The Flash bridge works even on my Galaxy S1 on Android 2.3.

Rgd WebGL: the ShowRoomDummy demo runs on my Nexus 4 with 20fps!

/Tobias

···

Am 12.11.2013 12:52, schrieb Sylvain Hellegouarch:

I wasn't aware of that Flash-based websocket provider. I also see that
Fx 25 for Android does suport WebSocket natively and Chrome for android
will do too from 4.4. There is hope :slight_smile:

0 Likes

#8

Really? That’s cool. I didn’t know that.

Thanks a lot, I’ll try tomorrow evening!

···

On 12 November 2013 13:01, Tobias Oberstein tobias.o...@gmail.com wrote:

Am 12.11.2013 12:52, schrieb Sylvain Hellegouarch:

I wasn’t aware of that Flash-based websocket provider. I also see that

Fx 25 for Android does suport WebSocket natively and Chrome for android

will do too from 4.4. There is hope :slight_smile:

Just to be sure I didn’t say something that could be misunderstood:

Chrome for Android already supports WebSocket since long time.

The point is: Chrome for Android can’t be even manually installed < 4.0.

But you should be able to install Chrome for Android on anything >= 4.0 and have a decent browser with WebSocket and WebGL (depending on HW/driver).

The Flash bridge works even on my Galaxy S1 on Android 2.3.

Rgd WebGL: the ShowRoomDummy demo runs on my Nexus 4 with 20fps!

/Tobias

You received this message because you are subscribed to the Google Groups “Autobahn” group.

To unsubscribe from this group and stop receiving emails from it, send an email to autobahnws+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/groups/opt_out.

0 Likes

#9

Ok, I've made a video (sorry, somewhat limited quality):

"ShowRoomDummy: from Desktop to Mobile"
http://www.youtube.com/watch?v=8WSCbyTcy-Y

That is running _exactly the same code_ on both Chrome desktop and mobile.

The slight lag: this is running from Germany DSL over to Ireland Amazon EC2, back to German mobile network, right into mobile Chrome.

/Tobias

···

Am 12.11.2013 13:15, schrieb Sylvain Hellegouarch:

Really? That's cool. I didn't know that.

0 Likes

#10

Wow. That is really cool. I so need to play with this!

···

On 12 November 2013 18:51, Tobias Oberstein tobias.o...@gmail.com wrote:

Am 12.11.2013 13:15, schrieb Sylvain Hellegouarch:

Really? That’s cool. I didn’t know that.

Ok, I’ve made a video (sorry, somewhat limited quality):

“ShowRoomDummy: from Desktop to Mobile”

http://www.youtube.com/watch?v=8WSCbyTcy-Y

That is running exactly the same code on both Chrome desktop and mobile.

The slight lag: this is running from Germany DSL over to Ireland Amazon EC2, back to German mobile network, right into mobile Chrome.

/Tobias

You received this message because you are subscribed to the Google Groups “Autobahn” group.

To unsubscribe from this group and stop receiving emails from it, send an email to autobahnws+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/groups/opt_out.

0 Likes

#11

Nice!

···

On Tuesday, November 12, 2013 6:51:37 PM UTC+1, Tobias Oberstein wrote:

Am 12.11.2013 13:15, schrieb Sylvain Hellegouarch:

Really? That’s cool. I didn’t know that.

Ok, I’ve made a video (sorry, somewhat limited quality):

“ShowRoomDummy: from Desktop to Mobile”

http://www.youtube.com/watch?v=8WSCbyTcy-Y

That is running exactly the same code on both Chrome desktop and mobile.

The slight lag: this is running from Germany DSL over to Ireland Amazon
EC2, back to German mobile network, right into mobile Chrome.

/Tobias

0 Likes

#12

Here is another desktop-mobile WebGL/WebSocket demo which in addition shows an embedded IFrame content that is integrated into the 3D scene and controlled in real-time via WebSocket from mobile:

http://www.youtube.com/watch?v=9k09PhFlFd8

If you like, pls share/spread;)

/Tobias

···

Am 13.11.2013 10:43, schrieb Sylvain Hellegouarch:

Wow. That is really cool. I so need to play with this!

0 Likes

#13

Damn this is nice again Tobias. Makes me want to code all weekend as well now :stuck_out_tongue:

···

On 15 November 2013 13:19, Tobias Oberstein tobias.o...@gmail.com wrote:

Am 13.11.2013 10:43, schrieb Sylvain Hellegouarch:

Wow. That is really cool. I so need to play with this!

Here is another desktop-mobile WebGL/WebSocket demo which in addition shows an embedded IFrame content that is integrated into the 3D scene and controlled in real-time via WebSocket from mobile:

http://www.youtube.com/watch?v=9k09PhFlFd8

If you like, pls share/spread;)

/Tobias

You received this message because you are subscribed to the Google Groups “Autobahn” group.

To unsubscribe from this group and stop receiving emails from it, send an email to autobahnws+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/groups/opt_out.

0 Likes

#14

Damn this is nice again Tobias. Makes me want to code all weekend as
well now :stuck_out_tongue:

Ok, I promise this will be the last one;) But I just could not resist:

http://www.youtube.com/watch?v=z4bDMq8G3ls

This is rendering a WebGL scene ("car dashboard") that embeds an IFrame within the 3D scene _that in turn_ renders a 2nd WebGL scene, which is then controlled from Mobile.

I guess you can only get more pervert by making that 2nd scene pointing to the first .. an infinite Escher thing will probably arise .. and I guess something might then collapse. I did not try that one. Just too pervert.

Cheers,
Tobias

···

Am 15.11.2013 13:30, schrieb Sylvain Hellegouarch:

On 15 November 2013 13:19, Tobias Oberstein <tobias.o...@gmail.com > <mailto:tobias.o...@gmail.com>> wrote:

    Am 13.11.2013 10:43, schrieb Sylvain Hellegouarch:

        Wow. That is really cool. I so need to play with this!

    Here is another desktop-mobile WebGL/WebSocket demo which in
    addition shows an embedded IFrame content that is integrated into
    the 3D scene and controlled in real-time via WebSocket from mobile:

    http://www.youtube.com/watch?__v=9k09PhFlFd8
    <http://www.youtube.com/watch?v=9k09PhFlFd8>

    If you like, pls share/spread;)

    /Tobias

    --
    You received this message because you are subscribed to the Google
    Groups "Autobahn" group.
    To unsubscribe from this group and stop receiving emails from it,
    send an email to autobahnws+unsubscribe@__googlegroups.com
    <mailto:autobahnws%2...@googlegroups.com>.
    For more options, visit https://groups.google.com/__groups/opt_out
    <https://groups.google.com/groups/opt_out>.

--
- Sylvain
http://www.defuze.org
http://twitter.com/lawouach

--
You received this message because you are subscribed to the Google
Groups "Autobahn" group.
To unsubscribe from this group and stop receiving emails from it, send
an email to autobahnws+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

0 Likes

#15

Oh, come on, Tobias.

Give us the rotating Space Shuttle, too, on the kitchen’s wall screen!

That would be awesome!

Roger

···

On Friday, November 15, 2013 3:45:51 PM UTC+1, Tobias Oberstein wrote:

Am 15.11.2013 13:30, schrieb Sylvain Hellegouarch:

Damn this is nice again Tobias. Makes me want to code all weekend as

well now :stuck_out_tongue:

Ok, I promise this will be the last one;) But I just could not resist:

http://www.youtube.com/watch?v=z4bDMq8G3ls

This is rendering a WebGL scene (“car dashboard”) that embeds an IFrame
within the 3D scene that in turn renders a 2nd WebGL scene, which is
then controlled from Mobile.

I guess you can only get more pervert by making that 2nd scene pointing
to the first … an infinite Escher thing will probably arise … and I
guess something might then collapse. I did not try that one. Just too
pervert.

Cheers,

Tobias

0 Likes

#16

Oh, come on, Tobias.

Give us the rotating Space Shuttle, too, on the kitchen's wall screen!
That would be awesome!

Hey Roger, you noticed;) And now that you did .. sure: I've updated the demo .. it now shows the embedded video IFrame also in the embedded IFrame 3D model on the HMI.

Here is more IFrame madness:

http://www.youtube.com/watch?v=tkM7gQ2FRJM

I've also though about a "full M.C. Escher" demo thingy .. a 3D scene with an embedded IFrame in the scene that points to the scene _itself_.

I think I know how to break the infinite recursion, but a day only has 24h and there is so much else to do .. it's really more a little demo for our real-time technology.

I figured that people are actually attracted by moving, colorful stuff .. me I get excited about numbers - I could talk a day and more about the perversity called the real numbers and stuff .. well;)

So I thought lets hack something flashy together .. WebGL is pretty easy and gets things done very fast. Really neat!

Since that "do sth flashy" approach seems to work better than my "numbers", we'll do more in the future .. spread, share, like;)

Cheers,
/Tobias

···

Am 15.11.2013 20:32, schrieb Roger Erens:

Roger

On Friday, November 15, 2013 3:45:51 PM UTC+1, Tobias Oberstein wrote:

    Am 15.11.2013 13:30, schrieb Sylvain Hellegouarch:
     > Damn this is nice again Tobias. Makes me want to code all weekend as
     > well now :stuck_out_tongue:

    Ok, I promise this will be the last one;) But I just could not resist:

    http://www.youtube.com/watch?v=z4bDMq8G3ls
    <http://www.youtube.com/watch?v=z4bDMq8G3ls>

    This is rendering a WebGL scene ("car dashboard") that embeds an IFrame
    within the 3D scene _that in turn_ renders a 2nd WebGL scene, which is
    then controlled from Mobile.

    I guess you can only get more pervert by making that 2nd scene pointing
    to the first .. an infinite Escher thing will probably arise .. and I
    guess something might then collapse. I did not try that one. Just too
    pervert.

    Cheers,
    Tobias

--
You received this message because you are subscribed to the Google
Groups "Autobahn" group.
To unsubscribe from this group and stop receiving emails from it, send
an email to autobahnws+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

0 Likes

#17

Oh, come on, Tobias.

Give us the rotating Space Shuttle, too, on the kitchen’s wall screen!

That would be awesome!

Hey Roger, you noticed;) And now that you did … sure: I’ve updated the
demo … it now shows the embedded video IFrame also in the embedded
IFrame 3D model on the HMI.

I don’t see it in one of the previous links? What I meant to suggest was the levels

Car dashboard -> kitchen -> space shuttle

within 1 movie.

Here is more IFrame madness:

http://www.youtube.com/watch?v=tkM7gQ2FRJM

This is nice, too, having it shown in parallel.

I’ve also though about a “full M.C. Escher” demo thingy … a 3D scene
with an embedded IFrame in the scene that points to the scene itself.

In the Netherlands this is also known as the ‘Droste effect’: a nurse carying a tray with a can of cocoa. On the tin, there is a picture of that nurse carrying a tray with that tin, etc.

I think I know how to break the infinite recursion, but a day only has
24h and there is so much else to do … it’s really more a little demo
for our real-time technology.

I figured that people are actually attracted by moving, colorful stuff
… me I get excited about numbers - I could talk a day and more about
the perversity called the real numbers and stuff … well;)

So I thought lets hack something flashy together … WebGL is pretty easy
and gets things done very fast. Really neat!

Since that “do sth flashy” approach seems to work better than my
“numbers”, we’ll do more in the future … spread, share, like;)

Apparently the attention of the human brain gets especially triggered when there’s ‘danger’ involved in such scenes. So your selling story has to compete with those kind of outside world signals.

That’s a principle used in the ‘Head first’ books. You might try to find some scene with a lion or tiger approaching fast. Or ‘functional nude’ :slight_smile:

Cheers,

Roger

···

On Saturday, November 16, 2013 4:26:30 PM UTC+1, Tobias Oberstein wrote:

Am 15.11.2013 20:32, schrieb Roger Erens:

0 Likes

#18

I don't see it in one of the previous links? What I meant to suggest was
the levels
Car dashboard -> kitchen -> space shuttle
within 1 movie.

It's in the demo .. no time to make a new video though;(

    I've also though about a "full M.C. Escher" demo thingy .. a 3D scene
    with an embedded IFrame in the scene that points to the scene _itself_.

In the Netherlands this is also known as the 'Droste effect': a nurse
carying a tray with a can of cocoa. On the tin, there is a picture of
that nurse carrying a tray with that tin, etc.

I didn't knew that one! Now we only need to find an 3D artist who can create such models;)

    Since that "do sth flashy" approach seems to work better than my
    "numbers", we'll do more in the future .. spread, share, like;)

Apparently the attention of the human brain gets especially triggered
when there's 'danger' involved in such scenes. So your selling story has
to compete with those kind of outside world signals.
That's a principle used in the 'Head first' books. You might try to find
some scene with a lion or tiger approaching fast. Or 'functional nude' :slight_smile:

A "functional nude" .. yeees. We need better "marketing" badly;)

Cheers,
Tobias

···

Cheers,

Roger

--
You received this message because you are subscribed to the Google
Groups "Autobahn" group.
To unsubscribe from this group and stop receiving emails from it, send
an email to autobahnws+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

0 Likes