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

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

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

Step 3: Implementing WebGL Effects

Step 4: Connecting JavaScript and Shaders

Further Enhancements

ホームページ

ウェブフロントエンド

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（））;
}

ログイン後にコピー

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