私は今日 (TechCrunch.com で) この概念実証に出くわし、彼らがどのようにして最終結果を達成したかに感銘を受け、興味をそそられました。彼らは、webGL やプラグインを使用していないが、GPU と直接対話し、Javascript のみを使用して最大 60 fps で 3D ビジュアルをレンダリングできると述べています。これを行う方法、または一般的にプラグインを使用せずに Javascript から GPU にアクセスする方法はありますか?
サイトアドレス: famo.us
ps: 矢印キーを使って方向をずらしてみてください!!
これを実現するために、標準HTML5の Javascript API を使用しています。
requestAnimationFrameコードでへの参照がいくつか見られました。この方法を使用すると、互換性のあるブラウザーを使用して、より流動的で最適化されたアニメーションを表示でき、ベースのアニメーションよりもはるかに優れたフレーム レートsetIntervalを実現できます。これは、GPU と利用可能なハードウェア バックグラウンドを使用することで確実に実現されます。
GPU や他のすべてのハードウェア コンポーネントには、Javascript ルーチンを使用して直接アクセスすることはできません。代わりに、ブラウザーは、呼び出された JS ディレクティブと実行コンテキストに基づいて、可能であればGPU を使用して、特定の処理、微積分、およびレンダリングを最適化します。
編集
将来の参考のために、私は最近（元の回答から7年後）、新しいイニシアチブであるWeb Community GroupのW3C GPUが2020年に作成されたことを最近知りました。それは次のように説明しています。
Web コミュニティ グループの GPU の使命は、Web プラットフォームと最新の 3D グラフィックスおよびネイティブ システム プラットフォームに存在する計算機能との間のインターフェイスを提供することです。目標は、これらの最新のテクノロジを高性能で強力かつ安全な方法で公開する新しい Web API を設計することです。Microsoft の Direct3D 12、Apple の Metal、Khronos Group の Vulkan などの既存のプラットフォーム API と連携する必要があります。また、この API は、今日の GPU で利用できる一般的な計算機能を Web に公開し、シェーダー言語を調査してクロスプラットフォーム ソリューションを作成します。
長期的には、このイニシアチブにより、開発者はすべての Web ブラウザーから GPU を直接操作できるようになる可能性があります。ここで、GithubでWebGPU API 仕様の実装ステータスを追跡できます。
famo.us に関して: 彼らは Webkit レンダリング パイプのボトルネックを分析し、ページの構築中にそれらを回避する方法を見つけました。基本的に: DOM ツリーの構築、Render ツリーの構築、Render Tree のレイアウトはバイパスされます。全体の説明については、この記事をご覧ください。
CSS 3D 変換を使用しています。Web ブラウザーは、ハードウェア アクセラレーションを使用して、これらの種類の CSS3 処理を行うようになっています。