HTML5 캔버스에서 애너 글리프 3D 이미지 만들기

Question

HTML5 캔버스 개체를 사용하여 간단한 3D 엔진을 만들고 있습니다. 잘 작동하지만 빨간색/파란색 애너 글리프 처리를 구현하여 빨간색/파란색 안경을 사용하여 3D를 실제로 볼 수 있습니다. 지금은 3D 오브젝트가 두 번 렌더링되었으므로 두 번째는 첫 번째 카메라 위치 바로 옆에있는 카메라 위치입니다.

내가 직면 한 문제는 애너 글리프에 올바른 색을 표현하기 위해 렌더링 된 두 개체를 결합하는 방법입니다. 이제 globalAlpha = 0.5를 사용하고 첫 번째를 빨간색으로 렌더링하고 두 번째를 파란색으로 렌더링합니다. 그러나 빨간색 객체의 영향을받는 픽셀 만 빨간색으로 유지되어야하지만 배경색이 검정이므로 검정색과 빨간색 사이의 색상이됩니다. 응용 프로그램을 만드는 3 차원 입체 살펴 촬영시

는 는

, 나는 빨간색과 파란색 픽셀이 함께 다음과 같이 계산 것으로 나타났습니다 :

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

HTML5의 캔버스 그러나 그래서 배경이 경우, 알파를 사용하여 모든 픽셀을 계산하는 색상이 검은 색이면 빨간색 픽셀은 진한 빨간색으로 유지되어야합니다. 기본적으로 빨간색 객체의 픽셀은 각 픽셀의 빨간색 구성 요소에만 영향을 주며 파란색 객체의 픽셀은 각 픽셀의 파란색 구성 요소에만 영향을 미칩니다.

픽셀 단위로 작업 할 수는 있지만 성능이 저하되지 않고 가능합니까? 나는 실용적이지 않을 거라고 생각하기 위해 20 프레임을 초당 렌더링하고 있습니다. 모든 제안을 부탁드립니다.

나는이 이미지 전체를 명확히 희망 :

Answer 1

는이 동작에 영향을 변경할 수 있습니다 캔버스 컨텍스트의 globalCompositeOperation 속성이 있습니다. 구체적으로 '더 밝게'로 설정하면 모든 그리기 작업의 색상이 원본 이미지에 추가됩니다. 이것은 또한 알파 값을 존중합니다. 복잡한 장면 인 경우 각각을 숨겨진 캔버스에 두 번 그린 다음 합성 작업을 '더 밝게'설정하여 보이는 캔버스로 각각 복사해야 할 수 있습니다.