ScreenSpaceReflections.defs.ts

ScreenSpaceReflections — definitions.

Holds the ScreenSpaceReflectionsComponent class and the shapes its data travels in. No System lives here, which is the point: another component can name it in a query without pulling the post-process behaviour into its own bundle. Import from here, not from ScreenSpaceReflections.ts.

ScreenSpaceReflections.defs.ts

import { Component } from '@babylonjsmarket/ecs';

export interface ScreenSpaceReflectionsInput {
  /** Master switch (named `active`: `enabled` belongs to the base Component). Default true. */
  active?: boolean;
  /** How much of the reflection is mixed in. 0..1+, default 0.8. */
  strength?: number;
  /**
   * Below this reflectivity (0..1) a surface gets no reflection. Raise it to
   * keep dull rock matte and let only metal and water reflect. Default 0.04.
   */
  reflectivityThreshold?: number;
  /** How far, in world units, a ray may travel. Default 40. */
  maxDistance?: number;
  /** Surface thickness the ray march assumes, world units. Default 0.5. */
  thickness?: number;
  /** Ray-march steps. More is sharper and slower. Default 48. */
  maxSteps?: number;
  /** Blur spread on the reflection. 0 = mirror. Default 0.03. */
  blur?: number;
  /** Rougher materials reflect less; 0 disables the falloff. Default 0.2. */
  roughnessFactor?: number;
  /** Divide the reflection pass resolution by 2^n. Default 1 (half). */
  downsample?: number;
}

/** What the plugin applies, every field resolved. */
export type ScreenSpaceReflectionsSettings = Required<ScreenSpaceReflectionsInput>;

export const DEFAULT_SCREEN_SPACE_REFLECTIONS: ScreenSpaceReflectionsSettings = {
  active: true,
  strength: 0.8,
  reflectivityThreshold: 0.04,
  maxDistance: 40,
  thickness: 0.5,
  maxSteps: 48,
  blur: 0.03,
  roughnessFactor: 0.2,
  downsample: 1,
};

/** Name the System looks the plugin up under. */
export const SCREEN_SPACE_REFLECTIONS_EXTENSION = 'screenSpaceReflections';

/** Shape of the registered adapter plugin. */
export interface ScreenSpaceReflectionsExtension {
  /** Apply settings to the active camera, creating the pipeline on first call. */
  apply(settings: ScreenSpaceReflectionsSettings): void;
  /** Tear the pipeline down. */
  clear(): void;
}

export class ScreenSpaceReflectionsComponent extends Component {
  active: boolean;
  strength: number;
  reflectivityThreshold: number;
  maxDistance: number;
  thickness: number;
  maxSteps: number;
  blur: number;
  roughnessFactor: number;
  downsample: number;

  constructor(data: ScreenSpaceReflectionsInput = {}) {
    super();
    const p = { ...DEFAULT_SCREEN_SPACE_REFLECTIONS, ...data };
    this.active = p.active;
    this.strength = p.strength;
    this.reflectivityThreshold = p.reflectivityThreshold;
    this.maxDistance = p.maxDistance;
    this.thickness = p.thickness;
    this.maxSteps = p.maxSteps;
    this.blur = p.blur;
    this.roughnessFactor = p.roughnessFactor;
    this.downsample = p.downsample;
  }

  settings(): ScreenSpaceReflectionsSettings {
    return {
      active: this.active,
      strength: this.strength,
      reflectivityThreshold: this.reflectivityThreshold,
      maxDistance: this.maxDistance,
      thickness: this.thickness,
      maxSteps: this.maxSteps,
      blur: this.blur,
      roughnessFactor: this.roughnessFactor,
      downsample: this.downsample,
    };
  }

  serialize(): ScreenSpaceReflectionsInput {
    return this.settings();
  }
}

ScreenSpaceReflections.panel.tsx

ScreenSpaceReflections.panel.tsx — the occlusion knobs, live.

Every field on the component is read each frame by the System, so a slider that writes it is a slider that shows. The toggle is the one people reach for: occlusion is the first post-process to suspect when a frame is slow, and switching it off should not mean editing a scene file.

Named ScreenSpaceReflectionsPanel in a scene. Press V to toggle the panel.

ScreenSpaceReflections.panel.tsx

import type { EventBus, World } from '@babylonjsmarket/ecs';
import {
  definePanel,
  PanelHostComponent,
  PanelHostSystem,
  type PanelHostInput,
  type PanelSpec,
  type ControlSpec,
} from '@babylonjsmarket/viz';
import { ScreenSpaceReflectionsComponent, DEFAULT_SCREEN_SPACE_REFLECTIONS } from './ScreenSpaceReflections.defs';

const PANEL_ID = 'screen-space-reflections-panel';

type NumericField = 'strength' | 'reflectivityThreshold' | 'maxDistance' | 'thickness' | 'maxSteps' | 'blur' | 'roughnessFactor' | 'downsample';

export class ScreenSpaceReflectionsPanelComponent extends PanelHostComponent {
  constructor(data: PanelHostInput = {}) {
    super({
      panelId: PANEL_ID,
      activationKey: data.activationKey ?? 'KeyV',
      position: data.position ?? 'bottom-right',
      visible: data.visible,
    });
  }
}

export class ScreenSpaceReflectionsPanelSystem extends PanelHostSystem<ScreenSpaceReflectionsPanelComponent> {
  constructor(eventBus: EventBus) {
    super(eventBus, ScreenSpaceReflectionsPanelComponent);
  }

  protected canBuild(world: World): boolean {
    return world.getEntitiesWithComponent(ScreenSpaceReflectionsComponent).length > 0;
  }

  protected buildSpec(world: World): PanelSpec {
    const all = (): ScreenSpaceReflectionsComponent[] =>
      world
        .getEntitiesWithComponent(ScreenSpaceReflectionsComponent)
        .map((e) => e.get(ScreenSpaceReflectionsComponent))
        .filter((c): c is ScreenSpaceReflectionsComponent => c != null);
    const first = (): ScreenSpaceReflectionsComponent | null => all()[0] ?? null;

    const knob = (label: string, field: NumericField, min: number, max: number, step: number, help: string): ControlSpec => ({
      kind: 'slider',
      label, min, max, step,
      bind: {
        persist: field,
        get: () => first()?.[field] ?? DEFAULT_SCREEN_SPACE_REFLECTIONS[field],
        set: (v: number) => all().forEach((c) => (c[field] = v)),
      },
      help,
    });

    return definePanel({
      id: PANEL_ID,
      title: 'ScreenSpaceReflections',
      titleColor: '#9fd0b0',
      position: 'bottom-right',
      sections: [
        {
          controls: [
            {
              kind: 'toggle', label: 'reflections',
              bind: {
                persist: 'active',
                get: () => first()?.active ?? true,
                set: (v: boolean) => all().forEach((c) => (c.active = v)),
              },
              help: 'Screen-space reflections cost a full prepass over the scene. Off when a frame is slow.',
            },
            knob('strength', 'strength', 0, 2, 0.05, 'How much reflection is mixed in.'),
            knob('threshold', 'reflectivityThreshold', 0, 0.5, 0.01, 'Surfaces below this reflectivity stay matte. Raise it so rock stays rock.'),
            knob('distance', 'maxDistance', 5, 200, 5, 'How far a ray may travel.'),
            knob('thickness', 'thickness', 0.05, 3, 0.05, 'Assumed surface thickness for the march.'),
            knob('steps', 'maxSteps', 8, 128, 8, 'Ray-march steps. Sharper and slower as it rises.'),
            knob('blur', 'blur', 0, 0.2, 0.005, '0 is a mirror.'),
            knob('roughness', 'roughnessFactor', 0, 1, 0.05, 'Rough materials reflect less.'),
            knob('downsample', 'downsample', 0, 2, 1, '0 full, 1 half, 2 quarter resolution.'),
          ],
        },
      ],
    });
  }
}

ScreenSpaceReflections.ts

ScreenSpaceReflections.ts — wet floors and metal that shows the room.

ScreenSpaceReflections: { strength: 0.8 } on any entity (the sky one, by convention) turns on screen-space reflections for the active camera. The engine work — a ray-marched reflection pass over the depth and normal buffers — is an adapter plugin (adapter/register.ts, Babylon); this System only decides WHEN to apply: on first sight, and again whenever a knob changes, so every field is live for a tuning panel.

Re-applied every frame the settings differ, never otherwise: the plugin compares nothing, so the System must.

Renderer-agnostic: zero @babylonjs / three imports; constructor takes (eventBus) only. With no plugin registered it is a no-op, which is the right answer under the mock, in a headless test, and on an engine that has no plugin yet.

ScreenSpaceReflections.ts

import { System } from '@babylonjsmarket/ecs';
import type { EventBus, Entity } from '@babylonjsmarket/ecs';
import {
  SCREEN_SPACE_REFLECTIONS_EXTENSION,
  ScreenSpaceReflectionsComponent,
  type ScreenSpaceReflectionsExtension,
  type ScreenSpaceReflectionsSettings,
} from './ScreenSpaceReflections.defs';

interface SsrRuntime {
  last?: ScreenSpaceReflectionsSettings;
}

export class ScreenSpaceReflectionsSystem extends System {
  protected query = { required: [ScreenSpaceReflectionsComponent] };

  private runtime = new WeakMap<ScreenSpaceReflectionsComponent, SsrRuntime>();

  constructor(eventBus: EventBus) {
    super(eventBus);
    // After the cameras (default 0): the pipeline binds to whichever camera is
    // active when it is applied.
    this.priority = -50;
  }

  private extension(): ScreenSpaceReflectionsExtension | undefined {
    return this.world?.renderer?.extension<ScreenSpaceReflectionsExtension>(SCREEN_SPACE_REFLECTIONS_EXTENSION);
  }

  protected onUpdate(_dt: number): void {
    for (const entity of this.entities) this.apply(entity);
  }

  protected onEntityRemoved(entity: Entity): void {
    const comp = entity.get(ScreenSpaceReflectionsComponent);
    if (comp) this.runtime.delete(comp);
    this.extension()?.clear();
  }

  protected onShutdown(): void {
    this.extension()?.clear();
  }

  private apply(entity: Entity): void {
    const comp = entity.get(ScreenSpaceReflectionsComponent)!;
    let rt = this.runtime.get(comp);
    if (!rt) {
      rt = {};
      this.runtime.set(comp, rt);
    }
    const next = comp.settings();
    if (rt.last && same(rt.last, next)) return;
    const ext = this.extension();
    if (!ext) return;
    ext.apply(next);
    rt.last = next;
  }
}

function same(a: ScreenSpaceReflectionsSettings, b: ScreenSpaceReflectionsSettings): boolean {
  for (const k of Object.keys(a) as (keyof ScreenSpaceReflectionsSettings)[]) if (a[k] !== b[k]) return false;
  return true;
}

export {
  ScreenSpaceReflectionsComponent,
  SCREEN_SPACE_REFLECTIONS_EXTENSION,
  DEFAULT_SCREEN_SPACE_REFLECTIONS,
  type ScreenSpaceReflectionsInput,
  type ScreenSpaceReflectionsSettings,
  type ScreenSpaceReflectionsExtension,
} from './ScreenSpaceReflections.defs';

adapter/register.ts

ScreenSpaceReflections — adapter-extension registration.

Call registerScreenSpaceReflectionsExtension(adapter) ONCE at bootstrap, after you create the renderer adapter and before loading the scene. The playground finds it by name. Unregistered is a legitimate state: the System finds no extension and draws no reflections.

adapter/register.ts

import { SCREEN_SPACE_REFLECTIONS_EXTENSION } from '../ScreenSpaceReflections.defs';
import { createBabylonExtension, type BabylonExtensionHost } from './ScreenSpaceReflections.babylon';

interface ExtensibleAdapter {
  kind: string;
  registerExtension(name: string, impl: object): void;
}

export function registerScreenSpaceReflectionsExtension(adapter: ExtensibleAdapter): void {
  switch (adapter.kind) {
    case 'babylon':
    case 'babylon-lite':
      adapter.registerExtension(
        SCREEN_SPACE_REFLECTIONS_EXTENSION,
        createBabylonExtension(adapter as unknown as BabylonExtensionHost),
      );
      break;
    default:
      break;
  }
}

adapter/ScreenSpaceReflections.babylon.ts

ScreenSpaceReflections — Babylon plugin.

Wraps SSRRenderingPipeline: a post-process that ray-marches the depth and normal buffers to find what each pixel reflects. The pipeline binds to the camera that is active when apply first runs, and follows a camera swap on a later apply (a round reset hands the scene a new camera). Unsupported engines (no WebGL2 / no prepass) get a warning once and no reflections.

adapter/ScreenSpaceReflections.babylon.ts

import { SSRRenderingPipeline } from '@babylonjs/core/PostProcesses/RenderPipeline/Pipelines/ssrRenderingPipeline';
import type { Camera } from '@babylonjs/core/Cameras/camera';
import type { Scene } from '@babylonjs/core/scene';
import type { ScreenSpaceReflectionsExtension, ScreenSpaceReflectionsSettings } from '../ScreenSpaceReflections.defs';

export interface BabylonExtensionHost {
  getScene(): Scene | null;
}

export function createBabylonExtension(host: BabylonExtensionHost): ScreenSpaceReflectionsExtension {
  let pipeline: SSRRenderingPipeline | null = null;
  let camera: Camera | null = null;
  let warned = false;

  const dispose = (): void => {
    pipeline?.dispose();
    pipeline = null;
    camera = null;
  };

  return {
    apply(s: ScreenSpaceReflectionsSettings): void {
      const scene = host.getScene();
      const active = scene?.activeCamera ?? null;
      if (!scene || !active) return;
      if (pipeline && camera !== active) dispose();
      if (!pipeline) {
        pipeline = new SSRRenderingPipeline('ssr', scene, [active], false);
        camera = active;
        if (!pipeline.isSupported) {
          if (!warned) {
            warned = true;
            console.warn('[ScreenSpaceReflections] not supported by this engine; reflections off');
          }
          dispose();
          return;
        }
      }
      pipeline.isEnabled = s.active;
      pipeline.strength = s.strength;
      pipeline.reflectivityThreshold = s.reflectivityThreshold;
      pipeline.maxDistance = s.maxDistance;
      pipeline.thickness = s.thickness;
      pipeline.maxSteps = s.maxSteps;
      pipeline.blurDispersionStrength = s.blur;
      pipeline.roughnessFactor = s.roughnessFactor;
      pipeline.ssrDownsample = s.downsample;
      pipeline.enableSmoothReflections = true;
      pipeline.clipToFrustum = true;
      pipeline.attenuateScreenBorders = true;
      pipeline.attenuateFacingCamera = true;
      pipeline.useFresnel = true;
    },
    clear(): void {
      dispose();
    },
  };
}

ScreenSpaceReflections.contract.test.ts

11 ✓

ArcadeECS contract: ScreenSpaceReflections

Component() with no args constructs and applies defaults
Component merges sample input on top of defaults
Component.serialize() round-trips into a constructor input
System constructor signature is exactly (eventBus)
System declares a non-empty query.required
world.addSystem + initialize + update runs clean with no entity
adding the Component attaches the entity to the System
world.update(dt) does not throw with the entity attached
Adapter handles: create/dispose balance across entity lifecycle
EventBus has no lingering listeners after world.destroy()
Declared event names follow the "{domain}.{action}" convention

Last run 2026-10-04

ScreenSpaceReflections.contract.test.ts

import { runMechanicContract } from '@babylonjsmarket/ecs/testing';
import { ScreenSpaceReflectionsComponent, ScreenSpaceReflectionsSystem } from './ScreenSpaceReflections';

runMechanicContract({
  name: 'ScreenSpaceReflections',
  componentClass: ScreenSpaceReflectionsComponent,
  // A post-process switch: no companions, no events. Under the mock no plugin
  // is registered, which is a supported state — the System stays quiet.
  systemClass: ScreenSpaceReflectionsSystem,
  sampleInput: { strength: 0.6 },
});

ScreenSpaceReflections.panel.test.tsx

3 ✓

ScreenSpaceReflectionsPanel

needs an occlusion component to build
the toggle switches the pass off and the next frame applies it
every knob writes its field live

Last run 2026-10-04

ScreenSpaceReflections.panel.test.tsx

// @vitest-environment jsdom
import { beforeEach, describe, expect, it } from 'vitest';
import { EventBus, World, MockRendererAdapter } from '@babylonjsmarket/ecs';
import { SCREEN_SPACE_REFLECTIONS_EXTENSION, ScreenSpaceReflectionsComponent, type ScreenSpaceReflectionsSettings } from './ScreenSpaceReflections.defs';
import { ScreenSpaceReflectionsSystem } from './ScreenSpaceReflections';
import { ScreenSpaceReflectionsPanelComponent, ScreenSpaceReflectionsPanelSystem } from './ScreenSpaceReflections.panel';

describe('ScreenSpaceReflectionsPanel', () => {
  let world: World;
  let panel: ScreenSpaceReflectionsPanelSystem;
  let comp: ScreenSpaceReflectionsComponent;
  let applied: ScreenSpaceReflectionsSettings[];

  function control(label: string): Record<string, any> {
    const spec = (panel as unknown as { buildSpec(w: World): { sections: Array<{ controls: Array<Record<string, any>> }> } }).buildSpec(world);
    for (const s of spec.sections) for (const c of s.controls) if (c.label === label) return c;
    throw new Error(`no control "${label}"`);
  }

  beforeEach(() => {
    const eventBus = new EventBus();
    const renderer = new MockRendererAdapter();
    world = new World({ eventBus, renderer });
    applied = [];
    renderer.registerExtension(SCREEN_SPACE_REFLECTIONS_EXTENSION, { apply: (s: ScreenSpaceReflectionsSettings) => applied.push(s), clear: () => undefined });
    world.addSystem(new ScreenSpaceReflectionsSystem(eventBus));
    panel = new ScreenSpaceReflectionsPanelSystem(eventBus);
    world.addSystem(panel);
    const e = world.createEntity('Sky');
    comp = new ScreenSpaceReflectionsComponent();
    e.add(comp);
    e.add(new ScreenSpaceReflectionsPanelComponent());
    world.initialize();
    world.update(1 / 60);
  });

  it('needs an occlusion component to build', () => {
    const bare = new World({ eventBus: new EventBus(), renderer: new MockRendererAdapter() });
    expect((panel as unknown as { canBuild(w: World): boolean }).canBuild(bare)).toBe(false);
    expect((panel as unknown as { canBuild(w: World): boolean }).canBuild(world)).toBe(true);
  });

  it('the toggle switches the pass off and the next frame applies it', () => {
    expect(applied).toHaveLength(1);
    const t = control('reflections');
    expect(t.bind.get()).toBe(true);
    t.bind.set(false);
    expect(comp.active).toBe(false);
    world.update(1 / 60);
    expect(applied).toHaveLength(2);
    expect(applied[1]!.active).toBe(false);
  });

  it('every knob writes its field live', () => {
    control('strength').bind.set(1.5);
    control('threshold').bind.set(0.1);
    control('distance').bind.set(60);
    control('thickness').bind.set(1);
    control('steps').bind.set(16);
    control('blur').bind.set(0);
    control('roughness').bind.set(0.5);
    control('downsample').bind.set(2);
    expect(comp.settings()).toMatchObject({ strength: 1.5, reflectivityThreshold: 0.1, maxDistance: 60, thickness: 1, maxSteps: 16, blur: 0, roughnessFactor: 0.5, downsample: 2 });
    expect(control('strength').bind.get()).toBe(1.5);
    world.update(1 / 60);
    expect(applied[applied.length - 1]!.strength).toBe(1.5);
  });
});

ScreenSpaceReflections.test.ts

7 ✓

ScreenSpaceReflectionsComponent

defaults, overrides and round-trips

ScreenSpaceReflectionsSystem

applies once, then only when a knob changes
is a no-op without a plugin, and applies later if one shows up
clears when the entity goes and on shutdown
runs after the camera systems

registerScreenSpaceReflectionsExtension

registers for Babylon adapters only
the Babylon plugin does nothing without a scene or camera

Last run 2026-10-04

ScreenSpaceReflections.test.ts

import { beforeEach, describe, expect, it } from 'vitest';
import { EventBus, World, MockRendererAdapter } from '@babylonjsmarket/ecs';
import {
  DEFAULT_SCREEN_SPACE_REFLECTIONS,
  SCREEN_SPACE_REFLECTIONS_EXTENSION,
  ScreenSpaceReflectionsComponent,
  ScreenSpaceReflectionsSystem,
  type ScreenSpaceReflectionsSettings,
} from './ScreenSpaceReflections';
import { registerScreenSpaceReflectionsExtension } from './adapter/register';
import { createBabylonExtension } from './adapter/ScreenSpaceReflections.babylon';

describe('ScreenSpaceReflectionsComponent', () => {
  it('defaults, overrides and round-trips', () => {
    const c = new ScreenSpaceReflectionsComponent();
    expect(c.settings()).toEqual(DEFAULT_SCREEN_SPACE_REFLECTIONS);
    const custom = new ScreenSpaceReflectionsComponent({ strength: 0.3, maxSteps: 12, active: false });
    expect(new ScreenSpaceReflectionsComponent(custom.serialize()).settings()).toEqual(custom.settings());
    expect(custom.strength).toBe(0.3);
  });
});

describe('ScreenSpaceReflectionsSystem', () => {
  let eventBus: EventBus;
  let world: World;
  let renderer: MockRendererAdapter;
  let applied: ScreenSpaceReflectionsSettings[];
  let cleared: number;

  beforeEach(() => {
    eventBus = new EventBus();
    renderer = new MockRendererAdapter();
    world = new World({ eventBus, renderer });
    world.addSystem(new ScreenSpaceReflectionsSystem(eventBus));
    applied = [];
    cleared = 0;
  });

  const plugin = () => renderer.registerExtension(SCREEN_SPACE_REFLECTIONS_EXTENSION, {
    apply: (s: ScreenSpaceReflectionsSettings) => applied.push(s),
    clear: () => cleared++,
  });
  const tick = () => world.update(1 / 60);

  it('applies once, then only when a knob changes', () => {
    plugin();
    const e = world.createEntity('Sky');
    const c = new ScreenSpaceReflectionsComponent({ strength: 0.5 });
    e.add(c);
    world.initialize();
    tick(); tick(); tick();
    expect(applied).toHaveLength(1);
    expect(applied[0]!.strength).toBe(0.5);
    c.strength = 0.9;
    tick();
    expect(applied).toHaveLength(2);
    expect(applied[1]!.strength).toBe(0.9);
    tick();
    expect(applied).toHaveLength(2);
  });

  it('is a no-op without a plugin, and applies later if one shows up', () => {
    const e = world.createEntity('Sky');
    e.add(new ScreenSpaceReflectionsComponent());
    world.initialize();
    tick();
    expect(applied).toHaveLength(0);
    plugin();
    tick();
    expect(applied).toHaveLength(1);
  });

  it('clears when the entity goes and on shutdown', () => {
    plugin();
    const e = world.createEntity('Sky');
    e.add(new ScreenSpaceReflectionsComponent());
    world.initialize();
    tick();
    world.removeEntity(e);
    expect(cleared).toBe(1);
    world.shutdown();
    expect(cleared).toBe(2);
  });

  it('runs after the camera systems', () => {
    expect(new ScreenSpaceReflectionsSystem(eventBus).priority).toBeLessThan(0);
  });
});

describe('registerScreenSpaceReflectionsExtension', () => {
  const fake = (kind: string) => {
    const registered: string[] = [];
    return { kind, registered, registerExtension: (n: string) => { registered.push(n); }, getScene: () => null };
  };
  it('registers for Babylon adapters only', () => {
    for (const kind of ['babylon', 'babylon-lite']) {
      const a = fake(kind);
      registerScreenSpaceReflectionsExtension(a);
      expect(a.registered).toEqual([SCREEN_SPACE_REFLECTIONS_EXTENSION]);
    }
    for (const kind of ['three', 'mock']) {
      const a = fake(kind);
      registerScreenSpaceReflectionsExtension(a);
      expect(a.registered).toEqual([]);
    }
  });
  it('the Babylon plugin does nothing without a scene or camera', () => {
    const ext = createBabylonExtension({ getScene: () => null });
    expect(() => ext.apply(DEFAULT_SCREEN_SPACE_REFLECTIONS)).not.toThrow();
    expect(() => ext.clear()).not.toThrow();
    const noCamera = createBabylonExtension({ getScene: () => ({ activeCamera: null }) as never });
    expect(() => noCamera.apply(DEFAULT_SCREEN_SPACE_REFLECTIONS)).not.toThrow();
  });
});

Field	Default	What it does
`active`	true	Master switch.
`strength`	0.8	How much reflection is mixed in.
`reflectivityThreshold`	0.04	Surfaces below this reflectivity stay matte. Raise it on a kit-bashed scene so rock stays rock and only metal and water shine.
`maxDistance`	40	How far a ray may travel, world units.
`thickness`	0.5	Assumed surface thickness for the march. Too small and thin rails are missed; too large and reflections smear.
`maxSteps`	48	Ray-march steps. Sharper and slower as it rises.
`blur`	0.03	0 is a mirror.
`roughnessFactor`	0.2	Rough materials reflect less. 0 disables.
`downsample`	1	Reflection pass at half resolution. 0 for full, 2 for quarter.

ScreenSpaceReflections

ScreenSpaceReflections

Knobs

Pairs with

ScreenSpaceReflections.defs.ts

ScreenSpaceReflections.panel.tsx

ScreenSpaceReflections.ts

adapter/register.ts

adapter/ScreenSpaceReflections.babylon.ts

ScreenSpaceReflections.contract.test.ts

ScreenSpaceReflections.contract.test.ts

ScreenSpaceReflections.panel.test.tsx

ScreenSpaceReflections.panel.test.tsx

ScreenSpaceReflections.test.ts

ScreenSpaceReflections.test.ts

More like this

Was this page helpful?