Maple Keys revisited with WebVR

Lie down under a maple tree, and watch the keys lazily drift down towards you. In your VR goggles, with WebVR!

(This is in an iFrame – to pop it out for your VR goggles, click here)

I’d written a demo using THREE.js some time back, that simulated maple keys falling in the spring. Having secured some VR goggles (Samsung Gear VR with a Galaxy S7), and tried no end of VR experiences, it seemed like I should “port” that demo into an immersive version.

Continue reading “Maple Keys revisited with WebVR”

Tweet about this on TwitterShare on Google+Share on LinkedInShare on FacebookEmail this to someone

VR for Web Developers

So you’re a web developer, and you’ve been hearing things about VR. I’m also a web developer, and I’ve also been hearing things about VR! And I’ve been blogging about it. Not just VR – but how VR is very likely to soon become both a crisis and an opportunity for web developers. So what are the prospects for VR for web developers?

The dawn of virtual reality.Today is April 8, 2016. The Oculus Rift and the HTC Vive both tried to start shipping in the last couple of weeks – and it’s been a bit of a mess. But even so, eager early adopters have raved up and down that this revolutionary technology finally actually works.

Continue reading “VR for Web Developers”

Tweet about this on TwitterShare on Google+Share on LinkedInShare on FacebookEmail this to someone

Blend4web vs. Three.js

As a sequel to my Feb 23 post X3DOM vs. Three.js, I’d like to quickly compare Blend4web vs. Three.js, using that same old arbitrary VRML file as a neutral sample. Blend4web is an add-on for Blender, the open-source 3D authoring tool I use.

Here’s how the Blender workspace containing my old VRML file looks when I export it using Blend4web:

And here’s the same Blender workspace exported as a COLLADA file and then imported into Three.js:

You can drag your mouse on either of those to move them around. Each button gives you a different motion when you drag. Each example uses each button in a different way.

Continue reading “Blend4web vs. Three.js”

Tweet about this on TwitterShare on Google+Share on LinkedInShare on FacebookEmail this to someone

Introducing Idoru.js

idoru.js is an experiment I’m working on with artificial characters in virtual worlds. The idea is that to provide good “user experience” (UX) in a virtual world, a character must have good “stage presence” to stimulate engagement.

The idea is to create a framework for an artificial character that is charming and attentive to the user. This character can then be “dressed up” with any imaginable avatar. It can be given any “job” that anyone cares to script.

A screenshot of the very first prototype of idoru.js - with a rudimentary avatar and chatbot.
First idoru.js experiment.

A good suit and deep knowledge are not enough to make a person engaging in the real world. A person needs body language. A person needs to be attentive to the person they are engaging. They need to make eye contact. They need to interact with a person’s personal space in a thoughtful, polite way.

Continue reading “Introducing Idoru.js”

Tweet about this on TwitterShare on Google+Share on LinkedInShare on FacebookEmail this to someone

X3DOM vs. Three.js

Here’s a quick look at X3DOM vs. three.js. Two very different tools, that both do something I’m very interested in – allow you to publish 3D content and virtual worlds on the open web, without a plugin.

I found two good ways to get 3D content (from an ancient VRML file) out of Blender, and out on the open web where anyone with a browser can see them without a plugin. So I’d like to compare X3DOM vs. Three.js.

I loaded a COLLADA file into Three.js:

And I loaded an X3D file with X3DOM:

You can drag your mouse on either of those to move them around. Each button gives you a different motion when you drag. Each example uses each button in a different way. Continue reading “X3DOM vs. Three.js”

Tweet about this on TwitterShare on Google+Share on LinkedInShare on FacebookEmail this to someone

Blender to three.js with COLLADA files

Given this phrase in the Wikipedia definition of COLLADA files – “… for exchanging digital assets among various graphics software applications …” – it should come as no surprise that I found the COLLADA format the most effective for exchanging digital assets between Blender and three.js

One running gag on this blog is my repeated attempts at getting the content in my old VRML files on the open web and rendering in a browser again – and this time, without the use of plugins.

I’ve tried importing old VRML directly into three.js – with somewhat less than satisfactory results. I’ve discovered that those old file load nicely into Blender – and I’ve tried any number of way of exporting them from Blender again, with the hopes of loading those formats into three.js.

collada-bannerFor me, the winner by far, was COLLADA files. Continue reading “Blender to three.js with COLLADA files”

Tweet about this on TwitterShare on Google+Share on LinkedInShare on FacebookEmail this to someone

Virtual Silver Maple Keys

I’ve always loved it when maple keys come showering down from the trees.

So this is what I chose for my first “cross-technology” bit of eye candy. I made a model of a key in Blender. I exported it as a .JSON file, and imported it into three.js. Once there, I created hundreds of it, and wrote some hackey code to make them drift lazily down from the trees right where the camera is pointed. And then I added a 360 degree background image. Continue reading “Virtual Silver Maple Keys”

Tweet about this on TwitterShare on Google+Share on LinkedInShare on FacebookEmail this to someone

360 degree images with three.js

A full wrap-around photographic background goes a long way, turning a few goofy primitives floating in space into an immersive virtual world.

This is just my Dancing Donut exercise of a few weeks back, with the addition of a photograph. Though, how the photograph is structured – and how it is added – is quite different from what you might experience adding a photograph to a flat web page. Continue reading “360 degree images with three.js”

Tweet about this on TwitterShare on Google+Share on LinkedInShare on FacebookEmail this to someone

Tool Agnostic – definition and practical limitations

They do say that everything is best in moderation, including moderation itself – perhaps the same applies to being a tool agnostic.

“Tool Agnostic” is a cool, but relatively obscure, term that describes an approach to technology free from prejudice. I just Googled “tool agnostic” definition, and didn’t really wind up with anything. So, that to me smacks of an opportunity to post one and get this party rolling.

Let’s start with the term “agnostic” itself. From Mirriam-Webster, the #2 definition stands without restricting itself to the subject of religion or God:

Full Definition of agnostic […] 2 :  a person who is Continue reading “Tool Agnostic – definition and practical limitations”

Tweet about this on TwitterShare on Google+Share on LinkedInShare on FacebookEmail this to someone