WebGL로 동영상 출력하기

1. HTML에 <video> 태그 추가

 

<video id="video" width="640" height="360" autoplay muted loop playsinline style="display:none">
  <source src="sample.mp4" type="video/mp4">
</video>

• autoplay muted loop playsinline 속성은 브라우저 자동재생 제한을 피하기 위해 필요합니다.
• style="display:none"으로 화면에는 직접 보이지 않게 합니다.

2. JavaScript에서 Video 텍스처 생성

 

let video = document.getElementById("video");
let videoTexture = gl.createTexture();

function initVideoTexture() {
  gl.bindTexture(gl.TEXTURE_2D, videoTexture);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
}
initVideoTexture();

3. 매 프레임마다 Video를 텍스처에 업데이트

 

function updateVideoTexture() {
  if (video.readyState >= video.HAVE_CURRENT_DATA) {
    gl.bindTexture(gl.TEXTURE_2D, videoTexture);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA,
                  gl.UNSIGNED_BYTE, video);
  }
}

4. drawScene()에 Video Quad 추가

 

function drawScene() {
  gl.clearColor(0,0,0,1);
  gl.clear(gl.COLOR_BUFFER_BIT);

  // 기존 이미지/텍스트 Quad 출력
  for (let i = 0; i < Object.keys(datas).length; i++) {
    drawQuad(drawBuffers[i].buffer, drawBuffers[i].texture);
  }

  // 🎬 Video Quad 출력
  updateVideoTexture();
  let videoQuad = createOverlayBuffer(100, 100, 640, 360, null); // 위치/크기
  drawQuad(videoQuad, videoTexture);

  // 선택 영역 출력
  for (let i = 0; i < drawSels.length; i++) {
    drawRect(drawSels[i].buffer, drawSels[i].color);
  }
}

✅ 요약

• <video> 태그를 숨겨두고 WebGL 텍스처로 매 프레임 업데이트
• drawScene()에서 Quad에 바인딩해 출력
• 브라우저 자동재생 제한 때문에 muted autoplay playsinline 속성 필수

 

영상 위에 텍스트나 그래픽 오버레이까지 같이 출력하는 WebGL 샘플을 구성

기본 아이디어는 비디오를 텍스처로 Quad에 출력하고, 그 위에 텍스트나 도형을 또 다른 Quad/라인으로 그려서 합성하는 방식입니다.

📌 샘플 구조

1. HTML

 

<canvas id="glcanvas"></canvas>
<video id="video" width="640" height="360" autoplay muted loop playsinline style="display:none">
  <source src="sample.mp4" type="video/mp4">
</video>

2. Video 텍스처 초기화

 

let video = document.getElementById("video");
let videoTexture = gl.createTexture();

function initVideoTexture() {
  gl.bindTexture(gl.TEXTURE_2D, videoTexture);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
}
initVideoTexture();

function updateVideoTexture() {
  if (video.readyState >= video.HAVE_CURRENT_DATA) {
    gl.bindTexture(gl.TEXTURE_2D, videoTexture);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA,
                  gl.UNSIGNED_BYTE, video);
  }
}

3. 텍스트 오버레이용 텍스처 생성

기존 코드의 loadTextureText() 함수를 그대로 활용합니다. 예:

 

let overlayTextTexture = loadTextureText(
  "Hello WebGL!", 300, 80, 10, 10,
  "Arial", "white", 32, "bold", "center"
);
let overlayQuad = createOverlayBuffer(120, 120, 300, 80, null);

4. 그래픽(도형) 오버레이

기존 drawRect()나 drawLine() 함수를 활용해서 영상 위에 박스나 선을 그릴 수 있습니다. 예:

 

let rectBuffer = createBuffer([
  -0.5, -0.5,
   0.5, -0.5,
   0.5,  0.5,
  -0.5,  0.5
]);

5. drawScene() 수정

 

function drawScene() {
  gl.clearColor(0,0,0,1);
  gl.clear(gl.COLOR_BUFFER_BIT);

  // 🎬 Video Quad
  updateVideoTexture();
  let videoQuad = createOverlayBuffer(50, 50, 640, 360, null);
  drawQuad(videoQuad, videoTexture);

  // 📝 Text Overlay
  drawQuad(overlayQuad, overlayTextTexture);

  // ▢ Graphic Overlay (예: 빨간 박스)
  drawRect(rectBuffer, [1.0, 0.0, 0.0, 1.0], 2.0);
}

✅ 요약

• 비디오 Quad → <video>를 텍스처로 업데이트
• 텍스트 Quad → Canvas에 글자를 그려 텍스처로 변환 후 출력
• 그래픽 오버레이 → 기존 drawRect, drawLine 함수로 도형 출력

이렇게 하면 영상 위에 텍스트와 그래픽을 동시에 합성할 수 있고,
Chromium 브라우져를 제외한 대부분의 브라우져에서 동영상 출력이됩니다.