react-native-shine 0.2.1 → 0.3.0

package/src/index.tsx

@@ -1,326 +1,10 @@
-import { useEffect, useRef, useState } from 'react';
-import { Canvas, useDevice, useGPUContext } from 'react-native-wgpu';
-import { getOrInitRoot } from './roots';
-import mainVertex from './shaders/vertexShaders/mainVertex';
-import getBitmapFromURI from './shaders/resourceManagement';
+import { useOrientation } from './hooks/useOrientation';
 import {
-  createTexture,
-  loadTexture,
-  clamp,
-  rotate2D,
-  subscribeToOrientationChange,
   getAngleFromDimensions,
+  subscribeToOrientationChange,
 } from './shaders/utils';
-import type { TgpuTexture } from 'typegpu';
-import {
-  bloomOptionsBindGroupLayout,
-  colorMaskBindGroupLayout,
-  rotationValuesBindGroupLayout,
-  textureBindGroupLayout,
-} from './shaders/bindGroupLayouts';
-import {
-  SensorType,
-  useAnimatedSensor,
-  useDerivedValue,
-  useSharedValue,
-} from 'react-native-reanimated';
-import * as d from 'typegpu/data';
-import { Platform } from 'react-native';
-import bloomFragment from './shaders/fragmentShaders/bloomFragment';
-import {
-  createBloomOptionsBindGroup,
-  createBloomOptionsBuffer,
-  createColorMaskBindGroup,
-  createColorMaskBuffer,
-  createRotationBuffer,
-  createRotationValuesBindGroup,
-} from './shaders/bindGroupUtils';
-import {
-  createBindGroupPairs,
-  createBloomOptions,
-  createColorMask,
-} from './types/typeUtils';
-import type {
-  BindGroupPair,
-  BloomOptions,
-  ColorMask,
-  DeepPartiallyOptional,
-} from './types/types';
-import { attachBindGroups, getDefaultTarget } from './shaders/pipelineSetups';
-import colorMaskFragment from './shaders/fragmentShaders/colorMaskFragment';
-interface ShineProps {
-  width: number;
-  height: number;
-  imageURI: string;
-  bloomOptions?: Partial<BloomOptions>;
-  colorMaskOptions?: DeepPartiallyOptional<ColorMask, 'baseColor'>;
-}
-
-export function Shine({
-  width,
-  height,
-  imageURI,
-  bloomOptions,
-  colorMaskOptions,
-}: ShineProps) {
-  const { device = null } = useDevice();
-  const root = device ? getOrInitRoot(device) : null;
-  const { ref, context } = useGPUContext();
-  const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
-  const frameRef = useRef<number | null>(null);
-
-  const [imageTexture, setImageTexture] = useState<TgpuTexture | null>(null);
-
-  const orientationAngle = useSharedValue<number>(0); // degrees
-  const rotationShared = useSharedValue<[number, number, number]>([0, 0, 0]); // final GPU offsets
-
-  // Calibration shared values (UI thread)
-  const initialGravity = useSharedValue<[number, number, number]>([0, 0, 0]);
-  const calibSum = useSharedValue<[number, number, number]>([0, 0, 0]);
-  const calibCount = useSharedValue<number>(0);
-  const calibrated = useSharedValue<boolean>(false);
-
-  const gravitySensor = useAnimatedSensor(SensorType.GRAVITY, { interval: 20 });
-
-  console.log('render');
-
-  // Subscribe to orientation changes and reset calibration on change
-  useEffect(() => {
-    orientationAngle.value = getAngleFromDimensions();
-    const unsubscribe = subscribeToOrientationChange((angleDeg) => {
-      orientationAngle.value = angleDeg;
-    });
-
-    return () => unsubscribe();
-  }, [orientationAngle]);
-
-  // Calibration & mapping logic
-  useDerivedValue(() => {
-    'worklet';
-
-    // console.log(orientationAngle.value);
-    const v: any = gravitySensor.sensor?.value ??
-      gravitySensor.sensor.value ?? { x: 0, y: 0, z: 0 };
-    const gx = v.x ?? 0;
-    const gy = v.y ?? 0;
-    const gz = v.z ?? 0;
-
-    const CALIBRATION_SAMPLES = 40;
-    const alpha = 0.15; // smoothing
-    const scale = 0.6;
-
-    if (!calibrated.value) {
-      // accumulate baseline in device coordinates
-      const s = calibSum.value;
-      const c = calibCount.value + 1;
-      calibSum.value = [s[0] + gx, s[1] + gy, s[2] + gz];
-      calibCount.value = c;
-
-      if (c >= CALIBRATION_SAMPLES) {
-        const avg = calibSum.value;
-        initialGravity.value = [avg[0] / c, avg[1] / c, avg[2] / c];
-        calibrated.value = true;
-      }
-
-      rotationShared.value = [0, 0, 0];
-      return;
-    }
-
-    const init = initialGravity.value;
-    const dx = gx - init[0];
-    const dy = gy - init[1];
-    const dz = gz - init[2];
-
-    // Rotate into screen coordinates so offsets auto-swap with orientation
-    const [mx, my] = rotate2D([dx, dy], -orientationAngle.value);
-    const screenX = mx;
-    const screenY = -my;
-
-    const prev = rotationShared.value;
-    const smoothX = prev[0] * (1 - alpha) + screenX * alpha;
-    const smoothY = prev[1] * (1 - alpha) + screenY * alpha;
-    const smoothZ = prev[2] * (1 - alpha) + dz * alpha;
-
-    if (orientationAngle.value === 90) {
-      rotationShared.value = [
-        clamp(smoothY * scale, -1, 1),
-        clamp(-smoothX * scale, -1, 1),
-        clamp(smoothZ * scale, -1, 1),
-      ];
-    } else {
-      rotationShared.value = [
-        clamp(smoothX * scale, -1, 1),
-        clamp(smoothY * scale, -1, 1),
-        clamp(smoothZ * scale, -1, 1),
-      ];
-    }
-  });
-
-  // Resource setup
-  useEffect(() => {
-    if (!root || !device || !context) return;
-    (async () => {
-      const bitmap = await getBitmapFromURI(imageURI);
-      const texture = await createTexture(root, bitmap);
-      setImageTexture(texture);
-      await loadTexture(root, bitmap, texture);
-    })();
-  }, [root, device, context, imageURI]);
-
-  // Render loop
-  useEffect(() => {
-    if (!root || !device || !context || !imageTexture) return;
-
-    context.configure({
-      device,
-      format: presentationFormat,
-      alphaMode: 'premultiplied',
-    });
-
-    const sampler = device.createSampler({
-      magFilter: 'linear',
-      minFilter: 'linear',
-    });
-    const textureBindGroup = root.createBindGroup(textureBindGroupLayout, {
-      texture: root.unwrap(imageTexture).createView(),
-      sampler,
-    });
-
-    const rotationBuffer = createRotationBuffer(root);
-    const rotationBindGroup = createRotationValuesBindGroup(
-      root,
-      rotationBuffer
-    );
-
-    const bloomOptionsBuffer = createBloomOptionsBuffer(
-      root,
-      createBloomOptions(bloomOptions ?? {})
-    );
-    const bloomOptionsBindGroup = createBloomOptionsBindGroup(
-      root,
-      bloomOptionsBuffer
-    );
-
-    const colorMaskBuffer = createColorMaskBuffer(
-      root,
-      createColorMask(colorMaskOptions ?? { baseColor: [-20, -20, -20] })
-    );
-    const colorMaskBindGroup = createColorMaskBindGroup(root, colorMaskBuffer);
-
-    const bloomBGP: BindGroupPair[] = createBindGroupPairs(
-      [
-        textureBindGroupLayout,
-        rotationValuesBindGroupLayout,
-        bloomOptionsBindGroupLayout,
-        colorMaskBindGroupLayout,
-      ],
-      [
-        textureBindGroup,
-        rotationBindGroup,
-        bloomOptionsBindGroup,
-        colorMaskBindGroup,
-      ]
-    );
-
-    const maskBGP: BindGroupPair[] = createBindGroupPairs(
-      [textureBindGroupLayout, colorMaskBindGroupLayout],
-      [textureBindGroup, colorMaskBindGroup]
-    );
-
-    let bloomPipeline = root['~unstable']
-      .withVertex(mainVertex, {})
-      .withFragment(bloomFragment, getDefaultTarget(presentationFormat))
-      .createPipeline();
-    bloomPipeline = attachBindGroups(bloomPipeline, bloomBGP);
-
-    let colorMaskPipeline = root['~unstable']
-      .withVertex(mainVertex, {})
-      .withFragment(colorMaskFragment, getDefaultTarget(presentationFormat))
-      .createPipeline();
-    colorMaskPipeline = attachBindGroups(colorMaskPipeline, maskBGP);
-
-    const rot = d.vec3f(0.0);
-    let view: GPUTextureView;
-    let bloomAttachment;
-    let colorMaskAttachment;
-    const render = () => {
-      rot[0] = rotationShared.value[0];
-      rot[1] = rotationShared.value[1];
-      rot[2] = rotationShared.value[2];
-      rotationBuffer.write(rot);
-
-      view = context.getCurrentTexture().createView();
-      bloomAttachment = {
-        view: view,
-        clearValue: [0, 0, 0, 0],
-        loadOp: 'clear' as GPULoadOp,
-        storeOp: 'store' as GPUStoreOp,
-      };
-
-      colorMaskAttachment = {
-        view: view,
-        loadOp: 'load' as GPULoadOp,
-        storeOp: 'store' as GPUStoreOp,
-      };
-
-      // root['~unstable'].beginRenderPass(
-      //   {
-      //     colorAttachments: [
-      //       {
-      //         view,
-      //         clearValue: [0, 0, 0, 0],
-      //         loadOp: 'clear',
-      //         storeOp: 'store',
-      //       },
-      //     ],
-      //   },
-      //   (pass) => {
-      //     pass.setPipeline(bloomPipeline);
-      //     // pass = attachBindGroupsToPass(pass, bloomBGP);
-      //     pass.setBindGroup(textureBindGroupLayout, textureBindGroup);
-      //     pass.setBindGroup(rotationValuesBindGroupLayout, rotationBindGroup);
-      //     pass.setBindGroup(bloomOptionsBindGroupLayout, bloomOptionsBindGroup);
-      //     pass.setBindGroup(colorMaskBindGroupLayout, colorMaskBindGroup);
-      //     pass.draw(6);
-
-      //     // Mask draw
-      //     pass.setPipeline(colorMaskPipeline);
-      //     pass.setBindGroup(textureBindGroupLayout, textureBindGroup);
-      //     pass.setBindGroup(colorMaskBindGroupLayout, colorMaskBindGroup);
-      //     pass.draw(6);
-      //   }
-      // );
-      // root['~unstable'].flush();
-
-      bloomPipeline.withColorAttachment(bloomAttachment).draw(6);
-      colorMaskPipeline.withColorAttachment(colorMaskAttachment).draw(6);
-
-      context.present();
-      frameRef.current = requestAnimationFrame(render);
-    };
-    frameRef.current = requestAnimationFrame(render);
-
-    return () => {
-      if (frameRef.current) cancelAnimationFrame(frameRef.current);
-    };
-  }, [
-    device,
-    context,
-    root,
-    presentationFormat,
-    imageTexture,
-    rotationShared,
-    bloomOptions,
-    colorMaskOptions,
-  ]);
-
-  return (
-    <Canvas
-      ref={ref}
-      style={{ width, height, aspectRatio: width / height }}
-      transparent={Platform.OS === 'ios'}
-    />
-  );
-}
 
-export { subscribeToOrientationChange, getAngleFromDimensions };
+export { subscribeToOrientationChange, getAngleFromDimensions, useOrientation };
+export { Shine } from './components/Shine';
+export { ShineGroup } from './components/ShineGroup';
+export type { ShineProps } from './components/Shine';

package/src/shaders/bindGroupLayouts.ts

@@ -1,28 +1,34 @@
-import tgpu from 'typegpu';
+import tgpu, { type ValidateBufferSchema } from 'typegpu';
 import * as d from 'typegpu/data';
+import type { BufferUsageType } from './resourceManagement/bufferManager';
 
 export const textureBindGroupLayout = tgpu.bindGroupLayout({
   texture: { texture: 'float', dimension: '2d', sampleType: 'float' },
   sampler: { sampler: 'filtering' },
 });
 
+export const maskTextureBindGroupLayout = tgpu.bindGroupLayout({
+  texture: { texture: 'float', dimension: '2d', sampleType: 'float' },
+  sampler: { sampler: 'filtering' },
+});
+
 export const rotationValuesBindGroupLayout = tgpu.bindGroupLayout({
   vec: { uniform: d.vec3f },
 });
 
-export const bloomOptionsSchema = d.struct({
+export const glareOptionsSchema = d.struct({
   glowPower: d.f32,
   hueShiftAngleMax: d.f32,
   hueShiftAngleMin: d.f32,
   hueBlendPower: d.f32,
   lightIntensity: d.f32,
-  bloomIntensity: d.f32,
+  glareIntensity: d.f32,
 });
 
-export type bloomOptionsSchema = typeof bloomOptionsSchema;
+export type glareOptionsSchema = typeof glareOptionsSchema;
 
-export const bloomOptionsBindGroupLayout = tgpu.bindGroupLayout({
-  bloomOptions: { uniform: bloomOptionsSchema },
+export const glareOptionsBindGroupLayout = tgpu.bindGroupLayout({
+  glareOptions: { uniform: glareOptionsSchema },
 });
 
 export const colorMaskSchema = d.struct({
@@ -38,3 +44,34 @@ export type colorMaskSchema = typeof colorMaskSchema;
 export const colorMaskBindGroupLayout = tgpu.bindGroupLayout({
   mask: { uniform: colorMaskSchema },
 });
+
+export const bufferData = {
+  rotationBuffer: {
+    schema: d.vec3f,
+    usage: 'uniform',
+  },
+  glareBuffer: {
+    schema: glareOptionsSchema,
+    usage: 'uniform',
+  },
+  colorMaskBuffer: {
+    schema: colorMaskSchema,
+    usage: 'uniform',
+  },
+} as const satisfies Record<
+  string,
+  { schema: ValidateBufferSchema<any>; usage: BufferUsageType }
+>;
+
+export type BufferDataMap = typeof bufferData;
+
+// export const holoSchema = d.struct({
+//   intensity: d.f32,
+//   waveCallback: WaveCallback, //TgpuFn<(uv: d.Vec2f) => d.Vec2f>,
+// });
+
+// export type holoSchema = typeof holoSchema;
+
+// export const holoBindGroupLayout = tgpu.bindGroupLayout({
+//   holoOptions: { uniform: holoSchema },
+// });

package/src/shaders/bindGroupUtils.ts

@@ -1,20 +1,20 @@
 import { type TgpuBuffer, type TgpuRoot, type UniformFlag } from 'typegpu';
 import * as d from 'typegpu/data';
 import {
-  bloomOptionsBindGroupLayout,
-  bloomOptionsSchema,
+  glareOptionsBindGroupLayout,
+  glareOptionsSchema,
   colorMaskBindGroupLayout,
   colorMaskSchema,
   rotationValuesBindGroupLayout,
 } from './bindGroupLayouts';
 import type {
-  BloomOptions,
+  GlareOptions,
   ColorMask,
   PartiallyOptional,
 } from '../types/types';
 import {
   colorMaskToTyped,
-  createBloomOptions,
+  createGlareOptions,
   createColorMask,
   mapToF32,
 } from '../types/typeUtils';
@@ -35,44 +35,44 @@ export const createRotationBuffer = (
 
 export const createRotationValuesBindGroup = (
   root: TgpuRoot,
-  buffer: TgpuBuffer<d.Vec3f> & UniformFlag
+  buffer: TgpuBuffer<d.Vec3f>
 ) => {
   const rotationValuesBindGroup = root.createBindGroup(
     rotationValuesBindGroupLayout,
     {
-      vec: buffer,
+      vec: root.unwrap(buffer),
     }
   );
 
   return rotationValuesBindGroup;
 };
 
-export const createBloomOptionsBuffer = (
+export const createGlareOptionsBuffer = (
   root: TgpuRoot,
-  initValues?: Partial<BloomOptions>
+  initValues?: Partial<GlareOptions>
 ) => {
-  const bloomOptions: BloomOptions = createBloomOptions({ ...initValues });
-  const bloomOptionsTyped = mapToF32(bloomOptions);
+  const glareOptions: GlareOptions = createGlareOptions({ ...initValues });
+  const glareOptionsTyped = mapToF32(glareOptions);
 
-  const bloomOptionsBuffer = root
-    .createBuffer(bloomOptionsSchema, bloomOptionsTyped)
+  const glareOptionsBuffer = root
+    .createBuffer(glareOptionsSchema, glareOptionsTyped)
     .$usage('uniform');
 
-  return bloomOptionsBuffer;
+  return glareOptionsBuffer;
 };
 
-export const createBloomOptionsBindGroup = (
+export const createGlareOptionsBindGroup = (
   root: TgpuRoot,
-  buffer: TgpuBuffer<bloomOptionsSchema> & UniformFlag
+  buffer: TgpuBuffer<glareOptionsSchema> & UniformFlag
 ) => {
-  const bloomOptionsBindGroup = root.createBindGroup(
-    bloomOptionsBindGroupLayout,
+  const glareOptionsBindGroup = root.createBindGroup(
+    glareOptionsBindGroupLayout,
     {
-      bloomOptions: buffer,
+      glareOptions: buffer,
     }
   );
 
-  return bloomOptionsBindGroup;
+  return glareOptionsBindGroup;
 };
 
 export const createColorMaskBuffer = (
@@ -99,3 +99,18 @@ export const createColorMaskBindGroup = (
 
   return colorMaskBindGroup;
 };
+
+// export const crateHoloBuffer = (
+//   root: TgpuRoot,
+//   initValues: Partial<HoloOptions>
+// ) => {
+//   const holoOptions: HoloOptions = createHoloOptions({ ...initValues });
+//   const holoOptionsTyped = {
+//     intensity: d.f32(holoOptions.intensity),
+//     waveCallback: holoOptions.waveCallback,
+//   };
+
+//   const holoBuffer = root
+//     .createBuffer(holoSchema, holoOptionsTyped)
+//     .$usage('uniform');
+// };

package/src/shaders/fragmentShaders/colorMaskFragment.ts

@@ -27,9 +27,9 @@ const colorMaskFragment = tgpu['~unstable'].fragmentFn({
   const upperCheck = std.all(std.le(color.xyz, maskedColorUpper));
   const lowerCheck = std.all(std.ge(color.xyz, maskedColorLower));
   if (upperCheck && lowerCheck) {
-    return color;
+    return d.vec4f(color.xyz, 0.0);
   }
-  std.discard();
+  return d.vec4f(1.0);
 });
 
 export default colorMaskFragment;

package/src/shaders/fragmentShaders/glareFragment.ts

@@ -0,0 +1,142 @@
+import tgpu from 'typegpu';
+import * as d from 'typegpu/data';
+import * as std from 'typegpu/std';
+import {
+  rotationValuesBindGroupLayout,
+  textureBindGroupLayout,
+  glareOptionsBindGroupLayout,
+  // colorMaskBindGroupLayout,
+} from '../bindGroupLayouts';
+import { glareColorShift, hueShift, overlayChannels } from '../tgpuUtils';
+
+export const glareFragment = tgpu['~unstable'].fragmentFn({
+  in: { uv: d.vec2f },
+  out: d.vec4f,
+})((input) => {
+  const texcoord = d.vec2f(input.uv.x, 1.0 - input.uv.y);
+  const uv = d.vec2f(input.uv.x, 1.0 - input.uv.y);
+  const centeredCoords = std.sub(std.mul(uv, 2.0), 1); //-1 to 1
+
+  const rot = rotationValuesBindGroupLayout.$.vec;
+  const center = std.add(d.vec2f(0.0), d.vec2f(rot.x, rot.y));
+
+  const glareOptions = glareOptionsBindGroupLayout.$.glareOptions;
+  const glareIntensity = glareOptions.glareIntensity;
+  const glowPower = glareOptions.glowPower;
+  const hueBlendPower = glareOptions.hueBlendPower;
+  const hueShiftAngleMax = glareOptions.hueShiftAngleMax;
+  const hueShiftAngleMin = glareOptions.hueShiftAngleMin;
+  const lightIntensity = glareOptions.lightIntensity;
+
+  // const mask = colorMaskBindGroupLayout.$.mask;
+  // const maskedColor = mask.baseColor;
+  // const rgbToleranceRange = mask.rgbToleranceRange;
+
+  let color = std.textureSample(
+    textureBindGroupLayout.$.texture,
+    textureBindGroupLayout.$.sampler,
+    texcoord
+  );
+
+  // const maskedColorLower = std.sub(maskedColor, rgbToleranceRange.lower);
+  // const maskedColorUpper = std.add(maskedColor, rgbToleranceRange.upper);
+  // const upperCheck = std.all(std.le(color.xyz, maskedColorUpper));
+  // const lowerCheck = std.all(std.ge(color.xyz, maskedColorLower));
+  // if (upperCheck && lowerCheck) {
+  //   return color;
+  // }
+
+  //glareIntensity
+  const dst = std.exp(-std.distance(center, centeredCoords));
+  const distToCenter = std.smoothstep(0.0, 1 / glareIntensity, dst);
+
+  //glowPower
+  let glow = d.vec3f(distToCenter);
+  glow = std.mul(glow, glowPower * color.w);
+
+  //hueBlend
+  const hueBlend = (d.f32(hueBlendPower) * dst) / 10.0;
+
+  //lightIntensity
+  glow = std.add(glow, lightIntensity / 10.0);
+  let shiftedRGB = glareColorShift(color.xyz, dst / (lightIntensity * 2));
+
+  //hueShiftAngleMin/Max
+  const hueShiftAngle = std.smoothstep(
+    hueShiftAngleMin,
+    hueShiftAngleMax,
+    distToCenter
+  );
+  const shiftedHue = hueShift(shiftedRGB, hueShiftAngle);
+  shiftedRGB = overlayChannels(shiftedRGB, shiftedHue);
+
+  color = d.vec4f(std.mix(color.xyz, shiftedRGB, hueBlend), color.w);
+  const baseColor = color;
+  const blendColor = glow;
+
+  const combined = overlayChannels(baseColor.xyz, blendColor);
+  color = d.vec4f(std.mix(color.xyz, combined, glow), color.w);
+
+  return color;
+});
+
+export const newGlareFragment = tgpu['~unstable'].fragmentFn({
+  in: { uv: d.vec2f },
+  out: d.vec4f,
+})((input) => {
+  const texcoord = d.vec2f(input.uv.x, 1.0 - input.uv.y);
+  const uv = d.vec2f(input.uv.x, 1.0 - input.uv.y);
+  const centeredCoords = std.sub(std.mul(uv, 2.0), 1.0);
+
+  const rot = rotationValuesBindGroupLayout.$.vec;
+  const center = std.add(d.vec2f(0.0), d.vec2f(rot.x, rot.y)); // do not change
+
+  const opts = glareOptionsBindGroupLayout.$.glareOptions;
+  const glareIntensity = opts.glareIntensity; // [0..∞): bigger → wider/stronger area
+  const glowPower = opts.glowPower; // (0..∞): curve shaping; bigger → softer/wider glow
+  const hueBlendPower = opts.hueBlendPower; // [0..1+]: how much hue-shifted color blends in
+  const hueShiftAngleMin = opts.hueShiftAngleMin; // radians
+  const hueShiftAngleMax = opts.hueShiftAngleMax; // radians
+  const lightIntensity = opts.lightIntensity / 1.3; // [0..∞): brightness boost of the glare/bloom
+
+  let color = std.textureSample(
+    textureBindGroupLayout.$.texture,
+    textureBindGroupLayout.$.sampler,
+    texcoord
+  );
+
+  const dist = std.distance(center, centeredCoords);
+  const radial = std.exp(-dist); // (0,1], steeper near center
+  const radialScaled = std.mul(
+    radial,
+    std.add(1.0, std.max(0.0, glareIntensity))
+  );
+  const influenceRaw = std.smoothstep(0.0, 1.0, radialScaled); // 0..1
+  const curveExp = std.clamp(glowPower, 0.05, 64.0);
+  const glowMask = std.pow(influenceRaw, std.div(1.0, curveExp)); // 0..1
+
+  const maskedGlow = std.mul(glowMask, color.w); // 0..1
+  const boostedRGB = glareColorShift(color.xyz, maskedGlow);
+
+  const hueT = std.clamp(maskedGlow, 0.0, 1.0);
+  const hueAngle = std.mix(hueShiftAngleMin, hueShiftAngleMax, hueT);
+  const hueShifted = hueShift(boostedRGB, hueAngle);
+
+  const hueMixWeight = std.clamp(
+    std.mul(hueBlendPower / 5.0, maskedGlow),
+    0.0,
+    1.0
+  );
+  const chromaMixed = std.mix(color.xyz, hueShifted, hueMixWeight);
+
+  const glareStrength = std.clamp(lightIntensity, 0.0, 100.0);
+  const glareLayer = std.mul(d.vec3f(maskedGlow), glareStrength);
+
+  const overlaidRGB = overlayChannels(chromaMixed, glareLayer);
+  const finalRGB = std.mix(chromaMixed, overlaidRGB, d.vec3f(maskedGlow));
+
+  // Optional mild safety clamp to avoid NaNs/overflow artifacts.
+  const outRGB = std.clamp(finalRGB, d.vec3f(0.0), d.vec3f(1.0));
+
+  return d.vec4f(outRGB, color.w);
+});