WebGL 비트 맵 데이터는 어떻게 검색합니까?

Question

비트 맵 데이터 HTML 캔버스 2D 요소를 검색 할 수 있습니다. 캔버스 3D/WebGL 요소의 렌더링 된 내용에 비트 맵 데이터로 액세스 할 수 있습니까? WebGL Specification의 작업 초안에서

Answer 1

WebGL의 readPixels 서명은 이후 초안에서 변경되었습니다. 대신 화소 데이터마다와 새로운 배열을 반환

하면 배열로서 마지막 인자 기입 건네

공극 readPixels (반짝임 X, 반짝임 Y를 GLsizei 폭 GLsizei 높이 GLenum 형식 GLenum 형 , ArrayBufferView pixels)

이렇게하면 여러 개의 readPixels 작업에 동일한 배열을 재사용 할 수 있습니다.

Answer 2

:

ArrayBufferView readPixels(GLint x, GLint y, 
    GLsizei width, GLsizei height, GLenum format, GLenum type) 

반환 전달 된 사각형 내에서 픽셀 와 ArrayBufferView. readFixels에서 반환 된 데이터는 가장 최근에 보낸 드로잉 명령 당시 이어야합니다. 처리되지 않은 모든 도면 명령을 완료해야하며 결과는 현재 도면 버퍼에 표시되고 readPixels 은 도면 버퍼에 액세스합니다.

의 특정 하위 클래스는 반환 된 ArrayBufferView가 에 따라 다릅니다. UNSIGNED_BYTE이면 Uint8Array는 이고, 그렇지 않으면 Uint16Array가 반환됩니다. 이 반환됩니다.

Answer 3

readPixels를 사용하는 것과 같이 직접적인 것은 아니지만이 방법도 사용할 수 있습니다. 또한 지금처럼 이미지 요소에 캔버스를 렌더링 할 수 있습니다

당신은하지만이 작업을 수행하려면 특별한 옵션 preserveDrawingContext와 WebGL이 컨텍스트를 얻을 수있다

var img = document.getElementById("game-canvas").toDataURL("image/jpeg"); 
$("#shots").append("<img src=\"" + img + "\" width=\"320\" height=\"480\"/>"); 

:

var gl = canvas.getContext("experimental-webgl", {preserveDrawingBuffer: true}); 

에 거기에서, 이미지를 쉽게 조작하려면 2 차원 캔버스에서 이미지를 렌더링하고 원하는 경우 픽셀을 읽을 수 있습니다.

정기적으로 이것을 사용하여 내가 가지고 놀고있는 것들의 "스크린 샷"을 가져옵니다.