Three.js ポストプロセッシング

概要

このパブリックインテイク版は、https://github.com/sickn33/antigravity-awesome-skills から plugins/antigravity-awesome-skills/skills/threejs-postprocessing をパッケージ化し、そのオリジンを隠さずにネイティブ Omni Skills 編集形式に対応させたものです。

オペレータが上流のワークフロー、サポートファイル、リポジトリコンテキストを保持したまま、パブリックバリデータとプライベート強化ツールが通常の下流フローを継続する必要がある場合に使用してください。

このインテイクは、コピーされた上流ファイルを完全に保持し、metadata.json 内の external_source ブロックと ORIGIN.md をプロヴェナンスアンカーとしてレビューに使用します。

Three.js ポストプロセッシング

インポートされたソースセクションのうち、パブリックな見出しにきれいにマップしなかったものは、以下またはサポートファイルに保持されています。注目すべきインポートセクション：一般的なエフェクト、カスタム ShaderPass、複数エフェクトの組み合わせ、テクスチャへのレンダリング、マルチパスレンダリング、パフォーマンスのコツ。

このスキルをいつ使用するか

このセクションをトリガーフィルタとして使用してください。オペレータがファイルを読み込む、コマンドを実行する、またはプルリクエストを開く前に、アクティベーション境界を明示的にする必要があります。

• Three.js レンダーパイプラインでスクリーンスペースのビジュアルエフェクトが必要。
• タスクに EffectComposer、ブルーム、被写界深度、カラーグレーディング、ブラー、またはカスタムパスが関与している。
• ベースシーンセットアップだけではなく、最終的なレンダリング画像を強化している。
• リクエストがインポートされたソースの意図と明確に一致する場合に使用：Three.js ポストプロセッシング - EffectComposer、ブルーム、被写界深度、スクリーンエフェクト。ビジュアルエフェクト、カラーグレーディング、ブラー、グロー、またはカスタムスクリーンスペースシェーダーの追加時に使用。
• オペレータがプロセスをゼロから書き直すのではなく、上流ワークフローの詳細を保持する必要がある場合に使用。
• プロヴェナンスが回答、PR、またはレビューパケット内で見える状態を保つ必要がある場合に使用。

操作テーブル

状況	ここから開始	重要な理由
初回使用	metadata.json	external_source ブロックを通じて、コピーされたワークフローに触れる前にリポジトリ、ブランチ、コミット、インポートされたパスを確認
プロヴェナンスレビュー	ORIGIN.md	レビュアーにインポートされたソースの平文監査証跡を提供
ワークフロー実行	SKILL.md	実行を実質的に変更するコピーされた最小ファイルから開始
サポートコンテキスト	SKILL.md	パッケージ全体を読み込まずに、次に最も関連性の高いコピーされたソースファイルを追加
ハンドオフ決定	## Related Skills	タスクがドリフトする場合、より強いネイティブスキルに切り替えるのに役立つ

ワークフロー

このワークフローは編集的かつ操作的になるよう意図的に設計されています。インポートされたソースをオペレータにとって有用なまま保ちながら、下流強化フローを供給するパブリックインテイク標準に対応させます。

1. EffectComposer (WebGL) - PostProcessing (WebGPU)
2. addPass(new RenderPass(...)) - pass(scene, camera)
3. addPass(new UnrealBloomPass) - bloom(scenePass, ...)
4. composer.render() - postProcessing.render()
5. パスのチェーン - outputNode を使用したノードグラフ
6. GLSL シェーダーパス - TSL ノードベースエフェクト
7. ユーザーゴール、インポートされたワークフローのスコープ、およびこのスキルがタスクの適切なルータであるかどうかを確認します。

インポートされたワークフローノート

インポート：EffectComposer セットアップ

import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
import { RenderPass } from "three/addons/postprocessing/RenderPass.js";

const composer = new EffectComposer(renderer);

// First pass: render scene
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);

// Add more passes...
composer.addPass(effectPass);

// Last pass should render to screen
effectPass.renderToScreen = true; // Default for last pass

// Handle resize
function onResize() {
  const width = window.innerWidth;
  const height = window.innerHeight;

  camera.aspect = width / height;
  camera.updateProjectionMatrix();

  renderer.setSize(width, height);
  composer.setSize(width, height);
}

インポート：WebGPU ポストプロセッシング (Three.js r183)

WebGPU レンダラーは EffectComposer の代わりにノードベースの PostProcessing クラスを使用します。EffectComposer は WebGL のみ であることに注意してください。

import * as THREE from "three";
import { pass, bloom, dof } from "three/tsl";
import { WebGPURenderer } from "three/addons/renderers/webgpu/WebGPURenderer.js";

const renderer = new WebGPURenderer({ antialias: true });
await renderer.init();

// Create post-processing
const postProcessing = new THREE.PostProcessing(renderer);

// Scene pass
const scenePass = pass(scene, camera);

// Add bloom
const bloomPass = bloom(scenePass, 0.5, 0.4, 0.85);

// Set output
postProcessing.outputNode = bloomPass;

// Render
renderer.setAnimationLoop(() => {
  postProcessing.render();
});

EffectComposer との主な違い

EffectComposer (WebGL)	PostProcessing (WebGPU)
addPass(new RenderPass(...))	pass(scene, camera)
addPass(new UnrealBloomPass)	bloom(scenePass, ...)
composer.render()	postProcessing.render()
パスのチェーン	outputNode を使用したノードグラフ
GLSL シェーダーパス	TSL ノードベースエフェクト

インポート：一般的なエフェクト

ブルーム（グロー）

import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js";

const bloomPass = new UnrealBloomPass(
  new THREE.Vector2(window.innerWidth, window.innerHeight),
  1.5, // strength - intensity of glow
  0.4, // radius - spread of glow
  0.85, // threshold - brightness threshold
);

composer.addPass(bloomPass);

// Adjust at runtime
bloomPass.strength = 2.0;
bloomPass.threshold = 0.5;
bloomPass.radius = 0.8;

選択的ブルーム

特定のオブジェクトのみにブルームを適用します。

import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js";
import { ShaderPass } from "three/addons/postprocessing/ShaderPass.js";

// Layer setup
const BLOOM_LAYER = 1;
const bloomLayer = new THREE.Layers();
bloomLayer.set(BLOOM_LAYER);

// Mark objects to bloom
glowingMesh.layers.enable(BLOOM_LAYER);

// Dark material for non-blooming objects
const darkMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 });
const materials = {};

function darkenNonBloomed(obj) {
  if (obj.isMesh && !bloomLayer.test(obj.layers)) {
    materials[obj.uuid] = obj.material;
    obj.material = darkMaterial;
  }
}

function restoreMaterial(obj) {
  if (materials[obj.uuid]) {
    obj.material = materials[obj.uuid];
    delete materials[obj.uuid];
  }
}

// Custom render loop
function render() {
  // Render bloom pass
  scene.traverse(darkenNonBloomed);
  composer.render();
  scene.traverse(restoreMaterial);

  // Render final scene over bloom
  renderer.render(scene, camera);
}

FXAA（アンチエイリアシング）

import { ShaderPass } from "three/addons/postprocessing/ShaderPass.js";
import { FXAAShader } from "three/addons/shaders/FXAAShader.js";

const fxaaPass = new ShaderPass(FXAAShader);
fxaaPass.material.uniforms["resolution"].value.set(
  1 / window.innerWidth,
  1 / window.innerHeight,
);

composer.addPass(fxaaPass);

// Update on resize
function onResize() {
  fxaaPass.material.uniforms["resolution"].value.set(
    1 / window.innerWidth,
    1 / window.innerHeight,
  );
}

SMAA（より高度なアンチエイリアシング）

import { SMAAPass } from "three/addons/postprocessing/SMAAPass.js";

const smaaPass = new SMAAPass(
  window.innerWidth * renderer.getPixelRatio(),
  window.innerHeight * renderer.getPixelRatio(),
);

composer.addPass(smaaPass);

SSAO（アンビエントオクルージョン）

import { SSAOPass } from "three/addons/postprocessing/SSAOPass.js";

const ssaoPass = new SSAOPass(
  scene,
  camera,
  window.innerWidth,
  window.innerHeight,
);
ssaoPass.kernelRadius = 16;
ssaoPass.minDistance = 0.005;
ssaoPass.maxDistance = 0.1;

composer.addPass(ssaoPass);

// Output modes
ssaoPass.output = SSAOPass.OUTPUT.Default;
// SSAOPass.OUTPUT.Default - Final composited output
// SSAOPass.OUTPUT.SSAO - Just the AO
// SSAOPass.OUTPUT.Blur - Blurred AO
// SSAOPass.OUTPUT.Depth - Depth buffer
// SSAOPass.OUTPUT.Normal - Normal buffer

被写界深度（DOF）

import { BokehPass } from "three/addons/postprocessing/BokehPass.js";

const bokehPass = new BokehPass(scene, camera, {
  focus: 10.0, // Focus distance
  aperture: 0.025, // Aperture (smaller = more DOF)
  maxblur: 0.01, // Max blur amount
});

composer.addPass(bokehPass);

// Update focus dynamically
bokehPass.uniforms["focus"].value = distanceToTarget;

フィルムグレイン

import { FilmPass } from "three/addons/postprocessing/FilmPass.js";

const filmPass = new FilmPass(
  0.35, // noise intensity
  0.5, // scanline intensity
  648, // scanline count
  false, // grayscale
);

composer.addPass(filmPass);

ビネット

import { ShaderPass } from "three/addons/postprocessing/ShaderPass.js";
import { VignetteShader } from "three/addons/shaders/VignetteShader.js";

const vignettePass = new ShaderPass(VignetteShader);
vignettePass.uniforms["offset"].value = 1.0; // Vignette size
vignettePass.uniforms["darkness"].value = 1.0; // Vignette intensity

composer.addPass(vignettePass);

カラーコレクション

import { ShaderPass } from "three/addons/postprocessing/ShaderPass.js";
import { ColorCorrectionShader } from "three/addons/shaders/ColorCorrectionShader.js";

const colorPass = new ShaderPass(ColorCorrectionShader);
colorPass.uniforms["powRGB"].value = new THREE.Vector3(1.2, 1.2, 1.2); // Power
colorPass.uniforms["mulRGB"].value = new THREE.Vector3(1.0, 1.0, 1.0); // Multiply

composer.addPass(colorPass);

ガンマ補正

import { GammaCorrectionShader } from "three/addons/shaders/GammaCorrectionShader.js";

const gammaPass = new ShaderPass(GammaCorrectionShader);
composer.addPass(gammaPass);

ピクセル化

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

const pixelPass = new RenderPixelatedPass(6, scene, camera); // 6 = pixel size

composer.addPass(pixelPass);

グリッチエフェクト

import { GlitchPass } from "three/addons/postprocessing/GlitchPass.js";

const glitchPass = new GlitchPass();
glitchPass.goWild = false; // Continuous glitching

composer.addPass(glitchPass);

ハーフトーン

import { HalftonePass } from "three/addons/postprocessing/HalftonePass.js";

const halftonePass = new HalftonePass(window.innerWidth, window.innerHeight, {
  shape: 1, // 1 = dot, 2 = ellipse, 3 = line, 4 = square
  radius: 4, // Dot size
  rotateR: Math.PI / 12,
  rotateB: (Math.PI / 12) * 2,
  rotateG: (Math.PI / 12) * 3,
  scatter: 0,
  blending: 1,
  blendingMode: 1,
  greyscale: false,
});

composer.addPass(halftonePass);

アウトライン

import { OutlinePass } from "three/addons/postprocessing/OutlinePass.js";

const outlinePass = new OutlinePass(
  new THREE.Vector2(window.innerWidth, window.innerHeight),
  scene,
  camera,
);

outlinePass.edgeStrength = 3;
outlinePass.edgeGlow = 0;
outlinePass.edgeThickness = 1;
outlinePass.pulsePeriod = 0;
outlinePass.visibleEdgeColor.set(0xffffff);
outlinePass.hiddenEdgeColor.set(0x190a05);

// Select objects to outline
outlinePass.selectedObjects = [mesh1, mesh2];

composer.addPass(outlinePass);

例

例 1：上流ワークフローを直接要求

@threejs-postprocessing-v2 を使用して <task> に対応してください。コピーされた上流ワークフローから開始し、結果を変更するファイルのみを読み込み、プロヴェナンスを回答に見える状態で保ってください。

説明： これはオペレータがインポートされたワークフローを必要とするが、リポジトリ全体は不要な場合の最も安全な開始点です。

例 2：プロヴェナンス根拠のレビューを要求

metadata.json と ORIGIN.md に対して @threejs-postprocessing-v2 をレビューし、最初に読み込むべきコピーされた上流ファイルがどれか、およびその理由を説明してください。

説明： レビューやトラブルシューティングの前にこれを使用して、オリジンと файルセレクションの正確で監査可能な説明が必要な場合に使用します。

例 3：実行前にコピーされたサポートファイルを絞る

@threejs-postprocessing-v2 を使用して <task> に対応してください。結果を変更するコピーされた参照、例、またはスクリプトのみを読み込み、続行する前に明示的にファイル名を指定してください。

説明： これにより、スキルがデフォルトでコピーされたパッケージ全体を読み込む代わりに、段階的開示に適合した状態を保ちます。

例 4：レビュアーパケットを構築

コピーされた上流ファイルとプロヴェナンスを使用して @threejs-postprocessing-v2 をレビューし、マージ前のギャップを要約してください。

説明： これは PR が人間レビューを待っている場合や、反復可能な監査パケットが必要な場合に有用です。

インポートされた使用ノート

インポート：クイックスタート

import * as THREE from "three";
import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js";

// Setup composer
const composer = new EffectComposer(renderer);

// Render scene
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);

// Add bloom
const bloomPass = new UnrealBloomPass(
  new THREE.Vector2(window.innerWidth, window.innerHeight),
  1.5, // strength
  0.4, // radius
  0.85, // threshold
);
composer.addPass(bloomPass);

// Animation loop - use composer instead of renderer
function animate() {
  requestAnimationFrame(animate);
  composer.render(); // NOT renderer.render()
}

ベストプラクティス

生成されたパブリックスキルを上流リポジトリの周辺にある審査可能なパッケージング層として扱ってください。目標は、プロヴェナンスを明示的に保ち、実行を実質的に改善するコピーされたソース素材のみを読み込むことです。

• インポートされたスキルを上流リポジトリに根ざしたままにします。ソース素材が対応できないステップを発明しないでください。
• ワークフローが監査可能で高速レビューができるよう、最小限の有用なサポートファイルセットを選択します。
• プロヴェナンス、ソースコミット、インポートされたファイルパスをノートと PR 説明に見える状態で保ちます。
• 一般的なレビューボイラープレートに頼る代わりに、ワークフローを正当化するコピーされた上流ファイルを直接指し示します。
• 生成された例をスカッフォルディングとして扱います。実行前に具体的なタスクに適応させます。
• アーキテクチャ、デバッグ、設計、またはセキュリティの問題が主流になった場合、より強いネイティブスキルにルーティングします。

トラブルシューティング

問題：オペレータがインポートされたコンテキストをスキップし、過度に一般的に回答した

症状： 結果が plugins/antigravity-awesome-skills/skills/threejs-postprocessing の上流ワークフローを無視し、プロヴェナンスに言及せず、またはコピーされたソースファイルをまったく使用していません。 解決策： metadata.json、ORIGIN.md、および最も関連性の高いコピーされた上流ファイルを再度開きます。external_source ブロックを最初に確認し、続行する前にプロヴェナンスを改めて述べます。

問題：インポートされたワークフローがレビュー中に不完全に感じられる

症状： レビュアーは生成された SKILL.md を見ることはできますが、現在のタスクにどの参照、例、またはスクリプトが重要かを素早く判断することはできません。 解決策： あなたが取ったパスを正当化する正確なコピーされた参照、例、スクリプト、またはアセットを指し示します。ギャップが依然として実在する場合は、隠す代わりに PR に記録します。

問題：タスクが異なる専門分野にドリフトした

症状： インポートされたスキルは正しい場所で開始されますが、ワークが、ネイティブスキルがより良く処理するデバッグ、アーキテクチャ、設計、セキュリティ、またはリリースオーケストレーションに変わります。 解決策： 関連スキルセクションを使用して、意図的にハンドオフします。インポートされたプロヴェナンスを見える状態で保ち、次のスキルが盲目的に開始する代わりに正しいコンテキストを継承できるようにします。

関連スキル

• @00-andruia-consultant - このインポートされたスキルがコンテキストを確立した後、ワークがそのネイティブ専門分野によってより良く処理される場合に使用してください。
• @00-andruia-consultant-v2 - このインポートされたスキルがコンテキストを確立した後、ワークがそのネイティブ専門分野によってより良く処理される場合に使用してください。
• @10-andruia-skill-smith - このインポートされたスキルがコンテキストを確立した後、ワークがそのネイティブ専門分野によってより良く処理される場合に使用してください。
• @10-andruia-skill-smith-v2 - このインポートされたスキルがコンテキストを確立した後、ワークがそのネイティブ専門分野によってより良く処理される場合に使用してください。

追加リソース

このサポートマトリックスと以下のリンクされたファイルを、このインポートされたスキルのオペレータパケットとして使用してください。これらは、一般的なスカッフォルディングではなく、実際にコピーされたソース素材を反映する必要があります。

リソースファミリ	レビュアーに提供する内容	例のパス
references	上流からコピーされた参照ノート、ガイド、または背景素材	references/n/a
examples	上流からコピーされた完成例または再利用可能なプロンプト	examples/n/a
scripts	実行またはバリデーションを変更する上流ヘルパースクリプト	scripts/n/a
agents	インポートされたパッケージの真の一部であるルーティングまたは委譲ノート	agents/n/a
assets	ソースパッケージからコピーされたサポートアセットまたはスキーマ	assets/n/a

インポートされた参照ノート

インポート：カスタム ShaderPass

独自のポストプロセッシングエフェクトを作成します。

import { ShaderPass } from "three/addons/postprocessing/ShaderPass.js";

const CustomShader = {
  uniforms: {
    tDiffuse: { value: null }, // Required: input texture
    time: { value: 0 },
    intensity: { value: 1.0 },
  },
  vertexShader: `
    varying vec2 vUv;

    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    uniform sampler2D tDiffuse;
    uniform float time;
    uniform float intensity;
    varying vec2 vUv;

    void main() {
      vec2 uv = vUv;

      // Wave distortion
      uv.x += sin(uv.y * 10.0 + time) * 0.01 * intensity;

      vec4 color = texture2D(tDiffuse, uv);
      gl_FragColor = color;
    }
  `,
};

const customPass = new ShaderPass(CustomShader);
composer.addPass(customPass);

// Update in animation loop
customPass.uniforms.time.value = clock.getElapsedTime();

色反転シェーダー

const InvertShader = {
  uniforms: {
    tDiffuse: { value: null },
  },
  vertexShader: `
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    uniform sampler2D tDiffuse;
    varying vec2 vUv;

    void main() {
      vec4 color = texture2D(tDiffuse, vUv);
      gl_FragColor = vec4(1.0 - color.rgb, color.a);
    }
  `,
};

クロマティック収差

const ChromaticAberrationShader = {
  uniforms: {
    tDiffuse: { value: null },
    amount: { value: 0.005 },
  },
  vertexShader: `
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    uniform sampler2D tDiffuse;
    uniform float amount;
    varying vec2 vUv;

    void main() {
      vec2 dir = vUv - 0.5;
      float dist = length(dir);

      float r = texture2D(tDiffuse, vUv - dir * amount * dist).r;
      float g = texture2D(tDiffuse, vUv).g;
      float b = texture2D(tDiffuse, vUv + dir * amount * dist).b;

      gl_FragColor = vec4(r, g, b, 1.0);
    }
  `,
};

インポート：複数エフェクトの組み合わせ

import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js";
import { ShaderPass } from "three/addons/postprocessing/ShaderPass.js";
import { FXAAShader } from "three/addons/shaders/FXAAShader.js";
import { VignetteShader } from "three/addons/shaders/VignetteShader.js";
import { GammaCorrectionShader } from "three/addons/shaders/GammaCorrectionShader.js";

const composer = new EffectComposer(renderer);

// 1. Render scene