Desynchronized WebGL2 canvas
WebGL 2.0 コンテキストの desynchronized オプションにより、合成をバイパスした低レイテンシ描画を実現します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
api.HTMLCanvasElement.getContext.webgl2_context.options_desynchronized_parameter | 81 | 79 | | | 75 | |
注釈 4件
実装メモ
- ChromeOSとWindows
- ChromeOSのみ
制限事項
- このブラウザでは部分的にしか実装されていません
削除済み
- このバージョンで機能が削除されました (81)
基本構文
JAVASCRIPT
const gl = canvas.getContext('webgl2', {
desynchronized: true,
preserveDrawingBuffer: true
});ライブデモ
WebGL2 low-latency hint
Apply desynchronized rendering ideas to WebGL2 contexts on supported platforms.
プレビュー全画面表示
Typical scenarios
Use low-latency rendering when pointer or sensor motion should feel immediate.
プレビュー全画面表示
実務での使いどころ
-
Desynchronized WebGL2 canvas の活用
WebGL2の非同期描画オプション。低レイテンシ3D描画に使用。
注意点
- 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。