JAM(02): Découverte de Spline

Pourquoi j’ai choisi Spline ?

Morgane Sauneuf
4 min readJan 7, 2022

Pendant ma réflexion sur “qu’est-ce que je vais bien pouvoir apprendre pendant plusieurs mois sans me lasser ?”, j’ai une amie, Élodie (va voir son journal d’apprentissage ici, elle est très forte!) qui m’a parlé de Spline, une application qui m’était inconnue jusque-là.

Ce qui m’a convaincue, c’est le fait que le logiciel soit en cours de développement. L’avantage, c’est de pouvoir découvrir les features au fur et à mesure qu’elles sont implémentées. Ça simplifie l’approche du logiciel contrairement à Blender qui est génial mais très impressionnant et complexe à prendre en main.

De plus, l’interface est épurée et elle ressemble à celle de Figma, le rendu en temps réel est vraiment efficace et les possibilités d’interactions sur le web sont vraiment sympas et faciles à mettre en place.

Enfin, l’équipe Spline est très accessible, notamment sur Discord, et la communauté est grandissante et bienveillante, ce qui est très plaisant.

Intro to 3D Type with Spline: Spline x The Next Dimension of Typography

Les 9 et 10 octobre derniers, Spline s’est associé à The Next Dimension of Typography pour faire un workshop sur l’utilisation de typographies dans un espace 3D.

J’ai suivi les 3 heures de live orchestrées par Alejandro León, le fondateur de Spline. Cela m’a permis de voir, pour la première fois, plusieurs fonctionnalités du logiciel et ce qui était faisable. Ce workshop a notamment renforcé mon envie de me lancer dans cette aventure.

Première production

Je me suis donc très vite lancée dans un premier projet. J’avais pour objectif d’animer du texte et d’essayer de mettre en application ce que j’avais vu.

J’ai rapidement compris le fonctionnement du logiciel et je suis arrivée assez vite à un rendu de typo 3D-ifiée.

Ensuite, j’ai animé certaines lettres individuellement, notamment le w et le e. J’ai vite trouvé comment faire, je n’ai pas vraiment eu de difficulté à ce moment-là, il s’agit d’un simple déplacement sur l’axe Z.

Puis, j’ai décliné le point du i. Il m’a suffi de le dupliquer et d’appliquer la même animation sur les duplicatas avec un déplacement plus ou moins grand sur l’axe X.

Après avoir fait des transformations basiques sur les axes X et Z, je voulais avoir un élément qui fait une rotation. Je voulais que le w avance, fasse un tour sur lui-même puis retourne à sa position d’origine. Mais là, on peut dire que j’ai rencontré ma première difficulté : impossible de faire une double transformation sur un même objet. À chaque essai, j’avais un problème. Soit l’animation sur l’axe Z ne fonctionnait plus, soit il ne se passait rien.

Et j’ai même découvert un second problème. Pour chacun de mes objets (donc chacune de mes lettres), le point d’origine n’était pas au centre de l’objet.

Voilà le type de rotation que j’avais :

Et le type de rotation que je voulais :

Je n’ai pas pris le temps de demander de l’aide sur Discord et comme il m’arrive d’être moyennement persévérante, j’ai abandonné cette idée.

Je suis donc partie sur une autre piste, l’idée était d’avoir un élément qui fait une rotation. Le n me faisait penser à un tunnel et j’ai choisi de faire un engrenage qui sort du “tunnel”.

Et puis pour finir, j’ai rajouté la petite balle qui bounce sur le b (déplacement simple avec un easing spécifique) et le mouvement de la lumière au-dessus des éléments (déplacement simple).

Voici le résultat final exporté directement depuis le logiciel :

Entre nous, les débuts ne sont pas très intéressants, j’ai beaucoup barboté et cliqué un peu partout dans l’interface, mais le résultat n’est pas si mal. Comme quoi, Spline permet d’avoir une production sympa très facilement et rapidement.

À très vite pour un challenge plutôt rigolo et un succès imprévisible !

Mogo.

--

--

Morgane Sauneuf

I relate my life in French for a school project, also student at @gobelins_ecole and developer at @gotoandbuzz