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

vec4 myVec = vec4(1.0, 2.0, 3.0, 4.0);

//ベクトルの要素にアクセス
float x = myVec.x; // x は 1.0
float y = myVec.y; // y は 2.0

//新しいベクトルを作成
vec2 newVec = myVec.xy; // newVec は (1.0, 2.0)
vec3 newVec2 = myVec.zyx; // newVec2 は (3.0, 2.0, 1.0)

//同じ要素を複数回使う
vec3 repeatVec = myVec.xxx; // repeatVec は (1.0, 1.0, 1.0)

// xの絶対値を返す関数
float abs(float x) {
    if (x < 0.0) {
        return -x;
    } else {
        return x;
    }
}

//0.0以上1.0未満の範囲でランダムな値を得る

float randomFloat(float value) {
    return fract(sin(value * 12.9898) * 43758.5453123);
}

float random2D(vec2 value){
    return fract(sin(dot(value, vec2(12.9898,78.233))) * 43758.5453123);
}

float random3D(vec3 value) {
    return fract(sin(dot(value, vec3(12.9898, 78.233, 45.164))) * 43758.5453123);
}

#define PI 3.14159

#include <colorspace_fragment>　//色空間変換を行う
#include <tonemapping_fragment> //トーンマッピングを行う

// 1x1サイズの平面ジオメトリを作成
const geometry = new THREE.PlaneGeometry(1, 1);
// シェーダーマテリアルを作成
const material = new THREE.RawShaderMaterial({
// 頂点シェーダーの定義   
 vertexShader: `
    precision mediump float; // 浮動小数点の精度を指定
    uniform mat4 projectionMatrix; // 投影行列 
    uniform mat4 modelViewMatrix; // モデルビュー行列
    attribute vec3 position; // 頂点の位置
    void main() {
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);  // 頂点位置の計算  
    }
     `,
// フラグメントシェーダーの定義 
 fragmentShader: `
    precision mediump float; // 浮動小数点の精度を指定
    void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
    `
});

// ジオメトリとマテリアルを使ってメッシュを作成
const plane = new THREE.Mesh(geometry, material);

uniform mat4 projectionMatrix;
uniform mat4 viewMatrix;
uniform mat4 modelMatrix;
attribute vec3 position;　//positionはモデル座標系（またはローカル座標系）での頂点の位置
attribute vec3 normal;
attribute vec2 uv;
precision mediump float;

//＊ShaderMaterialを使う場合
const geometry = new THREE.PlaneGeometry(1, 1); 

const material = new THREE.ShaderMaterial({
  vertexShader: `
  void main() {
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 
    }
`,
  fragmentShader: `
  void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);  
  }
`
});

const plane = new THREE.Mesh(geometry, material);

const material = new THREE.RawShaderMaterial({
    vertexShader: `
      `,
    fragmentShader: ` 
     `,
    wireframe: true,
    uniforms:{
        uFrequency: { value: 10.0 },
    },
//position, normal, uvというattribute変数と頂点データを紐づけています
    attributes: ['position', 'normal', 'uv']
})

npm install vite-plugin-glsl

//vite.config.jsファイル
import glsl from 'vite-plugin-glsl'

export default {
    // pluginsに追加
    plugins:[glsl()]
}

//gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);を
//modelPosition、viewPosition、projectedPositionという変数を用意して
//モデル座標系⇨ビュー座標系⇨投影座標系への変換ステップを表すと
 vec4 modelPosition = modelMatrix * vec4(position, 1.0); // モデル座標系からワールド座標系へ
 vec4 viewPosition = viewMatrix * modelPosition;// ワールド座標系からビュー座標系へ
 vec4 projectedPosition = projectionMatrix * viewPosition;// ビュー座標系から投影座標系へ
 gl_Position = projectedPosition;

  uniform mat4 projectionMatrix;
  uniform mat4 viewMatrix;
  uniform mat4 modelMatrix; 
  attribute vec3 position;
  void main(){
　 //modelMatrixを変更することで、オブジェクトの位置を変えることができます
    vec4 modelPosition = modelMatrix * vec4(position, 1.0);
   //オブジェクトに波形のような動きを加える
   //横方向の波：z座標（高さ）を、その頂点のx座標（横位置）に基づいて調整 
   //* 10.0で波の周波数を上げる
　 //* 0.1で振り幅を小さくする
    modelPosition.z += sin(modelPosition.x * 10.0) * 0.1;
    vec4 viewPosition = viewMatrix * modelPosition;
    vec4 projectedPosition = projectionMatrix * viewPosition;
    gl_Position = projectedPosition;
   }

// JavaScript
const material = new THREE.ShaderMaterial({
   //略
    uniforms: {
       uFrequency:{value: 10.0},　
    }
})

//頂点シェーダー内
uniform float uFrequency;
 void main(){
    //
    modelPosition.z += sin(modelPosition.x * uFrequency) * 0.1;
    //
   }

const material = new THREE.RawShaderMaterial({
    vertexShader: testVertexShader,
    fragmentShader: testFragmentShader,
    uniforms:
    {
        //
        uTime: { value: 0 }
    }
})

const clock = new THREE.Clock()
const tick = () =>{
    const elapsedTime = clock.getElapsedTime()
    //マテリアルの更新
    material.uniforms.uTime.value = elapsedTime
    // ...
}

// ...
uniform float uTime;

void main(){
    // ...
    modelPosition.z += sin(modelPosition.x * uFrequency.x + uTime) * 0.1;
    // ...
}

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

//uniformsプロパティでuColorとして管理する
// JavaScript
const material = new THREE.ShaderMaterial({
    vertexShader: testVertexShader,
    fragmentShader: testFragmentShader,
    uniforms: {
        uColor: { value: new THREE.Color('red') },　
    }
})

// フラグメントシェーダー内
uniform vec3 uColor; 

void main() {
// uColorを参照できる
  gl_FragColor = vec4(uColor, 1.0);
}

const texture = textureLoader.load('/texture.jpg')
const geometry = new THREE.PlaneGeometry(1, 1, 32, 32)
const material = new THREE.RawShaderMaterial({
    // ...
    uniforms:{
        // ...
        uTexture: { value: texture}
 　　　　//または、uTexture: new THREE.Uniform(texture)
    }
})

// 頂点シェーダーでuv属性を定義（ShaderMaterialの場合は宣言不要）し、
attribute vec2 uv;
//varying変数vUvを通じてフラグメントシェーダーにUV座標を伝達
varying vec2 vUv;
void main()
{
    // ...

    vUv = uv;
}

uniform sampler2D uTexture;

varying vec2 vUv;

void main()
{
    vec4 textureColor = texture2D(uTexture, vUv);
    gl_FragColor = textureColor;
}

//頂点シェーダー
varying float vElevation;

void main() {
    float elevation = sin(modelPosition.x * uFrequency.x + uTime) * 0.1;
    elevation += sin(modelPosition.y * uFrequency.y - uTime) * 0.1;
    modelPosition.z += elevation;
    // ...
    vElevation = elevation;
}

//フラグメントシェーダー
varying float vElevation;

void main() {
    vec4 textureColor = texture2D(uTexture, vUv);
   //テクスチャのRGB値を動的に変化させる
    textureColor.rgb *= vElevation * 2.0 + 0.5; 
    gl_FragColor = textureColor;
}

//ノイズを生成するためのカスタム関数
vec4 permute(vec4 x){
    return mod(((x*34.0)+1.0)*x, 289.0);
}

vec2 fade(vec2 t){
    return t*t*t*(t*(t*6.0-15.0)+10.0);
}
float cnoise(vec2 P){
    vec4 Pi = floor(P.xyxy) + vec4(0.0, 0.0, 1.0, 1.0);
    vec4 Pf = fract(P.xyxy) - vec4(0.0, 0.0, 1.0, 1.0);
    Pi = mod(Pi, 289.0); // To avoid truncation effects in permutation
    vec4 ix = Pi.xzxz;
    vec4 iy = Pi.yyww;
    vec4 fx = Pf.xzxz;
    vec4 fy = Pf.yyww;
    vec4 i = permute(permute(ix) + iy);
    vec4 gx = 2.0 * fract(i * 0.0243902439) - 1.0; // 1/41 = 0.024...
    vec4 gy = abs(gx) - 0.5;
    vec4 tx = floor(gx + 0.5);
    gx = gx - tx;
    vec2 g00 = vec2(gx.x,gy.x);
    vec2 g10 = vec2(gx.y,gy.y);
    vec2 g01 = vec2(gx.z,gy.z);
    vec2 g11 = vec2(gx.w,gy.w);
    vec4 norm = 1.79284291400159 - 0.85373472095314 * vec4(dot(g00, g00), dot(g01, g01), dot(g10, g10), dot(g11, g11));
    g00 *= norm.x;
    g01 *= norm.y;
    g10 *= norm.z;
    g11 *= norm.w;
    float n00 = dot(g00, vec2(fx.x, fy.x));
    float n10 = dot(g10, vec2(fx.y, fy.y));
    float n01 = dot(g01, vec2(fx.z, fy.z));
    float n11 = dot(g11, vec2(fx.w, fy.w));
    vec2 fade_xy = fade(Pf.xy);
    vec2 n_x = mix(vec2(n00, n01), vec2(n10, n11), fade_xy.x);
    float n_xy = mix(n_x.x, n_x.y, fade_xy.y);
    return 2.3 * n_xy;
}

//cnoise関数を利用
 float strength = cnoise(vUv * 10.0);

smoothstep(edge0, edge1, x);

//attribute vec2 uv; //ShaderMaterialを使用している場合不要
varying vec2 vUv;

void main(){
    // ...

    vUv = uv;
}

varying vec2 vUv;

void main(){
//vUvの2つの成分が赤Rと緑Gに使われてる、UV座標のU値が赤の強度を、V値が緑の強度を表します。
//青の成分は直接1.0（最大値）に設定されています。青色が最大強度
//最後の成分はアルファ（透明度）ですが、このコードでは指定されていないため、デフォルトの1.0（完全不透明）
//結果として、このシェーダーはUV座標(0~1)に基づいて変化する赤と緑の強度を持ち、青は常に最大強度で、不透明な色のパターンを生成します
    gl_FragColor = vec4(vUv, 1.0, 1.0);
}

gl_FragColor = vec4(vUv.x, vUv.x, vUv.x, 1.0);

//strengthという新しい変数を作成しそれにUV座標のX成分を代入
float strength = vUv.x;
//Y軸に沿って変化
//float strength = vUv.y;
//反転
//float strength = 1.0 - vUv.y;
//急激な変化
//float strength = vUv.y * 10.0;
gl_FragColor = vec4(vec3(strength), 1.0);

 float strength = mod(vUv.y * 10.0, 1.0); 
 gl_FragColor = vec4(vec3(strength), 1.0);

float strength = mod(vUv.y * 10.0, 1.0);
strength = step(0.5, strength);

float strength = step(0.8, mod(vUv.x * 10.0, 1.0));
strength += step(0.8, mod(vUv.y * 10.0, 1.0));

 float strength = step(0.8, mod(vUv.x * 10.0, 1.0));
 strength *= step(0.8, mod(vUv.y * 10.0, 1.0));

 float strength = abs(vUv.x - 0.5)+abs(vUv.y - 0.5);

float strength = abs(vUv.x - 0.5)*abs(vUv.y - 0.5);

float strength = max(abs(vUv.x - 0.5), abs(vUv.y - 0.5));

float strength = min(abs(vUv.x - 0.5), abs(vUv.y - 0.5));

float strength = floor(vUv.x * 10.0) / 10.0;

float strength = length(vUv-0.5);
//または
float strength = distance(vUv, vec2(0.5));

float strength = 0.015 / distance(vUv, vec2(0.5));

float strength = step(0.8, mod(vUv.x * 10.0, 1.0));
strength += step(0.8, mod(vUv.y * 10.0, 1.0));
strength = clamp(strength, 0.0, 1.0);

vec3 blackColor = vec3(0.0);
vec3 uvColor = vec3(vUv, 1.0);
vec3 mixedColor = mix(blackColor, uvColor, strength);

gl_FragColor = vec4(mixedColor, 1.0);

// Shadertoyのコード
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
    // 色の計算
    fragColor = vec4(1.0, 0.0, 0.0, 1.0); // 赤色
}

// フラグメントシェーダーのコード
void main() {
    // 色の計算
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 赤色
}

// シーンの作成
const scene = new THREE.Scene();

// 平面ジオメトリの作成
const geometry = new THREE.PlaneGeometry(2, 2);

// シェーダーマテリアルの作成
const material = new THREE.ShaderMaterial({
  vertexShader: `
    varying vec2 vUv;
    void main() {
        gl_Position = vec4(position, 1.0);
        vUv = uv;
    }
  `,
  fragmentShader: `
    uniform vec2 uResolution;
    varying vec2 vUv;
    void main() {
        vec2 uv = vec2(uResolution.x / uResolution.y, 1.0);
        gl_FragColor = vec4(uv, 0.0, 1.0);
    }
  `,
  uniforms: {
    uResolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) }
  }
});

// メッシュの作成とシーンへの追加
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// カメラの作成
const camera = new THREE.Camera();
scene.add(camera);

window.addEventListener('resize', () =>{
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight
    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})

const tick = () =>{
    renderer.render(scene, camera)
    window.requestAnimationFrame(tick)
}
tick()

varying vec2 vUv;

void main(){
    vUv = uv;
/*
gl_Position が変換行列を使用して設定される場合
projectionMatrix はアスペクト比を考慮しているので
フラグメントシェーダーではvUv-1.0 から 1.0 の範囲にマッピングするだけでいい
vec2 uv = vUv * 2.0 - 1.0;
*/
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

uniform vec2 uResolution;
uniform float uTime;
varying vec2 vUv;
/*
色のパレットを生成するためのabcdの値を生成するための参考サイト
http://dev.thi.ng/gradients/
https://iquilezles.org/articles/palettes/
*/
vec3 palette(float t) {
    vec3 a = vec3(0.5, 0.5, 0.5);
    vec3 b = vec3(0.5, 0.5, 0.5);
    vec3 c = vec3(1.0, 1.0, 1.0);
    vec3 d = vec3(0.000, 0.333, 0.667);

    return a + b * cos(6.28318 * (c * t + d));
}

void main(){
  vec2 uv = (vUv * 2.0 - 1.0) * vec2(uResolution.x / uResolution.y, 1.0);
  /*
  uv が fract関数とオフセットによって変更された後の値ではなく、
  元のuvの値をpalette関数に渡すためにコピーする
  画面全体で連続した色の変化を生成する
  */
  vec2 uv0 = uv;
/*
fract関数はその浮動小数点数の小数部分のみを返します
スケールアップ(* 2.0この数字が大きいほど多く分割される)にfract関数を適用し0.5 を減算することで、範囲を [-0.5, 0.5] に変更
*/
    uv = fract(uv * 2.0) - 0.5;
    float d = length(uv);
/*
col 変数は、色情報を保持するための vec3 ベクトルで、この場合は赤色の最大値1.0
*/
//vec3 col =vec3(1.0,0.0,0.0);

//palette関数を使って色を計算
//    vec3 col = palette(d + uTime);
vec3 col = palette(length(uv0) + uTime);
/*
d * 8.: 変数 d（画面中心からの距離）に8を乗算することでスケールを調整し、波の密度を変更します。数字が大きいほど、波の数が多くなります
+ uTime: uTime はシェーダーが開始されてからの経過時間を表すユニフォーム変数です。これを式に加えることで、時間の経過に応じて波の位相が変化し、動的なアニメーション効果を作り出します
sin 関数の結果は-1から1の範囲で変動
/ 8.: sin 関数の結果を8で割ってsin関数の結果の振幅を小さくし、結果の範囲を -1/8 から 1/8 に縮小
*/
    d = sin(d * 8. + uTime) / 8.;
    d = abs(d);
/*
割り算の効果: 距離 d で定数を割ることにより、距離が小さい（つまり、画面の中心に近い）ほど結果の値は大きくなる
ビジュアルの影響: この式により、画面中心に近いピクセルはより明るく、画面の端に近いピクセルはより暗くなり光のようなビジュアルを作り出すことができる
*/
    d = 0.02 / d;
//dの値が大きいほど色が暗くなる
    col *= d;

    gl_FragColor = vec4(col, 1.0);
}

uniform vec2 uResolution;
uniform float uTime;
varying vec2 vUv;

vec3 palette(float t) {
    vec3 a = vec3(0.5, 0.5, 0.5);
    vec3 b = vec3(0.5, 0.5, 0.5);
    vec3 c = vec3(1.0, 1.0, 1.0);
    vec3 d = vec3(0.000, 0.333, 0.667);
    return a + b * cos(6.28318 * (c * t + d));
}

void main() {
    vec2 uv = (vUv * 2.0 - 1.0) * vec2(uResolution.x / uResolution.y, 1.0);
    vec2 uv0 = uv;
//finalColorを定義して、col * d を加算し、複数のパターンを重ね合わせて最終色を形成
    vec3 finalColor = vec3(0.0);
//ループを使用して、複数の異なるスケールのパターンが重なり合うようにする
    for (float i = 0.0; i < 4.0; i++) {
        uv = fract(uv * 1.5) - 0.5;
//exp(-length(uv0)) は、距離に基づいて値が急速に0に近づく効果を表現
        float d = length(uv) * exp(-length(uv0));
//ループの各イテレーションで少しずつ異なる色を生成、時間の経過に伴う色の変化を制御
        vec3 col = palette(length(uv0) + i * 0.4 + uTime * 0.4);
        d = sin(d * 8.0 + uTime) / 8.0;
        d = abs(d);
//距離が近いときの値の増加がより顕著になり、遠いときの減少がより強調
        d = pow(0.01 / d, 1.2);
        finalColor += col * d;
    }
    gl_FragColor = vec4(finalColor, 1.0);
}