CurtainsjsでWebGLエフェクトを作成します-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CurtainsjsでWebGLエフェクトを作成します

尊渡假赌尊渡假赌尊渡假赌

Apr 02, 2025 am 04:26 AM

CurtainsjsでWebGLエフェクトを作成します

このチュートリアルは、既存のWebGL効果をシームレスに統合する方法を示しています<image></image>そして<video></video>Webページ上の要素。いくつかのリソースに対処しますが、このガイドはプロセスを簡素化し、標準のWebページとWebGLの間の重要な接続に焦点を当てています。ダイナミックマウスホバー効果を備えたインタラクティブな画像スライダーを構築します。

スライダーのコア機能と複雑なWebGL/GLSLシェーダーの詳細は、広範囲にカバーされません。ただし、デモコードには、さらなる学習のためのコメントとリンクが含まれています。 SafariまたはInternet Explorerと互換性がないWebGL2とGLSL 300を使用していることに注意してください。デモにはChromeまたはFirefoxを使用します。生産の使用については、 curtains.renderer._isWebGL2がtrueの場合にのみGLSL 300を使用して、GLSL 100と300のシェーダーバージョンの両方をロードすることを検討してください（デモに示すように）。

ステップ1：Webページを作成します

通常どおりHTML、CSS、およびJavaScriptを作成します。私たちの例は画像スライダーですが、原則は広く適用されます。スライダー機能：

全ページの幅にまたがるスライド。
運動量ベースのドラッグとスナップが最も近いスライドにスナップします。
スライドのアニメーションを終了して入力します。
インタラクティブなホバー効果。

Greensock Animation Platform（GSAP）は、アニメーションとドラッグに使用され、ドラッグインタラクション、勢い、およびテキストラインの分割のためのプラグインを提供します。 GSAPスライダーに慣れていない場合は、ガイダンスについてはデモコードを調べてください。これらのDOM要素は、WebGLレンダリングと同期されます。

ステップ2：Curtainsjsを使用したWebGLレンダリング

WebGLを使用して画像をレンダリングします。これには次のことが含まれます。

GLSLシェーダーのテクスチャとして画像をロードします。
画像用のWebGLプレーンの作成とテクスチャの適用。
DOMのカウンターパートに合わせてプレーンを配置およびスケーリングします。

Curtainsjsは、スクロール中およびユーザーインタラクション中にDOM要素とWebGL要素間の同期を処理することにより、このプロセスを簡素化します。これが必須のJavaScriptです：

 //カーテンインスタンスを作成します
const Curtains = new Curtains（{container： "canvas"、autrender：false}）;
// GSAPとカーテン用のシングルRAF
関数renderscene（）{
  curtains.render（）;
}
gsap.ticker.add（renderscene）;
//カーテンパラメーター
const params = {
  vertexshaderid：「Slider-Planes-Vs」、
  fragmentshaderid： "Slider-planes-fs"、
  ユニフォーム：{
    // ...
  }
};
//各スライドの平面を作成します
const planeements = document.queryselectorall（ "。スライド"）;
planeElements.foreach（（planeel、i）=> {
  const plane = curtains.addplane（planeel、params）;
  if（平面）{
    plane.onededy（function（）{
      plane.htmlelement.closest（ "。スライド"）。classlist.add（ "loaded"）;
    }）;
  }
}）;

updateProgress関数は、WebGLプレーンを更新するために変更が必要です。

関数updateProgress（）{
  //スライダーを更新します
  animation.progress（wrapval（this.x） / wrapwidth）;
  // webgl平面を更新します
  planes.foreach（plane => plane.updatePosition（））;
}

テクスチャを表示するには、基本的な頂点とフラグメントシェーダーが必要です。これらは介してロードできます

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティングサービスをチェックしてください。

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。