Le site web  d'un studio en 3D image

Le site web d'un studio en 3D Le design web n'est pas systématiquement en 2D : Hybrid Forest utilise Cinema 4D et WebGL pour créer un paysage 3D très graphique pour son propre site web !

Le studio de création suédois Hybrid Forest, basé à Stockholm, est un spécialiste de la production de mondes VR et de vidéos 360°. Il traite des sujets d'actualité qui permettent à la jeune équipe de profiter de non seulement de possibilités de conception infinies mais aussi d’une très grande liberté créative.

Pour tester les méthodes les plus récentes à la base de l’affichage graphique 3D dans les navigateurs Web, l'équipe a expérimenté la technologie WebGL. Encore à ses balbutiements, l’affichage WebGL utilise la puissance de la carte graphique pour assurer l’affichage de contenus 3D via les navigateurs Web. Les utilisateurs n'ont ainsi plus besoin de plug-ins de navigation supplémentaires.

Hybrid Forest avait besoin d'un site Web novateur reflétant fidèlement son domaine de spécialisation, l'équipe a tout naturellement utilisé les résultats de ses expériences WebGL comme matière première pour créer son site Web officiel.

Pour mener à bien l’élaboration du design, l'équipe de Hybrid Forest a utilisé la nature proprement idyllique de la Suède ainsi que la fascination partagée par toute l'équipe pour la 3D : le site montre une vue à 360 ° d'un paysage pittoresque avec un lac entouré de montagnes et une maison suédoise typique en bois aux confins d’une forêt. Si vous regardez de plus près, vous verrez même un ours animé.

La scène entière et tous les éléments qui s'y trouvent ont été modelés par l'artiste 3D Ashley Reed en utilisant Cinema 4D. Il a fait en sorte de garder le nombre de polygones aussi bas que possible pour créer un look stylisé low-poly tout en optimisant les performances globales de la scène pour une utilisation finale sur des appareils éventuellement moins puissants. L'outil Polygon Pen s’est avéré être un outil important pour une création rapide et facile de géométries 3D. L'outil de réduction de polygones a également été utilisé pour réduire la complexité et trianguler la géométrie des montagnes. Ces dernières ont été créées à l'aide de la fonction Sculpt. Cette étape a également permis d’éviter les problèmes pouvant survenir si on utilise des ressources non triangulées avec WebGL. En supprimant la propriété Phong, Ashley a pu accentuer l'aspect low-poly parce que les polygones n'étaient plus arrondis par un ombrage type soft-surface.

Grâce à la facilité d'utilisation de Cinema 4D, l'équipe a pu se concentrer entièrement sur l'expression de sa créativité artistique: «Cinema 4D s’est avéré être l'outil quasi parfait dans le sens où il m’a permis de créer une symbiose très étroite entre la personne en charge de la modélisation et moi, le programmeur» explique Daniel Mayor, développeur de moteurs de jeux et de sites Web chez Hybrid Forest.

Un défi particulièrement ardu a été sans conteste l'intégration des contenus créés dans Cinema 4D en WebGL sur le site Web. Ils ont d'abord été exportés en tant que fichiers OBJ à partir de Cinema 4D et un outil spécial a alors été utilisé pour les enregistrer en tant que fichiers JSON. Ces fichiers contiennent du texte lisible pour les applications Web et peuvent être intégrés au site Web à l'aide de la bibliothèque JavaScript Three.js.

Lorsque la scène a finalement été lancée dans le navigateur sous WebGL, l'équipe du faire face aux limites imposées par la technologie, ce qui a empêché notamment la projection d'ombres réalistes via le navigateur. C'est pourquoi ils ont alors décidé de totalement désactiver les ombres de la scène. Par pure coïncidence, la lumière en combinaison avec la résolution optique low-poly de la scène générait des ombres qui donnaient l'impression d'ombres portées. Ils ont ajouté un Easter Egg (oeuf de Pâques) en faisant varier la position du soleil en fonction de l'heure définie sur l'ordinateur de l'utilisateur. Les visiteurs du site peuvent également modifier la position du soleil en utilisant une interface spécifique et basculer également entre éclairages de jour ou de nuit.

Le lancement de ce site web extrêmement novateur a été un succès complet pour l'équipe de Hybrid Forest: le projet a été présenté comme une source d’inspiration pour tous les designers et a été nominé pour un prix de design à AWWWARDS.

Hybrid Forest a été vraiment très impressionné par Cinema 4D et un nombre croissant d'employés de la société utilise le logiciel. L'équipe organise régulièrement des ateliers Cinema 4D. L'artiste 3D Ashley Reed est un grand fan, notamment de la facilité d'utilisation de Cinema 4D: "Travailler avec Cinema 4D est incroyablement amusant, car cela me permet de me concentrer entièrement sur la concrétisation et la réalisation effective de mes idées."


Author

Sebastian BeckerOnline Editor & Content Manager, Maxon