About Dream Demon

This project was inspired by the real art installation at Bombay Beach created by Melody Sample. During our 3 month residency at Mars College we visited that place multiple time. It is an abandoned house that decorated with wired, dry branches, drawings, notes and many other elements. It is truly interesting and unique experience to be there especially at night.

This Web experience started as my desire to explore material PBR workflow and play with Blender an Houdini modeling tool as well as Substance Painter. I started with modeling a chair and creating some texture for it. When I used Houdini Lab Tree Generator to quickly create branches that ended up looking quite similar to the one in the house.

I also created and textures a few other objects from the real scene such as disc hanging on the wall behind the chair.

Just to have a feel for the scene I decided to assemble it in Unreal Engine. Which ended up looking pretty cool with some PBR material and volumetric lighting.

At this point I showed my scene to Snay and she got a bit exited to spice it up with some shader magic and her new tentacle/wires effect coming from a chest of a girl that she has been building in Houdini.

After a few brain storming session we came up with a look for propagation effect and the scrolling interaction for the scene. I decided to make final scene assembly in Blender since it has superior compare to Houdini GLTF Exporter. It was great because I can easily create animation track for the camera and multiple animation clips for the rigged character and export it to ThreeJS.

It is annoyingly hard to export stuff from Blender since you need to go trough the process of selecting a target object and then going File > Export > GLTF... set your settings find output folder ugh... I ended up writing this script that save me a lot of manual labour. This also have a benefit of applying Draco mesh compression and KTX2 texture compression automatically. Blender and PBR workflow allows me to preview scene directly in the editor which after some tweaks look pretty close to the scene in the browser.

Entity Component System

It just happened that at the same time I was trying to find a better tool then A-Frame for managing ThreeJS scenes in a sane way. Not to say that A-Frame is a bad tool but it has it's own corks when you move beyond spinning cube that we spend many hours trying to find work around or optimize. Also I wanted to utilize amazing Type Script with the community written types for Three JS. However due to some high level shenanigans with import it was impossible to set up. Due to the same imports final build size was 1.5 MB larger as well.

So I was writing my own ECS library and this was the first project that we tested it on. Despite being quite thin layer on top of ThreeJS it allows us to organize the scene and separate logic for different effects as well as deal with asynchronous loading of asset in a straight forward way. You can check the code for entire project on github.

Wires

I am not sure how Melody made those cool wires but it was definitely tricky to make and I spend a day playing with Houdini Vellum solver and some custom VEX code. The effect was base on Entagma sticky wires tutorial which I can not find anymore. I made an HDA from it so you can check it out here.

The base structure for Vellum simulation was made in a loop that connects nearest point of the arc to house support beams in random fashion.

Shaders

!!Snay write here!!