Jeux de navigateur : comment nous avons créé Relic Hunter avec Three.js et des images d’IA

Je voulais que Relic Hunter : L’effondrement du temple ressemble à un vrai temple, pas à une approximation de jeu vidéo. Les images d’IA avaient de la pierre sculptée, la lumière chaude des torches et de profondes ombres. Ma première version Three.js, elle, avait des boîtes recouvertes d’une texture brune qui se répète.

Voici comment j’ai comblé cet écart et transformé un couloir généré par IA en labyrinthe explorable. Relic Hunter est un jeu de navigateur gratuit qui tourne sur ordinateur et sur mobile, sans rien télécharger ni installer. Derrière ce simple lien se cachent un système de projection, un shader sur mesure et une série de compromis pratiques construits autour d’une question : comment faire charger vite un jeu 3D cinématographique dans un navigateur web ?

Pourquoi créer un jeu 3D pour le navigateur ?

Le grand avantage des jeux de navigateur, c’est l’accès. Un joueur suit un lien et commence aussitôt. Pas d’installateur, de page d’app store ni de compte entre la curiosité et la première partie. Les jeux de navigateur gratuits sont donc faciles à découvrir, à tester et à partager.

La contrainte, c’est que chaque modèle, texture et animation en plus rallonge l’attente avant de jouer. Relic Hunter avait donc besoin d’un système visuel capable de réutiliser peu de ressources sur six niveaux, sans que chaque couloir ait l’air d’un copier-coller.

Le jeu qui se cache sous l’expérience visuelle

Relic Hunter n’est pas un long couloir droit peint pour ressembler à un labyrinthe. Chacune de ses six épreuves repose sur un labyrinthe généré, avec des intersections, des itinéraires alternatifs et de vraies impasses. Avant la course, tu as quelques secondes pour étudier la carte. Quand le chrono démarre, tu dois retenir le chemin, tourner du bon côté à chaque intersection et continuer d’avancer.

C’est à la fois un jeu de course en labyrinthe, un défi de mémoire et une évasion de temple. Un mauvais virage coûte bien plus que quelques pas : il faut faire demi-tour pendant que le chrono de l’effondrement continue de tourner. Tu peux garder M enfoncé pour revoir la carte, mais la lire en courant te met sous pression.

Trois vies partagées te suivent pendant toute la campagne. Les dangers arrivent un par un, puis commencent à se chevaucher : il faut se baisser sous les lames qui oscillent, sauter par-dessus les poutres tombées et les sols brisés, pendant que des têtes de lion sculptées crachent du feu en travers du chemin. À la cinquième épreuve, Mira ou Vikram s’empare enfin de la Syamantaka, la gemme-soleil de Surya. La sixième est l’évasion, avec le temple qui s’écroule derrière toi.

Pourquoi les textures 3D ordinaires faisaient faux

La direction visuelle est partie d’images générées par IA : des couloirs de pierre sculptée, la lumière chaude des torches et de profondes ombres. En image fixe, c’était convaincant. La première version jouable, non. Répéter la pierre comme une texture ordinaire donnait une boîte en carrelage et faisait perdre l’élément le plus important de l’image d’origine : son éclairage.

Une photo paraît réelle en grande partie grâce à la lumière : l’ombre douce là où le mur rejoint le sol, la lueur autour d’une torche et l’obscurité au fond d’une salle. Une texture répétable est volontairement aplatie pour se juxtaposer sans raccord visible. En retirant l’éclairage pour que l’image se répète, j’avais aussi retiré ce qui la rendait réelle.

Tour Into the Picture : projeter l’image sur de la 3D

La solution est venue d’une technique d’infographie appelée Tour Into the Picture, ou TIP. Imagine que l’image d’origine ait été prise par un vrai appareil. Je place une caméra virtuelle au point correspondant dans la scène Three.js, je lui donne une vue équivalente et je projette l’image sur une géométrie simple de sol, de murs et de plafond, comme avec un projecteur de diapositives.

Près de ce point de vue, le couloir garde les ombres, la lueur et la profondeur de l’image d’origine tout en se comportant comme un espace dans lequel le joueur peut se déplacer. Dans le shader, chaque point d’une surface se demande où il atterrit dans l’image du projecteur et en prélève la couleur. Le premier prototype réussi donnait l’impression de marcher dans un tableau.

Les cinq problèmes apparus quand le joueur bougeait

1. Étirement : plus le joueur s’éloignait du projecteur, plus l’image se déformait.
2. Trous : les ouvertures latérales et les surfaces lointaines hors du champ de la caméra d’origine n’avaient aucun détail projeté.
3. Scintillement : changer le sens de projection aux intersections faisait sauter ou vibrer les murs.
4. Traînée de mouvement : un seul pixel d’origine pouvait s’étirer sur de nombreux pixels d’écran sur les sols et les murs latéraux.
5. Lumière incrustée : l’image projetée contenait déjà de la lumière, donc les torches ordinaires en temps réel ne pouvaient pas simplement la rééclairer.

Ces problèmes passaient facilement inaperçus sur des captures d’écran et devenaient impossibles à ignorer en courant. Cela a changé ma façon d’évaluer les graphismes : chaque amélioration devait tenir pendant le mouvement, les virages et les retours en arrière, pas seulement sur une image fixe bien choisie.

Le système hybride qui est sorti

Au lieu d’un seul projecteur pour une longue salle, le jeu éparpille des projecteurs le long de chaque couloir ouvert, dans les deux sens. À chaque image, il sélectionne les projecteurs proches orientés comme le joueur et en mélange un nombre limité. Le joueur n’est jamais assez loin d’une source utile pour que l’image se dégrade en un flou étiré.

Les points d’architecture délicats utilisent de la vraie géométrie. Les murs du fond reçoivent des panneaux sculptés pour qu’on n’ait pas l’impression que le couloir continue à l’infini. Les ouvertures latérales utilisent des panneaux d’arche avec de vrais trous, ce qui rend chaque virage lisible. Les surfaces hors de la meilleure projection retombent sur de la pierre plutôt que sur du noir.

Le shader final est un hybride. Il mesure, pixel par pixel, à quel point la photo projetée est étirée. Les parties nettes gardent la photo. Les surfaces raides et étirées se mélangent à un carreau de pierre net. Ce carreau emprunte à la photo un éclairage flouté. L’image d’IA décide toujours des endroits chauds ou sombres du couloir ; le carreau restitue le détail fin pendant le mouvement. Le filtrage anisotrope et les mipmaps affinent les derniers échantillons vus sous un angle raide.

Garder les personnages et les pièges à part

Le couloir est la scène. Mira, Vikram, les lames oscillantes, les têtes de lion cracheuses de feu, les poutres tombées et les sols brisés sont des couches interactives distinctes. Tout ce que le joueur peut toucher, esquiver ou regarder s’animer a besoin de son propre objet : incruster un danger dans l’image du couloir rend l’interaction plate.

Les éléments animés suivent une chaîne séparée : des images fixes nettes réalisées avec ChatGPT, de courts clips animés avec Grok, puis un détourage du fond vert avant de les placer dans la scène Three.js. Séparer le monde et ses parties mobiles a facilité leur réglage à tous les deux.

Ce que cette approche change pour les jeux de navigateur web

Les jeux de navigateur web d’aujourd’hui peuvent offrir de la 3D en temps réel, des shaders sur mesure, de l’animation, du son et des commandes réactives dans une simple page. Relic Hunter y arrive avec une image principale de couloir, un panneau d’arche et un petit lot de textures de pierre, plutôt qu’une lourde bibliothèque d’environnements 3D détaillés.

Le résultat est un jeu Three.js compact, dont les couloirs gardent l’ambiance des illustrations d’IA pendant que le joueur court, tourne et revient sur ses pas. Cette économie de ressources compte pour les jeux sans téléchargement : des fichiers plus légers raccourcissent le temps entre l’ouverture de la page et le début de la partie.

Comment jouer à Relic Hunter en ligne

1. Ouvre Relic Hunter : L’effondrement du temple dans ton navigateur.
2. Choisis Mira ou Vikram comme chasseur de reliques.
3. Étudie la carte avant le début de chaque épreuve.
4. Tourne aux intersections, saute ou baisse-toi devant les pièges, et atteins la sortie avant la fin du temps.
5. Prends la gemme Syamantaka et échappe-toi de l’effondrement final.

Si tu cherches un jeu de navigateur 3D gratuit, une course rapide dans un labyrinthe de temple ou l’un de ces jeux de navigateur gratuits en ligne auxquels on joue sans compte, lance une partie et vois si tu peux ramener la gemme-soleil à la lumière du jour.

Joue à Relic Hunter maintenant. C’est gratuit, en ligne et sans téléchargement. · Découvre d’autres jeux en ligne · Lis l’article sur les jeux gratuits sans téléchargement.