Создание анаглифного 3D-изображения на холсте HTML5

Я создаю простой 3D-движок, используя объект холста HTML5. Он работает хорошо, но я бы хотел реализовать обработку анаглифов красного / синего цвета, чтобы можно было действительно видеть 3D в красных / синих очках. На данный момент у меня есть 3D-объект, визуализированный дважды, второй раз из положения камеры рядом с первым положением камеры.

Проблема, с которой я столкнулся, заключается в том, как объединить два визуализированных объекта, чтобы иметь правильный цвет для анаглиф. Теперь я использую globalAlpha = 0.5 и визуализирую первый красный, а второй синий. Однако это не работает полностью, поскольку пиксели, на которые воздействует только красный объект, должны оставаться красными, но они становятся цветом между черным и красным, поскольку мой фоновый цвет черный.

При просмотре приложения для создания трехмерных анаглифов, Я заметил, что красный и синий пиксели вместе рассчитываются следующим образом:

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

Холст HTML5, однако, вычисляет все пиксели с использованием альфа-канала, поэтому, если цвет фона черный, красный пиксель становится темно-красным, а должен оставаться красным. В основном мне нужны пиксели красного объекта, влияющие только на красный компонент каждого пикселя, а пиксели синего объекта влияют только на синий компонент каждого пикселя.

Я мог бы работать на попиксельной основе, но было бы это быть возможно и не ломать производительность? Я визуализирую 20 кадров в секунду, так что думаю, это бесполезно. Мы будем благодарны за любые предложения.

Надеюсь, это изображение проясняет все: