Linocut

Demo code

<script setup lang="ts">
import { ContactShadows, Environment, OrbitControls } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
import { TresLeches, useControls } from '@tresjs/leches'
import { EffectComposerPmndrs, LinocutPmndrs } from '@tresjs/post-processing'
import { BlendFunction } from 'postprocessing'
import { NoToneMapping } from 'three'

import '@tresjs/leches/styles'

const gl = {
  clearColor: '#00ff00',
  toneMapping: NoToneMapping,
  envMapIntensity: 10,
}

const glComposer = {
  multisampling: 4,
}

const { blendFunction, scale, noiseScale, centerX, centerY, rotation } = useControls({
  scale: { value: 0.85, step: 0.01, min: 0, max: 2 },
  noiseScale: { value: 0.0, step: 0.01, min: 0, max: 1 },
  centerX: { value: 0.5, step: 0.01, min: 0, max: 1 },
  centerY: { value: 0.5, step: 0.01, min: 0, max: 1 },
  rotation: { value: 0.0, step: 0.01, min: -Math.PI, max: Math.PI },
  blendFunction: {
    options: Object.keys(BlendFunction).map(key => ({
      text: key,
      value: BlendFunction[key as keyof typeof BlendFunction],
    })),
    value: BlendFunction.NORMAL,
  },
})
</script>

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

      <TresMesh>
        <TresBoxGeometry :args="[2, 2, 2]" />
        <TresMeshStandardMaterial color="yellow" />
      </TresMesh>

      <Suspense>
        <Environment :blur=".25" preset="snow" />
      </Suspense>

      <ContactShadows
        :opacity=".65"
        :position-y="-1"
        :scale="35"
        :blur="1"
      />

      <Suspense>
        <EffectComposerPmndrs v-bind="glComposer">
          <LinocutPmndrs
            :scale="scale"
            :noiseScale="noiseScale"
            :center="[centerX, centerY]"
            :rotation="rotation"
            :blendFunction="Number(blendFunction)"
          />
        </EffectComposerPmndrs>
      </Suspense>
    </TresCanvas>
  </div>
  <TresLeches :float="false" />
</template>

The Linocut effect is a custom shader effect inspired by traditional linocut and woodcut printmaking. It transforms the scene into a high-contrast black-and-white composition, featuring bold lines and intricate patterns that replicate the handcrafted aesthetic of relief printing techniques.

Usage

The <LinocutPmndrs> component is straightforward to use and provides customizable options to fine-tune the linocut effect.

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

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

const effectProps = reactive({
  scale: 0.85,
  noiseScale: 0.0,
  center: [0.5, 0.5],
  rotation: 0.0,
})
</script>

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

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

Props

Prop	Description	Default
scale	Line width control. A value between 0 and 1.	0.85
noiseScale	Noise intensity. A value between 0 and 1.	0.0
center	Center of rotation (normalized coordinates). A Vector2 value or an array of two numbers where both values are between 0 and 1.	[0.5, 0.5]
rotation	Rotation angle (in radians). A value between -π and π.	0.0
blendFunction	Defines how the effect blends with the original scene. See the BlendFunction options.	BlendFunction.NORMAL

Further Reading

For an example of the linocut effect in WebGL, see the Linocut Effect on Shadertoy.