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 を実装する

コーディング エージェントを使用している場合は、Modern Web Guidance をインストールします。これには、HTML-in-Canvas の最新の実装手順が含まれています。Modern Web Guidance では、HTML-in-Canvas に加えて、その他の最新のブラウザ API とベスト プラクティスについても説明しています。

次のステップ