ReflectivePlane

Reflective floor that mirrors the content above it

Props

heightnumber

Default:0.7

Vertical position of the reflective surface

height

numberDefault: 0.7

Vertical position of the reflective surface

distancenumber

Default:0.5

How far below the floor the reflection remains visible before fully fading to transparent.

distance

numberDefault: 0.5

How far below the floor the reflection remains visible before fully fading to transparent.

falloffnumber

Default:0.5

Width of the fade zone, as a fraction of reflection distance.

falloff

numberDefault: 0.5

Width of the fade zone, as a fraction of reflection distance.

blurnumber

Default:3

Maximum blur applied to the reflection far from the surface.

blur

numberDefault: 3

Maximum blur applied to the reflection far from the surface.

blurDistancenumber

Default:0.3

How far below the surface the blur takes to ramp from sharp to maximum.

blurDistance

numberDefault: 0.3

How far below the surface the blur takes to ramp from sharp to maximum.

edges"stretch" | "transparent" | "mirror" | "wrap"

Default:stretch

How to handle reflected samples that fall outside the source content.

edges

"stretch" | "transparent" | "mirror" | "wrap"Default: stretch

How to handle reflected samples that fall outside the source content.

Usage

<Shader>
  <ReflectivePlane>
    <Circle />
  </ReflectivePlane>
</Shader>

<Shader>
  <ReflectivePlane>
    <Circle />
  </ReflectivePlane>
</Shader>

<Shader>
  <ReflectivePlane>
    <Circle />
  </ReflectivePlane>
</Shader>

<Shader>
  <ReflectivePlane>
    <Circle />
  </ReflectivePlane>
</Shader>

import { createShader } from 'shaders/js'

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

RectangularCoordinates

Ring

Documentation

ReflectivePlane

Props

Usage