Vous vous souvenez de la première fois que vous avez lancé Half-Life 2 et que vous avez attrapé une caisse avec le gravity gun ? Eh bien un lycéen qui se fait appeler slqnt vient de remettre tout ça dans votre navigateur, gratuitement, sans avoir à installer Steam ni à télécharger le moindre gros paquet. Ça se passe sur hl2.slqnt.dev , c'est en ligne depuis hier, et le jeu tourne tout en fluidité, largement au-dessus des 60 images par seconde directement sous Chrome.

Sur mobile par contre, il vous faudra un clavier branché parce que les contrôles tactiles sont quasi inexistants pour l'instant, mais sur un PC, vous lancez la page et vous voilà à Black Mesa East.

Maintenant, le plus intéressant c'est comment il s'y est pris, parce que porter un jeu bâti sur le moteur Source de Valve (le même que celui de 2004, successeur de GoldSrc) dans un onglet, ça ne se fait pas en claquant des doigts.

Et slqnt n'est pas parti de zéro puisque c'est un copain qui lui a montré un portage de Portal fait par un autre dev nommé weliveinhell. Ce projet open source était d'ailleurs lui-même un fork de nillerusr/source-engine , c'est-à-dire une version modifiée de la fuite du code du moteur Source de Team Fortress 2 qui a circulé en 2020. Voilà pour la base du truc qui n'est ni plus ni moins que le moteur leaké patiemment retapé par la communauté.

L'astuce de ce portage tient dans un mode de rendu appelé ToGLES. En gros le moteur sait parler OpenGLES, le truc qu'on utilise d'habitude pour les applis Android, sauf qu'Emscripten sait traduire ces appels en WebGL2 dans le navigateur. Résultat, slqnt n'a eu quasiment aucun travail à faire côté affichage, le plus dur étant déjà fait.

Le casse-tête par contre, ça a été d'abord les assets, parce que cette version du moteur date d'avant la réédition anniversaire de HL2 et ne supportait pas ses fichiers. Il a donc fallu basculer sur la branche steam_legacy de Steam, puis dépaqueter tous les VPK du jeu et les redécouper en fichiers .data, un par carte, pour que le navigateur les charge au fur et à mesure.

Et puis il y a eu les animations faciales. C'était l'une des grandes fiertés techniques de HL2 à sa sortie, la façon dont les visages bougeaient en parlant. Sauf que ça faisait tellement planter le portage que slqnt a fini par désactiver complètement le système pour avoir quelque chose de stable.

Du coup le G-Man vous fait son monologue d'intro avec un visage figé, mais au moins ça tourne. Le reste de son journal de bord est également une jolie liste de galères de bidouilleur, vu de l'intérieur avec au hasard, les sauvegardes à recâbler sur le système de fichiers d'Emscripten, les batteries et medkits qui ne fonctionnaient pas, le gravity gun qu'Alyx vous tend mais qui n'arrivait jamais dans l'inventaire, les PNJ qui s'effondraient et mouraient au hasard, les headcrabs qui ne faisaient aucun dégât, l'eau toute noire et j'en passe...

Petit détail qui parle à quiconque a déjà bidouillé un jeu, il a dû remapper l'accroupissement sur la touche C, parce que CTRL déclenchait des raccourcis du navigateur qui pourrissent la partie.

Reste maintenant la question que tout le monde se pose : Est-ce que Valve est au courant ? Parce qu'un portage qui repose sur du code moteur leaké et sur les assets du jeu, légalement, c'est une zone grise bien grise qui tire vers le noir.

Valve a toujours été plutôt cool avec sa communauté de moddeurs, mais ça pourrait disparaître du jour au lendemain. Après si l'idée d'un jeu Source qui tourne dans un onglet vous fait marrer, c'est exactement le même esprit que ce Portal 2 transformé en serveur web , ou que ce Doom qui tourne avec juste du CSS . Mettre les vieux FPS dans le navigateur, c'est presque devenu un sport, je vous en parlais déjà avec Wolfenstein 3D .

Bref, foncez essayer tant que c'est en ligne. Et si vous y arrivez sur mobile sans clavier, écrivez vite un bouquin pour raconter comment vous avez fait !

Source

Flash à sa grande époque c'était quand même tout un truc, mais est-ce que vous vous souvenez de Shockwave ? Le grand frère de Flash (techniquement c'était une autre techno bâtie sur Director mais bref...), qui était capable de faire tourner des trucs bien plus complexes que les vieux .swf ?

Et ben l'équipe derrière DirPlayer s'est tapé tout le reverse-engineering du moteur Director from scratch pour le ressusciter grâce à Rust et le rendre à nouveau fonctionnel dans nos navigateurs modernes !

Faut savoir qu'Adobe a débranché Shockwave Player en avril 2019 et Flash un peu plus tard, et avec eux c'est un pan entier du web rétro qui s'est retrouvé inaccessible du jour au lendemain. Du genre tous ces jeux qui tournaient sur Shockwave.com ou les vieux portails de mini-jeux des années 2000, paf, d'un coup plus moyen d'y rejouer.

Alors heureusement, pour Flash, y'a déjà Ruffle qui fait tourner les bons vieux .swf. Hé bien ici c'est le même principe avec DirPlayer pour les .dcr Shockwave.

L'outil se décline sous 3 formes. D'abord une extension Chrome qui détecte automatiquement les balises Shockwave qui traînent encore sur les vieux sites web, ce qui peut être sympa pour redécouvrir des sites des années 2000.

Y'a aussi une version standalone construite avec Electron qui embarque carrément un debugger Lingo (le langage de scripting de Director, super pratique si vous voulez bidouiller du contenu existant). Et enfin un polyfill JS auto-contenu qui réécrit les et directement sur votre site web.

Perso, pour vous faire une idée, je vous invite surtout à jeter un oeil à la démo web pour tester rapidement parce qu'il n'y a rien à installer. Mais dès que vous voudrez analyser ou debugger un vieux jeu en profondeur, faudra plutôt opter pour la version standalone.

Notez que DirPlayer utilise Ruffle en submodule Git donc les 2 projets sont liés et bonus côté sécurité, le tout tourne en WebAssembly avec le sandboxing du navigateur, donc y'aura plus toutes ces failles qu'on pouvait retrouver à l'époque sur l'ancien plugin Shockwave Player.

Pour les sites qui hébergent encore des applis ou des jeux Shockwave (genre archive.org, avec des musées interactifs ou des jeux des années 2000), c'est une nouvelle corde à leur arc. Et si vous avez de vieux .dcr planqués sur un disque dur, la démo web devrait pouvoir les avaler aussi (faudra tester quoi...).

Bref, grâce à Ruffle pour Flash et DirPlayer pour Shockwave, le web des années 90-2000 n'est pas encore tout à fait mort ! Un peu comme moi finalement ^^

Si vous êtes comme moi, que vous êtes parent et que vous pensez que le contrôle parental de votre box internet protège Junior des méchants sites du web, hé bien j’ai une mauvaise nouvelle. Car pendant que vous réglez minutieusement vos filtres, des ados développent des proxys web tellement sophistiqués que même les admins réseau en sueur n’arrivent plus à suivre.

Prenez Scramjet par exemple… c’est le dernier né de cette course à l’armement, et c’est vraiment bien fichu. Développé par Toshit pendant le Hack Club Summer of Making , Scramjet n’est pas juste un énième proxy pour regarder YouTube en cours de maths. Non non, c’est un véritable système d’interception basé sur JavaScript et WebAssembly qui réécrit le code des sites web à la volée.

Cela signifie que le proxy intercepte littéralement le JavaScript des sites, le modifie en temps réel pour contourner les restrictions, puis vous le sert tout chaud sans blocage. Techniquement, c’est brillant, je trouve.

Scramjet est en réalité le successeur officiel d’ Ultraviolet , un autre proxy que vous avez peut-être croisé si vous traînez dans les forums étudiants, mais celui-ci est désormais considéré comme obsolète. Pour sa part, Scramjet est encore maintenu, beaucoup plus moderne et surtout, son architecture est plus robuste. Il fonctionne déjà avec Google, YouTube, Discord, Reddit et quelques autres site. je l’ai testé avec mon site, ça passe aussi, même si c’est pas encore parfait. En tout cas, ça progresse vite.

Au temps jadis, où j’étais encore étudiant, on utilisait des proxys tout moisis qui affichaient les sites sans style et plantaient à la moindre iframe. Et aujourd’hui, des gamins développent des outils en WebAssembly et utilisent des Service Workers. MercuryWorkshop , le collectif derrière Scramjet, a en tout cas créé un outil technique impressionnant qui rivalise même avec certaines solutions commerciales.

Alors comment ça marche ?

Et bien au lieu de simplement faire du proxy classique (je demande la page pour toi et je te la renvoie), Scramjet intercepte TOUT. Les requêtes JavaScript, les WebSockets, les workers, même les tentatives de détection de proxy. Le code source montre qu’ils utilisent Rust pour compiler en WebAssembly les parties critiques, ce qui donne une performance de furieux. Tout se passe via un mini-navigateur dans votre navigateur qui traduit tout en temps réel pour éviter la détection.

L’installation est ridiculement simple comparée à Ultraviolet. Un pnpm install, un pnpm build, et hop, vous avez votre proxy qui tourne en local. Les développeurs ont même pensé aux noobs avec une UI basique pour tester. Bon, elle est moche, mais c’est pas le but. Le but c’est de bypasser les restrictions, pas de gagner un prix de design. Vous pouvez tester la démo ici !

On a donc des écoles et des entreprises qui dépensent des fortunes en solutions de filtrage web telles que Fortinet, Sophos, tous ces gros machins qui coûtent un bras et promettent de “protéger” les utilisateurs. Et en face, on a des ados brillants qui développent des contre-mesures en quelques mois pendant leurs vacances d’été. C’est beau !

Surtout que ce genre d’outil peut également servir dans des pays où l’information est vraiment censurée.

Bref, Scramjet c’est un super outil, open source, documenté, et accessible à tous et si vous voulez tester (pour la science, évidemment), le code est sur GitHub . Mais attention, l’utiliser pour contourner les règles de votre école ou entreprise, c’est à vos risques et périls.

Moi je vous ai rien dit, je fais juste de la veille tech…

Merci à Lilian pour le partage !