Art-2: カラースクリプト・ライティング設計

概要

Rift Survivors の各シーン・状況における色彩設計とライティング設計を定義する。 Art-1: アートスタイルガイドの「ダークベース × ネオンアクセント」方針を、シーン単位の具体的な色温度・光源配置・ポストプロセス調整値に落とし込む。

設計方針

UIデザインシステムと整合: 3Dシーン内の色は UIデザインシステムのネオン3色を軸にする
シーン別の色温度で没入感: ロビー=夕暮れ、ダンジョン=テーマ別、ボス戦=警告色遷移
Bloom で"ネオンが光る"印象を作る: シーンごとに UnrealBloomPass の threshold/strength を調整
ライトは最大4つ: Art-1 の「動的ライティングの多用不可」制約に準拠

マスターカラーパレット

プライマリ（ネオン3色）

UI と完全整合。3Dシーン内のエミッシブ・ポイントライト・UIすべてで共通。

名前	HEX	RGB	主用途
Neon Pink	`#ff2d75`	(255, 45, 117)	警告、ボス、ネオン属性
Cyber Cyan	`#00f0ff`	(0, 240, 255)	情報、ポータル、レア、データ属性
Electric Purple	`#a855f7`	(168, 85, 247)	リフト、エピック、グリッチ属性

セカンダリ（環境・雰囲気）

シーンの空気感を決める色。背景・フォグ・環境光に使用。

名前	HEX	主用途
Void Black	`#0a0a0f`	最も深い背景、ボス戦アリーナ床
Deep Navy	`#1a1a2e`	汎用背景、ロビー床のトーン
Midnight Blue	`#16213e`	ダンジョン基本背景
Twilight Purple	`#2d1b4e`	ロビーグラデ上側、夕暮れトーン
Nebula Indigo	`#1f0d3e`	Void Rift 背景
Violet Corruption	`#1a0a3a`	Glitch Core ダンジョンの暗紫背景
Ember Crimson	`#3a0a1a`	ボス戦の暗赤警告背景

アクセント（差し色）

各シーンに振る差し色・エフェクト色。

名前	HEX	主用途
Neon Green	`#00ff88`	Success、HP、データグリッドのグリッド線
Neon Yellow	`#f0f000`	Warning、ネオンアーケード看板
Acid Lime	`#b6ff00`	Glitch Core のノイズ、破損表現
Ice White	`#e8f6ff`	Void Rift の虚空、強ハイライト
Gold Legendary	`#ffcc00`	レジェンダリー発光、最重要演出
Pure White	`#ffffff`	テキスト・UIのみ

使用比率（3Dシーン内）

背景 & フォグ:    ████████████████████████  70%  (Void/Navy/Purple)
ネオンアクセント:  ██████                    18%  (Pink/Cyan/Purple)
床・壁中間調:     ████                      10%  (Deep Navy ベース)
ハイライト:       ██                         2%  (White/Gold)

シーン別カラースクリプト

シーン遷移サマリ（色温度フロー）

1. ロビー (Lobby)

ムード: 落ち着き・安心、夕暮れ感、スタジオジブリ風の和らぎ。

要素	HEX	備考
scene.background (上)	`#2d1b4e`	Twilight Purple
scene.background (下)	`#1a1a2e`	Deep Navy
Fog color	`#1f1f3a`	near=30 / far=80
環境光 AmbientLight	`#7a5cff` 強度 0.45	紫がかった薄明かり
主光源 DirectionalLight	`#ffb07a` 強度 0.6	夕陽オレンジ、水平15度
ポイントライト ×2	`#00f0ff` 強度 1.0 / dist 12	ミッションポータル周辺
ポイントライト ×1	`#a855f7` 強度 0.8 / dist 10	装備クラフトエリア
キャラリムライト	`#ff2d75` 強度 0.3	背後から薄く

Bloom: threshold 0.85 / strength 0.6 / radius 0.8（抑えめ、穏やか）

typescript

scene.background = new THREE.Color(0x1a1a2e);
scene.fog = new THREE.Fog(0x1f1f3a, 30, 80);

const ambient = new THREE.AmbientLight(0x7a5cff, 0.45);
const sunset = new THREE.DirectionalLight(0xffb07a, 0.6);
sunset.position.set(10, 3, 5);

const portalLight = new THREE.PointLight(0x00f0ff, 1.0, 12, 2);
portalLight.position.set(0, 2, -8);

2. Data Grid ダンジョン

ムード: 冷徹・デジタル、無機質な格子世界、Tron風。

要素	HEX	備考
scene.background	`#0a1628`	濃紺、ほぼ黒
Fog color	`#0a1f33`	near=15 / far=45
環境光	`#3a8fbf` 強度 0.35	青緑の薄光
床グリッド線発光	`#00f0ff`	Cyber Cyan
壁ブロック	`#16213e` ベース	Midnight Blue
ネオンアクセント	`#00ff88`	データストリーム表現
ポイントライト ×3	`#00f0ff` 強度 1.2 / dist 8	グリッド交点に配置
ポイントライト ×1	`#00ff88` 強度 0.8 / dist 10	データフラグメント

Bloom: threshold 0.7 / strength 0.9 / radius 0.7（シャープな発光）

typescript

scene.background = new THREE.Color(0x0a1628);
scene.fog = new THREE.Fog(0x0a1f33, 15, 45);

const ambient = new THREE.AmbientLight(0x3a8fbf, 0.35);
const gridLight = new THREE.PointLight(0x00f0ff, 1.2, 8, 2);

3. Neon Arcade ダンジョン

ムード: 繁華街・ギラつき、80s アーケード、渋谷ネオン。

要素	HEX	備考
scene.background	`#1a0833`	濃紫
Fog color	`#2a0d4a`	near=12 / far=40
環境光	`#9a5cff` 強度 0.5	紫寄り、少し明るめ
看板発光 (メイン)	`#ff2d75`	Neon Pink
看板発光 (サブ)	`#f0f000`	Neon Yellow
壁ブロック	`#2d1b4e` ベース	Twilight Purple
ポイントライト ×2	`#ff2d75` 強度 1.5 / dist 9	看板直下
ポイントライト ×2	`#a855f7` 強度 1.0 / dist 8	通路照明

Bloom: threshold 0.6 / strength 1.1 / radius 1.0（ギラつく発光）

typescript

scene.background = new THREE.Color(0x1a0833);
scene.fog = new THREE.Fog(0x2a0d4a, 12, 40);
const signPink = new THREE.PointLight(0xff2d75, 1.5, 9, 2);
const signPurple = new THREE.PointLight(0xa855f7, 1.0, 8, 2);

4. Glitch Core ダンジョン

ムード: 崩壊・不安定、システムエラー、グリッチ属性を象徴する紫の侵食。

要素	HEX	備考
scene.background	`#1a0a3a`	Violet Corruption
Fog color	`#2a0d4a`	near=10 / far=35、濃い
環境光	`#4c1d95` 強度 0.3	暗紫
ノイズブロック	`#b6ff00`	Acid Lime（グリッチ差し色）
壁ブロック	`#0f0a2e` ベース	ほぼ黒
破損パーツ発光	`#a855f7`	Electric Purple（グリッチ属性色）
ポイントライト ×2	`#a855f7` 強度 1.3 / dist 7	紫発光
ポイントライト ×1	`#b6ff00` 強度 0.6 / dist 6	グリッチスポット（点滅）

Bloom: threshold 0.55 / strength 1.2 / radius 0.9（荒々しい発光）

追加エフェクト: ChromaticAberration 強度を通常の1.5倍（デスクトップのみ）

typescript

scene.background = new THREE.Color(0x1a0a3a);
scene.fog = new THREE.Fog(0x2a0d4a, 10, 35);
const violetLight = new THREE.PointLight(0xa855f7, 1.3, 7, 2);
const glitchLight = new THREE.PointLight(0xb6ff00, 0.6, 6, 2);
// 点滅: 0.1sで on/off

グリッチ属性 = パープル

docs/gameplay/combat.md の属性表に従い、グリッチ属性色は パープル/バイオレット (#a855f7) で統一する。赤系はボス戦の警告色として別扱い。

5. Void Rift ダンジョン

ムード: 虚空・超越、高次元、白銀と青の神聖感。

要素	HEX	備考
scene.background	`#1f0d3e`	Nebula Indigo
Fog color	`#2a1a5a`	near=20 / far=60（遠視界）
環境光	`#c8d8ff` 強度 0.55	青白、やや強め
虚空パーティクル	`#e8f6ff`	Ice White
壁ブロック	`#1a1a2e` ベース	Deep Navy
リフト発光	`#00f0ff`	Cyber Cyan
ポイントライト ×2	`#e8f6ff` 強度 0.9 / dist 14	広範囲の柔らかい白光
ポイントライト ×2	`#00f0ff` 強度 1.0 / dist 10	リフトオブジェクト

Bloom: threshold 0.75 / strength 1.0 / radius 1.2（ふんわり広がる発光）

typescript

scene.background = new THREE.Color(0x1f0d3e);
scene.fog = new THREE.Fog(0x2a1a5a, 20, 60);
const voidLight = new THREE.PointLight(0xe8f6ff, 0.9, 14, 1.5);
const riftLight = new THREE.PointLight(0x00f0ff, 1.0, 10, 2);

6. ボス戦 (Boss Battle)

ムード: 緊張・高揚、赤色警告、暗雲、威圧感。

ボス戦は「元のダンジョンカラー → 赤系警告色」への段階的遷移で演出する。

フェーズ	Background	Fog	Ambient	主ポイントライト	Bloom
登場フラッシュ	`#ffffff` → `#ff2d75`	—	—	—	str 2.0 瞬間
フェーズ1 (100-50%)	`#2a0a1a`	`#3a0a1a` near=12/far=30	`#a82c3c` 0.35	`#ff2d75` 1.4×3 / `#a855f7` 0.8×1	th 0.6 / str 1.2 / r 0.9
フェーズ2 (50-20%)	`#3a0a1a`	`#4a0a1a` near=10/far=25	`#c83c4c` 0.4	`#ff2d75` 1.6×3	th 0.55 / str 1.4 / r 1.0
フェーズ3 (20-0%)	`#5a0a1a`	`#6a0a1a` near=8/far=20	`#ff2d75` 0.5	`#ff2d75` 2.0×4 (点滅)	th 0.5 / str 1.6 / r 1.1
撃破演出	`#ffffff` フェード	—	2.0	—	str 3.0 瞬間

追加エフェクト: ChromaticAberration をフェーズごとに段階増強（1.0x → 1.5x → 2.0x）

typescript

// フェーズ遷移時のトゥイーン例
function transitionToPhase2(scene, bloomPass) {
  gsap.to(scene.background, { r: 0.227, g: 0.039, b: 0.102, duration: 1.5 });
  gsap.to(bloomPass, { strength: 1.4, threshold: 0.55, duration: 1.5 });
}

7. カットイン演出 (Cutin Animation)

ムード: スタイリッシュ、強コントラスト、ペルソナ風。

要素	HEX	備考
背景上 (グラデ)	`#ff2d75`	Neon Pink
背景中 (グラデ)	`#a855f7`	Electric Purple
背景下 (グラデ)	`#00f0ff`	Cyber Cyan
スキャンライン	`rgba(0,0,0,0.25)`	2pxごと
テキスト	`#ffffff` シャドウ `#00f0ff`	ネオングロウ
スプリット線	`#ffffff`	鋭角ライン
キャラライト	`#ffffff` 強度 2.0	専用カメラ、正面強光

Bloom: threshold 0.4 / strength 1.8 / radius 1.3（最大の強コントラスト）

css

background: linear-gradient(135deg, #ff2d75 0%, #a855f7 50%, #00f0ff 100%);

8. 脱出ポータル (Escape Portal)

ムード: 解放・達成、浮遊感、安堵のシアン光。

要素	HEX	備考
ポータル中心	`#ffffff` 発光	強ハイライト
ポータル内リング	`#00f0ff`	Cyber Cyan
ポータル外リング	`#a855f7`	Electric Purple
パーティクル	`#e8f6ff` / `#00f0ff`	白 + シアン
ポイントライト	`#00f0ff` 強度 2.5 / dist 15	非常に強い
周囲床の反射色	`#00f0ff` 薄く	床シェーダに加算

Bloom: threshold 0.5 / strength 1.5 / radius 1.4（ポータル周辺だけ強く発光）

typescript

const portalLight = new THREE.PointLight(0x00f0ff, 2.5, 15, 1.5);
// パーティクル
const portalParticles = new THREE.Points(geom, new THREE.PointsMaterial({
  color: 0xe8f6ff,
  size: 0.1,
  transparent: true,
  opacity: 0.9,
  blending: THREE.AdditiveBlending,
}));

レアリティカラー（装備発光）

Art-3: キャラクターと整合。武器・装備の発光色を統一。

レアリティ	HEX	エミッシブ強度	パーティクル	UIカード枠
Common (灰)	`#9ca3af`	0.0（無発光）	なし	`#9ca3af`
Rare (青)	`#00f0ff`	0.6	薄い放出 ×5	`#00f0ff`
Epic (紫)	`#a855f7`	0.9	中量 ×15 + 流動	`#a855f7`
Legendary (金)	`#ffcc00`	1.2	常時放出 ×30	`#ffcc00` グラデ

Legendary の金色について

UIデザインシステム上は Legendary を #ff2d75 (Pink) に設定しているが、 3Dシーン内ではピンクが敵・ボス警告色と混同するため、金 #ffcc00 で発光させる。カード枠UIは金グラデ（#ffcc00 → #ff9500）で表現し、ネオンピンクの発光アニメーションを「枠周囲」に加えて差別化する。

typescript

const RARITY_COLORS = {
  common: { hex: 0x9ca3af, emissive: 0.0 },
  rare: { hex: 0x00f0ff, emissive: 0.6 },
  epic: { hex: 0xa855f7, emissive: 0.9 },
  legendary: { hex: 0xffcc00, emissive: 1.2 },
} as const;

function applyRarityGlow(mesh: THREE.Mesh, rarity: keyof typeof RARITY_COLORS) {
  const { hex, emissive } = RARITY_COLORS[rarity];
  const mat = mesh.material as THREE.MeshLambertMaterial;
  mat.emissive = new THREE.Color(hex);
  mat.emissiveIntensity = emissive;
}

ライティング実装ガイド

Three.js ライト構成テンプレート

Art-1 の制約（ポイントライト最大4つ）を守るためのテンプレート。

typescript

interface SceneLighting {
  ambient: { color: number; intensity: number };
  directional?: { color: number; intensity: number; position: [number, number, number] };
  points: Array<{ color: number; intensity: number; distance: number; decay: number; position: [number, number, number] }>;
  fog: { color: number; near: number; far: number };
  background: number;
}

const LIGHTING_PRESETS: Record<string, SceneLighting> = {
  lobby: {
    ambient: { color: 0x7a5cff, intensity: 0.45 },
    directional: { color: 0xffb07a, intensity: 0.6, position: [10, 3, 5] },
    points: [
      { color: 0x00f0ff, intensity: 1.0, distance: 12, decay: 2, position: [0, 2, -8] },
      { color: 0x00f0ff, intensity: 1.0, distance: 12, decay: 2, position: [-6, 2, -8] },
      { color: 0xa855f7, intensity: 0.8, distance: 10, decay: 2, position: [6, 2, 4] },
    ],
    fog: { color: 0x1f1f3a, near: 30, far: 80 },
    background: 0x1a1a2e,
  },
  dataGrid: { /* 上記 Data Grid 参照 */ },
  neonArcade: { /* 上記 Neon Arcade 参照 */ },
  glitchCore: { /* 上記 Glitch Core 参照 */ },
  voidRift: { /* 上記 Void Rift 参照 */ },
};

function applyLighting(scene: THREE.Scene, preset: SceneLighting) {
  scene.background = new THREE.Color(preset.background);
  scene.fog = new THREE.Fog(preset.fog.color, preset.fog.near, preset.fog.far);
  scene.add(new THREE.AmbientLight(preset.ambient.color, preset.ambient.intensity));
  if (preset.directional) {
    const dir = new THREE.DirectionalLight(preset.directional.color, preset.directional.intensity);
    dir.position.set(...preset.directional.position);
    scene.add(dir);
  }
  for (const p of preset.points) {
    const light = new THREE.PointLight(p.color, p.intensity, p.distance, p.decay);
    light.position.set(...p.position);
    scene.add(light);
  }
}

ライト数制約と例外

シーン	Ambient	Directional	Point	合計
ロビー	1	1	3	5
Data Grid	1	0	4	5
Neon Arcade	1	0	4	5
Glitch Core	1	0	3	4
Void Rift	1	0	4	5
ボス戦	1	0	4	5

モバイル: ポイントライト削減

モバイルでは PointLight を最大2つに制限。残りはエミッシブマテリアル＋Bloomで代替する。

UnrealBloomPass チューニング早見表

Art-1 のポストプロセス方針に従い、v1 は UnrealBloomPass のみ使用。シーンごとに以下の値を切り替える。

シーン	threshold	strength	radius	備考
ロビー	0.85	0.6	0.8	穏やか、抑制的
Data Grid	0.70	0.9	0.7	シャープ、線が光る
Neon Arcade	0.60	1.1	1.0	ギラつき、広がり
Glitch Core	0.55	1.2	0.9	荒々しい、不安定
Void Rift	0.75	1.0	1.2	ふんわり、神聖
ボス戦 P1	0.60	1.2	0.9	警戒
ボス戦 P2	0.55	1.4	1.0	緊張
ボス戦 P3	0.50	1.6	1.1	限界
カットイン	0.40	1.8	1.3	最強コントラスト
脱出ポータル	0.50	1.5	1.4	解放の強光

typescript

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

const bloomPass = new UnrealBloomPass(
  new THREE.Vector2(window.innerWidth, window.innerHeight),
  1.0,  // strength
  0.8,  // radius
  0.85  // threshold
);

function setBloomPreset(bloom: UnrealBloomPass, preset: string) {
  const presets = {
    lobby:        { threshold: 0.85, strength: 0.6, radius: 0.8 },
    dataGrid:     { threshold: 0.70, strength: 0.9, radius: 0.7 },
    neonArcade:   { threshold: 0.60, strength: 1.1, radius: 1.0 },
    glitchCore:   { threshold: 0.55, strength: 1.2, radius: 0.9 },
    voidRift:     { threshold: 0.75, strength: 1.0, radius: 1.2 },
    bossPhase1:   { threshold: 0.60, strength: 1.2, radius: 0.9 },
    bossPhase2:   { threshold: 0.55, strength: 1.4, radius: 1.0 },
    bossPhase3:   { threshold: 0.50, strength: 1.6, radius: 1.1 },
    cutin:        { threshold: 0.40, strength: 1.8, radius: 1.3 },
    escapePortal: { threshold: 0.50, strength: 1.5, radius: 1.4 },
  };
  const p = presets[preset];
  bloom.threshold = p.threshold;
  bloom.strength = p.strength;
  bloom.radius = p.radius;
}

ChromaticAberration 調整（デスクトップのみ）

シーン	強度倍率	備考
ロビー	0.5x	抑えめ
Data Grid	1.0x	標準
Neon Arcade	1.0x	標準
Glitch Core	1.5x	強め（不安定表現）
Void Rift	0.7x	控えめ（神聖感維持）
ボス戦 P1	1.0x	標準
ボス戦 P2	1.5x	強め
ボス戦 P3	2.0x	最強
カットイン	1.2x	やや強め
脱出ポータル	0.8x	抑制的

UIカラーとの整合性

3DシーンのカラースクリプトはUIデザインシステムと以下のルールで整合を取る。

カテゴリ	3D (本設計書)	UI (design-system)	整合方針
Neon Pink	`#ff2d75`	`#ff2d75`	✅ 完全一致
Cyber Cyan	`#00f0ff`	`#00f0ff`	✅ 完全一致
Electric Purple	`#a855f7`	`#a855f7`	✅ 完全一致
Void Black	`#0a0a0f`	`#0a0a0f`	✅ 完全一致
Deep Navy	`#1a1a2e`	`#1a1a2e`	✅ 完全一致
Success Green	`#00ff88`	`#00ff88`	✅ 完全一致
Warning Yellow	`#f0f000`	`#f0f000`	✅ 完全一致
Legendary	`#ffcc00` (3D発光)	`#ff2d75` (UIカード)	⚠️ 意図的に差別化（上記 Info 参照）

シーン遷移時の色トランジション

Three.js + GSAP で背景色・Fog・Bloomをスムーズにクロスフェード。

typescript

import gsap from 'gsap';

function transitionScene(
  scene: THREE.Scene,
  bloom: UnrealBloomPass,
  from: SceneLighting,
  to: SceneLighting,
  duration = 1.2
) {
  const bgFrom = new THREE.Color(from.background);
  const bgTo = new THREE.Color(to.background);
  const tween = { t: 0 };

  gsap.to(tween, {
    t: 1,
    duration,
    ease: 'power2.inOut',
    onUpdate: () => {
      scene.background = new THREE.Color().lerpColors(bgFrom, bgTo, tween.t);
      if (scene.fog instanceof THREE.Fog) {
        scene.fog.color.lerpColors(
          new THREE.Color(from.fog.color),
          new THREE.Color(to.fog.color),
          tween.t
        );
        scene.fog.near = THREE.MathUtils.lerp(from.fog.near, to.fog.near, tween.t);
        scene.fog.far = THREE.MathUtils.lerp(from.fog.far, to.fog.far, tween.t);
      }
    },
  });
}

推奨トランジション時間

遷移元 → 遷移先	時間	イージング
ロビー → カットイン	0.5s	power3.in
カットイン → ダンジョン	0.8s	power2.out
ダンジョン → ボス戦登場	1.5s	power2.inOut
ボス戦フェーズ遷移	1.5s	power2.inOut
ボス撃破 → 脱出ポータル	2.0s	power3.out
脱出ポータル → ロビー	1.0s	power2.in

チェックリスト（完了条件）

[x] マスターカラーパレット（プライマリ/セカンダリ/アクセント）をHEXで定義
[x] シーン別カラースクリプト（ロビー / 4ダンジョン / ボス戦 / カットイン / 脱出ポータル）
[x] ライティング設定値（色/強度/位置）をシーン別に明記
[x] UnrealBloomPass の threshold/strength/radius シーン別チューニング表
[x] ChromaticAberration のシーン別強度倍率
[x] レアリティカラー（Common灰 / Rare青 / Epic紫 / Legendary金）
[x] UIデザインシステムとの整合性確認
[x] Three.js 実装コード例（背景・Fog・Light・Bloom・遷移）

参考リンク

Art-1: アートスタイルガイド — 基本方針・ポストプロセス方針
Art-3: キャラクターデザイン — Vibeverse color / レアリティ
UIデザインシステム — UIカラー基準
ミッション設計 — 4ダンジョンテーマ

Art-2: カラースクリプト・ライティング設計 ​

概要 ​

マスターカラーパレット ​

プライマリ（ネオン3色） ​

セカンダリ（環境・雰囲気） ​

アクセント（差し色） ​

使用比率（3Dシーン内） ​

シーン別カラースクリプト ​

シーン遷移サマリ（色温度フロー） ​

1. ロビー (Lobby) ​

2. Data Grid ダンジョン ​

3. Neon Arcade ダンジョン ​

4. Glitch Core ダンジョン ​

5. Void Rift ダンジョン ​

6. ボス戦 (Boss Battle) ​

7. カットイン演出 (Cutin Animation) ​

8. 脱出ポータル (Escape Portal) ​

レアリティカラー（装備発光） ​

ライティング実装ガイド ​

Three.js ライト構成テンプレート ​

ライト数制約と例外 ​

UnrealBloomPass チューニング早見表 ​

ChromaticAberration 調整（デスクトップのみ） ​

UIカラーとの整合性 ​

シーン遷移時の色トランジション ​

推奨トランジション時間 ​

チェックリスト（完了条件） ​

参考リンク ​

Art-2: カラースクリプト・ライティング設計

概要

マスターカラーパレット

プライマリ（ネオン3色）

セカンダリ（環境・雰囲気）

アクセント（差し色）

使用比率（3Dシーン内）

シーン別カラースクリプト

シーン遷移サマリ（色温度フロー）

1. ロビー (Lobby)

2. Data Grid ダンジョン

3. Neon Arcade ダンジョン

4. Glitch Core ダンジョン

5. Void Rift ダンジョン

6. ボス戦 (Boss Battle)

7. カットイン演出 (Cutin Animation)

8. 脱出ポータル (Escape Portal)

レアリティカラー（装備発光）

ライティング実装ガイド

Three.js ライト構成テンプレート

ライト数制約と例外

UnrealBloomPass チューニング早見表

ChromaticAberration 調整（デスクトップのみ）

UIカラーとの整合性

シーン遷移時の色トランジション

推奨トランジション時間

チェックリスト（完了条件）

参考リンク