Quantcast
Channel: Sylvain Zimmer » Tech stuff
Viewing all articles
Browse latest Browse all 8

Adding support for the SpaceNavigator into Sketchfab

0
0
SpaceNavigator

After trying Liquid Galaxy a couple times at Google offices, I became interested in the controller they use: the 3DConnexion SpaceNavigator. It’s a great device to explore 3D environments and it is surprisingly easy to master!

So I bought one and started hacking support for it in my first angel investment: Sketchfab. My goal was to use the Gamepad API to be able to move around 3D models hosted on Sketchfab with the SpaceNavigator, directly inside the browser!

I quickly discovered that the support for gamepads was not actually merged yet into Firefox. All I could use was very old builds with deprecated APIs. So I shifted my focus to Chromium and it turned out that the Gamepad API was already activated for everybody and that the SpaceNavigator was supported out of the box. Still, after digging in the code I ended up sending my first patch to Chromium to support another USB gamepad ;-)

One interesting implementation detail of the Gamepad API is that users first need to push a button on the device before it becomes discoverable by the webpage, mostly to prevent webpages from uniquely identifying users based on the devices they connected. But it makes it really hard to display some kind of help text like “Push a button to activate your gamepad” because you don’t even know it is connected. There should be a “there is *something* connected” event!

With the SpaceNavigator sending DOM events inside Chromium, the next step was to bind them to the 3D viewer. Sketchfab uses an open source 3D library called OSGJS under the hood so I submitted a patch to add Gamepad support. It actually made me quite proud to be both an investor and a committer ;-)

Anyway, here is a live demo of browsing Sketchfab using the SpaceNavigator. You can try it for yourself with Chrome and any gamepad!

Click here to view the embedded video.


Viewing all articles
Browse latest Browse all 8

Latest Images

Trending Articles





Latest Images