3D インタラクションとアニメーションを作成するための JavaScript ライブラリ
HTML DOM 要素をインタラクティブなテクスチャ プレーンに変換できるオープン ソースの JavaScript API。 WebGL を簡単に管理し、ウェブページの DOM 要素を基準にしてメッシュを配置できます。
curtains.js は、オープン ソースの軽量 JavaScript ライブラリであり、ソフトウェア開発者が HTML DOM 要素をインタラクティブなテクスチャ プレーンに簡単に変換する機能を提供します。ライブラリのサイズは小さいですが、非常に安定しているため、ユーザーは強力な 3D インタラクションとアニメーションを簡単に作成できます。画像や動画を含む HTML 要素を 3D WebGL テクスチャ プレーンに簡単に変換できるため、ユーザーはシェーダーを介してそれらをアニメーション化できます。
このライブラリは非常に使いやすいですが、HTML、CSS、JavaScript、およびシェーダーに関する十分な基礎知識が必要です。 シェーダー は、グラフィックス パイプラインで実行され、各ピクセルのレンダリング方法をコンピューターに指示する一連の命令です。また、頂点シェーダーとフラグメント シェーダー、ユニフォームの使用方法、および GLSL 構文の基本についても詳しく知る必要があります。
この curtains.js は MIT ライセンスの下で利用できます。つまり、個人および商用プロジェクトで自由に使用できます。ライブラリの主な目的は、WebGL を処理し、Web ページの DOM 要素に対してメッシュを配置するための簡単な方法を提供することです。 WebGL は、ブラウザー内で 3D および 2D グラフィックスをリアルタイムでレンダリングするための JavaScript API です。
Zen-3d 入門
curtains.js をインストールする最も簡単な方法は、npm を使用することです。スムーズなインストールのために、次のコマンドを使用してください。
NPM経由でcurtains.jsをインストール
npm i curtainsjs JavaScript を使用してシーンを管理する
オープン ソース ライブラリの curtains.js には、シーン管理とその関連プロパティに関連する便利な機能が含まれています。シーンは、平面やシェーダー パスを含む描画されるすべてのオブジェクトを異なる配列に積み上げ、描画する正しい順序でそれらを呼び出します。平面スタックのリセット、場所スタックのクリア、新しい場所インデックスでの再構築、シーンへの新しい平面の追加、シーンからの平面の削除、平面の位置の変更などを簡単に行うことができます。
レンダリング プロパティの処理
無料のライブラリー curtains.js は、独自のアプリケーション内でレンダリングを簡単に処理する機能を提供します。 Renderer クラスの処理は、作成と復元、拡張機能、WebGL コマンドなど、WebGL コンテキストに関連するいくつかの重要な機能を提供しています。コンテナの生成、キャンバスの追加、WebGL 拡張機能の処理、コンテキストの喪失/復元イベントの処理、および追加されたすべてのオブジェクトを追跡する Scene クラス オブジェクトの作成に使用できます。上記とは別に、シーン クリアランス、フレーム バッファー バインディング、深度の設定、ブレンド機能などのグローバル WebGL コマンドの処理もサポートしています。
JavaScript による画像と動画のアニメーション化
オープン ソース ライブラリの curtains.js を使用すると、ソフトウェア開発者は、独自のアプリケーション内で画像や動画を簡単にアニメーション化できます。このライブラリを使用すると、開発者は、CSS ルールで定義された位置とサイズを使用して、プレーンな HTML 要素のように機能する画像や動画を含むプレーンを作成できます。複数のテクスチャ、複数の平面、複数の平面のキャンバス テキスト、複数のビデオ テクスチャなどを使用することもできます。
