Bringing A Mysterious House Online

I’m a long time fan of DearestHershel, a Professor Layton fan meme channel. Watching the 2K subs special, I saw that Bob had used a 3D model of the room whilst creating the video. I wondered if I could convert that room into an online space – then I hit Bob up on Discord to ask for the assets. Here’s what I learned from two day project.

Creating scenes for the web is a pain. You have to reduce all the assets texture sizes and polygon counts, I did this using Blender.

Importing the OBJ’s taught me how to apply textures.

• Why would we use a 8MB texture for bookshelves?
• We can duplicate instances of the sofa so we don’t need double the mesh data
• I’ve reduced the size of the sofa texture in half, saved it as a jpeg, made it lighter
• I’m limiting image file sizes to 100kb, 1024 by 1024 and shifting the jpeg compression quality to 60%.

I prototyped early exports of material textures using the online three.js editor, as well as lighting effects.

• The curtains are super big – used the decimate function, mode planar, to reduce the triangle count down to 1700 (from 6500) without large drop in quality.
• Ok – exported object file looking super big at 16MB 🙁
• With default compression settings, 15MB
• Maybe everything could be scaled down? Less large floats to worry about?
• Chosing to export images as jpeg cut the file size down to 4.5MB! That’s like the size of a normal bloated webpage!

I imported the scene horribly overscaled into my original gallery website, then I started gutting out code.

• It is incredibly disorientating to see another mouse move across your webpage. Like seriously weird, even if it’s in a background video that’s projected onto a 3D scene.
• Adding lots of small details really fills out a scene.
• I can make textures reflective! Not sure that it will export to GLB though… it kinda did? lights reflect, but not the environment. It kinda looks like a mirror, maybe.
• Textures still look ok at 512 by 512, depends on size of file I guess.
• I reused the door texture for the table. It looks fine.

After messing with increasing light intensity, I then scaled the entire model down.

• This is good practice for playing with different material effects. GLB files have to use roughness and metallic effects, I can’t use specular.
• For minor details, don’t import image textures, just use materials.
• Metalic textures are awesome!
• Small props added, file size now 17MB – scalling the file down actually increased the size of the file by 5 kb. I’ve applied compression, not sure how this will effect how the model displays.

Plenty of bugs. This is a slap dash project, so this is slap dash documentation. Time doesn’t exist to a compiler.

• https://threejs.org/docs/#examples/en/loaders/DRACOLoader – Draco compression looks cool, giving it a go.
• And… I only saved a couple hundred kb in comparision to the compression offered by Blender. Ah well.

The final result! This site only works on Firefox, for some reason glitches occur on other people’s PC’s. Ah well, mission accomplished.

Check it out at https://jhancock532.github.io/cosy-room/