Unlocking the Potential of Green Energy: A Journey into 3D Web Landscapes
To further develop my passion and skills for 3D in web landscapes, I have been working on a 3D landscape for a fictional energy provider over the last weeks.
In this blog post I will take you behind the scenes, showcasing the simplicity with which such advanced visual storytelling can be woven into the fabric of modern web design. I will show you the steps, tools and creative vision that made this 3D journey possible.
1. Defining the Purpose
The purpose of any creative project sets the stage for everything that follows. In our case, I aimed to tell a compelling visual story about green energy and technology. To achieve this, I had to consider how best to convey these themes through the medium of 3D art. This stage involved defining the key elements, mood, and message I wanted to communicate to the audience.
2. Sketching the Vision
After defining my main theme for the project, sketching in Blender was my initial step in bringing the vision to life. This stage allowed me to experiment with different layouts, compositions, and camera angles in an easier way. I tested various visual ideas and arrangements until I found one that resonated with our project’s essence and effectively conveyed the message of green energy and technology. Also in this phase it’s a good idea to start testing some lights setup and colors, to feel how the scene will look, not just in terms of composition.
3. Modeling the Future
After defining how the scene should look, it’s time to create the models that will be used. And to achieve good performance, creating low-poly models was pivotal for optimizing our 3D assets. Because optimizing 3D assets is crucial for web-based projects to ensure fast and smooth loading on a wide range of devices.
This phase involved meticulous work, including reducing the number of polygons, optimizing vertex colors, and simplifying complex models while preserving visual fidelity. It’s all about achieving the delicate balance between aesthetics and performance. Also, using the ‘glb format’ for the 3D objects is the best approach when it comes to 3D for the web.
4. Composition and Elements
Once the models were ready, the next step was to compose the scene. This phase is similar to arranging the elements of a painting or a photograph to create a harmonious and visually appealing whole.
The careful arrangement of 3D models, textures, and lighting is crucial to evoke the desired emotions and effectively convey the intended message. As I have already created a composition in Blender, I can test different locations for each model at this stage, and try to find the most appealing visual.
5. Bridging the Gap: Code Integration
The transition from the artistic vision to code is a critical part of the process. Here, I used three.js with react three fiber abstractions to streamline the process. When exporting models using Blender and glb files, I was able to easily to convert them into code using the ‘gltfjsx library’.
This library allows to convert glb files to tsx files, giving more control over each 3D model. After the models have been converted, it’s time to integrate them into the 3D scene. It’s important to note that optimization techniques, such as using instances for the models that appear more than once in the scene, have been used to ensure smooth performance, especially when dealing with numerous 3D elements.
6. Illuminating the Scene
Creating realistic lighting and shadows adds depth and dimension to the 3D scene. In this project, I used directional light, ambient light, hemisphere light, and an environment map to enhance the scene’s lighting. This stage is all about crafting the right atmosphere and mood to immerse the audience in the world we have created.
It is important to mention that shadows require significant computational resources to render in a scene, so it is advisable to try different configurations to achieve the best performance and a beautiful look.
Now that all the models are placed and the light and shadows are finished, we can start to add more depth and other elements that could make the scene look more real.
In real life, the line on the horizon always seems to have some kind of fog, so let’s add some fog here to make the scene more realistic.
7. Adding Depth and Interaction
Interactivity is created through the strategic placement of hotspots and camera transitions. This step made it possible to go beyond a static 3D scene and engage the audience by providing information about green energy. The camera control component from the @react-three/drei library played a significant role in achieving smooth transitions and user-friendly interaction.
As I progressed with building my 3D scene, I wanted to introduce dynamic elements to make the scene feel more alive. We can see the wind turbines rotating and the cars in the road moving. These are small interactions that the user doesn’t directly interact with, but they bring the scene to life. Some types of animations can be a little bit more challenging to code, for example the animation of the cars on the road.
The road is not linear, but has some curves. To realize this animation, I employed a Catmull-Rom spline curve provided by Three.js, specifically the CatmullCurve3 class.
A Catmull-Rom spline is a mathematical curve that smoothly interpolates between a series of control points, creating a path for the car to follow. Here you can sees how I integrated this animation:
- Defining Control Points: First, I defined a series of control points that represent the path I want the car to follow. These control points helped to shape the curve and determine its trajectory.
- Creating the CatmullCurve3: Using the CatmullCurve3 class, I instantiated a curve object and passed in the control points as an array. This created a smooth spline curve that accurately represents the car’s path.
- Animating the Car: I then used the curve to animate the car’s movement. At each frame of the animation, I sampled the curve to determine the position and orientation of the car. This ensured that the car smoothly followed the path defined by the control points, creating a realistic and dynamic effect.
- Updating the Car’s Position: To keep the car moving along the curve, I updated its position in every frame of the animation. This was done by interpolating along the curve and adjusting the car’s position accordingly, as the rotation of the car was in front of the road.
By using the Catmull-Rom spline curve, I achieved a lifelike animation of the car moving along the road, enhancing the overall realism and interactivity of the 3D scene.
8. Polishing the Scene
Now that all the elements have been placed and optimized, and the lighting setup is ready, it’s time to put the finishing touches to the scene: the art of post-production. These effects, such as color correction and bloom, enhance the visual appeal and give the scene a cinematic quality. In addition, subtle animations such as the water shader breathe life into the environment and make it appear dynamic and realistic.
9. A Dark Twist
Exploring alternative perspectives, such as a dark scene, demonstrates the versatility of the project. By changing lighting and effect parameters, I transformed the ambiance and mood, demonstrating the adaptability of the 3D scene to convey different narratives or emotions.
In conclusion, this creative journey highlights the multi-dimensional nature of 3D art, combining technical expertise, artistic vision, and interactivity to effectively communicate complex ideas. Each phase of the project contributes to a holistic experience, from concept and planning to code integration, lighting, interactivity, and finishing touches.
The result is a visually stunning and engaging 3D scene that educates and captivates the audience with the power of green energy and technology.
