Designing a Virtual Environment in Spoke and Blender-Render-Fender-Benders
For my “Social VR” course at NYU, this week we were required to design a simple environment using Mozilla’s web-based 3D scene builder. Overall, it think it’s a pretty handy tool for how much accessibility it affords, and the integration with various asset sources makes it fairly simple to pick up!
When thinking of an environment to get started on, as a big fan of Tabletop RPG’s the now-trite beginning of many a years of play has usually begun with some variation on “So all of your characters meet in this Tavern…”, and I thought, why not start this ‘Adventure’ in one! To avoid burying the lede, here’s a snippet of what I was able to dream up:
You can practically hear the farmer who’s having a Giant Rat problem already…
The fun part of this, however, isn’t in the finished product but rather in what would be my first foray into learning Blender, and grabbing assets from SketchFab that weren’t quite right. Firstly, I need to properly credit the artist François Espagnet for his wonderfully stylish assets.
However, when I first went to import those nice windowed-wall sections, there seemed to be a glaring error in the context of my cozy nighttime scene:
Something doesn’t exactly scream “nighttime” here
So I figured “This is a great time to learn about how to change materials in a 3d modelling software. Or maybe it’s textures. I don’t quite know the name yet.” and opened up the asset to try and figure out what I was doing.
After some great “How to make glass materials in Blender” tutorials (so it was materials), my object looked great in the Render Preview screen, wait, viewport, I exported it and dragged it into Spoke, only to find my beautifully transparent windows now part of a colorless gray slab. And after a few hours, I was able to figure it out, with beautiful transparency. Mission Accomplished.
A little Dark, but voila! It works!
As for the Technical How, let’s talk details for those interested.
So in order make exporting / rendering / uploading one smooth process, one of the increasingly-adapted formats is that of the GL Transmission Format (glTF) and it’s binary partner, (GLB). Developed by The Khronos Group, the encode all of the relevant object info in a neat little .JSON package, capable of storing textures, geometry, animation and more, which is incredible.
That being said, the Blender-Render(er) isn’t entirely perfect and hasn’t caught up entirely to the featureset that Blender itself provides. While most of the aforementioned tutorials recommended using a Principled BSDF shader node and tweaking the Transmission all the way up and tweaking other stuff to taste, the current Blender Exporter breaks with certain parameters, one being 'Specularity’. After considerable time, ~40 export attempts, and some forum digging, I found the way to get some sloppy transparency working. Instructions as follows:
It’s not quite as beautiful as a great '‘glass’ material, but it gets the job done and let’s light through! There you have it. I’m looking forward to learning how to do it all properly, but for now I’m glad I got it done