Ijo, an interactive experience

Hello everyone,

I had been working on a project for several months. As it was my bachelor’s project, it has a theoretical background, focusing on the topic of decisions. Because nowadays, we are allowed to make as many decisions as never before in history. For some people, this power and responsibility for their own life is a gift, for others the huge amount of possibilities and unknown consequences is unbearable. These two positions are the basis for this project. We want to give the opportunity to reconsider one’s very own stance towards decisions and the obsessive search for the right way.

ijo, the name which the project ended up being called, is an interactive experience during which you float through a virtual, interactive world and are confronted with different kinds of decisions. Every decision leads to a new path, the real way to go, which visual and auditory design is based on a balance and imbalance of our psychic needs.

The Project is using three.js, WebGL and WebVR boilerplate. We had a hard time making it work on mobile devices and as a VR experience for mobile.

And here it is:
http://i-j-o.de

As we have been visiting the three.js homepage an innumerable amount of times during our work, we would love to see our project featured there, if somehow possible.

Thank you very much!

Marie

3 Likes

Hi Marie,

just some technical feedback: Right after starting the experience, the application seems to hang. Even after minutes nothing happens. The only thing i can see is a brown arrow at the bottom on the right, which does not react on any interactions. Besides, the browser console reveals the following error.

It would also make sense to bundle and minify your JavaScript source code. Especially on mobile devices you will have a noticeably better startup time of your application.

I’ve tested with Chrome 59.0.3071.109 and OSX 10.11.6 (iMac)

Hi Mugen,

thank you for your reply! This is my very first project of the sort, so feedback is highly appreciated. I jus updated Chrome to the newest version, so the one you are using, and it is starting smoothly, without any problems. The only difference is that I am using an older OSX, OSX 10.10.5. I always thought that fact would result in things not working instead of the other way around… The error you are reporting could indicate that the problem lies in the code of the webVR boilerplate, so I probably should look for a different way to make it VR compatible, but I still couldn’t test it for changes afterwards, because I don’t encounter problems on any of my devices.
However, seeing that my project doesn’t work and isn’t properly accessible for other people is a problem. Would you mind trying it on Firefox or your mobile phone?

I completely forgot about minifying the code after ijo was finally finished. Thank you for the tip!

The application starts with FF 54 and Safari 10.1.1 (11603.2.5) :thumbsup:. So it seems to be a Chrome exclusive issue.

After a new test in Chrome, i’ve seen in the network tab that your assets are loaded correctly. But for some reasons nothing gets displayed when i enter the scene.

Vielen Dank! I’m very relieved. Still, the issue with Chrome is bugging me. It was the one browser we had the least problems with.
According to the code, the user shouldn’t be able to enter the scene before everything is loaded, so that really seems to work, but it isn’t displayed. I wish I had a clue of how to look into that.

Oh dear, i’ve think i found the problem :sweat_smile:. Some time ago i’ve activated WebVR in chrome://flags/ for development purposes. If i disable this option (and that’s the default in any conventional Chrome), your application runs fine!

So right now, your application does not have any problems with most Chrome users (Yay!). But as soon as WebVR is enabled by default (in some month or so), this issue might become a problem for your app. After some debugging, you can maybe fix the problem in your setupStage() function.

When the promise returned by Navigator.getVRDisplays() resolves, you have to check if the array of VRDisplay objects is empty. If WebVR is enabled but no displays are found, you should render in desktop mode.

Besides, webvr-managerDesktopMobile.js does not seem to handle the mentioned situation properly. Not sure if this issue should be reported to the developers. Anyway, you should be able to reproduce the issue by activating WebVR in your Chrome. This will make it much easier to provide a fix!

Hope this helps you, Marie :blush:!

That’s a relief! Thank you very much for looking into that. It sure is a problem keeping projects like this up to date. I will start reworking some parts soon and hope that I’ll be able to solve that one issue in particular.

Danke, Michael!

As we have been visiting the three.js homepage an innumerable amount of times during our work, we would love to see our project featured there, if somehow possible.

Just wanted to let you know that it’s now possible to submit projects to the three.js website (there is a link at the top on the right at https://threejs.org/). :blush:

2 Likes

Thank you very much! I will make use of that as soon as possible :slight_smile:

This is fantastic! Really great job, I can tell you spent a lot of time on this. For the record I played it on Chrome and it ran flawlessly.

1 Like

Entschuldigung fuer mein Deutsch, aber ich moechte sagen, dass es eine unglaubliche Erfahrung war. Gut gemacht!

Yeah, German is not my native language. Though English too. :smiley:

Impressive work!

1 Like

Thank you very much! I have been thinking about polishing ijo up a little (both visually and technically) before submitting it to threejs’ showcase and your comment gave me the motivation to finally start!
Thanks again!

Dankeschön! Your German is quite impressive! :slight_smile:
Your comment really motivates me to keep ijo going.
Thank you!

1 Like