Three.js에서 렌더링 - 투 - 텍스처로 알파 채워진 구멍을 펀칭

Question

후 처리를 수행하고 여러 개의 2D 레이어를 혼합하기 위해 render-to-texture를 사용하고 있습니다.

현재 스텐실 마스크를 사용하여 render-to-texture 타겟에 "구멍"을 만들고 일부 영역을 투명하게 유지합니다. 그러나, 이것은 나의 경우에는 거의 성가시다. 차라리 스텐실 마스크를 무시한 다음 구멍을 그리기 위해 일반적인 폴리 폴리 작업을 사용합니다.

"알파 0.0 채우기"영역을 장면에 렌더링하는 데는 어떤 종류의 메서드가 있습니까? 나는. 기존의 rendet-to-texture 목적지 알파 값은 무시되고 단지 0.0 값으로 대체됩니다. OpenGL 모드 비트를 사용자 정의 조각 쉐이더를 사용할 필요없이 설정할 수 있다고 가정합니다 (어떻게?).

이미 모드를 무시하도록 깊이 마스크를 설정하는 방법을 알고 있으므로 기존 다각형의 맨 위에 다시 그릴 수 있습니다.

Answer 1

당신은 당신이 여기처럼 원하는 알파를 작성할 수 있도록 당신이 ShaderMaterial을 있어야 holes.The 물질을 만들기 위해 그리는 다각형에 사용되는 재료의 THREE.NoBlending 혼합 모드를 사용할 수 있습니다

var r = 0.5; 
var g = 0; 
var b = 0; 
var a = 0.8; 
var material = new THREE.ShaderMaterial({ 
    uniforms: { 
     col: { type: "v4", value: new THREE.Vector4(r, g, b, a) } 
    }, 
    fragmentShader: "uniform vec4 col; void main() {\n\tgl_FragColor = col;\n}", 
    side: THREE.DoubleSide 
}); 

material.transparent = true; 
material.blending = THREE.NoBlending; 

(DoubleSide 매개 변수는 문제와 관련이 없지만 때때로 유용합니다.)