TvT.js
目录
主题颜色

后期处理

这章节，是针对后期处理在 tvt.js 项目中的实践。

TIP

我们分为两个部分来描述它：

  • 1、three.js 原生的方法，就是先屏蔽 tres.js 现有的 render 的模式，增加手动后期处理的渲染
  • 2、使用 post-processing.tresjs 生态自带的渲染库

three.js 原生的方法

首先我们默认您了解了 three.js 原生的渲染逻辑，详见：How-to-use-post-processingopen in new window 在 tvt.js 的最佳实践在后期处理-掩膜通道open in new window

TresCanvas 需要增加属性 renderMode="manual" 更改成用户自行渲染

<template>
  <TresCanvas renderMode="manual" window-size>
    <MaskPass />
    <!-- 后期处理-掩膜组件 -->
  </TresCanvas>
</template>

然后在 自定义的掩膜组件中，新增EffectComposer和一些RenderPass，之后在循环函数中，调用渲染

const { onLoop } = useRenderLoop()
onLoop(() => {
  if (effectComposer) {
    effectComposer.render()
  }
})

代码详见：MaskPass.vueopen in new window

post-processing.tres 渲染库

在 24 年下半年，tres.js 陆续增加了 post-processing.tres 自己得后期处理库：post-processing.tresjsopen in new window 使用起来就很简单的，不需要再修改TresCanvas的渲染模式了直接 组件方式挂在后期渲染

<template>
  <TresCanvas window-size clearColor="#000000">
    <TresPerspectiveCamera :position="[10, 10, 10]" />
    <TresAmbientLight :intensity="1" />
    <OrbitControls />
    <Box :args="[1, 1, 1]" color="orange" :position="[3, 2, 1]" />
    <TresMesh :position="[0, 2, -4]">
      <TresBoxGeometry :args="[1, 1, 1]" />
      <TresMeshNormalMaterial />
    </TresMesh>
    <TresGridHelper :args="[10, 10]" />

    <EffectComposer>
      <UnrealBloom :radius="0.8" :strength="2.5" :threshold="0.8" />
      <Glitch />
      <SMAA :width="1920" :height="1080" />
      <Output />
    </EffectComposer>
  </TresCanvas>
</template>

<script setup lang="ts">
import { OrbitControls, Box } from '@tresjs/cientos'
import {
  EffectComposer,
  UnrealBloom,
  Glitch,
  Output,
  SMAA,
} from '@tresjs/post-processing'
</script>

在 tvt.js 的最佳实践在tresProcessing-融合多个后期效果open in new window

本页目录