useAdaptiveQuality · color-kit

functionimport { useAdaptiveQuality } from '@pbroom/color-kit/react';use-adaptive-quality.ts:121

function useAdaptiveQuality(
  performanceProfile?: ColorPlanePerformanceProfile,
): AdaptiveQuality;

Report each committed drag frame with reportFrame; while the rolling average update or frame time is slow the level steps down (high → medium → low), and it steps back up once frames recover. Feed quality to useColorPlaneRenderer and the geometry hooks so a slow device renders the plane at a lower resolution and samples overlays more coarsely instead of dropping frames. Changing the profile resets the level to the profile's default.

Parameters

performanceProfile?ColorPlanePerformanceProfiledefault 'auto': How eagerly to degrade; 'auto' by default.

Returns

AdaptiveQualityThe current level, reportFrame and reset.

Example

TSX

import { useRef } from 'react';
import { useAdaptiveQuality } from '@pbroom/color-kit/react';

// Wrap the function a drag controller calls once per frame.
function useTimedCommit(commit: () => void) {
  const adaptive = useAdaptiveQuality('auto');
  const lastFrame = useRef(0);
  const onFrame = () => {
    const start = performance.now();
    commit();
    const end = performance.now();
    adaptive.reportFrame({
      updateDurationMs: end - start,
      frameTimeMs: lastFrame.current > 0 ? start - lastFrame.current : end - start,
    });
    lastFrame.current = start;
  };
  return { quality: adaptive.quality, onFrame };
}