HyperFrames向けThree.js
HyperFramesは、threeランタイムアダプターを通じてThree.jsをサポートしています。アダプターはシーンを所有せず、HyperFramesの時間を公開し、シークイベントをディスパッチするため、コンポジションは正確なフレームをレンダリングできます。
契約
- 可能な限り同期的にシーン、カメラ、レンダラー、マテリアル、アセットを作成します。
- ウォールクロック時間ではなく、HyperFramesの時間からレンダリングします。
hf-seekイベントをリッスンし、その時間を正確にレンダリングします。- レンダリングクリティカルなシークの前にモデル、テクスチャ、HDRIをロードします。シーク時にそれらを取得しないでください。
- レンダリングクリティカルなモーションの情報源として
requestAnimationFrameやrenderer.setAnimationLoopを避けてください。
アダプターはwindow.__hfThreeTimeを設定し、シークのたびにnew CustomEvent("hf-seek", { detail: { time } })をディスパッチします。
基本パターン
<canvas id="three-layer"></canvas>
<script type="module">
import * as THREE from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
const canvas = document.getElementById("three-layer");
const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });
// コンポジションのフレームサイズに合わせてください。
renderer.setSize(1920, 1080, false);
renderer.setPixelRatio(1);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(35, 1920 / 1080, 0.1, 100);
camera.position.set(0, 0, 6);
const mesh = new THREE.Mesh(
new THREE.IcosahedronGeometry(1.4, 4),
new THREE.MeshStandardMaterial({ color: 0x64d2ff, roughness: 0.38 }),
);
scene.add(mesh);
scene.add(new THREE.HemisphereLight(0xffffff, 0x223344, 2));
function renderAt(time) {
mesh.rotation.y = time * 0.7;
mesh.rotation.x = Math.sin(time * 0.6) * 0.16;
renderer.render(scene, camera);
}
window.addEventListener("hf-seek", (event) => {
renderAt(event.detail.time);
});
renderAt(window.__hfThreeTime || 0);
</script>
#three-layer {
width: 100%;
height: 100%;
display: block;
}
AnimationMixerパターン
GLTFまたは作成されたクリップアニメーションの場合、ミキサーを直接シークします：
function renderAt(time) {
mixer.setTime(time);
renderer.render(scene, camera);
}
複数のミキサーが存在する場合、同じtimeですべてをシークします。
使用例
- 決定論的な3Dオブジェクト、プロダクトスピン、シードデータ付きパーティクル、シェーダープレート。
timeから派生したカメラ移動。- アセットがローカルにあり、検証完了前にロードされたGLTFアニメーションクリップ。
避けるべきこと
Date.now()、performance.now()、またはクロックデルタを使用してシーンの状態を更新すること。- レンダリングクリティカルな処理を自由実行のアニメーションループ内に残すこと。
- レンダリング時にリモートのモデルやテクスチャをロードすること。
- デバイスピクセル比に依存した出力。ビデオレンダリングのためにレンダラーサイズとピクセル比を固定してください。
- 前のフレーム履歴に依存するポストプロセッシングパス（時間から状態を再構築できる場合を除く）。
検証
Three.jsコンポジションを編集した後：
npx hyperframes lint
npx hyperframes validate
クレジットと参照
- HyperFramesアダプターソース：
packages/core/src/runtime/adapters/three.ts。 - Three.js
WebGLRendererドキュメント：https://threejs.org/docs/pages/WebGLRenderer.html - Three.js
AnimationMixer.setTime()ドキュメント：https://threejs.org/docs/pages/AnimationMixer.html