Comportement des textures transparentes dans WebGL

Environnement: WebGL, Chrome. J'ai le problème suivant lors de l'utilisation transparente de la png en tant que textures pour les modèles:

  1. Image A - l'arbre cache le bâtiment derrière elle et je vois le monde de la boîte de texture. Il cache également lui-même (à l'arrière des branches ne sont pas visibles)
  2. Dans le même temps - Image B - fonctionne correctement, la fenêtre est transparente et je vois ce qui se cache derrière

Un: Comportement des textures transparentes dans WebGL
B: Comportement des textures transparentes dans WebGL

Les deux captures d'écran ont été faites sur la même scène au même moment à partir de différentes positions de la caméra. Les Textures sont produites par le même algorithme.

Je ne comprends pas quelle est la différence entre la fenêtre et les branches de la transparence. Ma principale question est - comment fixer les branches de manière à ne pas masquer les objets derrière eux? Code du Shader est:

gl_FragColor = vec4(textureColor.rgb * vLightWeighting, textureColor.a);

J'ai joué avec activer/désactiver le mélange et depth_test, parfois obtenir les résultats souhaités, mais vous ne savez pas si c'est la bonne façon de faire les choses.

source d'informationauteur Vecnas | 2012-01-06

  1. 28

    Vous êtes en cours d'exécution dans le tampon de profondeur questions, il n'a rien à voir avec votre shader ou les modes de fusion.

    Ce qui se passe est que l'ordre que vous rendre votre transparent géométrie dans l'affecte votre capacité à rendre derrière elle. C'est parce que le tampon de profondeur n'a pas de notion de transparents ou opaques. En conséquence, même si elles ne sont pas visuellement contribuer à la scène ces pixels transparents écrire eux-mêmes dans le tampon de profondeur de toute façon, et après que tous les pixels que vous dessinez derrière eux sera jeter parce qu'ils sont "non visible". Si vous avez tiré la géométrie derrière l'objet transparent mais d'abord, il serait montrer correctement, car il est écrit dans l'image avant de la transparence de la profondeur est mis en place pour le jeter.

    C'est quelque chose que même les grands moteurs de jeu encore en lutte avec un certain degré, afin de ne pas se sentir mal à confusion. 🙂

    Il n'y a pas de "solution idéale" pour ce problème, mais cela se résume à essayer de la structure de votre scène comme suit:

    1. Rendre toute opaque géométrie triés par l'état (de shaders/texture/etc)
    2. Rendre transparente la géométrie suivant. Si possible de trier ces en profondeur, de sorte que vous dessinez le plus éloigné l'un de la première caméra.

    Simplement en signalant les bits de la géométrie qui sont transparentes et rendu après tout le reste vous aurez à résoudre 90% de ce problème, mais la question peut rester encore pour le chevauchement des objets transparents. Qui peut ne pas être un problème pour vous, en fonction de votre scène, mais si c'est toujours cause des artefacts, vous aurez besoin de trier les objets transparents en profondeur avant de le dessiner.

  2. 3

    Jeter des fragments avec alpha inférieure, par exemple de 0,5 pourrait aider (bien sûr, il y a des effets secondaires).

    si(gl_FragColor.un < 0.5)
    jeter;

    AlphaFunctions en WebGL?