diff --git a/firebird-ng/package-lock.json b/firebird-ng/package-lock.json index bd0e730..0d82c66 100644 --- a/firebird-ng/package-lock.json +++ b/firebird-ng/package-lock.json @@ -1,12 +1,12 @@ { "name": "firebird", - "version": "0.0.2", + "version": "0.0.3", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "firebird", - "version": "0.0.2", + "version": "0.0.3", "dependencies": { "@angular/animations": "^17.3.0", "@angular/common": "^17.3.0", @@ -16,6 +16,7 @@ "@angular/platform-browser": "^17.3.0", "@angular/platform-browser-dynamic": "^17.3.0", "@angular/router": "^17.3.0", + "@tweenjs/tween.js": "^23.1.2", "@types/picomatch": "^2.3.3", "jsdom": "^24.0.0", "jsrootdi": "^7.6.101", diff --git a/firebird-ng/package.json b/firebird-ng/package.json index 6dcdeee..4128268 100644 --- a/firebird-ng/package.json +++ b/firebird-ng/package.json @@ -21,9 +21,11 @@ "@angular/platform-browser": "^17.3.0", "@angular/platform-browser-dynamic": "^17.3.0", "@angular/router": "^17.3.0", + "@tweenjs/tween.js": "^23.1.2", "@types/picomatch": "^2.3.3", "jsdom": "^24.0.0", "jsrootdi": "^7.6.101", + "lil-gui": "^0.19.2", "outmatch": "^1.0.0", "phoenix-event-display": "^2.16.0", "phoenix-ui-components": "^2.16.0", @@ -32,8 +34,7 @@ "three": "^0.164.1", "tslib": "^2.3.0", "vm": "^0.1.0", - "zone.js": "~0.14.3", - "lil-gui": "^0.19.2" + "zone.js": "~0.14.3" }, "devDependencies": { "@angular-builders/custom-webpack": "^17.0.2", diff --git a/firebird-ng/src/app/eic-animation-manager.ts b/firebird-ng/src/app/eic-animation-manager.ts new file mode 100644 index 0000000..856de60 --- /dev/null +++ b/firebird-ng/src/app/eic-animation-manager.ts @@ -0,0 +1,539 @@ +import { Easing, Tween } from '@tweenjs/tween.js'; +import { + TubeGeometry, + BufferGeometry, + Vector3, + Color, + MeshBasicMaterial, + Mesh, + SphereGeometry, + Sphere, + Object3D, + BufferAttribute, + Scene, + Camera, + Plane, + Group, +} from 'three'; +import {RendererManager, SceneManager} from "phoenix-event-display"; +import {TracksMesh} from "phoenix-event-display/dist/loaders/objects/tracks"; + + +/** Type for animation preset. */ +export interface AnimationPreset { + /** Positions with duration and easing of each tween forming a path. */ + positions: { position: number[]; duration: number; easing?: any }[]; + /** Time after which to start the event collision animation. */ + animateEventAfterInterval?: number; + /** Duration of the event collision. */ + collisionDuration?: number; + /** Name of the Animation */ + name: string; +} + +/** + * Manager for managing animation related operations using three.js and tween.js. + */ +export class EicAnimationsManager { + /** + * Constructor for the animation manager. + * @param scene Three.js scene containing all the objects and event data. + * @param activeCamera Currently active camera. + * @param rendererManager Manager for managing event display's renderer related functions. + */ + constructor( + private scene: Scene, + private activeCamera: Camera, + private rendererManager: RendererManager, + ) { + this.animateEvent = this.animateEvent.bind(this); + this.animateEventWithClipping = this.animateEventWithClipping.bind(this); + } + + /** + * Get the camera tween for animating camera to a position. + * @param pos End position of the camera tween. + * @param duration Duration of the tween. + * @param easing Animation easing of the tween if any. + * @returns Tween object of the camera animation. + */ + public getCameraTween( + pos: number[], + duration: number = 1000, + easing?: typeof Easing.Linear.None, + ) { + const tween = new Tween(this.activeCamera.position).to( + { x: pos[0], y: pos[1], z: pos[2] }, + duration, + ); + + if (easing) { + tween.easing(easing); + } + + return tween; + } + + /** + * Animate the camera through the event scene. + * @param startPos Start position of the translation animation. + * @param tweenDuration Duration of each tween in the translation animation. + * @param onAnimationEnd Callback when the last animation ends. + */ + public animateThroughEvent( + startPos: number[], + tweenDuration: number, + onAnimationEnd?: () => void, + ) { + // Move to start + const start = this.getCameraTween(startPos, 1000, Easing.Cubic.Out); + // Move to position along the detector axis + const alongAxisPosition = [0, 0, startPos[2]]; + const startXAxis = this.getCameraTween(alongAxisPosition, tweenDuration); + + const radius = 500; + const numOfSteps = 24; + const angle = 3 * Math.PI; + const step = angle / numOfSteps; + + const rotationPositions = []; + for (let i = 1; i <= numOfSteps; i++) { + rotationPositions.push([ + radius * Math.sin(step * i), // x + 0, // y + radius * Math.cos(step * i), // z + ]); + } + + // Go to origin + const rotateStart = this.getCameraTween( + [0, 0, radius], + tweenDuration, + Easing.Cubic.Out, + ); + + let rotate = rotateStart; + const rotationTime = tweenDuration * 4; + const singleRotationTime = rotationTime / numOfSteps; + // Rotating around the event + for (const pos of rotationPositions) { + const animation = this.getCameraTween(pos, singleRotationTime); + rotate.chain(animation); + rotate = animation; + } + + // Go to the end position and then back to the starting point + const endPos = [0, 0, -startPos[2]]; + const end = this.getCameraTween(endPos, tweenDuration, Easing.Cubic.In); + const startClone = this.getCameraTween( + startPos, + tweenDuration, + Easing.Cubic.Out, + ); + startClone.onComplete(() => onAnimationEnd?.()); + startClone.delay(500); + + start.chain(startXAxis); + startXAxis.chain(rotateStart); + rotate.chain(end); + end.chain(startClone); + + start.start(); + } + + /** + * Animate the propagation and generation of event data. + * @param tweenDuration Duration of the animation tween. + * @param onEnd Callback when all animations have ended. + * @param onAnimationStart Callback when the first animation starts. + */ + public animateEvent( + tweenDuration: number, + onEnd?: () => void, + onAnimationStart?: () => void, + ) { + const extraAnimationSphereDuration = tweenDuration * 0.25; + tweenDuration *= 0.75; + + const eventData = this.scene.getObjectByName(SceneManager.EVENT_DATA_ID); + if(!eventData) { + console.error("this.scene.getObjectByName(SceneManager.EVENT_DATA_ID) returned null or undefined"); + return; + } + + const animationSphere = new Sphere(new Vector3(), 0); + const objectsToAnimateWithSphere: { + eventObject: Object3D; + position: any; + }[] = []; + + const allTweens = []; + // Traverse over all event data + eventData.traverse((eventObject: any) => { + if (eventObject.geometry) { + // Animation for extrapolating tracks without changing scale + if (eventObject.name === 'Track' || eventObject.name === 'LineHit') { + // Check if geometry drawRange count exists + let geometryPosCount = + eventObject.geometry?.attributes?.position?.count; + if (geometryPosCount) { + // WORKAROUND + // Changing position count for TubeGeometry because + // what we get is not the actual and it has Infinity drawRange count + if (eventObject.geometry instanceof TubeGeometry) { + geometryPosCount *= 6; + } + + if (eventObject.geometry instanceof TracksMesh) { + eventObject.material.progress = 0; + const eventObjectTween = new Tween(eventObject.material).to( + { + progress: 1, + }, + tweenDuration, + ); + eventObjectTween.onComplete(() => { + eventObject.material.progress = 1; + }); + allTweens.push(eventObjectTween); + } else if (eventObject.geometry instanceof BufferGeometry) { + const oldDrawRangeCount = eventObject.geometry.drawRange.count; + eventObject.geometry.setDrawRange(0, 0); + const eventObjectTween = new Tween( + eventObject.geometry.drawRange, + ).to( + { + count: geometryPosCount, + }, + tweenDuration, + ); + eventObjectTween.onComplete(() => { + eventObject.geometry.drawRange.count = oldDrawRangeCount; + }); + allTweens.push(eventObjectTween); + } + } + } + + } + }); + + // Tween for the animation sphere + const animationSphereTween = new Tween(animationSphere).to( + { radius: 3000 }, + tweenDuration, + ); + + const onAnimationSphereUpdate = (updateAnimationSphere: Sphere) => { + // objectsToAnimateWithSphere.forEach((obj) => { + // if (obj.eventObject.name === 'Hit') { + // const geometry = (obj.eventObject as any).geometry; + // + // const hitsPositions = this.getHitsPositions(obj.position); + // const reachedHits = hitsPositions.filter((hitPosition) => + // updateAnimationSphere.containsPoint( + // new Vector3().fromArray(hitPosition), + // ), + // ); + // + // if (reachedHits.length > 0) { + // geometry.setAttribute( + // 'position', + // new BufferAttribute( + // new Float32Array([].concat(...reachedHits)), + // 3, + // ), + // ); + // geometry.computeBoundingSphere(); + // } + // } else if (updateAnimationSphere.containsPoint(obj.position)) { + // obj.eventObject.visible = true; + // } + // }); + }; + + animationSphereTween.onUpdate(onAnimationSphereUpdate); + + // Animation sphere tween after covering the tracks + const animationSphereTweenClone = new Tween(animationSphere).to( + { radius: 10000 }, + extraAnimationSphereDuration, + ); + animationSphereTweenClone.onUpdate(onAnimationSphereUpdate); + + animationSphereTween.chain(animationSphereTweenClone); + + allTweens.push(animationSphereTween); + + // Call onAnimationStart when the first tween starts + allTweens[0].onStart(() => onAnimationStart?.()); + + // Start all tweens + for (const tween of allTweens) { + tween.easing(Easing.Quartic.Out).start(); + } + + // Call onEnd when the last tween completes + animationSphereTweenClone.onComplete(() => { + // Restore all remaining event data items + onAnimationSphereUpdate(new Sphere(new Vector3(), Infinity)); + onEnd?.(); + }); + } + + /** + * Animate the propagation and generation of event data using clipping planes. + * @param tweenDuration Duration of the animation tween. + * @param onEnd Function to call when all animations have ended. + * @param onAnimationStart Callback when the first animation starts. + * @param clippingConstant Constant for the clipping planes for distance from the origin. + */ + public animateEventWithClipping( + tweenDuration: number, + onEnd?: () => void, + onAnimationStart?: () => void, + clippingConstant: number = 11000, + ) { + const allEventData = this.scene.getObjectByName(SceneManager.EVENT_DATA_ID); + if(!allEventData) { + console.error("this.scene.getObjectByName(SceneManager.EVENT_DATA_ID) returned null or undefined"); + return; + } + + // Sphere to get spherical set of clipping planes from + const sphere = new SphereGeometry(1, 8, 8); + // Clipping planes for animation + const animationClipPlanes: Plane[] = []; + + // Get clipping planes from the vertices of sphere + const position = sphere.attributes["position"]; + const vertex = new Vector3(); + for (let i = 0; i < position.count; i++) { + vertex.fromBufferAttribute(position as BufferAttribute, i); + animationClipPlanes.push(new Plane(vertex.clone(), 0)); + } + + // Save the previous clipping setting of the renderer + const prevLocalClipping = + this.rendererManager.getMainRenderer().localClippingEnabled; + if (!prevLocalClipping) { + this.rendererManager.setLocalClippingEnabled(true); + } + + // Apply clipping planes to all the event data objects' material + allEventData.traverse((eventObject: any) => { + if (eventObject.geometry && eventObject.material) { + eventObject.material.clippingPlanes = animationClipPlanes; + } + }); + + const allTweens = []; + // Create tweens for the animation clipping planes + for (const animationClipPlane of animationClipPlanes) { + animationClipPlane.constant = 0; + const tween = new Tween(animationClipPlane).to( + { constant: clippingConstant }, + tweenDuration, + ); + allTweens.push(tween); + } + + allTweens[0].onStart(() => onAnimationStart?.()); + + // Start all the tweens + for (const tween of allTweens) { + tween.start(); + } + + allTweens[allTweens.length - 1].onComplete(() => { + // Revert local clipping of the renderer + if (!prevLocalClipping) { + this.rendererManager.getMainRenderer().localClippingEnabled = + prevLocalClipping /* false */; + } + // Remove the applied clipping planes from the event data objects + allEventData.traverse((eventObject: any) => { + if (eventObject.geometry && eventObject.material) { + eventObject.material.clippingPlanes = null; + } + }); + onEnd?.(); + }); + } + + /** + * Animate the collision of two particles. + * @param tweenDuration Duration of the particle collision animation tween. + * @param particleSize Size of the particles. + * @param distanceFromOrigin Distance of the particles (along z-axes) from the origin. + * @param particleColor Color of the particles. + * @param onEnd Callback to call when the particle collision ends. + */ + public collideParticles( + tweenDuration: number, + particleSize: number = 10, + distanceFromOrigin: number = 5000, + particleColor: Color = new Color(0xffffff), + onEnd?: () => void, + ) { + const electronGeometry = new SphereGeometry(0.5*particleSize, 32, 32); + const electronMaterial = new MeshBasicMaterial({ color: 0x0000FF, transparent: true, opacity: 0}); + const electron = new Mesh(electronGeometry, electronMaterial); + + const ionMaterial = new MeshBasicMaterial({ color: 0xFF0000, transparent: true, opacity: 0}); + const ionGeometry = new SphereGeometry(2*particleSize, 32, 32); + const ion = new Mesh(ionGeometry, ionMaterial); + + electron.position.setZ(distanceFromOrigin); + ion.position.setZ(-distanceFromOrigin); + + const particles = [electron, ion]; + + this.scene.add(...particles); + + const particleTweens = []; + + for (const particle of particles) { + new Tween(particle.material) + .to( + { + opacity: 1, + }, + 300, + ) + .start(); + + const particleToOrigin = new Tween(particle.position) + .to( + { + z: 0, + }, + tweenDuration, + ) + .start(); + + particleTweens.push(particleToOrigin); + } + + particleTweens[0].onComplete(() => { + this.scene.remove(...particles); + onEnd?.(); + }); + } + + /** + * Animate the propagation and generation of event data with particle collison. + * @param animationFunction Animation function to call after collision. + * @param tweenDuration Duration of the animation tween. + * @param onEnd Function to call when all animations have ended. + */ + public animateWithCollision( + animationFunction: ( + tweenDuration: number, + onEnd?: () => void, + onAnimationStart?: () => void, + ) => void, + tweenDuration: number, + onEnd?: () => void, + ) { + const allEventData = this.scene.getObjectByName(SceneManager.EVENT_DATA_ID); + if(!allEventData) { + console.error("this.scene.getObjectByName(SceneManager.EVENT_DATA_ID) returned null or undefined"); + return; + } + + // Hide event data to show particles collision + if (allEventData) { + allEventData.visible = false; + } + + this.collideParticles(1500, 30, 5000, new Color(0xAAAAAA), () => { + animationFunction(tweenDuration, onEnd, () => { + if (allEventData) { + allEventData.visible = true; + } + }); + }); + } + + /** + * Animate the propagation and generation of event data with particle collison. + * @param tweenDuration Duration of the animation tween. + * @param onEnd Function to call when all animations have ended. + */ + public animateEventWithCollision(tweenDuration: number, onEnd?: () => void) { + this.animateWithCollision(this.animateEvent, tweenDuration, onEnd); + } + + /** + * Animate the propagation and generation of event data + * using clipping planes after particle collison. + * @param tweenDuration Duration of the animation tween. + * @param onEnd Function to call when all animations have ended. + */ + public animateClippingWithCollision( + tweenDuration: number, + onEnd?: () => void, + ) { + this.animateWithCollision( + this.animateEventWithClipping, + tweenDuration, + onEnd, + ); + } + + /** + * Get the positions of hits in a multidimensional array + * from a single dimensional array. + * @param positions Positions of hits in a single dimensional array. + * @returns Positions of hits in a multidimensional array. + */ + private getHitsPositions(positions: number[]): number[][] { + const hitsPositions: number[][] = []; + for (let i = 0; i < positions.length; i += 3) { + hitsPositions.push(positions.slice(i, i + 3)); + } + return hitsPositions; + } + + /** + * Animate scene by animating camera through the scene and animating event collision. + * @param animationPreset Preset for animation including positions to go through and + * event collision animation options. + * @param onEnd Function to call when the animation ends. + */ + public animatePreset(animationPreset: AnimationPreset, onEnd?: () => void) { + const { positions, animateEventAfterInterval, collisionDuration } = + animationPreset; + + let allEventData = this.scene.getObjectByName(SceneManager.EVENT_DATA_ID); + if(!allEventData) { + console.error("this.scene.getObjectByName(SceneManager.EVENT_DATA_ID) returned null or undefined"); + return; + } + + if (animateEventAfterInterval && collisionDuration) { + // Will be made visible after collision animation ends. + allEventData.visible = false; + setTimeout(() => { + this.animateEventWithCollision(collisionDuration); + }, animateEventAfterInterval); + } + + const firstTween = this.getCameraTween( + positions[0].position, + positions[0].duration ?? 2000, + positions[0].easing, + ); + + let previousTween = firstTween; + positions.slice(1).forEach(({ position, duration, easing }) => { + const tween = this.getCameraTween(position, duration ?? 2000, easing); + previousTween.chain(tween); + previousTween = tween; + }); + previousTween.onComplete(onEnd); + + firstTween.start(); + } +} diff --git a/firebird-ng/src/app/input-config/input-config.component.html b/firebird-ng/src/app/input-config/input-config.component.html index 1b3d97e..9e334bc 100644 --- a/firebird-ng/src/app/input-config/input-config.component.html +++ b/firebird-ng/src/app/input-config/input-config.component.html @@ -50,6 +50,14 @@
Events Source
+
{{currentTime}} {{message}}
+ + + + - + diff --git a/firebird-ng/src/app/main-display/main-display.component.ts b/firebird-ng/src/app/main-display/main-display.component.ts index b9053ba..6657ae7 100644 --- a/firebird-ng/src/app/main-display/main-display.component.ts +++ b/firebird-ng/src/app/main-display/main-display.component.ts @@ -8,11 +8,11 @@ import { } from 'phoenix-ui-components'; import {ClippingSetting, Configuration, PhoenixLoader, PhoenixMenuNode, PresetView} from 'phoenix-event-display'; import * as THREE from 'three'; -import {Color, DoubleSide, Line, MeshPhongMaterial,} from "three"; +import {Color, DoubleSide, InstancedBufferGeometry, Line, MeshPhongMaterial,} from "three"; import {GeometryService} from '../geometry.service'; import {ActivatedRoute} from '@angular/router'; import {ThreeGeometryProcessor} from "../three-geometry.processor"; - +import * as TWEEN from '@tweenjs/tween.js'; import GUI from "lil-gui"; import {produceRenderOrder} from "jsrootdi/geom"; import { @@ -30,8 +30,10 @@ import {LineMaterial} from "three/examples/jsm/lines/LineMaterial"; import {Line2} from "three/examples/jsm/lines/Line2"; import {LineGeometry} from "three/examples/jsm/lines/LineGeometry"; import {IoOptionsComponent} from "./io-options/io-options.component"; -import {ThreeEventProcessor} from "../three-event.processor"; +import {ProcessTrackInfo, ThreeEventProcessor} from "../three-event.processor"; import {UserConfigService} from "../user-config.service"; +import {EicAnimationsManager} from "../eic-animation-manager"; + // import { LineMaterial } from 'three/addons/lines/LineMaterial.js'; @@ -47,6 +49,10 @@ export class MainDisplayComponent implements OnInit { @Input() eventDataImportOptions: EventDataImportOption[] = Object.values(EventDataFormat); + currentTime = 0; + maxTime = 200; + message = ""; + /** The root Phoenix menu node. */ phoenixMenuRoot = new PhoenixMenuNode("Phoenix Menu"); @@ -69,6 +75,10 @@ export class MainDisplayComponent implements OnInit { private stats: any|null = null; // Stats JS display from UI manager private threeFacade: PhoenixThreeFacade; + private trackInfos: ProcessTrackInfo[] | null = null; + private tween: TWEEN.Tween | null = null; + + constructor( @@ -350,10 +360,22 @@ export class MainDisplayComponent implements OnInit { // Initialize the event display this.eventDisplay.init(configuration); + + // let uiManager = this.eventDisplay.getUIManager(); let openThreeManager: any = this.eventDisplay.getThreeManager(); let threeManager = this.eventDisplay.getThreeManager(); + // Replace animation manager with EIC animation manager: + + // Animations manager (!) DANGER ZONE (!) But we have to, right? + // Deadline approaches and meteor will erase the humanity if we are not in time... + openThreeManager.animationsManager = new EicAnimationsManager( + openThreeManager.sceneManager.getScene(), + openThreeManager.controlsManager.getActiveCamera(), + openThreeManager.rendererManager, + ); + this.renderer = openThreeManager.rendererManager.getMainRenderer(); this.scene = threeManager.getSceneManager().getScene() as THREE.Scene; this.camera = openThreeManager.controlsManager.getMainCamera() as THREE.Camera; @@ -382,9 +404,20 @@ export class MainDisplayComponent implements OnInit { this.eventDisplay.listenToDisplayedEventChange(event => { console.log("listenToDisplayedEventChange"); console.log(event); + this.trackInfos = null; let mcTracksGroup = threeManager.getSceneManager().getObjectByName("mc_tracks"); if(mcTracksGroup) { - this.threeEventProcessor.processMcTracks(mcTracksGroup); + this.trackInfos = this.threeEventProcessor.processMcTracks(mcTracksGroup); + let minTime = Infinity; + let maxTime = 0; + for(let trackInfo of this.trackInfos) { + if(trackInfo.startTime < minTime) minTime = trackInfo.startTime; + if(trackInfo.endTime > maxTime) maxTime = trackInfo.endTime; + } + + this.maxTime = maxTime; + + this.message = `Tracks: ${this.trackInfos.length} time min: ${minTime} max: ${maxTime}`; } }) // Display event loader @@ -442,4 +475,89 @@ export class MainDisplayComponent implements OnInit { console.log((e as KeyboardEvent).key); }); } + + changeCurrentTime(event: Event) { + if(!event) return; + const input = event.target as HTMLInputElement; + const value = parseInt(input.value, 10); + this.currentTime = value; + + this.processCurrentTimeChange(); + + //this.updateParticlePosition(value); + } + + timeStep($event: MouseEvent) { + if(this.currentTime < this.maxTime) this.currentTime++; + if(this.currentTime > this.maxTime) this.currentTime = this.maxTime; + this.processCurrentTimeChange(); + } + + private processCurrentTimeChange() { + let partialTracks: ProcessTrackInfo[] = []; + if(this.trackInfos) { + for (let trackInfo of this.trackInfos) { + if(trackInfo.startTime > this.currentTime) { + trackInfo.trackNode.visible = false; + } + else + { + trackInfo.trackNode.visible = true; + trackInfo.newLine.geometry.instanceCount=trackInfo.positions.length; + + if(trackInfo.endTime > this.currentTime) { + partialTracks.push(trackInfo) + } + else { + // track should be visible fully + trackInfo.newLine.geometry.instanceCount=Infinity; + } + } + } + } + + + if(partialTracks.length > 0) { + for(let trackInfo of partialTracks) { + let geometryPosCount = trackInfo.positions.length; + + //if (!geometryPosCount || geometryPosCount < 10) continue; + + let trackProgress = (this.currentTime - trackInfo.startTime)/(trackInfo.endTime-trackInfo.startTime); + let roundedProgress = Math.round(geometryPosCount*trackProgress*2)/2; // *2/2 to stick to 0.5 rounding + + //(trackInfo.newLine.geometry as InstancedBufferGeometry). = drawCount;(0, roundedProgress); + trackInfo.newLine.geometry.instanceCount=roundedProgress; + } + } + } + + animateCurrentTime(targetTime: number, duration: number): void { + if(this.tween) { + this.stopAnimation(); + } + this.tween = new TWEEN.Tween({ currentTime: this.currentTime }) + .to({ currentTime: targetTime }, duration) + .onUpdate((obj) => { + this.currentTime = obj.currentTime; + this.processCurrentTimeChange(); // Assuming this method updates your display + }) + .easing(TWEEN.Easing.Quadratic.Out) // This can be changed to other easing functions + .start(); + + //this.animate(); + } + + + animateTime() { + this.animateCurrentTime(this.maxTime, (this.maxTime-this.currentTime)*200 ) + + } + + stopAnimation(): void { + if (this.tween) { + this.tween.stop(); // Stops the tween if it is running + this.tween = null; // Remove reference + } + } } diff --git a/firebird-ng/src/app/playground/playground.component.html b/firebird-ng/src/app/playground/playground.component.html index 10dd7a2..0b05344 100644 --- a/firebird-ng/src/app/playground/playground.component.html +++ b/firebird-ng/src/app/playground/playground.component.html @@ -1 +1,5 @@

playground works!

+
+ +
+
diff --git a/firebird-ng/src/app/playground/playground.component.scss b/firebird-ng/src/app/playground/playground.component.scss index e69de29..f87037a 100644 --- a/firebird-ng/src/app/playground/playground.component.scss +++ b/firebird-ng/src/app/playground/playground.component.scss @@ -0,0 +1,18 @@ +:host { + display: block; + width: 100%; + height: 100%; + position: relative; +} + +#controls { + position: absolute; + top: 10px; + left: 10px; + z-index: 100; +} + +.renderer-container { + width: 100%; + height: 100%; +} diff --git a/firebird-ng/src/app/playground/playground.component.ts b/firebird-ng/src/app/playground/playground.component.ts index 0ab101d..c733360 100644 --- a/firebird-ng/src/app/playground/playground.component.ts +++ b/firebird-ng/src/app/playground/playground.component.ts @@ -1,4 +1,6 @@ -import { Component } from '@angular/core'; +import {AfterViewInit, Component, OnInit, ViewChild, ElementRef} from '@angular/core'; +import * as THREE from "three" +import * as TWEEN from '@tweenjs/tween.js'; @Component({ selector: 'app-playground', @@ -7,6 +9,139 @@ import { Component } from '@angular/core'; templateUrl: './playground.component.html', styleUrl: './playground.component.scss' }) -export class PlaygroundComponent { +export class PlaygroundComponent implements OnInit, AfterViewInit { + @ViewChild('rendererContainer') rendererContainer!: ElementRef; + private scene!: THREE.Scene; + private camera!: THREE.PerspectiveCamera; + private renderer!: THREE.WebGLRenderer; + private particle1!: THREE.Mesh; + private particle2!: THREE.Mesh; + private lines: THREE.Line[] = []; + private curves: THREE.CatmullRomCurve3[] = []; + private trajectories: any[] = [ + [ + { x: 0, y: 0, z: 0, time: 1000 }, + { x: 1, y: 1, z: 0, time: 2000 }, + { x: 2, y: 0, z: 1, time: 3000 }, + { x: 3, y: -1, z: 0, time: 4000 }, + { x: 4, y: 0, z: -1, time: 5000 } + ], + [ + { x: 4, y: 0, z: -1, time: 5000 }, + { x: 5, y: 1, z: -1, time: 6000 }, + { x: 6, y: 2, z: 0, time: 7000 }, + { x: 7, y: 1, z: 1, time: 8000 }, + { x: 8, y: 0, z: 1, time: 9000 } + ], + [ + { x: 8, y: 0, z: 1, time: 5000 }, + { x: 9, y: -1, z: 1, time: 6000 }, + { x: 10, y: -2, z: 0, time: 7000 }, + { x: 11, y: -1, z: -1, time: 8000 }, + { x: 12, y: 0, z: -1, time: 9000 } + ] + ]; + + constructor() { } + + ngOnInit(): void { } + + ngAfterViewInit(): void { + this.initThreeJS(); + this.initCurvesAndLines(); + this.animate(); + } + + initThreeJS(): void { + this.scene = new THREE.Scene(); + this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); + this.camera.position.z = 5; + + this.renderer = new THREE.WebGLRenderer(); + this.renderer.setSize(window.innerWidth, window.innerHeight); + this.rendererContainer.nativeElement.appendChild(this.renderer.domElement); + + const geometry = new THREE.SphereGeometry(0.1, 32, 32); + const material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); + this.particle1 = new THREE.Mesh(geometry, material); + this.particle2 = new THREE.Mesh(geometry, material); + this.particle1.visible = false; // Initially invisible + this.particle2.visible = false; // Initially invisible + this.scene.add(this.particle1); + this.scene.add(this.particle2); + } + + initCurvesAndLines(): void { + this.curves = this.trajectories.map(points => { + return new THREE.CatmullRomCurve3(points.map((p: { x: number; y: number; z: number }) => new THREE.Vector3(p.x, p.y, p.z))); + }); + + this.curves.forEach(curve => { + const linePoints = curve.getPoints(100); + const lineGeometry = new THREE.BufferGeometry().setFromPoints(linePoints); + const lineMaterial = new THREE.LineBasicMaterial({ color: 0x0000ff }); + const line = new THREE.Line(lineGeometry, lineMaterial); + line.visible = false; // Initially invisible + this.scene.add(line); + this.lines.push(line); + }); + } + + updateParticlePosition(currentTime: number): void { + const delay = 1000; // Delay before the particles appear + if (currentTime < delay) { + this.particle1.visible = false; + this.particle2.visible = false; + this.lines.forEach(line => line.visible = false); + return; + } + + this.particle1.visible = true; + this.particle2.visible = currentTime >= 5000; + + let adjustedTime = currentTime - delay; + + // Track 1 + if (adjustedTime <= 4000) { + this.lines[0].visible = true; + const t1 = adjustedTime / 4000; + const position1 = this.curves[0].getPoint(t1); + this.particle1.position.copy(position1); + const visiblePoints1 = this.curves[0].getPoints(Math.floor(t1 * 100) + 1); + this.lines[0].geometry.setFromPoints(visiblePoints1); + } + + // Track 2 + if (adjustedTime >= 4000 && adjustedTime <= 8000) { + this.lines[1].visible = true; + const t2 = (adjustedTime - 4000) / 4000; + const position2 = this.curves[1].getPoint(t2); + this.particle1.position.copy(position2); + const visiblePoints2 = this.curves[1].getPoints(Math.floor(t2 * 100) + 1); + this.lines[1].geometry.setFromPoints(visiblePoints2); + } + + // Track 3 (second particle) + if (adjustedTime >= 4000 && adjustedTime <= 8000) { + this.lines[2].visible = true; + const t3 = (adjustedTime - 4000) / 4000; + const position3 = this.curves[2].getPoint(t3); + this.particle2.position.copy(position3); + const visiblePoints3 = this.curves[2].getPoints(Math.floor(t3 * 100) + 1); + this.lines[2].geometry.setFromPoints(visiblePoints3); + } + } + + setAnimationTime(event: Event): void { + const input = event.target as HTMLInputElement; + const value = parseInt(input.value, 10); + this.updateParticlePosition(value); + } + + animate(): void { + requestAnimationFrame(() => this.animate()); + TWEEN.update(); + this.renderer.render(this.scene, this.camera); + } } diff --git a/firebird-ng/src/app/three-event.processor.ts b/firebird-ng/src/app/three-event.processor.ts index 65379ff..6f87ad9 100644 --- a/firebird-ng/src/app/three-event.processor.ts +++ b/firebird-ng/src/app/three-event.processor.ts @@ -1,9 +1,19 @@ -import {Color, Object3D} from "three"; +import {Color, Line, Object3D, Vector3} from "three"; import {LineMaterial} from "three/examples/jsm/lines/LineMaterial"; import {LineGeometry} from "three/examples/jsm/lines/LineGeometry"; import {Line2} from "three/examples/jsm/lines/Line2"; +export interface ProcessTrackInfo { + positions: [[number]]; + trackNode: Object3D; + oldLine: Object3D; + newLine: Line2; + trackMesh: Object3D; + startTime: number; + endTime: number; +} + export enum NeonTrackColors { Red = 0xFF0007, @@ -126,22 +136,49 @@ export class ThreeEventProcessor { processMcTracks(mcTracksGroup: Object3D) { let isFoundScatteredElectron = false; + let processedTrackGroups: ProcessTrackInfo[] = []; for(let trackGroup of mcTracksGroup.children) { let trackData = trackGroup.userData; if(!('pdg_name' in trackData)) continue; if(!('charge' in trackData)) continue; + if(!('pos' in trackData)) continue; const pdgName = trackData["pdg_name"] as string; const charge = trackData["charge"] as number; + const id = trackData["id"] + let positions = trackData["pos"]; + + // If we are here this is + let trackNode: Object3D = trackGroup; + let oldLine: Object3D|null = null; + let newLine: Line2|null = null; + let trackMesh: Object3D|null = null; + let timeStart = 0; + let timeEnd = 0; + let startPoint = new Vector3(); + let endPoint = new Vector3(); + for(let obj of trackGroup.children) { + if(obj.type == "Line") { - let positions = (obj.userData as any).pos; + // Do we have time info? + if(positions.length > 0 && positions[0].length > 3) { + let position = positions[0] + timeStart = timeEnd = position[3]; + startPoint = endPoint = new Vector3(position[0], position[1], position[2]); + } + // Set end time if there is more than 1 point + if(positions.length > 1 && positions[0].length > 3) { + let position = positions[positions.length-1]; + timeEnd = position[3]; + endPoint = new Vector3(position[0], position[1], position[2]); + } + // Build our flat points array and set geometry let flat = []; for(let position of positions) { - flat.push(position[0], position[1], position[2]); } const geometry = new LineGeometry(); @@ -157,18 +194,42 @@ export class ThreeEventProcessor { let line = new Line2( geometry, material ); // line.scale.set( 1, 1, 1 ); + line.name = "TrackLine2"; line.computeLineDistances(); line.visible = true; trackGroup.add( line ); obj.visible = false; + oldLine = obj; + newLine = line; + let ic = (line.geometry as any)?.attributes?.instanceStart; + let geomCount = (line.geometry as any).count; + + let posLen = positions.length; + + console.log(`id: ${id} pdg: ${pdgName} tstart: ${timeStart.toFixed(2)} tend: ${timeEnd.toFixed(2)} instCount: ${ic?.data?.array?.length} count: ${geomCount} posLen: ${posLen} length: ${endPoint.distanceTo(startPoint)}`); + console.log(ic); } if(obj.type == "Mesh") { obj.visible = false; + trackMesh = obj; } } + // We found everything + if(oldLine && newLine && trackMesh) { + processedTrackGroups.push({ + positions: positions, + trackNode: trackNode, + oldLine: oldLine, + newLine: newLine, + trackMesh: trackMesh, + startTime: timeStart, + endTime: timeEnd, + }) + } } + return processedTrackGroups; }