Three.js

Three.jsは、[WebGL](/glossary/webgl)を使用してウェブブラウザ内で3Dグラフィックスをレンダリングするオープンソースのjavascriptライブラリです。[WebGL](/glossary/webgl) APIの複雑さを抽象化し、カメラ、ライティング、マテリアル、ジオメトリ、アニメーションループを備えた3Dシーンを構築するための高レベルなツールキットを開発者に提供します。2010年にRicardo Cabello（Mr.doob）によって作成されたThree.jsは、製品コンフィグレーター、建築ウォークスルー、データビジュアライゼーション、インタラクティブなストーリーテリングなどに使用される、ウェブ向けで最も広く採用されている3Dライブラリです。WebGLを通じてGPU上で実行されるため、プラグインやネイティブインストールなしに、モダンなハードウェアで毎秒60フレームの複雑なシーンをレンダリングできます。

Three.jsは、通常のブラウザタブ内で高品質な3Dレンダリングを可能にします。デジタルパブリッシングにおいて、この機能は革新的です。印刷ページの平面的な画像を配信する代わりに、パブリッシャーは物理的な奥行き、リアルなライティング、滑らかなアニメーションでコンテンツを提示できます。読者はカールし、影を落とし、タッチやマウス入力に反応するページと対話することで、静的なPDFでは再現できない触覚的な感覚を得られます。このライブラリはすべての主要ブラウザ（Chrome、Firefox、Safari、Edge）で動作し、ハイエンドデスクトップからミッドレンジスマートフォンまで幅広いデバイスに対応します。このクロスプラットフォームな到達範囲により、パブリッシャーは特定のアプリやOSに読者を制限することなく、プレミアムな読書体験を提供できます。

Three.jsはFlipLinkのフリップブック体験の中核となるレンダリングエンジンです。PDFをアップロードしてフリップブックを作成すると、FlipLinkはThree.jsを使用して各ページをリアルな[ページめくりアニメーション](/glossary/page-flip-animation)付きの3Dサーフェスとしてレンダリングします。各ページめくりはリアルタイムで計算されます。紙はカーブに沿って変形し、ページの裏面が見え、動的な影が見開きページ上を移動します。レンダラーは異なる[カバータイプ](/glossary/cover-type)をサポートし、[ハードカバー](/glossary/hardcover)と[ペーパーバック](/glossary/paperback)それぞれに独自の曲げ挙動と背表紙メカニクスがあります。Three.jsは読者のGPUを使用してシーン全体をレンダリングするため、サーバーサイド処理なしにアニメーションが滑らかに維持されます。FlipLinkは、よりシンプルなレイアウトが好まれる場合にPDF.jsベースの[ドキュメントビューアー](/glossary/document-viewer)も提供しており、パブリッシャーは出版物ごとに最適な形式を選択できます。

内部的には、FlipLinkのThree.js統合は複数のレンダリングステージを含みます。各PDFページはラスタライズされ、細分化されたプレーンジオメトリにテクスチャとして適用されます。読者がページめくりを開始すると、ジオメトリの頂点がベジェ曲線に沿って変位し、紙の曲げをシミュレートします。本の上方に配置された指向性光源がリアルタイムのシャドウマップを生成し、カールするページが下のページに影を落とします。カメラは透視投影を使用し、フラットな正射影にはない自然な奥行き感を本に与えます。GPU性能が限られたデバイスでは、Three.jsが自動的にポリゴン数を削減し、影の計算を簡略化して滑らかなフレームレートを維持します。レンダリングパイプライン全体がクライアントサイドで実行されるため、ビデオストリーミングやサーバーレンダリングは不要で、読者のデバイスがすべてを処理します。

CSS 3Dトランスフォーム（`transform: rotateY()`、`perspective()`）はフラットな要素を3D空間で回転させることができ、シンプルなページめくり効果に使われることがあります。しかし、CSS 3Dは矩形のDOM要素を操作するもので、変形させることはできません。ページは回転できますが、カール、曲げ、折りたたみはできません。対照的に、Three.jsは多数の頂点で構成されたメッシュジオメトリで動作するため、紙の変形、厚みの変化、背表紙の曲がり、影の投射をシミュレートできます。CSS 3Dは基本的なカードフリップ操作には軽量で実装が容易ですが、読者が物理的な本と結びつける[リアルな本のシミュレーション](/glossary/realistic-book-simulation)を再現することはできません。実際の印刷物のような見た目と感触を求めるパブリッシャーにとって、Three.jsはそれを可能にするエンジンです。

Three.jsはGPU駆動の3Dレンダリングをブラウザにもたらし、FlipLinkがリアルなページカール、動的な影、遠近感のある奥行きを持つフリップブックを配信することを可能にします。これはフラットなビューアやCSSベースのアニメーションでは実現できない体験です。