@3driseai/3drise-viewer 0.1.1

package/dist/components/effects/MoleculesEffect.js

@@ -0,0 +1,173 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useMemo } from 'react';
+import { useFrame } from '@react-three/fiber';
+import * as THREE from 'three';
+import { getShaderByName } from '@3driseai/3drise-core';
+import { applyGenerativeAnimations } from '../../utils/handleGenerativeEffectsAnimations.js';
+// Glowing node points at each atom position
+// const nodeVertShader = /* glsl */`
+//   attribute float aPhase;
+//   attribute float aSize;
+//   uniform float u_time;
+//   uniform float uPointSize;
+//   uniform float uIntensity;
+//   varying float vAlpha;
+//   varying vec3  vColor;
+//   vec3 hsv2rgb(float h, float s, float v){
+//     vec3 rgb=clamp(abs(mod(h*6.+vec3(0.,4.,2.),6.)-3.)-1.,0.,1.);
+//     return v*mix(vec3(1.),rgb,s);
+//   }
+//   void main() {
+//     // Each node has independent color + pulse
+//     float hue    = mod(aPhase + u_time * 0.08, 1.0);
+//     float pulse  = 0.5 + 0.5 * sin(u_time * 2.5 + aPhase * 6.28);
+//     vColor       = hsv2rgb(hue, 0.85, 1.0);
+//     vAlpha       = 0.55 + 0.45 * pulse;
+//     vec4 mv       = modelViewMatrix * vec4(position, 1.0);
+//     gl_PointSize  = uPointSize * aSize * (0.6 + 0.4 * pulse) * uIntensity * (250.0 / -mv.z);
+//     gl_Position   = projectionMatrix * mv;
+//   }
+// `;
+// const nodeFragShader = /* glsl */`
+//   varying float vAlpha;
+//   varying vec3  vColor;
+//   uniform float uOpacity;
+//   void main() {
+//     vec2  coord = gl_PointCoord - vec2(0.5);
+//     float dist  = length(coord);
+//     if (dist > 0.5) discard;
+//     // Gaussian core glow
+//     float glow = exp(-dist * dist * 8.0);
+//     // Four-point diffraction spike (like a bright star)
+//     float cx   = exp(-abs(coord.x) * 20.0) * exp(-coord.y*coord.y * 36.0);
+//     float cy   = exp(-abs(coord.y) * 20.0) * exp(-coord.x*coord.x * 36.0);
+//     float spike = (cx + cy) * 0.5;
+//     // White-hot centre
+//     float core  = exp(-dist * dist * 80.0);
+//     vec3 col = mix(vColor, vec3(1.0), core * 0.8 + spike * 0.2);
+//     gl_FragColor = vec4(col, vAlpha * uOpacity * (glow + spike * 0.6 + core));
+//   }
+// `;
+const MoleculesEffect = ({ boundingRadius, config, animations }) => {
+    const { atomCount, orbitRadius, atomSize, showBonds, opacity, speed, intensity } = config;
+    const startValuesCacheRef = useRef({});
+    const shaderData = getShaderByName('Molecules');
+    const tRef = useRef(new Float32Array(atomCount));
+    const r = boundingRadius * orbitRadius;
+    const PHI = 1.6180339887;
+    // 3D Lissajous frequency ratios per atom
+    const orbitalParams = useMemo(() => {
+        const pairs = [
+            [1, 2, 3], [2, 3, 1], [3, 1, 2], [1, 3, 2], [2, 1, 3], [3, 2, 1],
+            [1, 1, 2], [2, 2, 1], [1, 2, 2], [2, 1, 1], [3, 3, 2], [2, 3, 3],
+        ];
+        return Array.from({ length: atomCount }, (_, i) => {
+            const [fx, fy, fz] = pairs[i % pairs.length];
+            return {
+                fx, fy, fz,
+                px: (i * PHI * Math.PI) % (Math.PI * 2),
+                py: (i * PHI * PHI * Math.PI) % (Math.PI * 2),
+                pz: (i * PHI ** 3 * Math.PI) % (Math.PI * 2),
+                hueBase: i / Math.max(atomCount - 1, 1),
+                speedMult: 0.65 + (i % 7) * 0.07,
+            };
+        });
+    }, [atomCount]);
+    // Resize tRef and spread initial times so atoms don't cluster at cycle start
+    useMemo(() => {
+        tRef.current = new Float32Array(atomCount);
+        for (let i = 0; i < atomCount; i++)
+            tRef.current[i] = (i / atomCount) * Math.PI * 2;
+    }, [atomCount]);
+    // ── Node (point) geometry ──────────────────────────────────────────────────
+    const { nodeGeo, nodeMat } = useMemo(() => {
+        const phases = new Float32Array(atomCount);
+        const sizes = new Float32Array(atomCount);
+        for (let i = 0; i < atomCount; i++) {
+            phases[i] = i / atomCount; // 0..1 → hue spread
+            sizes[i] = 0.8 + Math.random() * 0.6; // slight size variation
+        }
+        const geo = new THREE.BufferGeometry();
+        geo.setAttribute('position', new THREE.BufferAttribute(new Float32Array(atomCount * 3), 3));
+        geo.setAttribute('aPhase', new THREE.BufferAttribute(phases, 1));
+        geo.setAttribute('aSize', new THREE.BufferAttribute(sizes, 1));
+        const mat = new THREE.ShaderMaterial({
+            vertexShader: shaderData.vertex,
+            fragmentShader: shaderData.fragment,
+            uniforms: {
+                u_time: { value: 0 },
+                uPointSize: { value: atomSize * 200 },
+                uIntensity: { value: intensity },
+                uOpacity: { value: opacity },
+            },
+            transparent: true,
+            depthWrite: false,
+            blending: THREE.AdditiveBlending,
+        });
+        return { nodeGeo: geo, nodeMat: mat };
+    }, [atomCount, atomSize, intensity, opacity]);
+    // ── Bond (line) geometry with per-vertex color ─────────────────────────────
+    const { bondGeo, bondMat } = useMemo(() => {
+        const vertCount = atomCount * 2; // each bond = 2 verts
+        const geo = new THREE.BufferGeometry();
+        const positions = new Float32Array(vertCount * 3);
+        const colors = new Float32Array(vertCount * 3);
+        geo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+        geo.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+        const mat = new THREE.LineBasicMaterial({
+            vertexColors: true,
+            transparent: true,
+            opacity: opacity * 0.7,
+            depthWrite: false,
+            blending: THREE.AdditiveBlending,
+        });
+        return { bondGeo: geo, bondMat: mat };
+    }, [atomCount, opacity]);
+    const atomPos = useRef([]);
+    useMemo(() => {
+        atomPos.current = Array.from({ length: atomCount }, () => new THREE.Vector3());
+    }, [atomCount]);
+    const tmpCol = useMemo(() => new THREE.Color(), []);
+    useFrame((state, delta) => {
+        const t = state.clock.getElapsedTime();
+        nodeMat.uniforms.u_time.value = t;
+        const nodePos = nodeGeo.attributes.position;
+        for (let i = 0; i < atomCount; i++) {
+            tRef.current[i] += delta * speed * orbitalParams[i].speedMult;
+            const a = tRef.current[i];
+            const p = orbitalParams[i];
+            // 3D Lissajous position
+            const x = Math.cos(p.fx * a + p.px) * r;
+            const y = Math.sin(p.fy * a + p.py) * r * 0.75;
+            const z = Math.sin(p.fz * a + p.pz) * r;
+            atomPos.current[i].set(x, y, z);
+            nodePos.setXYZ(i, x, y, z);
+        }
+        nodePos.needsUpdate = true;
+        // Update bond geometry + animated per-vertex color
+        if (showBonds) {
+            const bondPos = bondGeo.attributes.position;
+            const bondCol = bondGeo.attributes.color;
+            for (let i = 0; i < atomCount; i++) {
+                const curr = atomPos.current[i];
+                const next = atomPos.current[(i + 1) % atomCount];
+                bondPos.setXYZ(i * 2, curr.x, curr.y, curr.z);
+                bondPos.setXYZ(i * 2 + 1, next.x, next.y, next.z);
+                // Color: each vertex gets a hue based on its atom's phase + time
+                const hue0 = (orbitalParams[i].hueBase + t * 0.07) % 1;
+                const hue1 = (orbitalParams[(i + 1) % atomCount].hueBase + t * 0.07) % 1;
+                tmpCol.setHSL(hue0, 1.0, 0.6);
+                bondCol.setXYZ(i * 2, tmpCol.r, tmpCol.g, tmpCol.b);
+                tmpCol.setHSL(hue1, 1.0, 0.6);
+                bondCol.setXYZ(i * 2 + 1, tmpCol.r, tmpCol.g, tmpCol.b);
+            }
+            bondPos.needsUpdate = true;
+            bondCol.needsUpdate = true;
+        }
+        if (animations?.length) {
+            applyGenerativeAnimations([nodeMat, bondMat], animations, startValuesCacheRef.current, Date.now(), false);
+        }
+    });
+    return (_jsxs("group", { name: "MoleculesEffect", children: [_jsx("points", { geometry: nodeGeo, material: nodeMat }), showBonds && (_jsx("lineSegments", { geometry: bondGeo, material: bondMat }))] }));
+};
+export default MoleculesEffect;

package/dist/components/effects/NeuralNetworkEffect.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { NeuralNetworkConfig, AnimationOptions } from "@3driseai/3drise-core";
+interface NeuralNetworkEffectProps {
+    boundingRadius: number;
+    config: NeuralNetworkConfig;
+    animations?: AnimationOptions[];
+}
+declare const NeuralNetworkEffect: React.FC<NeuralNetworkEffectProps>;
+export default NeuralNetworkEffect;
+//# sourceMappingURL=NeuralNetworkEffect.d.ts.map

package/dist/components/effects/NeuralNetworkEffect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NeuralNetworkEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/NeuralNetworkEffect.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACnF,UAAU,wBAAwB;IAC9B,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,mBAAmB,CAAC;IAC5B,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACnC;AA6BD,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA2J3D,CAAC;AACF,eAAe,mBAAmB,CAAC"}

package/dist/components/effects/NeuralNetworkEffect.js

@@ -0,0 +1,188 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useMemo } from 'react';
+import { useFrame } from '@react-three/fiber';
+import * as THREE from 'three';
+import { applyGenerativeAnimations } from '../../utils/handleGenerativeEffectsAnimations.js';
+// Glow sprite for pulse signals and node flashes
+const pulseVert = /* glsl */ `
+  attribute float aBright;
+  uniform float   uSize;
+  varying float   vB;
+  void main() {
+    vB = aBright;
+    if (vB < 0.01) { gl_PointSize = 0.0; gl_Position = vec4(0); return; }
+    vec4 mv = modelViewMatrix * vec4(position, 1.0);
+    gl_PointSize = uSize * vB * (200.0 / -mv.z);
+    gl_Position  = projectionMatrix * mv;
+  }
+`;
+const pulseFrag = /* glsl */ `
+  uniform vec3  uColor;
+  uniform float uOpacity;
+  varying float vB;
+  void main() {
+    if (vB < 0.01) discard;
+    vec2  c = gl_PointCoord - 0.5;
+    if (length(c) > 0.5) discard;
+    float g = exp(-dot(c, c) * 5.5);
+    gl_FragColor = vec4(uColor, g * vB * uOpacity);
+  }
+`;
+const MAX_PULSES = 4;
+const NeuralNetworkEffect = ({ boundingRadius, config, animations }) => {
+    const { nodeCount, signalSpeed, nodeColor, pulseColor, orbitSpeed, opacity, speed, intensity } = config;
+    const startValuesCacheRef = useRef({});
+    const groupRef = useRef(null);
+    // Node orbit state
+    const orbitAngles = useRef(new Float32Array(0));
+    const pulses = useRef([]);
+    const nextPulse = useRef(0);
+    const r = boundingRadius * 1.35;
+    const N = Math.max(8, Math.min(nodeCount, 40));
+    const scene = useMemo(() => {
+        // ── Node positions on Fibonacci sphere ────────────────────────────────
+        const basePos = [];
+        const goldenAngle = Math.PI * (3 - Math.sqrt(5));
+        for (let i = 0; i < N; i++) {
+            const y = 1 - (i / (N - 1)) * 2;
+            const rad = Math.sqrt(1 - y * y) * r;
+            const phi = i * goldenAngle;
+            basePos.push(new THREE.Vector3(Math.cos(phi) * rad, y * r, Math.sin(phi) * rad));
+        }
+        // Orbit axes — random unit vectors
+        const orbitAxes = Array.from({ length: N }, () => new THREE.Vector3(Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5).normalize());
+        const orbitSpeeds = Array.from({ length: N }, () => 0.4 + Math.random() * 0.6);
+        const angles = new Float32Array(N).map((_, i) => i * 0.7);
+        orbitAngles.current = angles;
+        // ── Edges — connect nearby pairs ─────────────────────────────────────
+        const MAX_DIST = r * 0.85;
+        const edges = [];
+        const degree = new Int32Array(N);
+        for (let i = 0; i < N; i++) {
+            for (let j = i + 1; j < N; j++) {
+                if (degree[i] >= 3 || degree[j] >= 3)
+                    continue;
+                if (basePos[i].distanceTo(basePos[j]) < MAX_DIST) {
+                    edges.push([i, j]);
+                    degree[i]++;
+                    degree[j]++;
+                }
+            }
+        }
+        const edgeVerts = new Float32Array(edges.length * 6);
+        const edgeCols = new Float32Array(edges.length * 6);
+        const nc = new THREE.Color(nodeColor);
+        const DIM = 0.06;
+        for (let e = 0; e < edges.length; e++) {
+            const [a, b] = edges[e];
+            edgeVerts.set([basePos[a].x, basePos[a].y, basePos[a].z, basePos[b].x, basePos[b].y, basePos[b].z], e * 6);
+            edgeCols.set([nc.r * DIM, nc.g * DIM, nc.b * DIM, nc.r * DIM, nc.g * DIM, nc.b * DIM], e * 6);
+        }
+        const edgeGeo = new THREE.BufferGeometry();
+        edgeGeo.setAttribute('position', new THREE.BufferAttribute(edgeVerts, 3));
+        edgeGeo.setAttribute('color', new THREE.BufferAttribute(edgeCols, 3));
+        const edgeMat = new THREE.LineBasicMaterial({
+            vertexColors: true, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending,
+        });
+        // ── Node instanced mesh ───────────────────────────────────────────────
+        const nodeGeo = new THREE.SphereGeometry(0.055 * intensity, 8, 8);
+        const nc2 = new THREE.Color(nodeColor);
+        const nodeMat = new THREE.MeshBasicMaterial({
+            color: nc2, transparent: true, opacity: opacity * 0.55,
+            depthWrite: false, blending: THREE.AdditiveBlending,
+        });
+        const nodeMesh = new THREE.InstancedMesh(nodeGeo, nodeMat, N);
+        nodeMesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
+        // ── Pulse sprites ─────────────────────────────────────────────────────
+        const pulsePos = new Float32Array(MAX_PULSES * 3);
+        const pulseBright = new Float32Array(MAX_PULSES);
+        const pulseGeo = new THREE.BufferGeometry();
+        pulseGeo.setAttribute('position', new THREE.BufferAttribute(pulsePos, 3));
+        pulseGeo.setAttribute('aBright', new THREE.BufferAttribute(pulseBright, 1));
+        const pc = new THREE.Color(pulseColor);
+        const pulseMat = new THREE.ShaderMaterial({
+            vertexShader: pulseVert, fragmentShader: pulseFrag,
+            uniforms: {
+                uSize: { value: 20 * intensity },
+                uColor: { value: new THREE.Vector3(pc.r, pc.g, pc.b) },
+                uOpacity: { value: opacity },
+            },
+            transparent: true, depthWrite: false, blending: THREE.AdditiveBlending,
+        });
+        // Initialise pulse states
+        pulses.current = Array.from({ length: MAX_PULSES }, () => ({
+            fromIdx: 0, toIdx: 1, progress: 0, active: false,
+        }));
+        return { basePos, orbitAxes, orbitSpeeds, edges, edgeGeo, edgeMat, nodeMesh, pulseGeo, pulseMat };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [N, r, nodeColor, pulseColor, opacity, intensity]);
+    const tmpMat = useMemo(() => new THREE.Matrix4(), []);
+    const tmpQuat = useMemo(() => new THREE.Quaternion(), []);
+    const tmpVec = useMemo(() => new THREE.Vector3(), []);
+    useFrame((_, delta) => {
+        if (!groupRef.current)
+            return;
+        const dt = delta * speed;
+        const { basePos, orbitAxes, orbitSpeeds, edges, edgeGeo, nodeMesh, pulseGeo, pulseMat } = scene;
+        // Rotate nodes around their individual axes
+        const angles = orbitAngles.current;
+        const curPos = [];
+        for (let i = 0; i < N; i++) {
+            angles[i] += dt * orbitSpeed * orbitSpeeds[i] * 0.4;
+            const base = basePos[i];
+            const axis = orbitAxes[i];
+            const ang = angles[i];
+            // Rodrigues rotation of base position around axis
+            const cosA = Math.cos(ang), sinA = Math.sin(ang);
+            const dot = base.dot(axis);
+            tmpVec.set(base.x * cosA + (axis.y * base.z - axis.z * base.y) * sinA + axis.x * dot * (1 - cosA), base.y * cosA + (axis.z * base.x - axis.x * base.z) * sinA + axis.y * dot * (1 - cosA), base.z * cosA + (axis.x * base.y - axis.y * base.x) * sinA + axis.z * dot * (1 - cosA));
+            curPos.push(tmpVec.clone());
+            tmpMat.compose(tmpVec, tmpQuat, new THREE.Vector3(1, 1, 1));
+            nodeMesh.setMatrixAt(i, tmpMat);
+        }
+        nodeMesh.instanceMatrix.needsUpdate = true;
+        // Update edge positions
+        const edgePosAttr = edgeGeo.attributes.position;
+        for (let e = 0; e < edges.length; e++) {
+            const [a, b] = edges[e];
+            edgePosAttr.setXYZ(e * 2, curPos[a].x, curPos[a].y, curPos[a].z);
+            edgePosAttr.setXYZ(e * 2 + 1, curPos[b].x, curPos[b].y, curPos[b].z);
+        }
+        edgePosAttr.needsUpdate = true;
+        // Pulse signals along edges
+        nextPulse.current -= delta;
+        if (nextPulse.current <= 0 && edges.length > 0) {
+            nextPulse.current = 0.4 / speed;
+            const idle = pulses.current.findIndex(p => !p.active);
+            if (idle >= 0) {
+                const e = Math.floor(Math.random() * edges.length);
+                pulses.current[idle] = { fromIdx: edges[e][0], toIdx: edges[e][1], progress: 0, active: true };
+            }
+        }
+        const ptPos = pulseGeo.attributes.position;
+        const ptBright = pulseGeo.attributes.aBright;
+        pulses.current.forEach((p, pi) => {
+            if (!p.active) {
+                ptBright.setX(pi, 0);
+                return;
+            }
+            p.progress += dt * signalSpeed * 0.9;
+            if (p.progress >= 1) {
+                p.active = false;
+                ptBright.setX(pi, 0);
+                return;
+            }
+            const pos = curPos[p.fromIdx].clone().lerp(curPos[p.toIdx], p.progress);
+            ptPos.setXYZ(pi, pos.x, pos.y, pos.z);
+            ptBright.setX(pi, 0.7 + 0.3 * Math.sin(p.progress * Math.PI));
+        });
+        ptPos.needsUpdate = true;
+        ptBright.needsUpdate = true;
+        pulseMat.uniforms.uSize.value = 20 * intensity;
+        if (animations?.length) {
+            applyGenerativeAnimations([pulseMat], animations, startValuesCacheRef.current, Date.now(), false);
+        }
+    });
+    return (_jsxs("group", { ref: groupRef, children: [_jsx("lineSegments", { geometry: scene.edgeGeo, material: scene.edgeMat }), _jsx("primitive", { object: scene.nodeMesh }), _jsx("points", { geometry: scene.pulseGeo, material: scene.pulseMat })] }));
+};
+export default NeuralNetworkEffect;

package/dist/components/effects/OrbEffect.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { OrbConfig, AnimationOptions } from "@3driseai/3drise-core";
+interface OrbEffectProps {
+    boundingRadius: number;
+    config: OrbConfig;
+    animations?: AnimationOptions[];
+}
+declare const OrbEffect: React.FC<OrbEffectProps>;
+export default OrbEffect;
+//# sourceMappingURL=OrbEffect.d.ts.map

package/dist/components/effects/OrbEffect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrbEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/OrbEffect.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzE,UAAU,cAAc;IACpB,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,SAAS,CAAC;IAClB,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACnC;AAqLD,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA0GvC,CAAC;AACF,eAAe,SAAS,CAAC"}