WebGL : Position lumière

[WibiMaster]

Bonjour à tous !

J'espère ne pas avoir posté dans la mauvaise section, pour le WebGL je ne savais pas trop où aller...

Tout d'abord, plus que du code, une page complète :
http://www.wibimaster.com/3d

Avec les sources, y a tout ^^

Mon soucis :

Comme vous pouvez le constater sur la page d'exemple, j'essaie de construire un "monde", en fonction de ce que l'utilisateur rentre comme données sur le tableau.
Mais il suffit de se faire une petite map et de se ballader pour vite se rendre compte du soucis avec la lumière ; j'ai tout essayé, mais je n'ai pas réussi à placer des points (ou meme ne serait-ce qu'un seul point) lumineux qui ne bouge pas... Là, il suffit de faire demi tour, et hop, la lumière s'éteind (ça peut être sympa comme effet, mais alors là c'est vraiment pas celui escompté )

Plus simplement, la question pourrait-être "comment ajouter un lampadaire dans mon monde ?"

Le soucis vient, je pense, du fait que le webGL ne gère pas la caméra, et du coup, pour simuler le déplacement, on bouge le "monde" autour de la caméra ; du coup, ben les lumières et leurs directions, c'est un vrai bor**l...

Si quelqu'un a les connaissances nécessaires pour m'aider, je l'en remercierais 100 fois !!


Merci à ceux qui me liront

[p3ga5e]

Envoyé par WibiMaster

Le soucis vient, je pense, du fait que le webGL ne gère pas la caméra, et du coup, pour simuler le déplacement, on bouge le "monde" autour de la caméra

Attention WebGL n’est absolument pas un moteur 3D c’est juste une API.

J’ai rapidement survolé ton code source et j’ai vu que tu as modifié un ou plusieurs tutoriaux. A mon avis ce n’est pas une bonne approche, les tutoriaux ont pour but de faire l'apprentissage d’une fonctionnalité, le code source est donc réduit à cette fonctionnalité et n’est donc pas très évolutif.
Tu devrais plutôt utiliser un vrais moteur 3D comme O3D ou Three.js !

Sinon je pense que ton problème vient de ton Vertex Shader :

Code GLSL :

vec3 lightDirection = normalize(uPointLightingLocation.xyz);// - mvPosition.xyz

Pourquoi as-tu commenté la différence entre la position de la lumière et celle du vertex ?
J e ne suis pas un expert en pipeline de lightening mais je pense que l’atténuation de l’intensité lumineuse résulte forcement de la distance entre ces deux points. Encore faut il que c’est 2 points soient exprimés dans le même repère ….

[WibiMaster]

Attention WebGL n’est absolument pas un moteur 3D c’est juste une API.

Oui oui oui ^^ Me suis peut-être mal exprimé, mais l'idée globale reste la même...

Tu devrais plutôt utiliser un vrais moteur 3D comme O3D ou Three.js !

Ben figure toi que c'est la solution alternative vers laquelle j'ai commencé à me tourner hier ^^ Mais O3D ne me plait pas, Three.js à l'air plutot sympathique.. Quoi que je n'aime pas trop le principe d'ajouter dans le script principale plein de petites fonctions toutes prêtes, notamment pour le contrôle clavier, sans laisser la possibilité de les customiser à l'appel ; m'enfin un tour dans le code source et on y arrive...

Concernant la modification des tutoriaux, je suis moit-moit' d'accord avec toi ; en effet, les tutoriaux ont pour but d'apprendre une fonctionnalité. Ici par exemple, l'un apprends à se "déplacer", l'autre à ajouter une lumière directionnelle ; ce sont mes deux objectifs. Là, manque de chance, il ne s'accumule pas si facilement...

En effet, dans mon calcul, j'ai mis ça en commentaire mais uniquement dans le but de voir le résultat ; j'ai encore pas mal de soucis pour saisir comment les calculs sont effectués, j'y vais donc "à taton" pour comprendre les principes. Dans la globalité, je les ai compris ; dans les faits, je luttes à les utiliser...

Encore faut il que c’est 2 points soient exprimés dans le même repère...

C'est exact, et à ce sujet je ne me suis pas appuyé sur le tutoriel, mais sur un commentaire dans un tuto, où une personne expliquait ce soucis de répère, et la correction. Cette correction m'a pas mal aidé, mais il reste un soucis de coordonnées pendant la rotation de la caméra, donc concrètement pendant la rotation de "monde" autour de la caméra, la lumière reste fixe au lieu de suivre le mouvement...

UN sacré casse-tête ces histoires de vertex

Si jamais je n'y arrive vraiment pas, je poursuivrais avec Three.js ; mais par intérêt personnel, j'aimerais vraiment comprendre comment réussir à régler ce soucis...

Sinon, tu as parfaitement ciblé l'emplacement du soucis ^^ C'est pile-poil l'endroit où je bloque

[p3ga5e]

Envoyé par WibiMaster

... l'un apprends à se "déplacer", l'autre à ajouter une lumière directionnelle ; ce sont mes deux objectifs.

A ben y a déjà un problème ! Car ca ne ressemble pas à une lumière directionnelle mais une omi-directionelle ou PointLight, qui possède une source et éclaire dans toutes les directions avec, normalement, une atténuation quadratique de l’intensité lumineuse sur la distance (ce qui ne semble pas être le cas dans ton shader …),
contrairement a une directionnelle qui ne possède pas de source et pas d’atténuation sur la distance.

Envoyé par WibiMaster

...la lumière reste fixe au lieu de suivre le mouvement...

Ben c’est normale la position de ta source lumineuse est fixé dans ton repère Model 3D, dans ton shader tu multipli cette position par une matrice uVMatrix, qui n’est jamais renseigné par ton application.

Bref tu procède "à tatons" mais sait tu ce que tu souhaite obtenir ?
si tu cherche a faire un de lampe torche a partir de ta vue FPS il te faut une SpotLight, tu peut déduire la source ainsi que la direction de ta spotlight a partir de la matrice View.
Si tu cherche un bon article sur les techniques d’éclairage en temps réel je te conseil les tutoriaux de nvidia, certes les exemples de Shader sont écrit en Cg mais les techniques restent les mêmes.

[WibiMaster]

A ben y a déjà un problème ! Car ca ne ressemble pas à une lumière directionnelle mais une omi-directionelle ou PointLight, qui possède une source et éclaire dans toutes les directions avec, normalement, une atténuation quadratique de l’intensité lumineuse sur la distance (ce qui ne semble pas être le cas dans ton shader …),
contrairement a une directionnelle qui ne possède pas de source et pas d’atténuation sur la distance.

Bouarf, me serait donc déjà emmêlé les pinceaux... Dans mes essais, la lumière directionnelle éclairait bien un objet, mais c'est vrai que pour une pièce complète, ça ne le fait pas ; et j'avais en tête l'exemple d'un "soleil" pour l'omnidirectionnelle, mais concrètement c'est ce qu'il faut en modèle réduit en fait

Bref tu procède "à tatons" mais sait tu ce que tu souhaite obtenir ?
si tu cherche a faire un de lampe torche a partir de ta vue FPS il te faut une SpotLight, tu peut déduire la source ainsi que la direction de ta spotlight a partir de la matrice View.

Oui je sais ce que je veux lol, mais non ça n'est pas une lampe torche, au contraire ; à la rigueur, une torche tout court...

Clairement, dans ma "zone", je voudrais pouvoir positionner un lampadaire. Réduit à l’extrême, l'idée revient à ça ; pouvoir placer un point lumineux à un endroit précis, comme n'importe quel objet, sauf que celui-ci diffuse la lumière au lieu de la recevoir

Et niveau model / view, je m'emmèle complètement, d'un parce que ça n'est pas mon domaine, mais surtout avec cette idée de zone qui se déplace autour de la caméra et non l'inverse...

Suis complètement largué maintenant

[p3ga5e]

Envoyé par WibiMaster

j'avais en tête l'exemple d'un "soleil" pour l'omnidirectionnelle ...

En fait c’est l’inverse ,le soleil est souvent représenté par une directionnel les rayons frappent l’intégralité de ton monde 3D uniformément !
pour un lampadaire ce serait plutôt une Spotlight, par contre pour un torche alors la, oui, tu as vu juste C’est bien une omnidirectionnel !

Envoyé par WibiMaster

Clairement, dans ma "zone", je voudrais pouvoir positionner un lampadaire. Réduit à l’extrême, l'idée revient à ça ; pouvoir placer un point lumineux à un endroit précis, comme n'importe quel objet, sauf que celui-ci diffuse la lumière au lieu de la recevoir

Donc ta source lumineuse ne se déplace pas ? Si ce sont que des points lumineux statiques (tous ces parametres sont fixe), alors il est préférable de pré-calculer l’éclairage dans les vertexs color, une bonne fois pour toute.
Car si tu décide a faire de l’éclairage dynamique il faudra te fixer un certain nombre de points lumineux dans l’écriture de ton shader.

Envoyé par WibiMaster

Et niveau model / view, je m'emmèle complètement, d'un parce que ça n'est pas mon domaine, mais surtout avec cette idée de zone qui se déplace autour de la caméra et non l'inverse...

En fait dans ton code j’ai remarqué que tu ne distinguer pas la matrice de Vue de celle du Model, ce n’est pas un bonne pratique!
La matrice Model est la matrice de transformation permettant le changement de position du vertex du son repère local au repère Monde, cette matrice est sauvant le résultat de la multiplication de différentes matrices local hiérarchisé par un arbre.
La matrice de vue permet, elle, d’exprimer les positions du monde 3D dans le repère camera, ce n’est pas déplacer le monde … c’est juste un changement de repère.

Les moteur 3D met a disposition du développeur une camera, c’est souvent une matrice exprimer dans le repère monde , quand tu décide a rendre la scene 3D , tu déduit en réalité la matrice de vue par rapport a cet camera. Cela permet de manipuler une camera le repère monde .

[WibiMaster]

pour un lampadaire ce serait plutôt une Spotlight, par contre pour un torche alors la, oui, tu as vu juste C’est bien une omnidirectionnel !

Beuuuuh, pour moi torche = lampadaire ; Bon, à un détail prêt, sur lequel je reviendrais un 'tit peu après, c'est qu'une torche = flamme = ça bouge, tandis que lampadaire = statique. Mais dans les deux cas, c'est un point précis qui diffuse tout autour... Ou alors, quand tu entends "torche", tu pense à "lampe torche" ?

Donc ta source lumineuse ne se déplace pas ? Si ce sont que des points lumineux statiques (tous ces parametres sont fixe), alors il est préférable de pré-calculer l’éclairage dans les vertexs color, une bonne fois pour toute.
Car si tu décide a faire de l’éclairage dynamique il faudra te fixer un certain nombre de points lumineux dans l’écriture de ton shader.

Ben, le truc c'est que pour un lampadaire fixe, ouaip', mais pour une torche (flamme), l'intensité varie rapidement de manière pseudo-anarchique ; dans ce cas, j'peux pas faire un truc statique, pour ça que l'idée générale m'aurait bien servi ^^

En fait dans ton code j’ai remarqué que tu ne distinguer pas la matrice de Vue de celle du Model, ce n’est pas un bonne pratique!

Erf, je sais bien ^^ Mais je dois avouer avoir beaucoup de mal à trouver des sources expliquant ça correctement, avec exemples à l'appui, et surtout axé OpenGL.. Si tu en connais, je suis preneur à 100%

La matrice de vue permet, elle, d’exprimer les positions du monde 3D dans le repère camera, ce n’est pas déplacer le monde … c’est juste un changement de repère.

Oki oki ; m'enfin, si ça n'était qu'un changement de repère, je ne devrais même pas devoir déplacer la lumière en question, elle devrait rester où elle est pendant que la vue bouge, or là, je suis obliger de recalculer son emplacement et sa direction ; un truc que je saisi pas ?

Je risque de dire un truc super stupide pour les connaisseurs, mais bon j'me lance histoire de comprendre pourquoi c'est bête ^^
Ne pourrait-on pas, très simplement, créer un cube sans texture (transparent), le placer où l'on veut dans la scène, et placer la lumière dans ce cube, en plein centre ?
Du coup, quand je me "déplace", mes cubes restent où il faut dans la scène, ça, ça gère bien ; donc la lumière, restant dans le cube, serait toujours bien placée aussi, nan ?
Plutôt que de la placer dans le repère "scène", la placer dans le repère "cube", lui-même placé dans le repère "scène"..

Bon après doit bien y avoir une raison pour laquelle personne ne m'a proposé cette idée, et j'ignore même comment la mettre en place, mais ça me semblait "réaliste"... Sauf si la "lumière" "rebondit" sur les parois "invisibles" (tout plein de guillemets là )

En tout cas un gros merci pour tes réponses, petit-à-petit je comprends mieux le concept, et quand j'aurais les bases suffisantes niveau code webGL pour faire ce que je veux, tes explications me seront d'une grande aide

[p3ga5e]

Envoyé par WibiMaster

Beuuuuh, pour moi torche = lampadaire ; Bon, à un détail prêt, sur lequel je reviendrais un 'tit peu après

Pour moi un lampadaire restreint le rayonnement lumineux à un cône comme ceci :

Envoyé par WibiMaster

Ben, le truc c'est que pour un lampadaire fixe, ouaip', mais pour une torche (flamme), l'intensité varie rapidement de manière pseudo-anarchique ; dans ce cas, j'peux pas faire un truc statique, pour ça que l'idée générale m'aurait bien servi ^^

Ok, la tu t’attaque a des techniques de rendu avancé, "des" car ils existent certainement plus d’une technique pour simuler l’éclairage d’une flamme avec des résultats plus ou moins réaliste ..., peut être même que certaine de ces techniques utilisent le post-processing comme le HDR .

Envoyé par WibiMaster

Oki oki ; m'enfin, si ça n'était qu'un changement de repère, je ne devrais même pas devoir déplacer la lumière en question, elle devrait rester où elle est pendant que la vue bouge, or là, je suis obliger de recalculer son emplacement et sa direction ; un truc que je saisi pas ?

Car tes 2 positions ne sont certainement pas exprimées dans le même repère.

Envoyé par WibiMaster

Je risque de dire un truc super stupide pour les connaisseurs, mais bon j'me lance histoire de comprendre pourquoi c'est bête ^^
Ne pourrait-on pas, très simplement, créer un cube sans texture (transparent), le placer où l'on veut dans la scène, et placer la lumière dans ce cube, en plein centre ?
Du coup, quand je me "déplace", mes cubes restent où il faut dans la scène, ça, ça gère bien ; donc la lumière, restant dans le cube, serait toujours bien placée aussi, nan ?
Plutôt que de la placer dans le repère "scène", la placer dans le repère "cube", lui-même placé dans le repère "scène"..

Bon après doit bien y avoir une raison pour laquelle personne ne m'a proposé cette idée, et j'ignore même comment la mettre en place, mais ça me semblait "réaliste"... Sauf si la "lumière" "rebondit" sur les parois "invisibles" (tout plein de guillemets là )

Arf ! Pas vraiment tous suivis la
En tous cas … tu pressens l’avantage de la hiérarchisation de ton monde 3D par un arbre dont chaque nœuds possèdent un repère local, cela a pour avantage de :

• Permettre l’instanciation d’un même mesh, réduisant le nombre de vertexbuffer ainsi que leurs tailles. (Pour info, il est possible dans ton exemple de réduire a un seule VertexBuffer de 4 sommets instancié de nombreuses fois avec un repère différents pour le placer et l’orienté de manière différentes dans ta Scène 3D)
  
• De partitionner ton espace, car contrairement a ce que tu semble penser, un Vertex Shader n’a pas la connaissance qu’il peut exister un mur opaque arrêtant le rayonnement lumineux entre la source de la light et le vertex en cours…, pour palier a ca, tu peux ajouter une lumière a un nœud afin que cette lumière impacte uniquement les meshs fils a ce nœud.

Envoyé par WibiMaster

Erf, je sais bien ^^ Mais je dois avouer avoir beaucoup de mal à trouver des sources expliquant ça correctement, avec exemples à l'appui, et surtout axé OpenGL.. Si tu en connais, je suis preneur à 100%

A mon avis tu fais erreur, il te faut comprendre les techniques de rendu ainsi que les architectures logicielles qui peuvent en découler, bien avant d’apprendre une API et même un langage de programmation (quoique le JavaScript permet certainement de simplifier les architectures logiciel d’un moteur 3D ) .
C’est un peut le reproche que je fais aux tutoriaux d’openGL qui explique plus que brièvement le model mathématique pour mettre l’accent sur l’implémentation OpenGL de cette technique. A eux seul, les tutos OpenGL, ne peuvent, donc, t’apprendre les mécaniques de la 3D temps réel.

Je pense que ce fils de discussion serait plus vivant dans le forum Développement 2D, 3D et jeux, tu aurais certainement des réponses plus pertinentes par des professionnels de la 3D temps réel.