Création d'une image 3D anaglyphe sur un canevas HTML5

Question

Je crée un moteur 3D simple à l'aide de l'objet canevas HTML5. Cela fonctionne bien mais j'aimerais mettre en place un traitement anaglyphe rouge/bleu, pour que l'on puisse vraiment voir la 3D en utilisant des lunettes rouges/bleues. Au moment où j'ai l'objet 3D rendu deux fois, la deuxième fois à partir d'une position de caméra juste à côté de la première position de la caméra.

Le problème auquel je fais face est comment combiner les deux objets rendus pour avoir la couleur correcte pour un anaglyphe. Maintenant j'utilise globalAlpha = 0.5 et rend le premier en rouge et le second en bleu. Cela ne fonctionne cependant pas complètement, car les pixels affectés uniquement par l'objet rouge doivent rester rouges, mais ils deviennent la couleur entre le noir et le rouge, car la couleur de fond est noire.

Lorsque jeter un oeil à une application créant anaglyphe 3D, je remarquai que pixel rouge et bleu ensemble sont calculés comme suit:

255 0 0 
0 0 255 
------------- + 
255 0 255 

La toile HTML5 est cependant calculait tous les pixels en utilisant alpha, donc si l'arrière-plan la couleur est noire, un pixel rouge devient rouge foncé alors qu'il devrait rester rouge. Fondamentalement, j'ai besoin que les pixels de l'objet rouge n'affectent que la composante rouge de chaque pixel, et les pixels de l'objet bleu n'affectent que la composante bleue de chaque pixel.

Je pourrais travailler par pixel, mais est-ce que cela serait possible et non pas révolutionnaire? Je rends 20 images par seconde donc je suppose que cela ne serait pas utile. Toute suggestion serait appréciée.

J'espère que cette image précise l'ensemble:

Answer 1

Il est une propriété globalCompositeOperation du contexte de toile que vous pouvez changer d'influer sur ce comportement. Spécifiquement, en le réglant sur "plus léger" ajoutera les couleurs de toutes les opérations de dessin à l'image source. Cela respectera également la valeur alpha. S'il s'agit d'une scène complexe, vous devrez peut-être dessiner la scène deux fois, chacun dans un canevas masqué, puis copiez-les chacun dans le canevas visible avec l'opération composite définie sur "plus clair".