threejs gl.readPixels alpha 항상 255를 반환합니다.

Question

3js 응용 프로그램에서 픽셀 값을 읽으 려합니다.

const gl = renderer.context; 
const currentFrame = new Uint8Array(gl.drawingBufferWidth * gl.drawingBufferHeight * 4); 
// read image data from gl 
gl.readPixels(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight, gl.RGBA, gl.UNSIGNED_BYTE, currentFrame); 

Threejs 코드

const renderer = new THREE.WebGLRenderer({preserveDrawingBuffer: true}); 

renderer.setPixelRatio(window.devicePixelRatio); 
renderer.setSize(window.innerWidth, window.innerHeight); 

const scene = new THREE.Scene(); 
const camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 1000); 
camera.position.z = 6; 

const geometry = new THREE.BoxGeometry(10, 10, 10); 
const cube = new THREE.Mesh(geometry); 
scene.add(cube); 

RBG 값은 올바른 반환하지만 알파 값은 항상 두 가지 가능성이 있습니다 255

Answer 1

돌아갑니다.
내부 버퍼에는 모든 텍셀의 알파 채널에 대해 1.0 (255)가 포함됩니다.
또는 읽는 곳의 버퍼에는 내부 형식의 알파 채널이 전혀 없습니다. 이것은 내부 버퍼 포맷이 예를 들어. RGB.

WebGL 1.0 Specifications - 5.13.12 Reading back pixels은 OpenGL ES 2.0 사양을 나타냅니다.

가 OpenGL ES 2.0 Specification - 3.6.2 Transfer of Pixel Rectangles 참조 : 다음 RGBA

에

최종 확장 각 그룹은 4 개 요소 그룹으로 변환되어 을 그룹은 a 요소를 포함하지 않는 경우, A는 추가되어 1.0으로 설정됩니다. 그룹에서 R, G 또는 B 중 하나가 누락 된 경우 누락 된 각 요소가 추가되고 0.0 값이 지정됩니다. 만약 프래그먼트 색 writen 된 버텍스 속성의 알파 채널을 설정하지 않으면 모든 버텍스 속성 initilized된다 beacuse

참고 후, 알파 채널, 1.0 (RGBA8 버퍼 (255)) 할 것이다 (0, 0, 0, 1) :

WebGL 1.0 Specifications - 5.13.10 Uniforms and attributes은 OpenGL ES 2.0 사양을 나타냅니다.

는 OpenGL ES 2.0 Specification - See 2.7 Current Vertex State를 참조하십시오

정점 사양을 지원하는 데 필요한 국가는 일반적인 정점 속성을 저장하는 MAX_VERTEX_ATTRIBS 네 가지 구성 요소 부동 소수점 벡터로 구성되어 있습니다. 모든 일반 정점 속성의 초기 값은 (0, 0, 0, 1)입니다. 당신이 THREE.mesh의 형상에 알파 채널을 설정하려면

는, 당신은 1.0 다음 ​​opacity 적은 메쉬에 transparent 자료를 첨부해야합니다. THREE.material 참조 :

var geometry = new THREE.BoxGeometry(10, 10, 10); 
var material = new THREE.MeshBasicMaterial({ 
    color: 0xff0000, 
    transparent: true, 
    opacity: 0.5, 
}); 
const cube = new THREE.Mesh(geometry, material); 

알파 채널을 읽을 수 있으려면 캔버스 알파 (투명도) 버퍼에 포함되어 있는지 확인해야합니다. 이것은 THREE.WebGLRenderer의 alpha 특성을 설정하여 돈을 될 수 있습니다

renderer = new THREE.WebGLRenderer({ 
    alpha: true 
});