Wool

Applies an interwoven fibrous fabric texture and distortion to child content

Props

intensitynumber

Default:0.5

Strength of the relief shading applied to the child content

intensity

numberDefault: 0.5

Strength of the relief shading applied to the child content

scalenumber

Default:4

Scale of the pattern — lower = larger features, higher = finer grain

scale

numberDefault: 4

Scale of the pattern — lower = larger features, higher = finer grain

contrastnumber

Default:-0.5

Contrast of the texture — negative flattens it into a subtle overlay

contrast

numberDefault: -0.5

Contrast of the texture — negative flattens it into a subtle overlay

distortionnumber

Default:0.15

Surface distortion — warps the child along the texture like carved relief

distortion

numberDefault: 0.15

Surface distortion — warps the child along the texture like carved relief

seednumber

Default:0

Random seed for pattern variation

seed

numberDefault: 0

Random seed for pattern variation

Usage

<Shader>
  <Wool
    :intensity="0.5"
  >
    <Circle />
  </Wool>
</Shader>

<Shader>
  <Wool
    intensity={0.5}
  >
    <Circle />
  </Wool>
</Shader>

<Shader>
  <Wool
    intensity={0.5}
  >
    <Circle />
  </Wool>
</Shader>

<Shader>
  <Wool
    intensity={0.5}
  >
    <Circle />
  </Wool>
</Shader>

import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'Wool', props: { intensity: 0.5 }, children: [
      { type: 'Circle', props: {} }
    ]}
  ]
})

WebcamTexture

WorleyNoise