Rendu avec des réflexions et des ombres appropriées (photoréalistes) en utilisant WebGL et three.js

Question

J'ai essayé de rendre une scène qui a déjà été créée en utilisant 3ds max. J'ai exporté tous les objets en tant que fichiers obj et utilisé les bibliothèques three.js pour rendre la scène sur le navigateur. Pour les réflexions j'ai essayé d'utiliser la méthode Cubecamera mais ça ne donne pas les résultats attendus. Pour les ombres, j'ai essayé des cartes d'ombre mais je suppose que je ne les ai pas utilisées correctement. Je voudrais savoir s'il est possible de faire tout ce que je veux en utilisant seulement les trois.js et WebGl. Si oui, quelqu'un s'il vous plaît dites-moi comment. De plus, je sais que les réflexions et les ombres sont facilement générées par le logiciel 3ds Max utilisant le moteur de rendu Mental Ray. Donc, y a-t-il une technique de rendu similaire dans three.js qui aide à le faire facilement?

Ceci est similaire à ce que je veux

Answer 1

Il est tout à fait une grande question pour répondre, malheureusement, et il existe de nombreuses méthodes pour faire des réflexions en temps réel. La façon dont Mental Ray calcule les réflexions est totalement différente de la façon dont vous le feriez en temps réel en utilisant WebGL (ou même OpenGL).

La méthode la plus simple consiste à rendre votre scène deux fois, la première fois que vous retournez la scène (en miroir le long du plan de votre surface réfléchie). C'est (en ce qui concerne les réflexions) assez simple, mais cela vous limite à un seul plan de réflexion. Compte tenu de votre image, et que la seule surface réfléchissante ressemble au sol. Ce pourrait être le meilleur choix.

Vous pouvez même rendre la scène en miroir à une texture, ce qui vous permet de la manipuler plus tard dans le pipeline (par exemple, si vous souhaitez que l'image déforme comme si elle regardait l'eau). Ou effectuez plusieurs réflexions autour de différents plans. Le coût de rendu peut augmenter considérablement de-cours.

Vous pouvez utiliser une carte de cube pré-rendue comme vous l'avez mentionné dans votre message d'origine. Bien que vous puissiez en avoir besoin de plus d'un, pour cette scène. En plaçant des points dans la scène qui indiquent où chaque carte de cube devrait être capturée. Typiquement, ceux-ci seraient de faible qualité, comparativement, pour garder l'utilisation de la mémoire faible.

Une troisième option est le mappage de la réflexion d'espace d'écran (une introduction raisonnable peut être trouvée http://roar11.com/2015/07/screen-space-glossy-reflections/) qui fonctionnent mais qui ont quelques problèmes (bords de l'affichage) à résoudre. Vous trouverez généralement tout cela dans un moteur de jeu complet (Unreal Engine, https://docs.unrealengine.com/latest/INT/Resources/Showcases/Reflections/, par exemple).