From 5fa7111078b683cb15951d1dbb27691e81a8b304 Mon Sep 17 00:00:00 2001
From: Peter <petermoldovia@yahoo.ca>
Date: Fri, 25 Aug 2023 23:48:45 +0200
Subject: [PATCH 1/2] feat(RandUtils): add RandUtils

---
 src/index.ts           |   1 +
 src/utils/RandUtils.ts | 120 +++++++++++++++++++++++++++++++++++++++++
 src/utils/index.ts     |   3 ++
 3 files changed, 124 insertions(+)
 create mode 100644 src/utils/RandUtils.ts

diff --git a/src/index.ts b/src/index.ts
index 46d458ad..65ee564f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1 +1,2 @@
 export * from './core'
+export * from './utils'
diff --git a/src/utils/RandUtils.ts b/src/utils/RandUtils.ts
new file mode 100644
index 00000000..399a1948
--- /dev/null
+++ b/src/utils/RandUtils.ts
@@ -0,0 +1,120 @@
+import { MathUtils } from 'THREE'
+const clamp = MathUtils.clamp
+
+/**
+ * Seedable pseudorandom number tools
+ */
+export default class RandUtils {
+  private _getNext: () => number
+  private _getGenerator: (seed: number) => () => number
+
+  /**
+   * Create a new seeded pseudorandom number generator.
+   * @param [seed=0] - the seed for the generator
+   * @param [getSeededRandomGenerator=getMulberry32] - a function that returns a pseudorandom number generator
+   * @constructor
+   */
+  constructor(seed = 0, getSeededRandomGenerator?: (seed: number) => () => number) {
+    this._getGenerator = getSeededRandomGenerator ?? this.getMulberry32
+    this._getNext = this._getGenerator(seed)
+  }
+
+  /**
+   * Reseed the pseudorandom number generator
+   */
+  seed(s: number) {
+    this._getNext = this._getGenerator(s)
+  }
+
+  /**
+   * Return the next pseudorandom number in the interval [0, 1]
+   */
+  rand(): number {
+    return this._getNext()
+  }
+
+  /**
+   * Random float from <low, high> interval
+   * @param low - Low value of the interval
+   * @param high - High value of the interval
+   */
+  float(low: number, high: number): number {
+    return low + this._getNext() * (high - low)
+  }
+
+  /**
+   * Random float from <-range/2, range/2> interval
+   * @param range - Interval range
+   */
+  floatSpread(range: number): number {
+    return this.float(-0.5 * range, 0.5 * range)
+  }
+
+  /**
+   * Random integer from <low, high> interval
+   * @param low Low value of the interval
+   * @param high High value of the interval
+   */
+  int(low: number, high: number): number {
+    return low + Math.floor(this._getNext() * (high - low + 1))
+  }
+
+  /**
+   * Choose an element from an array.
+   * @param array The array to choose from
+   * @returns An element from the array or null if the array is empty
+   */
+  choice<T>(array: T[]): T | null {
+    if (!array.length) {
+      return null
+    }
+    return array[Math.floor(this._getNext() * array.length)]
+  }
+
+  /**
+   * Return n elements from an array.
+   * @param array The array to sample
+   * @param sampleSizeMin The minimum sample size
+   * @param sampleSizeMax The maximum sample size
+   */
+  sample<T>(array: T[], sampleSizeMin: number, sampleSizeMax?: number): T[] {
+    const len = array.length
+    sampleSizeMin = clamp(sampleSizeMin, 0, len - 1)
+    sampleSizeMax = clamp(sampleSizeMax ?? len - 1, 0, len - 1)
+    const sampleSize = this.int(sampleSizeMin, sampleSizeMax)
+    const indicies = this.shuffle(array.map((_, i) => i))
+    const n = Math.min(array.length, sampleSize)
+    return indicies
+      .slice(0, n)
+      .sort()
+      .map(i => array[i])
+  }
+
+  /**
+   * Shuffle an array. Not in-place.
+   * @param array The array to shuffle
+   */
+  shuffle<T>(array: T[]): T[] {
+    return array
+      .map(value => ({ value, sort: this._getNext() }))
+      .sort((a, b) => a.sort - b.sort)
+      .map(({ value }) => value)
+  }
+
+  /**
+   * The default pseudorandom generator.
+   */
+  private getMulberry32(seed = 0): () => number {
+    if (0 < seed && seed < 1) {
+      seed = Math.floor(seed * 2 ** 16)
+    }
+    return () => {
+      // NOTE: Mulberry32 generator
+      seed += 0x6d2b79f5
+      let t = seed
+      t = Math.imul(t ^ (t >>> 15), t | 1)
+      t ^= t + Math.imul(t ^ (t >>> 7), t | 61)
+      return ((t ^ (t >>> 14)) >>> 0) / 4294967296
+    }
+  }
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 53bfbbfc..07b43b48 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -30,3 +30,6 @@ export function hasSetter(obj: any, prop: string): boolean {
   const setterName = `set${prop[0].toUpperCase()}${prop.slice(1)}`
   return obj[setterName] !== undefined
 }
+
+import RandUtils from './RandUtils'
+export { RandUtils }

From fb1f52d72838d9e9a18cf841e38335232cf9abd7 Mon Sep 17 00:00:00 2001
From: Peter <petermoldovia@yahoo.ca>
Date: Fri, 18 Aug 2023 01:30:51 +0200
Subject: [PATCH 2/2] feat(Lensflare): add Lensflare

---
 playground/src/pages/LensflareDemo.vue |  82 +++++++
 playground/src/router.ts               |   5 +
 src/core/abstractions/Lensflare.vue    | 305 +++++++++++++++++++++++++
 src/core/abstractions/index.ts         |   2 +
 4 files changed, 394 insertions(+)
 create mode 100644 playground/src/pages/LensflareDemo.vue
 create mode 100644 src/core/abstractions/Lensflare.vue

diff --git a/playground/src/pages/LensflareDemo.vue b/playground/src/pages/LensflareDemo.vue
new file mode 100644
index 00000000..cf04d6a7
--- /dev/null
+++ b/playground/src/pages/LensflareDemo.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import { TresCanvas, useRenderLoop } from '@tresjs/core'
+import { RandUtils, Levioso, Lensflare, Dodecahedron } from '@tresjs/cientos';
+import * as THREE from 'three';
+
+import { OrbitControls } from '@tresjs/cientos'
+
+const gl = {
+    clearColor: '#000000',
+    shadows: false,
+    alpha: false,
+}
+
+function easeInOutQuint(x: number): number {
+    return x < 0.5 ? 16 * x * x * x * x * x : 1 - Math.pow(-2 * x + 2, 5) / 2;
+}
+
+const colors = ["white", "yellow", "red", "orange", "purple"];
+const randomColor = () => colors[Math.trunc(Math.random() * colors.length)];
+const color = randomColor();
+
+const lightRef = shallowRef();
+const flarePropsRef = shallowRef([{ color, size: 1 }]);
+flarePropsRef.value = new Array(11).fill(0).map((_, i) => ({ size: Math.min(256 / (1 + i * i)), color }));
+
+const { onLoop } = useRenderLoop();
+
+onLoop(() => {
+    if (!lightRef.value) return
+
+    if (Math.random() > 0.99) {
+        lightRef.value.color = new THREE.Color(randomColor());
+        flarePropsRef.value = getFlareProps()
+    }
+});
+
+function getFlareProps() {
+    const NUM_ELEMENTS = 15;
+    return new Array(NUM_ELEMENTS).fill(0).map(
+        (_, i) => ({
+            size: 216 * (1 - easeInOutQuint(i / NUM_ELEMENTS)),
+            distance: i < 5 ? 0 : easeInOutQuint(i / NUM_ELEMENTS),
+            color: lightRef.value?.color ?? "white"
+        }));
+}
+
+flarePropsRef.value = getFlareProps();
+
+const rand = new RandUtils(112);
+const ROCK_COUNT = 1000;
+const ROCK_DISTANCE = 200;
+const ROCK_SCALE = 3;
+const rocks = new Array(ROCK_COUNT).fill(0).map((_, i) => ({
+    position: [0, 0, 0].map(() => rand.floatSpread(ROCK_DISTANCE)),
+    rotation: [0, 0, 0].map(() => rand.floatSpread(Math.PI * 2)),
+    scale: [0, 0, 0].map(() => rand.float(ROCK_SCALE, ROCK_SCALE * 2)),
+    key: i
+}));
+
+const rockMaterial = new THREE.MeshPhongMaterial({ color: 0x123141, specular: 0xffffff, shininess: 1000 });
+
+</script>
+
+<template>
+    <TresCanvas v-bind="gl">
+        <Levioso :speed="1">
+            <TresPerspectiveCamera :position="[11, 11, 100]" />
+        </Levioso>
+        <OrbitControls />
+        <Levioso :speed="2" :range="[-13, 13]" :rotation-factor="10">
+            <TresPointLight ref="lightRef" :color="color" :intensity="1000" :position="[10, 0, 0]">
+                <Lensflare :seed="10" :flare="flarePropsRef" />
+            </TresPointLight>
+        </Levioso>
+        <TresPointLight :color="new THREE.Color(1, 1, 1)" :intensity="2000" :position="[10, 5, 0]">
+            <Lensflare :seed="Math.random()" />
+        </TresPointLight>
+        <Dodecahedron v-for="{ key, position, rotation, scale } in rocks" :key="key" :material="rockMaterial"
+            :position="position" :rotation="rotation" :scale="scale" />
+    </TresCanvas>
+</template>
diff --git a/playground/src/router.ts b/playground/src/router.ts
index 748261dc..354791e2 100644
--- a/playground/src/router.ts
+++ b/playground/src/router.ts
@@ -76,6 +76,11 @@ const routes = [
     name: 'MouseParallax',
     component: () => import('./pages/MouseParallaxDemo.vue'),
   },
+  {
+    path: '/abstractions/lensflare',
+    name: 'MouseParallax',
+    component: () => import('./pages/LensflareDemo.vue'),
+  },
 ]
 
 export const router = createRouter({
diff --git a/src/core/abstractions/Lensflare.vue b/src/core/abstractions/Lensflare.vue
new file mode 100644
index 00000000..a0d2aa7c
--- /dev/null
+++ b/src/core/abstractions/Lensflare.vue
@@ -0,0 +1,305 @@
+<script setup lang="ts">
+import { Lensflare, LensflareElement } from 'three/addons/objects/Lensflare.js';
+import * as THREE from 'three';
+import { watch, shallowRef, onMounted } from 'vue'
+import { normalizeColor } from '@tresjs/core';
+import RandUtils from '../../utils/RandUtils';
+import { onUnmounted } from 'vue';
+
+export type FlareElementProps = {
+  texture?: THREE.Texture | string
+  size?: number
+  distance?: number
+}
+
+const props = withDefaults(
+  defineProps<{
+    flare?: FlareElementProps[],
+    scale?: number,
+    seed?: number,
+  }>(),
+  {
+    flare: undefined,
+    seed: undefined,
+    scale: 1,
+  },
+)
+
+const groupRef = shallowRef<Lensflare>();
+
+defineExpose({
+  value: groupRef,
+});
+
+const textureLoader = new THREE.TextureLoader();
+
+function linear(x: number): number {
+  return x;
+}
+
+function easeInCubic(x: number): number {
+  return x * x * x;
+}
+
+function easeInOutCubic(x: number): number {
+  return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
+}
+
+function easeInQuart(x: number): number {
+  return x * x * x * x;
+}
+
+function easeOutBounce(x: number): number {
+  const n1 = 7.5625;
+  const d1 = 2.75;
+
+  if (x < 1 / d1) {
+    return n1 * x * x;
+  } else if (x < 2 / d1) {
+    return n1 * (x -= 1.5 / d1) * x + 0.75;
+  } else if (x < 2.5 / d1) {
+    return n1 * (x -= 2.25 / d1) * x + 0.9375;
+  } else {
+    return n1 * (x -= 2.625 / d1) * x + 0.984375;
+  }
+}
+
+const easingFunctions = [linear, easeInCubic, easeInOutCubic, easeInQuart, easeOutBounce];
+
+const lerp = THREE.MathUtils.lerp;
+
+const TEXTURE_PATH = 'https://raw.githubusercontent.com/andretchen0/tresjs_assets/' +
+  'b1bc3780de73a9328a530767c9a7f4cbab060396/textures/lensflare/';
+
+const getSeededFlareElements = () => {
+  const rand: RandUtils = new RandUtils(props.seed);
+
+  const numPoints = rand.choice([4, 6, 8]) as 4 | 6 | 8;
+
+  const circle = `${TEXTURE_PATH}circle.png`;
+  const circleBlur = `${TEXTURE_PATH}cirlceBlur.png`;
+  const circleRainbow = `${TEXTURE_PATH}circleRainbow.png`;
+  const line = `${TEXTURE_PATH}line.png`;
+  const poly = `${TEXTURE_PATH}poly${numPoints}.png`;
+  const polyStroke = `${TEXTURE_PATH}polyStroke${numPoints}.png`;
+  const rays = `${TEXTURE_PATH}rays${numPoints}.png`;
+  const ring = `${TEXTURE_PATH}ring.png`;
+  const starThin = `${TEXTURE_PATH}starThin${numPoints}.png`;
+
+  // NOTE:
+  // Flare elements are divided into back, oversize, body, front. 
+  // They are arranged as such, relative to the light source and camera:
+  // [distance < 0]   [distance == 0]   [distance > 0]
+  //                      light                          camera
+  //      back        body, oversize       front
+
+  const oversizeTexturesOptional = [line, ring];
+  const oversizeColors = ["white"];
+  const oversizeSizeMin = 750;
+  const oversizeSizeMax = 1024;
+  const oversizeElementsNumMin = 0;
+  const oversizeElementsNumMax = 2;
+
+  const bodyTexturesRequired = [circleBlur, rays];
+  const bodyTexturesOptional = [circle, circleRainbow, ring, starThin];
+  const bodyColors = ["white"];
+  const bodySizeMin = 180;
+  const bodySizeMax = 512;
+  const bodyTexturesOptionalNumMin = 2;
+  const bodyTexturesOptionalNumMax = 3;
+
+  const frontTexturesOptional = [circleBlur, circle, ring, poly, polyStroke];
+  const [darkPurple, darkBlue] = [0x38235f, 0x02055a];
+  const frontColors = ["dimgray", "gray", "darkgray", darkPurple, darkBlue];
+  const frontTexturesNumMin = 2;
+  const frontTexturesNumMax = 4;
+  const frontSizeMin = 20;
+  const frontSizeMax = 180;
+  const frontOffsetMin = 0.5;
+  const frontOffsetMax = 1;
+  const frontLengthMin = 0.75;
+  const frontLengthMax = 2.5;
+  const frontElementsNumMin = 5;
+  const frontElementsNumMax = 21;
+
+  const backTexturesOptional = frontTexturesOptional;
+  const backColors = frontColors;
+  const backTexturesNumMin = 2;
+  const backTexturesNumMax = 4;
+  const backSizeMin = 180;
+  const backSizeMax = 360;
+  const backOffsetMin = 0.1;
+  const backOffsetMax = 0.2;
+  const backLengthMin = 0.5;
+  const backLengthMax = 0.6;
+  const backElementsNumMin = 0;
+  const backElementsNumMax = 5;
+
+  const easingFn = rand.choice(easingFunctions) as (n: number) => number;
+
+  const oversizeTexturesSelected = rand.sample(
+    oversizeTexturesOptional,
+    rand.int(oversizeElementsNumMin, oversizeElementsNumMax)
+  );
+  const oversizeElements = oversizeTexturesSelected.map(
+    texture => ({
+      texture,
+      size: rand.int(oversizeSizeMin, oversizeSizeMax),
+      distance: 0,
+      color: rand.choice(oversizeColors)
+    })
+  );
+
+  const bodyTexturesOptionalSelected = rand.sample(
+    bodyTexturesOptional,
+    rand.int(bodyTexturesOptionalNumMin, bodyTexturesOptionalNumMax)
+  );
+  const bodyElements = [
+    ...bodyTexturesRequired.map(texture => ({ 
+      texture, 
+      size: rand.int(bodySizeMin, bodySizeMax), 
+      distance: 0, 
+      color: rand.choice(bodyColors) })
+      ),
+    ...bodyTexturesOptionalSelected.map(texture => ({ 
+      texture, 
+      size: rand.int(bodySizeMin, bodySizeMax), 
+      distance: 0, 
+      color: rand.choice(bodyColors) })
+      )
+  ];
+
+  const frontTexturesSelected = rand.sample(frontTexturesOptional, rand.int(frontTexturesNumMin, frontTexturesNumMax));
+  const frontNumElements = rand.int(frontElementsNumMin, frontElementsNumMax);
+  const frontDistanceStart = rand.float(frontOffsetMin, frontOffsetMax);
+  const frontDistanceEnd = frontDistanceStart + rand.float(frontLengthMin, frontLengthMax);
+  const frontElementProps = new Array(frontNumElements).fill(0).map(() => {
+    const progress = easingFn(rand.rand());
+    return {
+      texture: rand.choice(frontTexturesSelected),
+      size: lerp(frontSizeMin, frontSizeMax, easingFn(1 - progress)),
+      distance: lerp(frontDistanceStart, frontDistanceEnd, progress),
+      color: rand.choice(frontColors)
+    };
+  });
+
+  const backTexturesSelected = rand.sample(backTexturesOptional, rand.int(backTexturesNumMin, backTexturesNumMax));
+  const backNumElements = rand.int(backElementsNumMin, backElementsNumMax);
+  const backDistanceStart = rand.float(backOffsetMin, backOffsetMax);
+  const backDistanceEnd = backDistanceStart + rand.float(backLengthMin, backLengthMax);
+  const backElements = new Array(backNumElements).fill(0).map(() => {
+    const progress = easingFn(rand.rand());
+    return {
+      texture: rand.choice(backTexturesSelected),
+      size: lerp(backSizeMin, backSizeMax, easingFn(1 - progress)),
+      distance: -lerp(backDistanceStart, backDistanceEnd, progress),
+      color: rand.choice(backColors)
+    };
+  });
+
+  return [...oversizeElements, ...bodyElements, ...frontElementProps, ...backElements];
+}
+
+const defaultElement: LensflareElement = {
+  texture: `${TEXTURE_PATH}cirlceBlur.png`,
+  size: 64,
+  distance: 0,
+  color: new THREE.Color("white")
+}
+
+const threeLensflare = new Lensflare();
+// NOTE: THREE.Lensflare doesn't expose `elements` – the "parts" of a lensflare. 
+// We'll maintain a reference that we can update.
+const threeElements: LensflareElement = [];
+
+const dispose = () => {
+  while (threeElements.length) threeElements.pop();
+  groupRef.value?.children.forEach((c: any) => { if ('dispose' in c) c.dispose(); });
+  groupRef.value?.remove(...groupRef.value.children);
+}
+
+const onChange = () => {
+  if (groupRef.value) {
+
+    const normalizedUserElements = (() => {
+      // NOTE: The user can either tweak the seeded lensflare or provide their own.
+      const flare = props.flare || [];
+
+      // NOTE: There are 2 variables leading to the following results
+      // hasSeed | hasFlare
+      // T | T : Use seeded elements with user flare as tweaks
+      // F | T : Use user flare, fill missing values with defaults
+      // T | F : Use the seeded elements
+      // F | F : Use seeded elements with seed == 0
+
+      const hasSeed = typeof props.seed !== 'undefined';
+      const hasFlare = Array.isArray(props.flare);
+
+      if (hasSeed && hasFlare) {
+        return getSeededFlareElements().map((element, i) => Object.assign({}, element, flare[i]));
+      } else if (!hasSeed && hasFlare) {
+        return flare.map(element => Object.assign({}, defaultElement, element))
+      } else if (hasSeed && !hasFlare) {
+        return getSeededFlareElements();
+      } else {
+        return getSeededFlareElements();
+      }
+    })();
+
+    normalizedUserElements.forEach(el => {
+      if (typeof el.texture === 'string') {
+        el.texture = textureLoader.load(el.texture);
+      }
+      el.color = normalizeColor(el.color);
+    });
+
+    // NOTE: The THREE lensflare, doesn't expose "elements", so keep a copy.
+    while (normalizedUserElements.length > threeElements.length) {
+      const element = Object.assign({}, defaultElement);
+      threeElements.push(element);
+      threeLensflare.addElement(element);
+    }
+
+    // NOTE: We can't remove already added elements from the THREE lensflare. 
+    // So if we've previously added more elements than are currently needed, 
+    // make those elements too small to display.
+    while (normalizedUserElements.length < threeElements.length) {
+      for (let i = normalizedUserElements.length - 1; i < threeElements.length; i++) {
+        threeElements[i].size = 0;
+      }
+    }
+
+    normalizedUserElements.forEach((userElement, i) => {
+      const threeElement = threeElements[i];
+      const { texture, size, distance, color } = userElement;
+
+      if (threeElement.texture !== texture) {
+        if (threeElement.texture?.dispose) {
+          threeElement.texture.dispose();
+        }
+        threeElement.texture = texture;
+      }
+
+      threeElement.size = size * props.scale;
+      threeElement.distance = distance * props.scale;
+      threeElement.color = color;
+    });
+  }
+}
+
+onMounted(() => {
+  groupRef.value.add(threeLensflare);
+  onChange();
+})
+
+onUnmounted(() => {
+  dispose();
+});
+
+watch(() => props.flare, onChange)
+
+</script>
+
+<template>
+  <TresGroup v-bind="$attrs" ref="groupRef"></TresGroup>
+</template>
diff --git a/src/core/abstractions/index.ts b/src/core/abstractions/index.ts
index f43b4696..26c836f1 100644
--- a/src/core/abstractions/index.ts
+++ b/src/core/abstractions/index.ts
@@ -4,6 +4,7 @@ import { Environment } from './useEnvironment/component'
 import Stars from './Stars.vue'
 import Precipitation from './Precipitation.vue'
 import Smoke from './Smoke.vue'
+import Lensflare from './Lensflare.vue'
 import Levioso from './Levioso.vue'
 import ContactShadows from './ContactShadows.vue'
 import MouseParallax from './MouseParallax.vue'
@@ -15,6 +16,7 @@ export {
   MouseParallax,
   Stars,
   Smoke,
+  Lensflare,
   Levioso,
   ContactShadows,
   Precipitation,