다른 블렌딩 모드를 사용하는 WebGL 드로잉 2 차원 객체

Question

WebGL에서 블렌드 모드를 수행하는 방법을 파악하려고합니다.

var ctx = new Document.getElementById('canvas').getContext('2d'); 
ctx.globalCompositeOperation = 'lighter' 

을 지금, 나는이 WebGL을에 포트에, 성능상의 이유로,이 노력하고 있어요 : 지금까지, 나는 당신이 예를 들어, 다만 할 수있는 기본 HTML5 캔버스 그리기 기능을 사용했다. 그러나 WebGL에서 혼합 모드에 영향을 줄 수있는 방법을 이해하는 데 어려움이 있습니다. 필자가 이해 하듯이, Vertex 쉐이더는 다른 텍스처/폴리곤이 보이는 부분을 결정한 다음, 이러한 텍스처/폴리곤의 보이는 부분의 각 픽셀마다 조각 쉐이더가 호출됩니다. 그러나 라이터와 같은 블렌딩 모드 (기본 색상의 각 구성 요소와 새 오버레이 색상 중 더 높은 색상을 사용함)가있는 경우 정점 쉐이더와 프래그먼트 셰이더의 역할에 대해 혼란스러워합니다. 케이스.

더 이상 Pixi.js 라이브러리에서 WebGL을 사용하여 그려야합니다. 모든 오브젝트가 프레임 버퍼에 그려진 후에만 버텍스 및 조각 쉐이더가 호출됩니다. 즉 모든 오브젝트 배치됩니다. (이 라이브러리가 사용하는 쉐이더는 here입니다.

누군가 WebGL에서 블렌딩 모드를 올바르게 사용하는 방법을 설명 할 수 있습니까?

Answer 1

꼭지점 셰이더는 드로잉 공간의 모든 꼭지점을 배치하고 필요한 경우 다양한 변수를 프래그먼트 셰이더에 전달합니다.

조각 쉐이더는 픽셀/조각의 최종 색상에 대한 모든 계산이 수행되는 곳입니다.

그래서 어디서 블렌딩이 이루어 집니까?

장면 렌더링

는 최종 컬러 버퍼 (프레임 버퍼) 깊이 버퍼 (renderbuffer)이있다. 색상 버퍼는 화면의 (x, y) 위치에서 일부 프래그먼트의 RGBA 값을 보유하고 깊이 버퍼는 동일한 프래그먼트의 깊이 값을 보유합니다.

블렌딩이 활성화되지 않은 경우 일부 프래그먼트가 동일한 (x, y) 위치를 갖는 경우 먼저 깊이 요소가 비교됩니다 (현재 픽셀 대 깊이 버퍼에서 하나). 현재 렌더링 된 프래그먼트가 카메라에 더 가까운 경우 그 색은 이미 색 버퍼에 쓰여진 색을 덮어 씁니다. 그렇지 않으면 두 버퍼가 그대로 유지됩니다.

블렌드가 켜져 있으면 색상 버퍼의 일부가 다른 방향으로 변경되고 변경 방법은 블렌딩에 사용되는 방정식에 따라 달라집니다. 사용할 수있는 다양한 혼합 모드와 방정식이 있으며 필요에 맞게 조절할 수 있습니다.

유용한 링크 :

• http://learningwebgl.com/blog/?p=859
• http://www.nihilogic.dk/labs/webgl_cheat_sheet/WebGL_Cheat_Sheet.htm (혼합 섹션)이 도움이

희망.