Project 3: A-Frame Environment Screenshots from my created environment, full experience available below. Click here to explore the environment. Use 'WASD' keys to move around and drag right mouse button to turn head. Turn on sound for full experience. Click here to view the code. As an extension of Project 2: Build-A-Beast, I used A-Frame, an HTML-based framework, to create an environment for the organisms I previously made. The different presets and components available through A-Frame provided a solid foundation for the ground and sky, and I was able to make adjustments to color and lighting. Previously made models were added in, including two lizards, a toad, and a fungus toad from Project 2; and I created additional cloud models to fill out the sky and duplicated a tree model found online.
As seen in the code below, the primary environment preset used was 'Yavapai', and I added hills for more terrain. Initially the hills were far away, so I reduced the size of the play area to push them closer in. Additionally, I made the ground a calming green and added small mushrooms to speckle the landscape with more color and texture. I made the sky a dark purple but then lightened it to brighten the entire environment. To give a misty feel, I raised the level of fog and considered adding a particle system to simulate rain. Unfortunately, the particle system would not work because the fog preset messed with the particles, so I just included fog. A screenshot of the code used for the environment preset. After establishing the base environment, I added in the different models. I placed the models of the organisms according to where they could be found: the lizards on high areas, and the toad and fungus on or buried in the ground. Then, multiple clouds and trees were added in at various dimensions and sizes to seem a bit more realistic. The trees took the most time to place because of their sheer number, and I tried to scatter them to appear natural in the midground and background of the scene. By refering to an additional script, the models with animation were able to move: the lizards, toad, and clouds. Unexpectedly, the models looked dark in A-Frame compared to the gltf viewer because of lighting. For the future, I need to consider giving them spotlight or ambient light in A-Frame, and I want to try out lighting on individual models and the general environment, such as a warm yellow light similar to my brainstorm. Comparison of the same model in A-Frame (left) versus a gltf viewer (right). Since I didn't have time to model trees, I used a model found online and adusted the colors darker to my preference. Despite not being coniferous trees as I initially planned, I liked how they filled the landscape. I used the same model adjusted them to different dimensions and heights to make the environment more natural. The trees took the most time to set up because they were individually placed, which took up so much time. While they're not as tall or populated as originally intended, they still look fine. Lastly, I added some sound: croaking for the toad and general woodland background noises. The croaking for the toad is an edited version of a wooden toad instrument so it has a deeper tone, and it was attached to the toad model. The background noises were attached to fungus but adjusted so you could hear it hear in a larger area. A comparison of the initial moodboard versus the final result. While the A-Frame environment is simpler than expected, it provides a well-established play area to explore and add models to. The different tones of green fit the environment well, and the lighter colors used for the sky and ground work well with the darker models because their saturation doesn't clashing with the models. While the toad does stand out, it doesn't feel out of place because the dark trunks of the trees balance out the landscape.
0 Comments
For this project, I wanted to create a realistic setting to match the appearance of my blender models. I needed an ecosystem that would be appropriate for toads, pitcher plants, small lizards, and fungi, so the first thing that came to mind was a temperate rainforest, similar to Washington's Olympic National Park. There needed to be moisture in the air, soft terrain, tall trees, and shady spaces. Then I thought of a slightly mountainous terrain, so I pictured sloping mulch and tall conifers, which would create places for the toad to nestle in and the lizard to crawl around. I wanted the area to feel damp and cool, so I expect the environment to be slightly more purple with dusk or evening colors. However, I don't want the environment to be so dark it feels like night. A moodboard of what I want the environment to be like. |
Archives
May 2022
Categories
All
|