HTML-in-Canvas 개요

Natalia Markoborodova

HTML-in-Canvas API는 DOM의 대화형 및 접근성 환경과 <canvas>의 고성능 픽셀 수준 제어 간의 격차를 해소합니다. 이 API를 사용하면 브라우저가 상호작용, 접근성 트리, 브라우저 수준 통합을 유지하면서 라이브 DOM 하위 트리를 2D, WebGL 또는 WebGPU 캔버스 컨텍스트에 직접 그릴 수 있습니다.

HTML-in-Canvas API의 동영상 개요

HTML-in-Canvas의 이점, 이전 해결 방법보다 개선된 점, 가장 적합한 사용 사례에 대해 알아보려면 Chrome 157의 HTML-in-Canvas: 2D, WebGL, WebGPU 내의 대화형 DOM을 참고하세요.

HTML-in-Canvas로 UI 구현

HTML-in-Canvas를 앱에 통합하려면 다음 단계를 따르세요.

  • 브라우저 API를 사용하여 직접 구현을 만듭니다.
  • HTML-in-Canvas를 지원하는 프레임워크를 사용합니다.

코딩 에이전트를 사용하여 도움을 받을 수도 있습니다. Modern Web Guidance를 사용하여 코딩 에이전트 환경을 개선하는 방법을 알아보세요.

직접 구현

구현은 사용 중인 컨텍스트에 따라 다릅니다. 시작하기 전에 drawable 콘텐츠 및 paint 이벤트와 같이 모든 컨텍스트에서 공통적으로 사용되는 기술 개념을 검토하세요.

다음 컨텍스트에서 요소 이미지를 캔버스에 그리고 요소의 도형을 업데이트하는 방법을 알아보세요.

라이브러리 및 프레임워크 지원

널리 사용되는 여러 라이브러리에서 WebGL 및 WebGPU 텍스처와 2D 캔버스 효과를 위한 실험용 HTML-in-Canvas 지원을 추가했습니다. 각 라이브러리의 문서를 확인하여 현재 지원 상태와 구현 세부정보를 확인하세요.

Three.js

행렬을 수동으로 업데이트하는 것은 지루할 수 있으므로 프레임워크에 기본 제공 지원이 추가되고 있습니다. 예를 들어 Three.js는 THREE.HTMLTexture를 사용하여 실험적 지원을 제공합니다.

const material = new THREE.MeshBasicMaterial();
material.map = new THREE.HTMLTexture(uiElement); // Pass the DOM element

const geometry = new THREE.BoxGeometry(1, 1, 1);
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

PlayCanvas

PlayCanvas는 텍스처 API를 사용하여 HTML-in-Canvas도 지원합니다.

// Wait for the 'paint' event to set the source
canvas.addEventListener('paint', () => {
  htmlTexture.setSource(htmlElement);
}, { once: true });
canvas.requestPaint();

// Keep up to date
canvas.addEventListener('paint', onPaintUpload);

const material = new pc.StandardMaterial();
material.diffuseMap = htmlTexture;
material.update();

Babylon.js

Babylon.js는 BABYLON.HtmlTexture 클래스를 통해 HTML-in-Canvas를 지원합니다.

// 2. Wrap the DOM element in an HtmlTexture
const htmlTexture = new BABYLON.HtmlTexture("htmlTexture", uiElement, scene);

// 3. Assign the texture to a material
const material = new BABYLON.StandardMaterial("hudMaterial", scene);
material.diffuseTexture = htmlTexture;

// 4. Apply material to 3D mesh
const plane = BABYLON.MeshBuilder.CreatePlane("hudPlane", { width: 1.6, height: 0.9 }, scene);
plane.material = material;

// 5. Start Render Loop
engine.runRenderLoop(() => {
  scene.render();
});

PixiJS

PixiJS는 v8.19.0에서 HTML-in-Canvas에 대한 지원을 제공했습니다.

import { HTMLSource } from 'pixi.js/html-source';

// ... Initialize the app

// Append the HTML element as a direct child of the Pixi canvas
app.canvas.appendChild(htmlElement);

// Create the HTML-in-Canvas source and wrap it in a Sprite
const sprite = Sprite.from(new HTMLSource({ resource: form, autoUpdate: true }));
app.stage.addChild(sprite);

app.ticker.add(() => {
  // Make sure to align the HTML element by updating its transform
  const syncT = app.canvas.getElementTransform(htmlElement, finalTransform);
  if (syncT) {
    htmlElement.style.transform = syncT.toString();
  }
});

CanvasUI

CanvasUI는 HTML-in-Canvas를 사용하는 UI 구성요소의 오픈소스 라이브러리입니다.

코딩 에이전트로 HTML-in-Canvas 구현하기

코딩 에이전트를 사용하는 경우 HTML-in-Canvas의 최신 구현 안내가 포함된 Modern Web Guidance를 설치합니다. Modern Web Guidance는 HTML-in-Canvas 외에도 다른 최신 브라우저 API와 권장사항을 다룹니다.

다음 단계