캔버스에서 실시간으로 곱셈 블렌드 모드를 사용하려면 어떻게해야합니까?

Question

2016 년 1 월 1 일부터 편집 : globalCompositeOperation에 대해 "곱하기"값이 구현됩니다. 성능은 실시간 그래픽에 충분합니다.

---

기본적으로, 나는 두 개의 캔버스를 (한 도면에 사용되는 보이지 않는 캔버스)하고 난 곱하기 혼합 모드와 눈에 보이는 하나에 보이지 않는 캔버스를 혼합합니다.

Context.globalCompositeOperation은 곱셈을 포함하지 않지만 내 의견으로는 imageData을 사용하여 수동으로 캔버스를 혼합하는 것은 너무 느립니다 (60fps에서이 작업을 수행 할 수 있어야합니다).

캔버스를 혼합하는 데 사용할 수있는 더 빠른 방법이 있습니까? 나는 이것이 WebGL을 사용하여 수행 될 수 있다고 생각하지만, 사용 경험이 없습니다.

Answer 1

WebGL의 혼합 모드에는 소스와 대상의 곱셈이 포함되지 않습니다. 그러나 WebGL의 렌더링 - 투 - 텍스처 기능을 사용하여 효율적으로 곱하기 연산을 수행 할 수 있습니다.

1. 보이는 캔버스를 WebGL 캔버스로 만들 수 있습니다.
2. 두 개의 텍스처를 만듭니다. 그들을 "근원"과 "목적지"라고 부르십시오.

3. "소스"텍스처에 보이지 않는 캔버스 콘텐츠를 렌더링합니다.

   var sourceTexture = gl.createTexture() 
   gl.bindTexture(gl.TEXTURE_2D, sourceTexture) 
   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, sourceCanvas) 
   // ...also set texture filters — see any WebGL tutorial... 
   

4. 가에 다른 콘텐츠를 렌더링 :이 (이 내장 된 작업입니다) (여분의 캔버스를 사용하지 않고) 직접 WebGL을 그리기 작업을 사용하거나 수행 또는 질감에 2D 보이지 않는 캔버스의 내용을 업로드하여 할 수있다 "대상"텍스처에 곱하십시오.

5. 마지막으로 실제 보이는 캔버스를 대상으로 프래그먼트 셰이더를 사용하여 "원본"텍스처와 "대상"텍스처를 곱하십시오. 여기 기술은 후 처리 효과에 사용되는 기술입니다. such a tutorial 또는 간단한 예를 찾아 보시기 바랍니다. 간단히 말해, 전체 캔버스에 프래그먼트 셰이더를 적용하려면 전체 화면 쿼드 - 전체 뷰포트를 포함하는 형상을 그립니다. 8

   varying vec2 texCoord; 
   uniform sampler2D sourceTexture; 
   uniform sampler2D destTexture; 
   void main(void) { 
       gl_FragColor = texture2D(sourceTexture, texCoord) * texture2D(destTexture, texCoord); 
   } 
   

당신이 말보다 더 이상이없는 경우 다음, 프레임 당 곱셈 - 혼합 중복 여러 수행 할 경우 : 버텍스 쉐이더는 사소한이며, 같은 단편 셰이더는 것 위의 절차를 확장하여 여러 텍스처를 곱할 수 있습니다. 로트가 많은 경우 두 텍스처를 곱하는 단계를 세 번 수행 한 다음 역할을 교환해야합니다.

더 구체적인 답변을 원할 경우 함께 곱한 그래픽의 수와 종류에 대한 자세한 내용을 질문에 포함하십시오.