create-definedmotion 0.1.0

package/template/src/renderer/src/lib/general/helpers.ts

@@ -0,0 +1,77 @@
+import type { AnimatedScene } from '../scene/sceneClass'
+import * as THREE from 'three'
+
+const frameValueString = 'frameValueIndex'
+
+export const generateID = (numCharacters: number = 10) =>
+  Math.random().toString(numCharacters).substr(2, 9)
+
+export const updateStateInUrl = (stateValue: number) => {
+  const url = new URL(window.location.href)
+  url.searchParams.set(frameValueString, stateValue.toString())
+  window.history.replaceState(null, '', url.toString())
+}
+
+export const setStateInScene = async (scene: AnimatedScene) => {
+  const url = new URL(window.location.href)
+  const stateParam = url.searchParams.get(frameValueString)
+
+  if (stateParam) {
+    const stateValue = parseInt(stateParam, 10)
+
+    if (!isNaN(stateValue)) {
+      console.log('Restored state:', stateValue)
+      await scene.jumpToFrameAtIndex(stateValue)
+      return
+    } else {
+      console.error('Invalid state parameter in URL')
+    }
+  }
+  await scene.jumpToFrameAtIndex(0)
+}
+
+let lastStateText = ''
+
+export const logCameraState = (
+  camera: THREE.PerspectiveCamera | THREE.OrthographicCamera
+): void => {
+  // Clone all values to prevent reference-related issues
+  const position = camera.position.clone()
+  const rotation = camera.rotation.clone()
+  const quaternion = camera.quaternion.clone()
+
+  // Format numbers to 7 significant digits and create code-ready string
+  const stateCode = `
+scene.camera.position.set(
+  ${position.x.toPrecision(7)}, 
+  ${position.y.toPrecision(7)}, 
+  ${position.z.toPrecision(7)}
+);
+
+scene.camera.rotation.set(
+  ${rotation.x.toPrecision(7)}, 
+  ${rotation.y.toPrecision(7)}, 
+  ${rotation.z.toPrecision(7)}
+);
+
+scene.camera.quaternion.set(
+  ${quaternion.x.toPrecision(7)}, 
+  ${quaternion.y.toPrecision(7)}, 
+  ${quaternion.z.toPrecision(7)}, 
+  ${quaternion.w.toPrecision(7)}
+);
+
+scene.camera.rotation.order = '${rotation.order}'; 
+`
+
+  // Only update DOM if state changed
+  if (stateCode !== lastStateText) {
+    lastStateText = stateCode
+    const output = document.getElementById('cameraPositionTextID')
+    if (output) {
+      output.textContent = stateCode
+      // Add CSS to preserve whitespace and line breaks
+      output.style.whiteSpace = 'pre'
+    }
+  }
+}

package/template/src/renderer/src/lib/general/onDestory.ts

@@ -0,0 +1,10 @@
+let allDestroyFunctionsToCall: (() => any)[] = []
+
+export const addDestroyFunction = (func: () => any) => allDestroyFunctionsToCall.push(func)
+
+export const callAllDestroyFunctions = async () => {
+  for (let i = 0; i < allDestroyFunctionsToCall.length; i++) {
+    await allDestroyFunctionsToCall[i]()
+  }
+  allDestroyFunctionsToCall = []
+}

package/template/src/renderer/src/lib/mathHelpers/vectors.ts

@@ -0,0 +1,18 @@
+// NON TESTED FUNCTIONS!
+
+/**
+ * Generate `num` evenly‑spaced numbers from `start` to `end` (inclusive).
+ */
+export function linspace(start: number, end: number, num: number): number[] {
+  if (num < 2) return num === 1 ? [start] : []
+  const step = (end - start) / (num - 1)
+  return Array.from({ length: num }, (_v, i) => start + step * i)
+}
+
+/**
+ * Like numpy.arange: start (inclusive) to stop (exclusive) by step.
+ */
+export function arange(start: number, stop: number, step = 1): number[] {
+  const length = Math.max(Math.ceil((stop - start) / step), 0)
+  return Array.from({ length }, (_v, i) => start + step * i)
+}

package/template/src/renderer/src/lib/rendering/bumpMaps/noise.ts

@@ -0,0 +1,84 @@
+import * as THREE from 'three'
+
+export interface BumpMapOptions {
+  /** Width of the bump map canvas (default: 256) */
+  width?: number
+  /** Height of the bump map canvas (default: 256) */
+  height?: number
+  /**
+   * Noise algorithm to use; currently supports:
+   * - "random": pure random noise (default)
+   * - "perlin": placeholder (requires additional implementation)
+   */
+  noiseAlgorithm?: 'random' | 'perlin'
+  /**
+   * Intensity multiplier for the noise values.
+   * Higher values result in a wider contrast between low and high bumps (default: 1).
+   */
+  intensity?: number
+}
+
+/**
+ * Generates a bump map as a THREE.CanvasTexture.
+ *
+ * @param options - Customization options for the bump map
+ * @returns A THREE.CanvasTexture that can be assigned as a bumpMap in a material.
+ */
+export function createBumpMap(options?: BumpMapOptions): THREE.CanvasTexture {
+  // Set default options
+  const { width = 256, height = 256, noiseAlgorithm = 'random', intensity = 1 } = options || {}
+
+  // Create a canvas element and get its 2d rendering context
+  const canvas: HTMLCanvasElement = document.createElement('canvas')
+  canvas.width = width
+  canvas.height = height
+  const ctx = canvas.getContext('2d')
+
+  if (!ctx) {
+    throw new Error('Could not get canvas 2D context.')
+  }
+
+  // Create an ImageData object to manipulate pixel values directly
+  const imageData = ctx.createImageData(width, height)
+  const data = imageData.data
+
+  // Depending on the noise algorithm choose how to fill the canvas
+  if (noiseAlgorithm === 'random') {
+    // For each pixel, set a random grayscale value
+    for (let i = 0; i < width * height; i++) {
+      // Compute the index in the data array. Each pixel takes 4 values (RGBA)
+      const index = i * 4
+      // A random value in [0, 255] multiplied by the intensity factor,
+      // clamped to the [0, 255] range.
+      const value = Math.min(255, Math.floor(Math.random() * 255 * intensity))
+      data[index] = value // R
+      data[index + 1] = value // G
+      data[index + 2] = value // B
+      data[index + 3] = 255 // A (opaque)
+    }
+  } else if (noiseAlgorithm === 'perlin') {
+    // Placeholder for perlin noise: you would implement or integrate
+    // a Perlin noise function here. For now, we'll default to random noise.
+    console.warn('Perlin noise algorithm not implemented. Falling back to random noise.')
+    for (let i = 0; i < width * height; i++) {
+      const index = i * 4
+      const value = Math.min(255, Math.floor(Math.random() * 255 * intensity))
+      data[index] = value
+      data[index + 1] = value
+      data[index + 2] = value
+      data[index + 3] = 255
+    }
+  }
+
+  // Put the generated pixel data back into the canvas
+  ctx.putImageData(imageData, 0, 0)
+
+  // Create a THREE.CanvasTexture from the canvas and return it.
+  const bumpTexture = new THREE.CanvasTexture(canvas)
+
+  // Optionally, if you need specific properties such as wrapping:
+  // bumpTexture.wrapS = THREE.RepeatWrapping;
+  // bumpTexture.wrapT = THREE.RepeatWrapping;
+
+  return bumpTexture
+}

package/template/src/renderer/src/lib/rendering/helpers.ts

@@ -0,0 +1,35 @@
+import * as THREE from 'three'
+
+export const COLORS = {
+  red: 0xff0000,
+  green: 0x00ff00,
+  blue: 0x0000ff,
+  white: 0xffffff,
+  black: 0x000000,
+  yellow: 0xffff00,
+  cyan: 0x00ffff,
+  magenta: 0xff00ff,
+  silver: 0xc0c0c0,
+  gray: 0x808080,
+  grey: 0x808080,
+  orange: 0xffa500,
+  pink: 0xffc0cb,
+  purple: 0x800080,
+  brown: 0xa52a2a,
+  gold: 0xffd700,
+  indigo: 0x4b0082,
+  violet: 0xee82ee,
+  maroon: 0x800000,
+  teal: 0x008080,
+  lime: 0x00ff00,
+  olive: 0x808000,
+  navy: 0x000080
+}
+
+export function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms))
+}
+
+export const hexColor = (hex: string): THREE.Color => {
+  return new THREE.Color(hex)
+}

package/template/src/renderer/src/lib/rendering/lighting3d.ts

@@ -0,0 +1,387 @@
+import * as THREE from 'three'
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'
+import _photoStudio1 from '$assets/hdri/photo-studio1.hdr?url'
+import _photoStudio2 from '$assets/hdri/photo-studio2.hdr?url'
+import _photoStudio3 from '$assets/hdri/photo-studio3.hdr?url'
+
+import _outdoor1 from '$assets/hdri/outdoor1.hdr?url'
+import _indoor1 from '$assets/hdri/indoor1.hdr?url'
+
+import _metro1 from '$assets/hdri/metro1.hdr?url'
+
+import { AnimatedScene } from '../scene/sceneClass'
+import vert_blur_hdri from '../shaders/hdri_blur/vert.glsl?raw'
+import frag_blur_hdri from '../shaders/hdri_blur/frag.glsl?raw'
+
+import vert_background_gradient from '../shaders/background_gradient/vert.glsl?raw'
+import frag_background_gradient from '../shaders/background_gradient/frag.glsl?raw'
+import { COLORS } from './helpers'
+
+/**
+ * Configuration options for the scene lighting
+ */
+interface LightingOptions {
+  /** Whether to add ambient light (default: true) */
+  addAmbient?: boolean
+  /** Whether to add directional lights (default: true) */
+  addDirectional?: boolean
+  /** Whether to add spot lights (default: true) */
+  addSpot?: boolean
+  /** Whether to add light helper objects (default: false) */
+  addHelpers?: boolean
+  /** Preset color scheme (default: 'cool') */
+  colorScheme?: 'cool' | 'warm' | 'contrast' | 'studio' | 'dramatic'
+  /** Base intensity multiplier for all lights (default: 1.0) */
+  intensity?: number
+}
+
+/**
+ * Collection of lights created by the lighting function
+ */
+interface LightCollection {
+  ambient: THREE.AmbientLight | null
+  directional: THREE.DirectionalLight[]
+  spot: THREE.SpotLight[]
+  helpers: THREE.Object3D[]
+}
+
+/**
+ * Color scheme definition
+ */
+interface ColorScheme {
+  ambient: number
+  key: number
+  fill: number
+  rim: number
+}
+
+/**
+ * Adds multiple light sources to create a visually appealing lighting setup
+ * Scaled appropriately for a standard THREE.GridHelper scene
+ *
+ * @param scene - The Three.js scene to add lights to
+ * @param options - Optional configuration settings
+ * @returns Collection of created lights for further manipulation
+ */
+export function addSceneLighting(
+  scene: THREE.Scene,
+  options: LightingOptions = {}
+): LightCollection {
+  // Set default options
+  const config: Required<LightingOptions> = {
+    addAmbient: true,
+    addDirectional: true,
+    addSpot: true,
+    addHelpers: false,
+    colorScheme: 'cool',
+    intensity: 1.0,
+    ...options
+  }
+
+  // Store all created lights for reference
+  const lights: LightCollection = {
+    ambient: null,
+    directional: [],
+    spot: [],
+    helpers: []
+  }
+
+  // Define color schemes
+  const colorSchemes: Record<Required<LightingOptions>['colorScheme'], ColorScheme> = {
+    cool: {
+      ambient: 0x445570,
+      key: 0xffffff,
+      fill: 0x6495ed, // cornflower blue
+      rim: 0x00ffff // cyan
+    },
+    warm: {
+      ambient: 0x553322,
+      key: 0xffcc88,
+      fill: 0xff8844,
+      rim: 0xff3333
+    },
+    contrast: {
+      ambient: 0x222222,
+      key: 0xffffff,
+      fill: 0x00aaff,
+      rim: 0xff0088
+    },
+    studio: {
+      ambient: 0xaaaaaa,
+      key: 0xffffff,
+      fill: 0xdddddd,
+      rim: 0x8888ff
+    },
+    dramatic: {
+      ambient: 0x111122,
+      key: 0xffffaa,
+      fill: 0x2222ff,
+      rim: 0xff00ff
+    }
+  }
+
+  // Get the selected color scheme
+  const colors = colorSchemes[config.colorScheme]
+
+  // Add ambient light
+  if (config.addAmbient) {
+    const ambient = new THREE.AmbientLight(colors.ambient, 0.5 * config.intensity)
+    scene.add(ambient)
+    lights.ambient = ambient
+  }
+
+  // Add directional lights (key, fill, rim setup)
+  if (config.addDirectional) {
+    // Key light (main light)
+    const keyLight = new THREE.DirectionalLight(colors.key, 1.0 * config.intensity)
+    // Position scaled for standard grid (10x10)
+    keyLight.position.set(5, 7, 5)
+    keyLight.castShadow = true
+
+    // Configure shadows for better quality
+    keyLight.shadow.mapSize.width = 2048
+    keyLight.shadow.mapSize.height = 2048
+    keyLight.shadow.camera.near = 0.5
+    keyLight.shadow.camera.far = 30
+    keyLight.shadow.camera.left = -10
+    keyLight.shadow.camera.right = 10
+    keyLight.shadow.camera.top = 10
+    keyLight.shadow.camera.bottom = -10
+    keyLight.shadow.bias = -0.0001
+
+    scene.add(keyLight)
+    lights.directional.push(keyLight)
+
+    // Fill light (secondary light to fill shadows)
+    const fillLight = new THREE.DirectionalLight(colors.fill, 0.6 * config.intensity)
+    fillLight.position.set(-5, 4, -3)
+    scene.add(fillLight)
+    lights.directional.push(fillLight)
+
+    // Rim light (edge highlighting from behind)
+    const rimLight = new THREE.DirectionalLight(colors.rim, 0.8 * config.intensity)
+    rimLight.position.set(2, 3, -8)
+    scene.add(rimLight)
+    lights.directional.push(rimLight)
+
+    // Add helpers if requested
+    if (config.addHelpers) {
+      const keyHelper = new THREE.DirectionalLightHelper(keyLight, 1)
+      const fillHelper = new THREE.DirectionalLightHelper(fillLight, 1)
+      const rimHelper = new THREE.DirectionalLightHelper(rimLight, 1)
+
+      scene.add(keyHelper)
+      scene.add(fillHelper)
+      scene.add(rimHelper)
+
+      lights.helpers.push(keyHelper, fillHelper, rimHelper)
+    }
+  }
+
+  // Add spot lights for additional emphasis
+  if (config.addSpot) {
+    // Spot from above
+    const topSpot = new THREE.SpotLight(
+      colors.key,
+      0.8 * config.intensity,
+      30, // distance
+      Math.PI / 6, // angle
+      0.5, // penumbra
+      1 // decay
+    )
+    topSpot.position.set(0, 15, 0)
+    topSpot.castShadow = true
+
+    // Configure spotlight shadows
+    topSpot.shadow.mapSize.width = 1024
+    topSpot.shadow.mapSize.height = 1024
+    topSpot.shadow.camera.near = 1
+    topSpot.shadow.camera.far = 30
+
+    scene.add(topSpot)
+    lights.spot.push(topSpot)
+
+    // Accent spot
+    const accentSpot = new THREE.SpotLight(
+      colors.rim,
+      0.7 * config.intensity,
+      20,
+      Math.PI / 8,
+      0.6,
+      1.5
+    )
+    accentSpot.position.set(-7, 4, -7)
+    scene.add(accentSpot)
+    lights.spot.push(accentSpot)
+
+    // Add helpers if requested
+    if (config.addHelpers) {
+      const topSpotHelper = new THREE.SpotLightHelper(topSpot)
+      const accentSpotHelper = new THREE.SpotLightHelper(accentSpot)
+
+      scene.add(topSpotHelper)
+      scene.add(accentSpotHelper)
+
+      lights.helpers.push(topSpotHelper, accentSpotHelper)
+    }
+  }
+
+  // Return all created lights for further manipulation
+  return lights
+}
+
+/**
+ * Creates a scene with standard grid, axes, and lighting
+ *
+ * @param scene - The Three.js scene to set up
+ * @param lightingOptions - Optional lighting configuration
+ * @returns The created lights collection
+ */
+export function setupStandardScene(
+  scene: THREE.Scene,
+  lightingOptions: LightingOptions = {}
+): LightCollection {
+  // Add grid
+  const gridHelper = new THREE.GridHelper(10, 10)
+  scene.add(gridHelper)
+
+  // Add axes
+  const axesHelper = new THREE.AxesHelper(5)
+  scene.add(axesHelper)
+
+  // Add lights and return them
+  return addSceneLighting(scene, lightingOptions)
+}
+
+export interface HDRIData {
+  texture: THREE.DataTexture
+  material: THREE.Material
+}
+
+export const loadHDRIData = async (
+  path: HDRIs | string,
+  blurAmount: number,
+  opacity: number = 1
+): Promise<HDRIData> => {
+  const rgbeLoader: RGBELoader = new RGBELoader()
+
+  return new Promise((resolve, reject) => {
+    rgbeLoader.setDataType(THREE.FloatType).load(
+      path as any,
+      (texture: THREE.DataTexture): void => {
+        const blurredMaterial = new THREE.ShaderMaterial({
+          uniforms: {
+            uTexture: { value: texture },
+            uBlurAmount: { value: blurAmount }, // Increase for more blur
+            uTextureSize: {
+              value: new THREE.Vector2(texture.image.width, texture.image.height)
+            },
+            sigma: { value: 3.0 }, // Add this uniform
+            opacity: { value: opacity }
+          },
+          vertexShader: vert_blur_hdri,
+          fragmentShader: frag_blur_hdri,
+          side: THREE.BackSide,
+          transparent: true
+        })
+
+        resolve({
+          texture,
+          material: blurredMaterial
+        })
+      },
+      (_) => {},
+      // Optional error callback
+      (error): void => {
+        console.error('Error loading HDRI:', error)
+        reject(error)
+      }
+    )
+  })
+}
+
+export enum HDRIs {
+  photoStudio1 = _photoStudio1 as any,
+  photoStudio2 = _photoStudio2 as any,
+  photoStudio3 = _photoStudio3 as any,
+  outdoor1 = _outdoor1 as any,
+  indoor1 = _indoor1 as any,
+  metro1 = _metro1 as any
+}
+
+export async function addHDRI(scene: AnimatedScene, hdriData: HDRIData, lightingIntensity = 1.0) {
+  // Create PMREM Generator for converting equirectangular HDRI to cubemap
+  const pmremGenerator: THREE.PMREMGenerator = new THREE.PMREMGenerator(scene.renderer)
+  pmremGenerator.compileEquirectangularShader()
+
+  // Process the HDRI texture
+  const envMap: THREE.Texture = pmremGenerator.fromEquirectangular(hdriData.texture).texture
+
+  // Create background sphere
+  const geometry = new THREE.SphereGeometry(scene.farLimitRender / 2, 40, 40)
+
+  const backgroundSphere = new THREE.Mesh(geometry, hdriData.material)
+  backgroundSphere.renderOrder = -1 // Render before other objects
+
+  // Attach to camera
+  scene.scene.add(backgroundSphere)
+
+  // Apply to scene environment (for reflections)
+  scene.scene.environment = envMap
+
+  scene.scene.environmentIntensity = lightingIntensity
+
+  // Clean up resources
+  // texture.dispose()
+  pmremGenerator.dispose()
+}
+
+export function addBackgroundGradient({
+  scene,
+  topColor, // Sky blue
+  bottomColor, // White
+  backgroundOpacity = 1.0,
+  lightingIntensity = 1.0,
+  addLighting = true
+}: {
+  scene: AnimatedScene
+  topColor: THREE.ColorRepresentation
+  bottomColor: THREE.ColorRepresentation
+  backgroundOpacity?: number
+  lightingIntensity?: number
+  radius?: number
+  addLighting?: boolean
+}): void {
+  // Convert ColorRepresentation to Color instances
+  const top = new THREE.Color(topColor)
+  const bottom = new THREE.Color(bottomColor)
+
+  const sphereRadius = scene.farLimitRender / 2.2
+
+  // Create background sphere
+  const geometry = new THREE.SphereGeometry(sphereRadius, 40, 40)
+  const gradientMaterial = new THREE.ShaderMaterial({
+    vertexShader: vert_background_gradient,
+    fragmentShader: frag_background_gradient,
+    uniforms: {
+      topColor: { value: top },
+      bottomColor: { value: bottom },
+      opacity: { value: backgroundOpacity }
+    },
+    side: THREE.BackSide,
+    transparent: backgroundOpacity < 1.0
+  })
+
+  const backgroundSphere = new THREE.Mesh(geometry, gradientMaterial)
+  backgroundSphere.renderOrder = -1
+  scene.scene.add(backgroundSphere)
+
+  // Add hemisphere lighting that matches the gradient colors
+  if (addLighting) {
+    const hemisphereLight = new THREE.HemisphereLight(top, bottom, lightingIntensity)
+
+    // Optional: Position the light if needed, though HemisphereLight works from everywhere
+    hemisphereLight.position.set(0, 1, 0)
+    scene.scene.add(hemisphereLight)
+  }
+}

package/template/src/renderer/src/lib/rendering/materials.ts

@@ -0,0 +1,6 @@
+import * as THREE from "three"
+import { COLORS } from "./helpers"
+
+export const getRegularMetal = (color: number = COLORS.white) => {
+  return new THREE.MeshStandardMaterial({ color: color, roughness: 0.2, metalness: 1 })
+}