Godrays

Volumetric light rays emanating from a point

Props

center{x: number, y: number}

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

The center point of the god rays

center

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

The center point of the god rays

densitynumber

Default:0.3

Frequency of ray sectors

density

numberDefault: 0.3

Frequency of ray sectors

intensitynumber

Default:0.8

Ray visibility within sectors

intensity

numberDefault: 0.8

Ray visibility within sectors

spottynumber

Default:1

Density of spots on rays (higher = more spots)

spotty

numberDefault: 1

Density of spots on rays (higher = more spots)

speednumber

Default:0.5

Animation speed of the rays

speed

numberDefault: 0.5

Animation speed of the rays

rayColorstring

Default:#4283fb

Color of the light rays

rayColor

stringDefault: #4283fb

Color of the light rays

backgroundColorstring

Default:transparent

Background color

backgroundColor

stringDefault: transparent

Background color

Usage

<Shader>
  <Godrays
    :intensity="0.8"
  />
</Shader>

<Shader>
  <Godrays
    intensity={0.8}
  />
</Shader>

<Shader>
  <Godrays
    intensity={0.8}
  />
</Shader>

<Shader>
  <Godrays
    intensity={0.8}
  />
</Shader>

import { createShader } from 'shaders/js'

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

Glow

Grayscale

Documentation

Godrays

Props

Usage