Slider-displace

デモ

ソースコード

import { Vector2, MirroredRepeatWrapping } from "three";
import vertexShader from "./vertex.glsl";
import fragmentShader from "./fragment.glsl";
import { config } from "negl";
import { SingleMeshSlider } from "#/parts/helper/slider/SingleMeshSlider";
export default class extends SingleMeshSlider {
  setupTexes(uniforms) {
    this.texes.forEach((tex, key) => {
      const newTex = tex.clone();
      newTex.wrapT = MirroredRepeatWrapping;
      newTex.wrapS = MirroredRepeatWrapping;

      this.texes.set(key, newTex);
    });
    super.setupTexes(uniforms);
    const dispKey = `${config.prefix.tex}Disp`;
    uniforms.texDisp = { value: this.texes.get(dispKey) };
    this.texes.delete(dispKey);
    return uniforms;
  }
  setupUniforms() {
    const uniforms = super.setupUniforms();
    uniforms.uNoiseScale = { value: new Vector2(2, 2) };
    return uniforms;
  }
  setupVertex() {
    console.log(this.uniforms);
    return vertexShader;
  }
  setupFragment() {
    return fragmentShader;
  }
  debug(folder) {
    super.debug(folder);

    folder.add(this.uniforms.uNoiseScale.value, "x", 0, 10, 0.1);
    folder.add(this.uniforms.uNoiseScale.value, "y", 0, 10, 0.1);
  }
}

利用方法

⚠️

ダウンロードしたコードをプロジェクトに配置し、以下のコードを記述してください。

index.html

<img
  class="slider"
  data-webgl="slider-displace"
  data-tex-1="/sample1.jpg"
  data-tex-2="/sample2.jpg"
  data-tex-3="/sample3.jpg"
  data-tex-4="/sample4.jpg"
  data-tex-5="/sample5.jpg"
/>

使用画像・動画

こちらを参考にダウンロードした各ファイルを配置してください。

slider-3d slider-frag