CarbonFiber

Photorealistic woven carbon fibre — interlaced tows whose anisotropic sheen flips ninety degrees cell to cell, raised into a quilted weave and finished with a glossy clearcoat that mirrors the studio. Plain or twill, in any shape.

Props

originstring

Default:center

Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.

origin

stringDefault: center

Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.

center{x: number, y: number}

Default:{"x":0.5,"y":0.5}

Center position of the carbon shape

center

{x: number, y: number}Default: {"x":0.5,"y":0.5}

Center position of the carbon shape

scalenumber

Default:1

Scale of the carbon shape (1 = default size)

scale

numberDefault: 1

Scale of the carbon shape (1 = default size)

rotationnumber

Default:0

Rotation of the carbon shape in degrees

rotation

numberDefault: 0

Rotation of the carbon shape in degrees

lightColorstring

Default:#b9bdc6

The bright tone of the fibre sheen — recolor for forged/coloured carbon (red, blue, bronze)

lightColor

stringDefault: #b9bdc6

The bright tone of the fibre sheen — recolor for forged/coloured carbon (red, blue, bronze)

darkColorstring

Default:#0b0c0e

The deep resin tone the weave falls to in shadow — near-black for classic carbon

darkColor

stringDefault: #0b0c0e

The deep resin tone the weave falls to in shadow — near-black for classic carbon

weaveStyle"twill" | "plain"

Default:twill

Weave pattern — plain (checkerboard) or 2×2 twill (the diagonal supercar weave)

weaveStyle

"twill" | "plain"Default: twill

Weave pattern — plain (checkerboard) or 2×2 twill (the diagonal supercar weave)

weaveScalenumber

Default:30

Number of woven tows across the shape — higher = finer, denser weave

weaveScale

numberDefault: 30

Number of woven tows across the shape — higher = finer, denser weave

weaveAnglenumber

Default:0

Rotates the whole weave grid in degrees

weaveAngle

numberDefault: 0

Rotates the whole weave grid in degrees

reliefnumber

Default:0.5

Depth of the quilted weave — how far each tow bulges, catching light on its crown and shadowing the valleys between

relief

numberDefault: 0.5

Depth of the quilted weave — how far each tow bulges, catching light on its crown and shadowing the valleys between

fiberSheennumber

Default:1.2

Strength of the anisotropic fibre sheen — the directional satin glint running along each tow

fiberSheen

numberDefault: 1.2

Strength of the anisotropic fibre sheen — the directional satin glint running along each tow

roughnessnumber

Default:0.5

Softness of the fibre sheen — 0 = tight crisp glints, 1 = soft matte satin

roughness

numberDefault: 0.5

Softness of the fibre sheen — 0 = tight crisp glints, 1 = soft matte satin

clearcoatnumber

Default:1.2

Strength of the glossy lacquer coat — the sharp studio reflections of the wet clearcoat over the weave

clearcoat

numberDefault: 1.2

Strength of the glossy lacquer coat — the sharp studio reflections of the wet clearcoat over the weave

environmentnumber

Default:2

Strength of the reflected studio lighting seen in the clearcoat

environment

numberDefault: 2

Strength of the reflected studio lighting seen in the clearcoat

envRotationnumber

Default:0

Rotates the whole reflected studio — spins where the bright reflections fall

envRotation

numberDefault: 0

Rotates the whole reflected studio — spins where the bright reflections fall

lightAnglenumber

Default:215

Direction of the key light for the fibre sheen, in degrees

lightAngle

numberDefault: 215

Direction of the key light for the fibre sheen, in degrees

edgeSoftnessnumber

Default:0.05

Softness of the shape boundary edge

edgeSoftness

numberDefault: 0.05

Softness of the shape boundary edge

shapeShapeConfig

Default:circleSDF

Shape to render — choose from 11 built-in analytical shapes or supply a custom SDF. See the Shape Effects guide for all available shapes and their options.

shape

ShapeConfigDefault: circleSDF

Shape to render — choose from 11 built-in analytical shapes or supply a custom SDF. See the Shape Effects guide for all available shapes and their options.

shapeSdfUrlstring

Default:""

URL to a pre-generated SDF `.bin` file — when non-empty, activates SVG mode and triggers a shader recompile. See the Shape Effects guide for how to generate an SDF from an SVG.

shapeSdfUrl

stringDefault: ""

URL to a pre-generated SDF `.bin` file — when non-empty, activates SVG mode and triggers a shader recompile. See the Shape Effects guide for how to generate an SDF from an SVG.

Usage

<Shader>
  <CarbonFiber />
</Shader>

<Shader>
  <CarbonFiber />
</Shader>

<Shader>
  <CarbonFiber />
</Shader>

<Shader>
  <CarbonFiber />
</Shader>

import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'CarbonFiber', props: {} }
  ]
})

CRTScreen

Chalkboard