Page 1 sur 1

[RESOLU] HTML5 background transparent étrange.

Publié : 13 Oct 2017 18:14
par The_Moye
Bonjour à tous,

J'aimerais intégrer un projet 3D temps réel à une page web, et que le contenu se fonde dans le reste du site. Pour cela j'ai besoin que l'arrière plan de ce que me sort Unity soit transparent.

J'ai bien entendu fait quelques recherches et je suis tombé sur ce post :

Image

J'ai vérifié dans le build sorti par unity, et le remplacement de glclear se fait bien.
Mais malgré ça le fond n'est pas transparent. Le code source de la page HTML n'étant pas bien fourni, on en fait vite le tour :

Image

J'ai rajouté une couleur de fond à la balise body, histoire de bien voir si la couleur passe "au travers" du fond retourné par unity.
J'ai aussi mis en commentaire le background du block "gameContainer", et j'ai à tout hasard changé la variable "backgroundColor" du fichier BuildExport.json par "rgba(0,0,0,0)" (sans bien savoir à quoi elle correspond :inlove: ).
Dans mon projet Unity, le "Clear Flags" de ma caméra est positionné sur "Solid Color", la couleur de fond est verte (bien pétante) mais avec un alpha à 0.

Et j'ai un truc bizarre autant qu'étrange :

Image

Lorsque je change la couleur d'arrière plan de Body, le fond de mon canvas (j'imagine la couleur du Clear de WebGL) change en conséquence mais pas de la même façon :

_ Lorsque la couleur d'arrière plan de ma page est totalement noire, le fond du canvas WebGL est vert pétant.
_ Lorsque la couleur d'arrière plan de ma page est blanc, le fond du canvas est blanc lui aussi.
_ Lorsque la couleur d'arrière plan de ma page varie de jaune à bleu clair, le fond du canvas à exactement la même couleur, mais pour le reste des couleurs le fond du canvas est toujours différent de celui de ma page.

J'avoue que je sèche un peu sur le pourquoi du comment, une piste à me proposer ?

Merci ! :mrgreen:

[Résolu] HTML5 background transparent étrange.

Publié : 15 Oct 2017 15:39
par The_Moye
Merci à Flaviat sur le discord Unity 3D France qui m'a indiqué mon oublie : je n'ai pas changé le "clear flags" de ma caméra en "nothing".

Re: [RESOLU] HTML5 background transparent étrange.

Publié : 23 Mai 2019 11:22
par Amconline
Bonjour !

J'ai besoin d'un fond transparent en WebGL également, et je suis tombé sur le même forum que vous avec le code en jslib.
Je suis heureux de voir que ça fonctionne !
Cependant, je n'arrive pas à reproduire le process.

J'ai créé un fichier TransparentBG.jslib, je l'ai placé dans un dossier "bgtrans" dans "Assets".
Le fichier est apparemment bien pris en compte par Unity, car il s'affiche dans l'inspecteur avec les plateformes, donc pas d'erreur.
Par contre, ma caméra n'a pas été modifiée : je n'ai pas "Nothing" en paramètre pour "Clear Flag".

Pourriez-vous me donner la marche à suivre, s'il vous plait ?

Merci infiniment,
Aymeric