NgtpGodRays

Preview

canvas.ts

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { PostprocessingWrapper } from '@postprocessing/wrapper.ts';
import { NgtCanvas, provideNgtRenderer } from 'angular-three/dom';
import { SceneGraph } from './scene-graph';

@Component({
    selector: 'app-god-rays',
    template: `
        <ngt-canvas [camera]="{ position: [0, 0, 8], fov: 50 }">
            <app-postprocessing-wrapper *canvasContent [lights]="false" background="#0a0a1a">
                <app-scene-graph />
            </app-postprocessing-wrapper>
        </ngt-canvas>
    `,
    changeDetection: ChangeDetectionStrategy.OnPush,
    host: { class: 'god-rays-demo relative block h-full' },
    imports: [NgtCanvas, PostprocessingWrapper, SceneGraph],
})
export default class GodRays {
    static clientProviders = [provideNgtRenderer()];
}

scene-graph.ts

import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, viewChild } from '@angular/core';
import { NgtArgs } from 'angular-three';
import { NgtpEffectComposer, NgtpGodRays } from 'angular-three-postprocessing';
import * as THREE from 'three';

@Component({
    selector: 'app-scene-graph',
    template: `
        <!-- Sun mesh - light source for god rays -->
        <ngt-mesh #sun [position]="[0, 2, -8]">
            <ngt-sphere-geometry *args="[1.5, 32, 32]" />
            <ngt-mesh-basic-material color="#ffdd66" />
        </ngt-mesh>

        <!-- Silhouette objects -->
        <ngt-mesh [position]="[-2, -1, 0]">
            <ngt-box-geometry *args="[1, 3, 0.5]" />
            <ngt-mesh-standard-material color="#111111" />
        </ngt-mesh>

        <ngt-mesh [position]="[0, -0.5, 0]">
            <ngt-box-geometry *args="[0.8, 2, 0.5]" />
            <ngt-mesh-standard-material color="#111111" />
        </ngt-mesh>

        <ngt-mesh [position]="[2, -1.2, 0]">
            <ngt-box-geometry *args="[1.2, 2.5, 0.5]" />
            <ngt-mesh-standard-material color="#111111" />
        </ngt-mesh>

        <!-- Ambient light for silhouettes -->
        <ngt-ambient-light [intensity]="0.1" />

        <ngtp-effect-composer>
            <ngtp-god-rays
                [options]="{
                    sun: sunRef().nativeElement,
                    density: 0.97,
                    decay: 0.94,
                    weight: 0.6,
                    exposure: 0.55,
                    samples: 60,
                }"
            />
        </ngtp-effect-composer>
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtArgs, NgtpEffectComposer, NgtpGodRays],
})
export class SceneGraph {
    sunRef = viewChild.required<ElementRef<THREE.Mesh>>('sun');
}

The god rays effect creates volumetric light shafts emanating from a light source, simulating how light scatters through atmosphere or dust particles.

Usage

import { NgtpEffectComposer, NgtpGodRays } from 'angular-three-postprocessing';

@Component({
  template: `
    <ngt-mesh #sun [position]="[0, 5, -10]">
      <ngt-sphere-geometry *args="[1, 32, 32]" />
      <ngt-mesh-basic-material color="yellow" />
    </ngt-mesh>

    <ngtp-effect-composer>
      <ngtp-god-rays [options]="{ sun: sun }" />
    </ngtp-effect-composer>
  `,
  imports: [NgtpEffectComposer, NgtpGodRays, NgtArgs],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class SceneGraph {}

Options

Property	Type	Default	Description
sun	Mesh | Points | ElementRef	required	The light source mesh
density	number	0.96	Ray density
decay	number	0.9	Ray decay factor
weight	number	0.4	Ray weight/intensity
exposure	number	0.6	Overall exposure
samples	number	60	Number of samples (quality vs performance)
clampMax	number	1.0	Maximum brightness clamp
blur	boolean	true	Apply blur to rays

Example: Sunset Scene

@Component({
  template: `
    <ngt-mesh #sunMesh [position]="[5, 3, -15]">
      <ngt-sphere-geometry *args="[2, 32, 32]" />
      <ngt-mesh-basic-material color="#ffaa00" />
    </ngt-mesh>

    <ngtp-effect-composer>
      <ngtp-god-rays [options]="{
        sun: sunMesh,
        density: 0.97,
        decay: 0.94,
        weight: 0.5,
        exposure: 0.5,
        samples: 80
      }" />
    </ngtp-effect-composer>
  `,
  imports: [NgtpEffectComposer, NgtpGodRays, NgtArgs],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class SceneGraph {}

Tips

• The sun mesh should use MeshBasicMaterial for best results
• Objects between the camera and sun will create shadows in the light rays
• Higher samples values improve quality but reduce performance
• Adjust density and decay together for different ray lengths