Three.js/シェーダー（GLSL）その2

import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'
//画像にドットスクリーン効果を適用するエフェクト
import { DotScreenPass } from 'three/examples/jsm/postprocessing/DotScreenPass.js'

//Post processing
//EffectComposer
const effectComposer = new EffectComposer(renderer)
effectComposer.setSize(sizes.width, sizes.height)
effectComposer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
//RenderPass
const renderPass = new RenderPass(scene, camera)
effectComposer.addPass(renderPass)
//DotScreenPassを適応
const dotScreenPass = new DotScreenPass()
/*
dotScreenPass.enabled = false
でパスを無効にできる 
*/
effectComposer.addPass(dotScreenPass)

//アニメーションの関数内では
const アニメーション = () =>{
    // ...
    //置き換える
    // renderer.render(scene, camera)
    effectComposer.render()
    // ...
}

//EffectComposerとそのパスは、ウィンドウのサイズが変更されたときリサイズする

window.addEventListener('resize', () =>{
   // ...
      // EffectComposerの更新
    effectComposer.setSize(window.innerWidth, window.innerHeight);
    effectComposer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  // ...
})

import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass.js'
// ...
const glitchPass = new GlitchPass()
//glitchPass.goWild = true //ノンストップ 
effectComposer.addPass(glitchPass)

import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js'

// ...
const unrealBloomPass = new UnrealBloomPass()
unrealBloomPass.strength = 0.5
unrealBloomPass.radius = 0.5
unrealBloomPass.threshold = 0.5
effectComposer.addPass(unrealBloomPass)

import { RenderPixelatedPass } from 'three/addons/postprocessing/RenderPixelatedPass.js';

// ...
const renderPixelatedPass = new RenderPixelatedPass( 10, scene, camera );
effectComposer.addPass( renderPixelatedPass );

import { GammaCorrectionShader } from 'three/examples/jsm/shaders/GammaCorrectionShader.js';

// ...

const gammaCorrectionPass = new ShaderPass(GammaCorrectionShader);
effectComposer.addPass(gammaCorrectionPass);

import { SMAAPass } from 'three/examples/jsm/postprocessing/SMAAPass.js';

// ...

const smaaPass = new SMAAPass();
effectComposer.addPass(smaaPass);

import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js'
import { RGBShiftShader } from 'three/examples/jsm/shaders/RGBShiftShader.js'

// ...

const rgbShiftPass = new ShaderPass(RGBShiftShader)
effectComposer.addPass(rgbShiftPass)

import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js'

// TintShader: 画像に特定の効果（この場合はティント）を適用するためのシェーダー定義
const TintShader = {
    // uniforms: シェーダーに渡されるグローバルな変数
    uniforms:{
        tDiffuse: { value: null } // 元の画像テクスチャ用
        uTint: { value: null } //vec3型でRGB値を加算するため
    },
    // vertexShader: 頂点シェーダーのコード
    vertexShader: `
        varying vec2 vUv; // フラグメントシェーダーに渡すためのUV座標
        void main(){
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); // 頂点の位置を計算

            vUv = uv; // UV座標を設定
        }
    `,
    // fragmentShader: フラグメントシェーダーのコード
    fragmentShader: `
        uniform sampler2D tDiffuse; // 元の画像テクスチャ
        uniform vec3 uTint; //

        varying vec2 vUv; // 頂点シェーダーから受け取ったUV座標
        void main(){
            vec4 color = texture2D(tDiffuse, vUv); // UV座標に基づいてテクスチャから色を取得
            color.rgb += uTint; //元のテクスチャの色にuTintの値を加算
            gl_FragColor = color; // 取得した色をフラグメントの色として設定
        }
    `
}

// TintShaderをポストプロセッシングパスとして作成
const tintPass = new ShaderPass(TintShader)

//uTint.valueに新しいTHREE.Vector3オブジェクトを設定
tintPass.material.uniforms.uTint.value = new THREE.Vector3(-0.5,0.5,0)

// effectComposerにtintPassを追加
effectComposer.addPass(tintPass)

// 変位エフェクト用のシェーダー定義
const DisplacementShader = {
    uniforms: {
        tDiffuse: { value: null }, // 元の画像テクスチャ
        uTime: { value: null }     // アニメーション用の時間変数
    },
    vertexShader: `
        varying vec2 vUv; // UV座標をフラグメントシェーダーに渡すための変数

        void main() {
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); // 頂点の位置を計算
            vUv = uv; // UV座標を設定
        }
    `,
    fragmentShader: `
        uniform sampler2D tDiffuse; // 元の画像テクスチャ
        uniform float uTime;        // アニメーション用の時間変数
        varying vec2 vUv;           // 頂点シェーダーから受け取ったUV座標

        void main() {
            // 新しいUV座標を計算（Y座標にサイン波を加えて変位させる）
            vec2 newUv = vec2(
                vUv.x,
                vUv.y + sin(vUv.x * 10.0 + uTime) * 0.05
            );
            vec4 color = texture2D(tDiffuse, newUv); // 変位したUV座標でテクスチャから色を取得

            gl_FragColor = color; // フラグメントの色として設定
        }
    `
}

// 変位エフェクト用のパスを作成し、エフェクトコンポーザーに追加
const displacementPass = new ShaderPass(DisplacementShader);
effectComposer.addPass(displacementPass);

// アニメーション時は関数内で
displacementPass.material.uniforms.uTime.value = elapsedTime; // 経過時間をパスの時間変数に設定

// 変位エフェクト用のシェーダー定義
const NormalMapDisplacementShader = {
    uniforms: {
        tDiffuse: { value: null },       // 元の画像テクスチャ
        uNormalMap: { value: null }      // 変位に使用するノーマルマップテクスチャ
    },
    vertexShader: `
        varying vec2 vUv; // UV座標をフラグメントシェーダーに渡すための変数

        void main() {
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); // 頂点の位置を計算
            vUv = uv; // UV座標を設定
        }
    `,
    fragmentShader: `
        uniform sampler2D tDiffuse; // 元の画像テクスチャ
        uniform sampler2D uNormalMap; // 変位に使用するノーマルマップテクスチャ

        varying vec2 vUv; // 頂点シェーダーから受け取ったUV座標

        void main() {
            vec3 normalColor = texture2D(uNormalMap, vUv).xyz * 2.0 - 1.0; // ノーマルマップから色情報を取得し変換
            vec2 newUv = vUv + normalColor.xy * 0.1; // 新しいUV座標を計算
            vec4 color = texture2D(tDiffuse, newUv); // 新しいUV座標でテクスチャから色を取得

            vec3 lightDirection = normalize(vec3(- 1.0, 1.0, 0.0)); // 光の方向
            float lightness = clamp(dot(normalColor, lightDirection), 0.0, 1.0); // 光の強さを計算
            color.rgb += lightness * 2.0; // 光の強さを色に加算

            gl_FragColor = color; // フラグメントの色として設定
        }
    `
}

// ノーマルマップ変位エフェクトのパスを作成し、エフェクトコンポーザーに追加
const normalMapdisplacementPass = new ShaderPass(NormalMapDisplacementShader);
normalMapdisplacementPass.material.uniforms.uNormalMap.value = textureLoader.load('ノーマルマップのパス');
effectComposer.addPass(normalMapdisplacementPass);

// パーティクルのジオメトリを作成
const particlesGeometry = new THREE.BufferGeometry();
const count = 2000; // パーティクルの数

const positions = new Float32Array(count * 3); // 位置データ vec3
const colors = new Float32Array(count * 3); // 色データ vec3
const scales = new Float32Array(count * 1); // スケール（サイズ） float

for (let i = 0; i < count * 3; i++) {
  positions[i] = (Math.random() - 0.5) * 2; // ランダムな位置
  colors[i] = Math.random(); // ランダムな色
}
for (let i = 0; i < count; i++) {
  scales[i] = Math.random(); // ランダムなスケール
}
/*
追記：3D空間内の点（x, y, z）や色（R, G, B）を扱うときに、可読性という観点から考えた場合
for(let i = 0; i < count; i++){
        const i3 = i * 3
        positions[i3    ] = Math.random()-0.5
        positions[i3 + 1] = Math.random()-0.5
        positions[i3 + 2] = Math.random()-0.5
        colors[i3    ] = Math.random()
        colors[i3 + 1] = Math.random()
        colors[i3 + 2] = Math.random()
        scales[i] = Math.random();
    }
*/

particlesGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
particlesGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
// ジオメトリに属性に割り当てaScaleとしてカスタム属性をつける
particlesGeometry.setAttribute('aScale', new THREE.BufferAttribute(scales, 1));

// シェーダーマテリアルの作成
const material = new THREE.ShaderMaterial({
  uniforms: {
//パーティクルのサイズをuniformsに格納
    uSize: { value: 30 }, 
  },
  depthWrite: false, // 深度バッファへの書き込みを無効化（パーティクルが透明であるため）
  blending: THREE.AdditiveBlending, // 加算ブレンディングを使用（光のような効果）
  vertexColors: true, // 頂点色を有効にする
  vertexShader: ``,  // 頂点シェーダーのソースコード
  fragmentShader: ``  // フラグメントシェーダーのソースコード
});

// パーティクルシステムの作成とシーンへの追加
const particles = new THREE.Points(particlesGeometry, material);
scene.add(particles);

uniform float uSize;  

/*
備考：position、color、normalのような一般的な属性は、
ShaderMaterialを使用する際に頂点シェーダーに自動的に含まれます
aScaleのようなカスタム属性を定義してシェーダーに追加する場合は
頂点シェーダー内でこれらのカスタム属性を明示的に宣言する
*/
attribute float aScale;
//フラグメントシェーダーに色情報（vColor）を渡す
varying vec3 vColor;

void main(){
  vec4 modelPosition = modelMatrix * vec4(position, 1.0);
  vec4 viewPosition = viewMatrix * modelPosition;
  vec4 projectedPosition = projectionMatrix * viewPosition;
  gl_Position = projectedPosition;
 //ランダムなサイズの実装
  gl_PointSize = uSize * aScale;
  /*
  sizeAttenuationの実装は
  パーティクルの基本サイズに
  1.0 / - viewPosition.zを掛ける
  */
  gl_PointSize *= 1.0 / - viewPosition.z;
  
  //vColorに色情報代入
  vColor = color;
}

 const material = new THREE.ShaderMaterial({
     uniforms:{
        uSize: { value: 30 * renderer.getPixelRatio()},
    },  
   //...省略
   })

const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
    pixelRatio: Math.min(window.devicePixelRatio, 2)
}
/*
オブジェクトリテラルの内部で、sizes.widthとsizes.heightを参照できないので
resolutionプロパティを追加、この時点でsizes.widthとsizes.heightは既に定義されているため
問題なくこれらの値を使用してTHREE.Vector2オブジェクトを初期化
高密度ディスプレイも考慮
*/
sizes.resolution = new THREE.Vector2(sizes.width * sizes.pixelRatio, sizes.height * sizes.pixelRatio)  

const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(sizes.pixelRatio) //レンダラーへのピクセル比の設定


const material = new THREE.ShaderMaterial({
    vertexShader: vertexShader,
    fragmentShader: fragmentShader,
    uniforms:{
       uSize: new THREE.Uniform(size),
      //画面の幅と高さを渡す
       uResolution: new THREE.Uniform(sizes.resolution)
     }
 })

window.addEventListener('resize', () =>{
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight
   //THREE.Vector2(sizes.resolutionも)のsetメソッドを使って更新
   sizes.resolution.set(sizes.width * sizes.pixelRatio, sizes.height * sizes.pixelRatio)

})

uniform float uSize;
uniform vec2 uResolution;　

void main(){
    vec4 modelPosition = modelMatrix * vec4(position, 1.0);
    vec4 viewPosition = viewMatrix * modelPosition;
    gl_Position = projectionMatrix * viewPosition;
  
    gl_PointSize = uSize * uResolution.y;  // 画面の高さをかける
    gl_PointSize *= 1.0 / - viewPosition.z;  //遠近法をシミュレート
}

  void main(){
      gl_FragColor = vec4(gl_PointCoord, 1.0, 1.0); 
  }

void main(){
    //円盤状
   // float strength = distance(gl_PointCoord, vec2(0.5));
   // strength = step(0.5, strength);
   // strength = 1.0 - strength;
    
    // 拡散点
    float strength = distance(gl_PointCoord, vec2(0.5));
    strength *= 2.0;
    strength = 1.0 - strength;
    
    //光点
    // float strength = distance(gl_PointCoord, vec2(0.5));
    // strength = 1.0 - strength;
    // strength = pow(strength, 10.0);
    
    gl_FragColor = vec4(vec3(strength), 1.0);
  }

//vColorを宣言  
varying vec3 vColor;

void main(){
  //...省略
  
  //黒色と頂点の色を混合して最終的な色を生成
    vec3 color = mix(vec3(0.0), vColor, strength);

    gl_FragColor = vec4(color, 1.0);  
  }

 const material = new THREE.ShaderMaterial({
     uniforms:{
        uSize: { value: 30 * renderer.getPixelRatio()},
        uTime: { value: 0 }
    },  
    //...省略
 })

//アニメーション関数
const clock = new THREE.Clock()
const tick = () =>{
    const elapsedTime = clock.getElapsedTime() 
  // uTimeを更新
    material.uniforms.uTime.value = elapsedTime
  //...省略
}

uniform float uSize;  
//経過時間
uniform float uTime;
 //...省略
void main(){
  vec4 modelPosition = modelMatrix * vec4(position, 1.0);

//アニメーションの実装部分はここから
   float posZ = fract(modelPosition.z + uTime * 0.3); // fract与えられた数値の小数部分
   modelPosition.z += posZ ;   // z軸の位置をずらす
//ここまで

  vec4 viewPosition = viewMatrix * modelPosition;
  vec4 projectedPosition = projectionMatrix * viewPosition;
  gl_Position = projectedPosition;

  //...省略
}

uniform sampler2D uTexture;

void main() {
　　//テクスチャから色情報を取得
    vec4 textureColor = texture2D(uTexture, gl_PointCoord);
    gl_FragColor = textureColor;
//グレースケールであれば、赤色（R）の値のみを取り出して使用し、それを透明度情報として活用することができます
    //float textureAlpha = texture2D(uTexture, gl_PointCoord).r;
    //gl_FragColor = vec4(1.0, 1.0, 1.0, textureAlpha);
}

const material = new THREE.ShaderMaterial({
 transparent: true,
 depthWrite: false, // 深度バッファへの書き込みを無効化
 blending: THREE.AdditiveBlending // 加算ブレンディングを使用
});

const spherical = new THREE.Spherical(radius, phi, theta);
/*
radiusは球の中心からの距離（半径）
phiは球の中心から点までの線が形成する垂直方向の角度です（0からπまで）
thetaは球の中心を通る水平面上での角度で、方位角を表します（0から2πまで）
*/

const position = new THREE.Vector3();
position.setFromSpherical(spherical);

const positionsArray = new Float32Array(count * 3)
for(let i = 0; i < count; i++){
    const spherical = new THREE.Spherical(
       1,
       Math.random() * Math.PI,
       Math.random() * Math.PI * 2
     )
   const position = new THREE.Vector3()
   position.setFromSpherical(spherical)
      
   const i3 = i * 3
   positionsArray[i3    ] = position.x
   positionsArray[i3 + 1] = position.y
   positionsArray[i3 + 2] = position.z
}    

import gsap from 'gsap'

const material = new THREE.ShaderMaterial({
   //省略
   uniforms:{
        //省略
     uProgress: new THREE.Uniform(0)
      },
})

const destroy = () => {
    scene.remove(firework) // シーンからパーティクルを削除
    geometry.dispose() // ジオメトリのリソースを解放
    material.dispose() // マテリアルのリソースを解放
}
/*
material.uniforms.uProgressの値が0から1まで3秒かけて変化
アニメーションが完了した時にdestroy関数を呼び出してクリーンアップ
*/
gsap.to(
  material.uniforms.uProgress,
  { value: 1, duration: 3, ease: 'linear', onComplete: destroy },
)

uniform float uProgress;

//別の範囲にマッピングするための関数
float remap(float value, float originMin, float originMax, float destinationMin, float destinationMax){
    return destinationMin + (value - originMin) * (destinationMax - destinationMin) / (originMax - originMin);
}

//使用例
void main() {
   // positionは属性なので直接変更できません。そのためnewPositionを計算
    vec3 newPosition = position;
    
   // 0から0.1の範囲を0から1の新しい範囲に変換
    float explodingProgress = remap(uProgress, 0.0, 0.1, 0.0, 1.0);
   //uProgressが0.1より大きくなるっても、explodingProgressが1を超えないように制限
    explodingProgress = clamp(explodingProgress, 0.0, 1.0);
　 //最初は遅く、終わりにかけて速く
   //explodingProgress = pow(explodingProgress, 3.0);
   //最初は速く、終わりにかけて遅く
    explodingProgress = 1.0 - pow(1.0 - explodingProgress, 3.0);
   // newPosition *= explodingProgress;　 //mix関数を使用して滑らかに
　 //explodingProgressが0の場合、結果はvec3(0.0)、explodingProgressが1の場合、結果はnewPosition
    newPosition = mix(vec3(0.0), newPosition, explodingProgress);
    vec4 modelPosition = modelMatrix * vec4(newPosition, 1.0);
   // その他のシェーダーコード...
}

mix(value1, value2, factor);

float openingProgress = remap(uProgress, 0.0, 0.125, 0.0, 1.0);
float closingProgress = remap(uProgress, 0.125, 1.0, 1.0, 0.0);
float progress = min(openingProgress, closingProgress);
progress = clamp(progress, 0.0, 1.0);

 if(gl_PointSize < 1.0)
        gl_Position = vec4(9999.9);

material.onBeforeCompile = (shader) =>{
    console.log(shader)
}