Aller au contenu

OVERLAY spacecat

Portfolio – overlay spacecat

Présentation de l’overlay

Il s’agit de mon overlay principal et c’est celui sur lequel je me suis le plus penché en premier. Il s’inspire largement de mon visuel habituel sur les réseaux avec quelques ajouts d’effets de science-fiction cheap : effet CRT, écrans arrondis, textes brillants etc…

Globalement, je voulais que l’overlay soit flexible pour plusieurs usages : des enregistrements de podcasts en live, des sessions de jeux, des déclinaisons avec ou sans caméra (car je ne montre pas beaucoup ma tête sur internet).

Il y a eu énormément de changements et de modifications au fil des mois, voici donc en bonus une petite comparaison avec la V1.

Modified
Original

Gestion des transitions

On retrouve sur cet overlay deux types de transitions entre les scènes. D’un côté un stinger vidéo et de l’autre des mouvements de translation/glissement de sources.

La première transition est un stinger vidéo paramétrée comme transition par défaut. Un stinger est une petite vidéo qui se superpose au moment de la transition entre deux scènes. Ici, le stinger a été généré au préalable avec un logiciel d’effets vidéos (After Effects) puis ajouté dans OBS.

Le second type de transitionles mouvements de sources — est géré par un plugin d’Exeldro nommé « Move Transition« . Le plugin permet de créer des glissements et redimensionnement de sources en se basant sur des éléments communs (ou non) entre deux scènes. Par exemple, si je veux gérer un mouvement de caméra entre deux scènes, cela donne ceci.

Je fais cohabiter les deux types de transition avec un autre plugin d’Exeldro : « Transition Table« . J’ai paramétré le plugin en faisant en sorte que les transitions entre les scènes de live (webcam, capture d’écran, just chatting) soient gérés par Move Transition mais que les autres transitions (vers la scène de pause par exemple) soient directement gérés avec une transition mise en place par défaut : le stinger vidéo.

Pas évident, mais on s’y fait.

Effet de Glitch vidéo

De base, le visuel du “keyboard-cat” a été refait par mes soins sur Photoshop.

L’effet de glitch et de flottement eux, n’ont pas été réalisés avec After Effects, mais directement en HTML/CSS avec pour inspiration plusieurs effets similaires trouvés sur CodePen.

Le problème est que j’ai eu beaucoup de mal à générer un effet de décalage rouge et vert donc j’ai du tricher. Il y a en réalité sur OBS une superposition de trois fichiers, un normal, un rouge et un vert. Chacun dispose de la même animation avec quelques variations et l’astuce fonctionne plutôt bien au final.

En dernier lieu, j’ai ajouté un petit filtre de correction colorimétriques directement sur la scène OBS pour rehausser un peu les couleurs.

Effet de texte déroulant (Typing-Text)

Sur les scènes d’attente (début, pause, fin), une animation de texte fait dérouler différentes phrases de technobabble.

Pour le texte déroulant plusieurs options étaient possibles, comme par exemple d’en faire un boucle vidéo avec Première. Cependant, à chaque modification, il faut rouvrir le logiciel, faire les changements et re-exporter la boucle, ce qui s’avère assez laborieux.

Ici, l’astuce est que cette animation est entièrement réalisée en HTML/CSS et un script JavaScript et j’ai juste à modifier le fichier HTML de base si besoin.

Bandeau Musical avec Barre de Progression

C’est un bandeau qui affiche le morceau en cours d’écoute sur une playlist stockée en local sur la machine et inséré dans OBS via une “source VLC”. L’affichage du morceau en cours est géré par le plugin Tuna, qui se base sur les métadonnées des morceaux (nom de l’artiste, nom du morceau) pour afficher les infos à l’écran.

L’effet “barre de progression” est une bidouille que j’ai mise en place grâce un filtre “Masque Dynamique” (du plugin StreamFX) et quelques effets visuels en plus.

Construction du « Background »

Le fond est constitué de 3 couches (voire 4)

  • Un dégradé bleu-vert-bleu directement généré en HTML/CSS et donc très facilement modifiable avec quelques modifications du code source. J’ai rajouté par dessus un léger shader nommé “Drunk”, qui permet d’ordinaire de simuler une vision trouble dans un état d’ébriété mais que j’utilise ici pour donner un effet vaporeux/trouble dans la nébuleuse.
  • Pour les étoiles, je me suis basé sur un template de code HTML/CSS qui génère 3 tailles de pixel (1px, 2px et 3px) à des endroits aléatoires de la source. Ajoutons à cela trois vitesse de défilement horizontal en CSS pour simuler un (petit, c’est vrai) effet de parallaxe.
  • Par dessus, il y un effet de lens-flare et de poussières très légers (voire imperceptibles) généré en JavaScript et dont j’ai un peu modifié le visuel avec un filtre “Corrections Colorimétriques.
  • Pour finir, une waveform (forme d’ondes audio) qui réagit à la musique et à la voix que j’ai modifié avec un peu de flou et un effet de défilement.

Des élements en HTML/CSS

Au niveau de la confection de mes assets graphiques, j’ai une approche je pense— sans toutefois en être sûr — assez différente de ce qui se fait en temps normal. En temps normal, beaucoup d’assets graphiques sont fait sous des logiciels de création graphique type Photoshop ou Illustrator, voire Première ou After Effects pour des assets animés (gif, vidéos).

Personnellement, pour créer mes assets je travaille beaucoup avec du HTML/CSS/JavaScript. Voici deux exemples :

Les textes des scènes d’attente (voir ci-dessus) sont générés avec du code HTML/CSS. Pour créer un nouveau texte, il me suffit de dupliquer le fichier HTML de base et de modifier le texte, c’est rapide. L’avantage est également une économie de ressources, car pour refaire à l’exact ce genre d’effet dans OBS, il faudrait jouer avec des shaders et des effets de glow, des effets de rendus en temps réels un peu lourd pour le PC.

Autre exemple, les cadres animés qui entourent mes sources webcam et capture d’écran. J’aurais pu le faire avec un logiciel type After Effects, mais comme l’effet est (relativement) simple à réaliser avec du code, j’ai préféré cette méthode. Le cadre est ainsi ajouté dans OBS comme source navigateur et je peux régler la taille à la volée avec les champs “Hauteur” et “Largeur”.

Pour l’heure, le design des cadres est temporaire et risque de changer pour mieux coller à la charte graphique.

Globalement, l’avantage de tout cela est que je peux assez rapidement changer quelques paramètres sur ma feuille CSS pour changer l’aspect visuel (vitesse, couleur, épaisseur du cadre, police du texte etc…) sans avoir à avoir rouvrir un logiciel et relancer un export de vidéo.