Scanline

Demo code

<script setup lang="ts">
import { Environment, Levioso, OrbitControls, Ring, Sphere, Stars } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
import { TresLeches, useControls } from '@tresjs/leches'
import { DoubleSide, MathUtils, NoToneMapping } from 'three'
import { BlendFunction } from 'postprocessing'
import { EffectComposerPmndrs, ScanlinePmndrs } from '@tresjs/post-processing'

import '@tresjs/leches/styles'

const gl = {
  clearColor: '#000000',
  toneMapping: NoToneMapping,
}

const glComposer = {
  multisampling: 4,
}

const { blendFunction, opacity, density, scrollSpeed } = useControls({
  density: { value: 1.15, step: 0.001, max: 2 },
  opacity: { value: 0.65, step: 0.1, min: 0, max: 1 },
  scrollSpeed: { value: 0.05, step: 0.01, min: 0, max: 2 },
  blendFunction: {
    options: Object.keys(BlendFunction).map(key => ({
      text: key,
      value: BlendFunction[key as keyof typeof BlendFunction],
    })),
    value: BlendFunction.HARD_MIX,
  },
})
</script>

<template>
  <div class="aspect-16/9">
    <TresCanvas
      v-bind="gl"
    >
      <TresPerspectiveCamera
        :position="[6.5, 3, 6.5]"
        :look-at="[0, 0, 0]"
      />
      <OrbitControls auto-rotate :auto-rotate-speed=".5" />

      <Suspense>
        <Environment :blur="1" preset="snow" />
      </Suspense>

      <TresAmbientLight />

      <TresGroup :rotation-y="MathUtils.degToRad(5)" :rotation-x="MathUtils.degToRad(100)">
        <Sphere :args="[2, 32, 16]">
          <TresMeshPhysicalMaterial color="#FC7BAC" :side="DoubleSide" :transmission=".5" />
        </Sphere>

        <Levioso :speed="2.5" :rotationFactor="1" :floatFactor=".5">
          <Ring :args="[4.25, 2.5, 32]" :scale-y="-1" :position-z="-.25">
            <TresMeshPhysicalMaterial color="#ffffff" :side="DoubleSide" :transmission=".25" />
          </Ring>
        </Levioso>
      </TresGroup>

      <Stars />

      <Suspense>
        <EffectComposerPmndrs v-bind="glComposer">
          <ScanlinePmndrs :density="density" :opacity="opacity" :scrollSpeed="scrollSpeed" :blendFunction="Number(blendFunction)" />
        </EffectComposerPmndrs>
      </Suspense>
    </TresCanvas>
  </div>
  <TresLeches :float="false" />
</template>

The Scanline effect is part of the postprocessing package. It simulates scanlines reminiscent of old CRT displays, creating a nostalgic or stylized visual effect for your scene. This effect can enhance the retro aesthetic of your project or add a unique visual touch.

Usage

The <ScanlinePmndrs> component is easy to use and provides customizable options to achieve the desired visual appearance.

<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { EffectComposerPmndrs, ScanlinePmndrs } from '@tresjs/post-processing'
import { NoToneMapping } from 'three'

const gl = {
  clearColor: '#0ff000',
  toneMapping: NoToneMapping,
}

const effectProps = {
  density: 1.25,
  opacity: 0.65,
  scrollSpeed: 0.05,
}
</script>

<template>
  <TresCanvas v-bind="gl">
    <TresPerspectiveCamera :position="[5, 5, 5]" />

    <!-- Your scene -->

    <Suspense>
      <EffectComposerPmndrs>
        <ScanlinePmndrs v-bind="effectProps" />
      </EffectComposerPmndrs>
    </Suspense>
  </TresCanvas>
</template>

Props

Prop	Description	Default
blendFunction	Defines how the effect blends with the original scene. See the BlendFunction options.	BlendFunction.OVERLAY
density	The density of the scanlines. Higher values increase the frequency of lines.	1.25
opacity	The opacity of the scanlines. Controls the transparency of the effect.	1.0
scrollSpeed	The speed at which the scanlines scroll vertically. When set to 0, the scanlines remain static. Any non-zero value animates the scanlines vertically.	0.0

Further Reading

For more details, see the ScanlineEffect documentation