Webgl - 하나의 프로그램을 사용하여 이전 프로그램을 마스킹합니다.

Question

일부 꼭지점을 렌더링 한 다음 프래그먼트 셰이더에 색상을 적용하는 셰이더 프로그램을 실행하고 있습니다.

그런 다음 이전 렌더링에서 모양을 가려 내기 위해 사용하고 싶은 다른 프로그램을 실행하고 있습니다.

animate_() { 
    requestAnimationFrame(() => this.animate_()); 

    this.gl_.clearColor(0, 0, 0, 0); 
    this.gl_.clear(webgl.COLOR_BUFFER_BIT); 

    this.gl_.useProgram(this.program_); 

    // Runs enableVertexAttribArray, bindBuffer, vertexAttribPointer 
    renderBufferAttribute(this.gl_, this.position_); 

    // Pass through all my uniforms here 
    // ... 

    // Draw triangles 
    this.gl_.drawArrays(webgl.TRIANGLES, 0, 
     this.particleCount_.total * PARTICLE_ARRAY_COUNT/2); 
} 

나는 다음과 같이 렌더링 두 번째 프로그램이 있습니다 :

지금까지 첫 번째는 다음과 같이 렌더링

필자는 프래그먼트 쉐이더에서 모든 방향으로 불투명도를 설정하려고

animate_() { 
    requestAnimationFrame(() => this.animate_()); 

    // this.gl_.clearColor(0, 0, 0, 0); 
    // this.gl_.clear(webgl.COLOR_BUFFER_BIT); 

    this.gl_.useProgram(this.program_); 

    renderBufferAttribute(this.gl_, this.position_); 

    this.gl_.drawArrays(webgl.TRIANGLES, 0, 6); 
} 

위의 gl.clearColor와 gl.clear를 사용하지만 전체를 지우거나 색상으로 설정합니다.

나는 또한 두 번째 프로그램에 대한 버텍스 쉐이더에서 캔버스의 절반 이상을 렌더링하려고 시도했지만 해결책을 찾지 못했습니다.

또한 두 프로그램에 다음을 사용 :

this.gl_.blendFunc(webgl.SRC_ALPHA, webgl.ONE_MINUS_SRC_ALPHA); 
this.gl_.enable(webgl.BLEND); 

이도 가능합니까?

편집

나는 또한 마스크의 가장자리를 페이드해야 할 것입니다.

감사합니다.

Answer 1

프래그먼트 쉐이더에서 픽셀 색상을 제거하면 더 좋습니다. -> 그것은 fragementshader를 전혀 호출하지 않습니다.

stencilFunc에 대한 자세한 내용은 스텐실처럼 작동하며 조각 쉐이더 호출을 무시합니다. 따라서 '아래'색을 표시합니다

또는 일부 opengl 변형에는 here입니다.