ToolRobinSans connexion, utilisable immédiatement

Studio de sphère en verre liquide

Créez une sphère de verre animée et exportez-la en PNG transparent, WebM en boucle ou HTML autonome.

Choisissez un préréglage, ajustez la sphère et ses reflets, puis exportez un PNG transparent, une boucle de six secondes ou un rendu HTML autonome.

Aperçu en direct

Rendu de shader WebGL2

Aucune donnée ni aucun réglage n’est envoyé. Le rendu reste dans ce navigateur.

Préparation de l’aperçu…

La transparence WebM dépend du codec du navigateur ; vérifiez le résultat dans votre éditeur.

Arrière-plan
Shader de fragment
Comment utiliser

Créez une sphère de verre pour un projet web

Créez une sphère de verre animée et exportez-la en PNG transparent, WebM en boucle ou HTML autonome.

Étapes à suivre

  1. Fournissez la source avec : Préréglages.
  2. Réglez : Teinte du verre / Taille de la sphère / Réfraction / Brillance / Vitesse de rotation / Transparent / Couleur d’arrière-plan / Taille PNG. Utilisez le tableau pour choisir les options adaptées à votre tâche.
  3. Lancez : Télécharger le PNG / Enregistrer un WebM de 6 secondes / Télécharger le HTML autonome. Examinez le résultat avant de le copier, télécharger ou utiliser ailleurs.
  4. Choisissez un préréglage, ajustez la sphère et ses reflets, puis exportez un PNG transparent, une boucle de six secondes ou un rendu HTML autonome.

Choisir les réglages

OptionCe qui change
Taille PNG / TransparentPNG enregistre une image fixe ; WebM une animation de 6 secondes ; le HTML autonome conserve le rendu pour un navigateur WebGL. PNG convient aux éléments fixes transparents. Testez la transparence WebM dans le navigateur ou éditeur cible.

Exemple et résultat attendu

Exemple : choisissez Aurore et gardez la transparence. L’export 1024 px produit un PNG de 1024 × 640 avec de la transparence autour de la sphère. L’alpha WebM dépend du codec et de l’éditeur.

Si cela ne fonctionne pas

  • Si le rendu ne démarre pas, vérifiez WebGL. Si le codec vidéo n’est pas pris en charge ou si une autre application perd la transparence, utilisez PNG pour l’image fixe ou testez le WebM dans l’application cible.

Vous pourriez également avoir besoin