WebGL 쉐이더에 데이터 스트리밍

Question

바이너리 SocketIO 채널을 통해 스트리밍되는 카메라 이미지와 함께 브라우저 컨텍스트 내에서 작업하고 있습니다.

아래와 같이 I은 단지 (매우 큰 바이트 배열로) bayer 형식의 데이터를 출력 지원을 처리하고 카메라 :

내가 실시간으로 카메라 영상 스트림을 표시 할 시간은 브라우저의 캔버스에 있습니다.

지금까지 내 생각으로는 WebGL을 렌더러 (속도 용)로 사용하고 프레젠테이션 셰이더 내에서 바이어에서 RGBA로 conversion을 수행하는 것입니다.

나는 WebGL에 상당히 익숙하지 않기 때문에 변환되지 않은 카메라 이미지를 GPU로 보내고 액세스하여 변환을 수행하고 조각을 그늘지게 할 수있는 관례와 모범 사례에 대해 확신 할 수 없습니다.

texture2d와 같은 텍스처 샘플러를 통해 텍스처로 보내고 액세스하는 일반적인 기술이있는 것처럼 보입니까? 그러나 이것은 RGBA 형식을 가정 한 것으로 보입니다. 베이어 형식이 완전히 다른 구조이고 원시 바이트 배열에 액세스하는 것이 더 유용 할 것입니다.

올바른 방향으로 향하면 충분합니다. 진짜 질문은 '입니다. GPU에 임의의 데이터를 보내고 WebGL 컨텍스트에서 액세스하려면 어떻게해야합니까? '

편집 : ThreeJS와 같은 라이브러리를 사용하는 것보다 원시 WebGL 기술을 알고 싶습니다. ThreeJS에서 특히 쉽게 구현할 수 있지만 가능성이 있습니다.

Answer 1

누군가에게 WebGL을 가르쳐달라고하는 것 같습니다. 그것은 큰 주제이고 StackOverflow 질문에는 너무 큽니다. 귀하의 질문이 너무 광범위하기 때문에 닫히지 않는다면 나는 놀라지 않을 것입니다.

http://webglfundamentals.org 또는 http://learningwebgl.org 또는 다른 많은 사이트 중 하나를 읽으십시오.

WebGL을 배운 다음 카메라 데이터를 WebGL에 가져 오는 방법은 gl.texImage2D 또는 gl.texSubImage2D을 호출하는 것입니다. 거의 모든 사람들이 카메라 데이터를 소켓에서 가져 오지 않고 브라우저에서 가져올지라도 WebGL에 카메라 데이터를 전달하는 웹의 예가 많이 있습니다. 그러나 기본적인 수준에서 그것은 다르지 않습니다. 데이터를 Uint8Array과 같은 TypedArray로 가져오고 gl.texImage2D을 호출하여 해당 데이터를 텍스처로 복사하십시오.