Studio Website in 3D image

Studio Website in 3D Web design doesn't always have to be 2D: Hybrid Forest uses Cinema 4D and WebGL to create a picturesque 3D landscape for its own Website!

The Stockholm, Sweden-based creative studio Hybrid Forest is a specialist for the production of VR worlds and 360° videos and deals with highly topical subjects that offer the young team endless design possibilities and creative freedom.

To test state-of-the-art methods of displaying 3D graphics in web browsers, the team experimented with WebGL technology. Still in its infancy, WebGL graphics use the graphics card's power to render 3D graphics in Web browsers. Users don't need any extra browser plug-ins.

Since Hybrid Forest needed an innovative Website that properly reflects their field of specialization, the team used the results of their WebGL experiments and used them to create their official company website.

For the design, the team at Hybrid Forest used Sweden's idyllic nature and the team's own fascination for 3D as inspiration: the site shows a 360° view of a picturesque landscape with a lake surrounded by mountains and a typical Swedish wooden house at the edge of a forest. If you look closely enough you will even see an animated bear.

The entire scene and all assets in it were modeled by 3D artist Ashley Reed using Cinema 4D. He made sure to keep the number of polygons low to create a stylized low-poly look and also optimize the scene's performance for less powerful end user devices. The Polygon Pen tool was an important tool for the quick and easy creation of geometry. The Polygon Reduction tool was also used to reduce the complexity and triangulate the geometry of the mountains, which were created using the Sculpt feature. This step also prevented issues that can arise if non-triangulated assets are used in WebGL. By deleting the Phong tag, Ashley was able to accentuate the low-poly look because the polygons were no longer rounded by a soft surface shading.

Thanks to Cinema 4D's ease of use, the team was able to concentrate entirely on expressing their creativeness: "Cinema 4D was the perfect tool that allowed us to create a great symbiosis between the modeler and me, the programmer," explains Daniel Mayor, game engine and web developer at Hybrid Forest.

A particular challenge was integrating the assets created in Cinema 4D in WebGL on the Website. They were first exported as OBJs from Cinema 4D and a special tool was used to save them as JSON files. These files contain text that is readable for Web applications and can be integrated into the Website with the help of the Three.js JavaScript library.

When the scene was finally up and running in the browser with WebGL, the team experienced limitations to the technology, which prevented realistic shadow casting in the browser. This is why they then deactivated the shadows in the scene entirely. Coincidentally, the light in combination with the low-poly optics in the scene generated shading that gave the impression of cast shadows. They added an Easter Egg by making the position of the sun change according to the time set on the user's computer. Visitors to the site can also affect the position of the sun using an interface and switch between day and night lighting.

The launch of their very innovative Website was a complete success for the team at Hybrid Forest: The project was presented at an inspirational service for designers and was nominated for a design award at AWWWARDS.

Hybrid Forest was impressed by Cinema 4D and an increasing number of staff is using the software. The team also conducts Cinema 4D workshops on a regular basis. 3D artist Ashley Reed is a big fan of Cinema 4D's ease of use: "Working with Cinema 4D is incredibly fun because it lets me concentrate entirely on the realization of my ideas."


Author

Sebastian BeckerOnline Editor & Content Manager, Maxon