HTML5 - IKEA 3D Web catalog

Community Showcase Product & Visualization
1

Hi there,

While I’m not working at Tragnarion Studios anymore (just switched jobs :D) the last project I was the technical lead was a small HTML5 UE4 powered 3D web catalog. I’m not sure if there are many released HTML5 project suing UE4 out there apart from Epics demos. The app is only available in Ikeas Puerto Rico site, so accessing it might be slow if you are not there (it uses Amazons CloudFront, so it should be ok from every where).

Once you are at the landing page just choose one of the ‘Inspirations’, the ‘Eye’ icons are used to travel between ‘cameras’ and the ‘Magnifying Glass’ (if any) is used to go to a detailed view. If you hover over a product you will get a nice tool-tip and if you click a product you will be able to add it to the cart.

Hope you like it!

Cheers,
Moss

P.S. The web is missing some English localization I guess :smiley:

2

thanks for the info… its really impressive:D

3

Thanks! There is actually more art work than programming :smiley:

4

Cool! Good to see UE4 HTML5 slowly being used.

5

That looks really good!
Are those scenes actual 3d scenes or are they cube mapped renders?

6

They are cubed mapped from 3d Max using those awesome IKEA models that are used in the actual printed catalog.

7

Great to see some HTML5 projects. We’re planning on doing something similar at work.

8

This is awesome! Good job! :smiley:

9

Looks amazing!

I have a short question about cubemaps:
I am working on a project were I want to display some objects in a “showroom”.
I have never worked with cubemaps before, so I modelled my room in Blender and imported the fbx in UE. Unfortunately on HTML5 and iOS the scene looks not well anti-aliased, so now I want to try textures/cubemaps. I already read about the necessary setup of 6-faces-style cubemaps, the material setups, assigning the two-sided material to a sphere and so on.

However, my dds cubemap of six 1024x1024 images results in a 24MB file (which imho is rather large). Unfortunately the texture quality is not as good as I hoped but rather “blurry”. I am using ATI CubeMapGen which limits the output cube size o 1024. What image quality are you using to achieve that your scene is not really pixelated?

10

The trick was to actually not using a real cube map :smiley: They are just 6 images and I add them to each side, the images are in the texture UI group so the quality is just amazing. Another reason (apart from the cubemap size limit and resource trashing) of not using a real cube map is the transition effect, with a real cube map you would see the textures the same way at each location within the cube and the transition had to be done with a PostProcess effect, so having just a 6-faced cube the transition effect is just a matter of scaling the origin and destination cubes (one must contain the other), fading between them and moving you physical location from one to the other.

You should try to play around with the texture quality (texture groups, and all texture related settings) to achieve what fits best for you.

11

Thank you very much, my room now looks way better than before.

12

np :smiley: do you have some screenshots?

13

Hi Moss, I am working on a similar project and I would like to chat with you about this. How can I reach you?

14

oladimejitunde: did you get Moss contact? If you get

15

If you have it, please provide it. I need to chat with him as well :slight_smile:

16

The project has been recreated in another engine so I will close the thread. If you still have any questions about how the original one was done just send me a PM.