Gyroscope influenced typograpy and Substance Designer texture work

Posted on by mattg73

Spent the last few days finishing up a project that calls on some pretty diverse skills. The first task was integrating typography into a rotating cloud in THREE.js. I’d hoped to use a sprite sheet for loading efficiency but, surprisingly, THREE.js sprite sheet support is rudimentary to the point of being non-existent and there aren’t a lot of memory savings to be made so have resorted to good-old 26 individual character sprites. The next step involved trying to integrate the rotating cloud, to be controlled ultimately by phone gyroscope, into a reeeeally complex scene involving multiple post-compositing layers of several reflective and refractive concave surfaces one contained within the other. Having the typography animate behind and in front of these surfaces proved really tricky to get working satisfactorily but I’m almost there. Today has been a bit more relaxing with some environment map modelling and texturing work in Substance Designer.

Substance ramshackle wall texture

Project updates and dynamic shadow maps

Posted on by mattg73

Started updating the first of many projects today for inclusion in my upcoming reel. Initially I was intending to just re-enable some vertex shader code that didn’t make the cut for the project production release but that led to some camera tweening animation that led to the need for dynamically rendered shadow maps which proved tricky. THREE.js shadow map implementation is really straightforward unless you are transforming mesh vertices at runtime with a vertex shader. In such a scenario the shadow map remains static as it is based on the underlying mesh. Fortunately I chanced upon this blog post by Edan Kwan that highlighted the existence of customDepthMaterial, which, after a fair amount of jiggery-pokery, I managed to get working. Fairly pleased with the result and I think it was worth the extra effort.