Étape 12 : Three.js : post-traitement & effets : gradation, flou
Check this out! (et le didacticiel qui va avec)
Crazy effets sont possibles avec le post-traitement dans ThreeJS, mais j’ai juste besoin de quelque chose de simple : faible intensité tout à l’exception de la constellation, j’ai voulu montrer. Raies blanches brillantes et des points situés sur le dessus une autre manière estompée scène.
Tourne, le monde 3D n’est pas comme KineticJS. Je ne peux pas juste ajouter une couche sur le dessus et compter sur le navigateur, rendant le canal alpha du calque pour obscurcir les choses derrière elle. Ou plutôt, j’ai pu, mais j’aurais besoin d’un ensemble distinct de scène, toile et le contexte, et ce n’est pas tout à fait clair que se passe-t-il lorsque vous avez deux webgl fenêtres superposées. Je ne crois pas qu'il est trivial de faire un contexte de rendu de webgl semi-transparente.
Donc la prochaine meilleure chose était d’ajouter postprocesses à mon moteur de rendu existant. C’est comment, quand je parlais de Systèmes de particules en mouvement,
est devenu
Préparer :
1. dans le repo de threejs, jetez un oeil à exemples/js/shaders et exemples/js/post-traitement
2. choisir certains shaders. Ce sont uniquement les code de WebGL stockée dans des fichiers .js, mais ils sont les mêmes en principe comme les shaders que j’ai vécu lors de la description de A luminosité différente pour chaque étoile.
3. le répertoire post-traitement a un tas d’utilitaires, essentiellement, qui vous permettent de couche les uns sur les autres, les effets
Assembler (mettre les scripts sur votre page) :
-TROIS. EffectComposer
-TROIS. RenderPass (vous avez besoin un renderpass votre affecte s’appliquer à quelque chose)
-TROIS. ShaderPass (ou deux ou trois--ces enveloppement vos effets)
-TROIS. CopyShader (en cas où que vous souhaitez afficher sans effets parfois)
-TROIS. AdditiveBlendShader (à mélanger d’autres shaders)
-certains shaders vous aimez
Le Code :
Fondamentalement vous appellerez .render() sur un compositeur maintenant, plutôt que directement sur un moteur de rendu. Vous pouvez monter à peu près n’importe quelle plage d’effets que vous aimez en tout d’abord faire une passe de rendu, ajoutant au compositeur, puis en ajoutant shaderpasses ultérieures du même compositeur. Finalement, vous ne souhaitez pas ajouter un copyshader pour tout rassembler, mettre à renderToScreen et restituer. Se résumait, il pourrait ressembler à ceci :
Mais dans le cas de ce que j’ai fait ici, il n’y a en fait deux compositeurs distincts qui rendent deux séries distinctes d’objets dans la scène. Quand une constellation est active, ses étoiles et les lignes de connexion sont rendus sans flou et son intensité maximum. Les étoiles de l’arrière-plan, sont cependant, sombre et floue. Pour obtenir les effets appliqués à un ensemble de choses et pas l’autre, vous devez donc une scène part entière avec les objets clonés (topScene) et une pile de compositeur part entière.
Cela provoque la complication légère qui les deux doivent être mélangés comme une dernière étape : je pourrais rendre la topscene, mais il risque de masquer la scène de fond. La dernière chose qui obtient rendue dans mon cas est donc un mélange additif des résultats des deux compositeurs :
Le bit final : vous devez restituer tous les trois compositeurs chaque frame, ou n’actualise pas le contenu de ce compositeur :
C’est tout là est à lui !
