Iridescence ft. Rein

πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡
πŸ‘‰ iridescence.retitle.me πŸ‘ˆ
☝️☝️☝️☝️☝️☝️☝️☝️☝️☝️☝️☝️☝️☝️

check out the live website


When the assignment was announced I was looking for a medium that could host the diverse types of media that all the students were using. We just did an assignment for Bram where we made an online exhibition in Roblox where all everyone contributed 3d models. This was really nice so i thought the platform should definitely support 3d models.
I stumbled on a library called react 360. This seemed to be ideal: support for video, photo, audio and 3d models. I started playing around with it and created the first experiment shown below:

After presenting this to the group, Rein joined the team πŸ’ͺπŸ’ͺπŸ’ͺ

This medium was able to display all the types of media we wanted, but the library turned out to be a bit obsolete. It is not well maintained and you are actually very limited making adjustments you can make to the default experience. Which means the camera is not easy to move and you are always inside of this spherical projection.

Luckily I found a different library by accident. It's called react three fiber. It helps you use the 3d solution for javascript (Three.js) while also leveraging the power of React (the framework me and Rein like to use for developing web apps).
This library turned out to be a real gem! You have all the flexibility of composing everything yourself from the ground up, but without all the boilerplate that plain Three.js would have. We both decided this would be a better option.

This, however, meant we had to build everything from the ground up and could not use all the pre-build components from react-360. But we were really exited to start this learning journey and to bring 3d to the web.

the first working prototype

Now we could choose everyhing ourselves, what should be the experience? The feedback from the first demo got us thinking... The sphere projection did actually have something nice. We came up with the first concept for our 'bubble' experience. We felt it could relate the the solitude theme in the scence that artists can sometime live in a 'bubble'.

As shown on the video above, we had also implented a webview. At first we didn't know what types of media would be made. We were still quite early doing the new corona program and not so many works had been posted on the platform yet. Yeah... So it's really cool you can have fully working website embedded in your 3d environment, but we ended up not using it. One of the things were time could have been spend more efficient. At least i learned a lot of things during the process and got more familiar with the library.


So now we knew we wanted to make bubbles, we had to make some 360 panaromas.

Using the google street view app to create the sphere panoramas

Just to find out later that the bubble shader we used depended on a cubemap...

I don't know how to write shaders so we had to convert our beautiful sphere projections into cubes. This was the biggest frustration for me during the project.


Now we had most of the technical stuff working. Time to pick some works to put inside of the bubbles. This was actually a lot harder then we thought... This was probably the trickiest part of the project because there were a lot of loose ends but were had to make a step towards finding something more coherent or some underlying theme. This is where it really helped to have the feedback sessions with the teachers. We had to zoom out a little bit and just try to match some things together with the bubble environment. Our theme (which wasn't even clear to ourselves) was really limiting our vision.

Making steps on this part was good for the motivation because it was clearer where the project was going to go . Now we had focus we could organise and finish up the last things for the presentation.