Crear imagen 3D de anáglifo en canvas HTML5

Question

Estoy creando un motor 3D simple utilizando el objeto canvas de HTML5. Está funcionando bien, pero me gustaría implementar el procesamiento de anaglifo rojo/azul, de modo que uno realmente pueda ver 3D usando gafas rojas/azules. En este momento tengo el objeto 3D renderizado dos veces, la segunda vez desde la posición de la cámara justo al lado de la posición de la primera cámara.

El problema que estoy enfrentando es cómo combinar los dos objetos renderizados para tener el color correcto para un anáglifo. Ahora estoy usando globalAlpha = 0.5 y representando el primero en rojo y el segundo en azul. Sin embargo, esto no funciona del todo, ya que los píxeles que solo se ven afectados por el objeto rojo deben permanecer rojos, pero se están convirtiendo en el color entre negro y rojo, ya que mi color de fondo es negro.

Al echar un vistazo a un anaglifo 3D creación de aplicaciones, me di cuenta de ese píxel rojo y azul en conjunto se calculan de la siguiente manera:

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

El canvas de HTML5 es, sin embargo calculando todos los píxeles utilizando alfa, por lo que si el fondo el color es negro, un píxel rojo se vuelve rojo oscuro mientras que debería permanecer rojo. Básicamente, necesito que los píxeles del objeto rojo solo afecten al componente rojo de cada píxel, y los píxeles del objeto azul solo afectan al componente azul de cada píxel.

Podría estar trabajando por píxel, pero ¿sería posible y no romper el rendimiento? Estoy renderizando 20 fotogramas por segundo, así que supongo que no sería práctico. Cualquier sugerencia sera apreciada.

espero que esta imagen se aclara el conjunto:

Answer 1

hay una propiedad globalCompositeOperation del contexto de lona que se puede cambiar para afectar a este comportamiento. Específicamente, establecerlo en "más claro" agregará los colores de cualquier operación de dibujo a la imagen de origen. Esto también respetará el valor alfa. Si se trata de una escena compleja, puede que tenga que dibujar la escena dos veces, cada una en un lienzo oculto, y luego copiarlas cada una en el lienzo visible con la operación compuesta configurada en "más claro".