Texture

最終更新日時: 2025年08月25日 12:57

TODOs

• nothing

テクスチャーマッピング

テクスチャーを貼り付けるのは、THREE.jsのレイヤでもglslのレイヤでも可能である。

THREE.jsレベルでのテクスチャ操作で可能なこと

• テクスチャの基本的なマッピング（UV座標の割り当て）
• テクスチャの繰り返し設定（repeat, wrapS, wrapT）
• 画像のフィルタリング設定（minFilter, magFilter）
• テクスチャのオフセット調整
• 基本的なマッピングモード変更（平面、キューブマップ等）
• テクスチャのアニメーション（UV座標の単純な移動）
• 複数テクスチャの単純な重ね合わせ
• 基本的な透明度設定
• ミップマップの生成と制御
• アンイソトロピックフィルタリングの設定

GLSLレベルでのテクスチャ操作で可能なこと

パフォーマンスが重要な場合や、特殊な視覚効果が必要な場合

• ピクセルごとの色情報の直接操作
• テクスチャの動的な色調補正やカラーグレーディング
• 複数テクスチャの高度なブレンド処理
• UV座標の動的な変形（歪み、波紋効果など）
• ノイズテクスチャを使用した手続き的なテクスチャ生成
• テクスチャベースのディスプレイスメントマッピング
• カスタムフィルタリング処理の実装
• テクスチャデータを使用した物理ベースのエフェクト
• リアルタイムの照明計算との連携
• 時間やインタラクションに基づく動的なテクスチャ変形
• マスクテクスチャを使用した複雑なブレンド効果
• ピクセルごとの深度や法線情報との連携
• カスタムUVアニメーションの実装
• テクスチャデータを使用した独自のシェーディングモデルの実装

テクスチャマッピングの概要

• THREE.jsで テクスチャファイルの読み込む(code 01)

• THREE.jsでジオメトリの作成

  • ジオメトリを作成すると自動的にテクスチャ用のUV座標系が生成される(code 02)

• THREE.jsでMaterialを作成する

  • 単純なテクスチャマッピングの場合は、MeshBasicMaterialを利用(code 03)
    • シェーダーを書かないがテクスチャでUV座標系の操作は可能(code 04)
  • 色反転などカスタマイズする場合は、ShaderMaterialを利用(code 05)
    • vertex shaderをがデフォルトでもいいが存在しないとUV座標系でエラーが出る
  • uv座標系の受け渡しは明示的に記述する必要がある

• フラグメントシェーダーでテクスチャをサンプリングし、色を出力する

• THREE.js: テクスチャとUV座標をGPUに転送

const texture = new THREE.TextureLoader().load('texture.jpg');

Code 01: テクスチャのロード

const geometry = new THREE.PlaneGeometry(2, 2);

// このジオメトリには自動的にUV座標が含まれる
console.log(geometry.attributes.uv); // UV座標データを確認できます

Code 02: ジオメトリを生成

   const material = new THREE.MeshBasicMaterial({
      map: texture
   });

Code 03: MeshBasicMaterialを生成

const texture = new THREE.TextureLoader().load('texture.jpg');
// テクスチャの繰り返し設定
texture.repeat.set(2, 2);     // U方向に2回、V方向に2回繰り返し
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;

const material = new THREE.MeshBasicMaterial({ map: texture });

Code 04: textureで繰り返し指定

const texture = new THREE.TextureLoader().load('texture.jpg');
// テクスチャの位置をずらす
texture.offset.set(0.5, 0.5); // U方向に0.5、V方向に0.5ずらす
const material = new THREE.MeshBasicMaterial({ map: texture });

Code 04: textureでオフセット指定

const texture = new THREE.TextureLoader().load('texture.jpg');
texture.rotation = Math.PI / 4; // 45度回転
texture.center.set(0.5, 0.5);   // 回転の中心点を設定

const material = new THREE.MeshBasicMaterial({ map: texture });

Code 04: textureで回転

const material = new THREE.ShaderMaterial({
    uniforms: {
        uTexture: { value: texture }
    },
    vertexShader: THREE.ShaderLib.basic.vertexShader,  // デフォルトのvertex shaderを使用
    fragmentShader: `
        uniform sampler2D uTexture;
        varying vec2 vUv; // デフォルトのvertexシェーダーからUV座標を受け取れる
        void main() {
            gl_FragColor = texture2D(uTexture, vUv);
        }
    `
});

Code 05: ShaderMaterial。デフォルトvertex shaderを指定

const material = new THREE.ShaderMaterial({
    uniforms: {
        uTexture: { value: texture }
    },
    // vertexShaderを省略すると、エラーが発生します！
    fragmentShader: `
        uniform sampler2D uTexture;
        varying vec2 vUv;  // エラー：vUvが定義されていない
        void main() {
            gl_FragColor = texture2D(uTexture, vUv);
        }
    `
});

Code 05: MeshBasicMaterialでvertex shaderを指定なし

// ShaderMaterialを作成（THREE.jsの機能）
const material = new THREE.ShaderMaterial({
    // uniformsでテクスチャをシェーダーに渡す
    uniforms: {
        uTexture: { value: texture }  // THREE.jsがGPUにテクスチャを渡す
    },
    // vertex shader
    vertexShader: `
        // THREE.jsが自動的に提供する頂点属性
        attribute vec3 position;  // 頂点座標
        attribute vec2 uv;       // UV座標（PlaneGeometryで生成された）

        // フラグメントシェーダーに渡す変数
        varying vec2 vUv;

        void main() {
            vUv = uv;  // UV座標を渡す
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
    `,
    // フラグメントシェーダー
    fragmentShader: `
        precision mediump float;

        // THREE.jsによって渡されるテクスチャ
        uniform sampler2D uTexture;

        // UV座標は定義したvertex shaderから受け取れる
        varying vec2 vUv;

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

Code 05: MeshBasicMaterialでvertex shaderを指定

const material = new THREE.ShaderMaterial({
    uniforms: {
        uTexture: { value: texture }
    },
    // 頂点シェーダーでUV座標を受け取って渡す
    vertexShader: `
        attribute vec2 uv;
        varying vec2 vUv;
        void main() {
            vUv = uv;
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
    `,
    // フラグメントシェーダーで受け取ったUV座標を使用
    fragmentShader: `
        uniform sampler2D uTexture;
        varying vec2 vUv;
        void main() {
            gl_FragColor = texture2D(uTexture, vUv);
        }
    `
});

Code 06: ux座標系を受け渡し

テクスチャ座標系（UV座標）

• 3Dモデルの各頂点に、テクスチャ上の位置を示すUV座標が割り当てられる
• UV座標は常に0.0から1.0の範囲に正規化されている
  • U: 横方向（左端が0.0、右端が1.0）
  • V: 縦方向（下端が0.0、上端が1.0）

texture()関数の挙動

擬似コードで表現すると以下のようになっている

vec4 texture(sampler2D tex, vec2 uv) {
    // 1. テクスチャサイズの取得
    ivec2 textureSize = getTextureSize(tex); // 例：ivec2(512, 512)

    // 2. UV座標からテクセル座標への変換
    vec2 texelCoord = uv * vec2(textureSize);
    // 例：uv(0.5, 0.5) * (512, 512) = (256, 256)

    // 3. 最近傍のテクセルの取得（NEAREST filteringの場合）
    ivec2 nearestTexel = ivec2(floor(texelCoord));
    return fetchTexel(tex, nearestTexel);

    // もしくは
    // 4. バイリニア補間（LINEAR filteringの場合）
    ivec2 texel00 = ivec2(floor(texelCoord));
    ivec2 texel10 = texel00 + ivec2(1, 0);
    ivec2 texel01 = texel00 + ivec2(0, 1);
    ivec2 texel11 = texel00 + ivec2(1, 1);

    // 補間係数の計算
    vec2 fraction = fract(texelCoord);

    // 4点のテクセルの色を取得
    vec4 c00 = fetchTexel(tex, texel00);
    vec4 c10 = fetchTexel(tex, texel10);
    vec4 c01 = fetchTexel(tex, texel01);
    vec4 c11 = fetchTexel(tex, texel11);

    // 線形補間
    vec4 colorX0 = mix(c00, c10, fraction.x);
    vec4 colorX1 = mix(c01, c11, fraction.x);
    return mix(colorX0, colorX1, fraction.y);
}

Code 06: ux座標系を受け渡し

1. attributes.uv

• UV座標を定義し、テクスチャの貼り付け位置やスケールを制御。
• UV座標が [0, 1] 範囲外の場合、Texture クラスの設定（wrapS や wrapT）によって以下の挙動が発生:
  • 例1: 繰り返し (THREE.RepeatWrapping)
    • UVが 1.5 の場合、テクスチャが繰り返され、50%の位置に再描画。
  • 例2: クランプ (THREE.ClampToEdgeWrapping)
    • UVが 1.5 の場合、テクスチャの端（右端や上端）の色が引き伸ばされる。
• Texture.repeat の設定と連動し、UV範囲が [0, repeat] のスケールで計算される。

2. deleteAttribute(‘uv’)

• UV座標を削除して、テクスチャマッピングを無効化。
• 削除すると、ジオメトリのテクスチャは適用されず、マテリアルの色のみが描画される。

3. attributes.position

• 頂点の位置情報に基づき、テクスチャが形状に対応して配置される。

---

Textureクラスに関連するものとテクスチャへの影響

1. repeat

• UV座標が [0, 1] の範囲を拡大または縮小。
• 例: repeat.set(2, 2) の場合、テクスチャが2回繰り返され、UV範囲 [0, 2] に対応。

2. offset

• UV座標をシフトして、テクスチャの配置を調整。
• 例: offset.set(0.5, 0) ならテクスチャが右に50%移動。

3. wrapS / wrapT

• UV座標が [0, 1] を超える場合の挙動を制御。
  • 繰り返し: テクスチャがリピート（RepeatWrapping）。
  • クランプ: UV範囲外をテクスチャの端の色で埋める（ClampToEdgeWrapping）。
  • ミラー: UV範囲外でテクスチャを反転繰り返し（MirroredRepeatWrapping）。

4. rotation

• UV空間内でテクスチャを回転。

5. center

• 回転の基準点を設定し、スケールや回転時の中心を調整可能。