Week of Mountains
Daily updates might be a little too much — jamming a few of these I wrote into a single email. Please bear with me while I figure this out.
2022-04-26
A light day for me. I made sure my data tools worked with the new “virtual” resorts (e.g. Madarao-Tangram) that I made. Sure enough, there were some bugs with my tools that assumed I always have predicted sizes for each mountain. These new mountains broke that assumption so I needed to both fix the code and also fix the data.
2022-04-27
Fixing some bugs with the renderer discovered when trying to render Hakkoda (by request).
I use lodash a lot to do simple three line things that I can’t be bothered writing. However, this time it bit me. I tried to use merge() thinking that it would merge two dictionaries together and concat the values if the keys were the same. It did something weird. So instead, I wrote the three lines that I should have written at the start.
I don’t know what lessons it taught me, but it taught me something.
2022-04-29
In Snow Map there are some resorts with missing elevation and area info. I am manually generating this now by looking at the mountain itself and measuring it.
I did a few of them manually but then realised I should probably automate this and replace all the numbers with real surveyed numbers (rather than relying on the resort to report it.) Resorts tend to exaggerate. A few resorts quote their area size as the largest, but when you look at where you can ride, it’s only a small proportion of it, because either they don’t operate the lifts or out-of-bounds for them.
It’ll be hard to automate this, as it’s not a simple lookup of the elevation of the mountain.
2022-04-30
Back to rendering mountains today.
I started debugging shadows in Three JS. I know that shadows are complicated in 3D, as it needs to figure out which parts are obscuring the light. There are a few default shadows that can be turned on in Three JS but none of them really look that good.
This is the best I could get using their highest fidelity setting and manual tuning, but the shadows look like a series of rectangles stacked together. I may need to get deeper into shaders to create my own nice shadows. For now, this will do.
2022-05-01
I started to draw lift lines and trees on to the mountain, so it looks more interesting and informative. My first pass is pretty amateurish, just drawing a line and some struts for the lift lines and then some very fake random trees on.
The line is drawn using Three JS’s ExtrudeGeometry since regular lines don’t have any thickness in WebGL. More accurately, I’m using TubeGeometry, which as the name suggests, makes a tube. The trees are drawn using cones on a grid, and the randomized a little within a tight grid.
I’m still trying to figure out shadows in the background, as you can see, it’s kind of a mess now that I’ve added trees. A friend suggested that I look at Ambient Occlusion. I seriously didn’t know what that was. After watching a few YouTube videos on how to do this in Blender, I figured out that it’s fake lighting/reflection on the edges of surfaces to make them look like real shadows. There are a few examples of SS Ambient Occlusion, but the examples all look pretty intense. Maybe I’ll go fix the shadows at the end. At least the side walls should have some ambient occlusion.
2022-05-02
I didn’t like the cone shaped trees I had, so I drew some in Blender and exported out as GLTF. GLTF is a common model exchange format that’s supported out of the box in Three JS. I don’t really know much about the other formats. My first attempt at loading the GTLF model didn’t seem to load the material. But when I inspected it more closely it seemed to load it with metallic at 100% causing it to render trees black. To make the trees visible, I had to make them larger than realistic. But if I make them more realistic sized and draw lots of trees, the scene grinds to a halt. I think I need to use a particle system instead to draw the trees.
Blender is so powerful that I wish I had some of their shader UI and material selection in Three JS, but maybe if I can get the materials to load properly in Three JS using the GLTFLoader, I’d get the best of both worlds.
I learn most of Blender through YouTube videos and a lot of the stuff I learn is super relevant to this whole rendering exercise.