序文

スペシャルエフェクトコンポジター (英語名: Special Effects Compositor) は、さまざまな視覚効果、画像、ビデオ要素を組み合わせて、さまざまな見事な視覚効果を作成するために使用されるコンピューターソフトウェアを指します。通常、特殊効果コンポジターは、映画制作、テレビ番組制作、商業制作などの業界で画像とビデオの品質を向上させるための重要なツールです。エフェクトコンポジターは、ブルー/グリーンスクリーン合成、3D モデリング、写真、オーバーレイなどのさまざまなテクニックを使用して、高品質の視覚効果を作成できます。一般的に使用される特殊効果シンセサイザーソフトウェアには、Nuke、After Effects、Fusion などが含まれます。

1.特殊効果シンセサイザー

1.レンダーパス

RenderPass は Three.js のレンダリングパスであり、シーンを画面に描画するなど、いくつかの基本的なレンダリング操作を実行するために使用されます。RenderPass では、シーン、カメラ、レンダリングターゲットが指定され、そのレンダリングターゲットが次のポストパスで処理される出力として使用され、完全なポストプロセスエフェクトが構築されます。

RenderPass の実装プロセスは次のとおりです。

1. まず描画するシーンとカメラを指定します。

2. レンダリングターゲットを作成し、シーンとカメラを使用してシーンをターゲットにレンダリングします。

3. レンダーターゲットの後処理を次のポストパスに出力します。

RenderPass の使用シナリオは通常、シーンに複数のマテリアル状態オブジェクトや光源状態オブジェクトなどが含まれており、複数のチャネル間での後処理が必要になります。たとえば、Three.js で後処理を実装するには、通常、複数の後処理チャネルを構成する必要があります。RenderPass を通じて、シーンをレンダリングターゲットにレンダリングし、次の後処理チャネルに渡して処理することができます。。

2.アウトラインパス

OutlinePass は、Three.js の特別な後処理エフェクトであり、オブジェクトのアウトラインのハイライト効果を実現するために使用されます。OutlinePass は、選択したオブジェクトをストロークし、オブジェクトの周囲に光る効果を表示できます。

OutlinePass を使用するには、EffectComposer や RenderPass などの特定のコンポーネントを Three.js に追加する必要があります。次に、OutlinePass を EffectComposer に追加できます。

以下は、OutlinePass の使用方法を示す例です。

// 新建一个EffectComposer
const composer = new THREE.EffectComposer(renderer);

// 新建一个RenderPass，这是渲染场景的第一步
const renderPass = new THREE.RenderPass(scene, camera);
composer.addPass(renderPass);

// 新建一个OutlinePass，并将其添加到EffectComposer中
const outlinePass = new THREE.OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera);
composer.addPass(outlinePass);

// 将轮廓的颜色和宽度设置到OutlinePass中
outlinePass.edgeStrength = 5; // 轮廓强度
outlinePass.edgeGlow = 0.5; // 轮廓的发光强度
outlinePass.edgeThickness = 2; // 轮廓的宽度

// 将需要高亮的物体传递给OutlinePass
outlinePass.selectedObjects = [object];

アウトラインパスを使用するには、アニメーションフレームごとにアウトラインパスを更新する必要があることに注意してください。これは、requestAnimationFrame 関数内にcomposer.render() メソッドを配置することで実現できます。

function animate() {
    
    
   requestAnimationFrame(animate);
   composer.render();
}
animate();

3.エフェクトコンポーザー

EffectComposer は、複数のレンダーパスを結合して最終的なレンダリング結果を作成できる Three.js のクラスです。これは、後処理、照明効果など、さまざまな視覚効果を作成するために使用できる非常に強力なツールです。

EffectComposer を使用する基本的な手順は次のとおりです。

EffectComposer インスタンスを作成します。
1 つまたは複数のレンダーパス (レンダーパス) を作成します。各レンダーパスでは、異なるマテリアル、カメラ、レンダーターゲットを使用できます。
レンダーパスを EffectComposer インスタンスに追加します。
レンダリングされた各フレームでは、EffectComposer のインスタンスを通じてレンダリングが行われます。これにより、EffectComposer に追加されたすべてのレンダーパスが実行され、それらが 1 つの最終的なレンダーに結合されます。

たとえば、次のコードは、EffectComposer を使用して単純な後処理エフェクトを作成する方法を示しています。

// 创建EffectComposer实例
var composer = new THREE.EffectComposer(renderer);

// 创建渲染通道
var renderPass = new THREE.RenderPass(scene, camera);
composer.addPass(renderPass);

// 添加后期处理效果
var effect = new THREE.ShaderPass(THREE.DotScreenShader);
effect.uniforms.scale.value = 4;
composer.addPass(effect);

// 渲染帧
composer.render();

この例では、まず EffectComposer のインスタンスを作成し、次に RenderPass を作成して EffectComposer に追加します。次に、ShaderPass レンダリングパスを作成し、DotScreenShader シェーダを使用してドットマトリックスエフェクトを作成し、それを EffectComposer に追加します。最後に、各レンダーフレームで、EffectComposer のインスタンスを使用してシーンをレンダリングし、追加されたレンダーパスを適用して、最終的なレンダリング結果を生成します。

4. ケース

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      
      
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>

</body>
</html>

<script type="module">
  import * as THREE from 'https://cdn.skypack.dev/[email protected]';
  import {
      
       OrbitControls } from 'https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls.js'
  import {
      
       EffectComposer } from 'https://cdn.skypack.dev/[email protected]/examples/jsm/postprocessing/EffectComposer.js'
  import {
      
       RenderPass } from 'https://cdn.skypack.dev/[email protected]/examples/jsm/postprocessing/RenderPass.js'
  import {
      
       OutlinePass } from 'https://cdn.skypack.dev/[email protected]/examples/jsm/postprocessing/OutlinePass.js'

  const clock = new THREE.Clock()
  // 创建一个场景
  const scene = new THREE.Scene();

  // 创建一个相机 视点
  const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
  // 设置相机的位置
  camera.position.set(100,100,0);
  camera.lookAt(new THREE.Vector3(0,0,0));
  // 创建一个渲染器
  const renderer = new THREE.WebGLRenderer();
  // 设置渲染器尺寸
  renderer.setSize(window.innerWidth, window.innerHeight);

  const controls = new OrbitControls(camera, renderer.domElement)

  document.body.appendChild(renderer.domElement);

  // 添加灯光
  const spotLight = new THREE.SpotLight(0xffffff);
  spotLight.position.set(2000,8000,4000);
  scene.add(spotLight);

  const g1 = new THREE.BoxGeometry(18,18,18);
  const g2 = new THREE.BoxGeometry(18,18,18);
  const m1 = new THREE.MeshBasicMaterial({
      
      
    color: 0x00ff00
  })
  const m2 = new THREE.MeshBasicMaterial({
      
      
    color: 0xff0000
  })

  const c1 = new THREE.Mesh(g1, m1)
  const c2 = new THREE.Mesh(g2, m2)
  c1.position.y = 20;
  c2.position.y = -20;

  scene.add(c1)
  scene.add(c2)

  // 辉光效果
  // 创建了一个渲染通道，这个通道会渲染场景，不会渲染到屏幕上
  const renderScene = new RenderPass(scene, camera);

  // 分辨率 场景 相机 当前选中的物体，（需要添加辉光效果）
  const outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera, [c2, c1])
  outlinePass.renderToScreen = true; // 渲染到屏幕上
  outlinePass.edgeStrength = 3; // 尺寸
  outlinePass.edgeGlow = 2; // 发光的强度
  outlinePass.edgeThickness = 2; // 光晕粗细
  outlinePass.pulsePeriod = 1;// 闪烁的速度
  outlinePass.visibleEdgeColor.set('yellow');

  // 创建一个组合器对象，添加处理通道
  const bloom = new EffectComposer(renderer)
  bloom.setSize(window.innerWidth, window.innerHeight)
  bloom.addPass(renderScene)
  bloom.addPass(outlinePass)

  const animation = () => {
      
      
    // 渲染
    renderer.render(scene, camera);
    bloom.render();
    requestAnimationFrame(animation);
  }
  animation()
</script>

ここに画像の説明を挿入

[Yugong シリーズ] 2023 年 8 月の Three.js トピック - 特殊効果シンセサイザー

記事ディレクトリ

序文

1.特殊効果シンセサイザー

1.レンダーパス

2.アウトラインパス

3.エフェクトコンポーザー

4. ケース

おすすめ