simview 3.2__py3-none-any.whl

simview/static/js/components/InteractionControls.js

@@ -0,0 +1,116 @@
+import { OrbitControls } from "three/addons/controls/OrbitControls.js";
+import { CONTROLS_CONFIG, SELECTION_CONFIG } from "../config.js";
+
+export function setupControls(camera, renderer) {
+    const controls = new OrbitControls(camera, renderer.domElement);
+    controls.listenToKeyEvents(window);
+
+    // Apply basic configuration
+    Object.assign(controls, CONTROLS_CONFIG);
+
+    // Add custom event handlers
+    setupControlEvents(controls);
+
+    return controls;
+}
+
+function setupControlEvents(controls) {
+    let activeSelectionMode = null;
+
+    // Prevent OrbitControls from interfering during selection
+    const keyDownHandler = (event) => {
+        const keyPressed = event.key.toLowerCase().replace("control", "ctrl");
+
+        // Check if the pressed key matches any selection mode
+        for (const [mode, config] of Object.entries(SELECTION_CONFIG)) {
+            if (keyPressed === config.key) {
+                activeSelectionMode = mode;
+                controls.enabled = false; // Disable controls
+                document.body.style.cursor = "crosshair"; // Change cursor to indicate selection mode
+                break;
+            }
+        }
+    };
+
+    const keyUpHandler = (event) => {
+        const keyReleased = event.key.toLowerCase().replace("control", "ctrl");
+        // Check if the released key matches the active selection mode
+        for (const [mode, config] of Object.entries(SELECTION_CONFIG)) {
+            if (keyReleased === config.key && activeSelectionMode === mode) {
+                activeSelectionMode = null;
+                controls.enabled = true; // Enable controls
+                document.body.style.cursor = "auto"; // Reset cursor
+                break;
+            }
+        }
+    };
+
+    // Add event listeners for keypress
+    window.addEventListener("keydown", keyDownHandler);
+    window.addEventListener("keyup", keyUpHandler);
+
+    // Update cursor during drag
+    controls.addEventListener("start", () => {
+        if (!activeSelectionMode) {
+            document.body.style.cursor = "grabbing";
+        }
+    });
+
+    controls.addEventListener("end", () => {
+        if (!activeSelectionMode) {
+            document.body.style.cursor = "auto";
+        }
+    });
+
+    // Clean up function to remove event listeners
+    const originalDispose = controls.dispose.bind(controls);
+    controls.dispose = () => {
+        window.removeEventListener("keydown", keyDownHandler);
+        window.removeEventListener("keyup", keyUpHandler);
+        if (typeof originalDispose === "function") {
+            originalDispose();
+        }
+    };
+
+    // Optional: Add more custom event handlers if needed
+    controls.addEventListener("change", () => {
+        // Handle control changes
+    });
+}
+
+// Helper functions for direct control manipulation
+export function zoomToFit(controls, boundingSphere, offset = 1.5) {
+    const fov = controls.object.fov * (Math.PI / 180);
+    const distance = (boundingSphere.radius / Math.sin(fov / 2)) * offset;
+
+    controls.object.position.copy(boundingSphere.center);
+    controls.object.position.z += distance;
+    controls.target.copy(boundingSphere.center);
+    controls.update();
+}
+
+export function resetControls(controls) {
+    controls.reset();
+}
+
+export function updateControlsConfig(controls, config) {
+    Object.assign(controls, config);
+    controls.update();
+}
+
+// Optional: Animation functions
+export function enableAutoRotate(controls, speed = 2.0) {
+    controls.autoRotate = true;
+    controls.autoRotateSpeed = speed;
+}
+
+export function disableAutoRotate(controls) {
+    controls.autoRotate = false;
+}
+
+// Cleanup function
+export function disposeControls(controls) {
+    if (controls) {
+        controls.dispose();
+    }
+}

simview/static/js/components/Scene.js

@@ -0,0 +1,166 @@
+import * as THREE from "three";
+import { setupControls } from "./InteractionControls.js";
+import {
+    SCENE_CONFIG,
+    RENDERER_CONFIG,
+    CAMERA_CONFIG,
+    LIGHTING_CONFIG,
+} from "../config.js";
+
+export class Scene {
+    constructor(app) {
+        this.app = app;
+        this.scene = new THREE.Scene();
+        this.initScene();
+        this.minRenderDelay = 1000 / 60; // 60 FPS
+        this.lastRenderTime = Number.NEGATIVE_INFINITY;
+    }
+
+    initScene() {
+        THREE.Object3D.DEFAULT_UP.set(...SCENE_CONFIG.defaultUp);
+        const renderer = this.createRenderer();
+        const camera = this.createCamera();
+        const controls = setupControls(camera, renderer);
+        this.setupLighting(this.scene);
+        const light = new THREE.DirectionalLight(0xffffff, 1);
+        light.position.set(10, 10, 10);
+        this.scene.add(light);
+        this.renderer = renderer;
+        this.camera = camera;
+        this.controls = controls;
+        this.setupWindowHandlers();
+    }
+
+    setupWindowHandlers() {
+        window.addEventListener("resize", () => this.#handleWindowResize());
+        window.addEventListener("error", (event) => this.#handleError(event));
+    }
+
+    #handleWindowResize() {
+        this.camera.aspect = window.innerWidth / window.innerHeight;
+        this.camera.updateProjectionMatrix();
+        this.renderer.setPixelRatio(window.devicePixelRatio);
+        this.renderer.setSize(window.innerWidth, window.innerHeight, false);
+    }
+
+    #handleError(event) {
+        console.error("Application Error:", {
+            message: event.message,
+            source: event.filename,
+            lineNumber: event.lineno,
+            columnNumber: event.colno,
+            error: event.error,
+        });
+    }
+
+    createRenderer() {
+        const renderer = new THREE.WebGLRenderer({
+            antialias: RENDERER_CONFIG.antialias,
+            preserveDrawingBuffer: RENDERER_CONFIG.preserveDrawingBuffer,
+        });
+
+        renderer.setPixelRatio(RENDERER_CONFIG.pixelRatio);
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        renderer.setClearColor(
+            RENDERER_CONFIG.clearColor,
+            RENDERER_CONFIG.clearAlpha
+        );
+
+        document.body.appendChild(renderer.domElement);
+        return renderer;
+    }
+
+    createCamera() {
+        const camera = new THREE.PerspectiveCamera(
+            CAMERA_CONFIG.fov,
+            window.innerWidth / window.innerHeight,
+            CAMERA_CONFIG.near,
+            CAMERA_CONFIG.far
+        );
+
+        camera.position.set(...CAMERA_CONFIG.position);
+        camera.up.set(...CAMERA_CONFIG.up);
+
+        return camera;
+    }
+
+    setupLighting(scene) {
+        // Ambient light
+        const ambientLight = new THREE.AmbientLight(
+            LIGHTING_CONFIG.ambient.color,
+            LIGHTING_CONFIG.ambient.intensity
+        );
+        scene.add(ambientLight);
+
+        // Directional light
+        const directionalLight = new THREE.DirectionalLight(
+            LIGHTING_CONFIG.directional.color,
+            LIGHTING_CONFIG.directional.intensity
+        );
+        directionalLight.position.set(...LIGHTING_CONFIG.directional.position);
+        scene.add(directionalLight);
+    }
+
+    addObject3D(object) {
+        this.scene.add(object);
+    }
+
+    removeObject3D(object) {
+        this.scene.remove(object);
+    }
+
+    animate(now) {
+        if (now - this.lastRenderTime < this.minRenderDelay) return;
+        
+        if (this.app.uiState && this.app.uiState.splitScreen && this.app.batchManager && this.app.batchManager.simBatches >= 2) {
+            const batchA = this.app.uiState.splitBatchA !== undefined ? this.app.uiState.splitBatchA : 0;
+            const batchB = this.app.uiState.splitBatchB !== undefined ? this.app.uiState.splitBatchB : 1;
+            
+            const activeBatch = this.app.batchManager.currentlyActiveBatch;
+            const activeOffset = this.app.batchManager.getBatchOffset(activeBatch);
+            const offsetA = this.app.batchManager.getBatchOffset(batchA);
+            const offsetB = this.app.batchManager.getBatchOffset(batchB);
+
+            const deltaA = new THREE.Vector3(offsetA.x - activeOffset.x, offsetA.y - activeOffset.y, offsetA.z - activeOffset.z);
+            const deltaB = new THREE.Vector3(offsetB.x - activeOffset.x, offsetB.y - activeOffset.y, offsetB.z - activeOffset.z);
+
+            const width = window.innerWidth;
+            const height = window.innerHeight;
+            const aspectFull = width / height;
+            const aspectSplit = (width / 2) / height;
+
+            this.renderer.setScissorTest(true);
+            this.camera.aspect = aspectSplit;
+            this.camera.updateProjectionMatrix();
+
+            // Render Left (Batch A)
+            this.renderer.setViewport(0, 0, width / 2, height);
+            this.renderer.setScissor(0, 0, width / 2, height);
+            this.camera.position.add(deltaA);
+            this.camera.updateMatrixWorld();
+            this.renderer.render(this.scene, this.camera);
+            this.camera.position.sub(deltaA);
+
+            // Render Right (Batch B)
+            this.renderer.setViewport(width / 2, 0, width / 2, height);
+            this.renderer.setScissor(width / 2, 0, width / 2, height);
+            this.camera.position.add(deltaB);
+            this.camera.updateMatrixWorld();
+            this.renderer.render(this.scene, this.camera);
+            this.camera.position.sub(deltaB);
+
+            // Restore
+            this.camera.aspect = aspectFull;
+            this.camera.updateProjectionMatrix();
+            this.renderer.setScissorTest(false);
+            this.renderer.setViewport(0, 0, width, height);
+            this.renderer.setScissor(0, 0, width, height);
+        } else {
+            this.renderer.setScissorTest(false);
+            this.renderer.setViewport(0, 0, window.innerWidth, window.innerHeight);
+            this.renderer.render(this.scene, this.camera);
+        }
+        
+        this.lastRenderTime = now;
+    }
+}

simview/static/js/components/StateStore.js

@@ -0,0 +1,188 @@
+// Abstraction over the two wire shapes `/states` can come back as (see
+// server.py::_columnarize_states and README.md "Binary state fields"):
+//
+//  - legacy: a plain JSON array of per-frame state objects, exactly as
+//    before -- kept working for scenes the server can't safely columnarize.
+//  - columnar (wire format v4): `{times, bodies, scalars}` where each body's
+//    numeric fields and each scalar are a single whole-trajectory Float32Array
+//    (shape (T, B, k) / (T, B), row-major) fetched from a `/blob/...` URL.
+//
+// Consumers (AnimationController, SimView, ScalarPlotter, ...) only ever see
+// this common API, so the rest of the viewer doesn't need to know which wire
+// shape the current scene used.
+
+// Per-body numeric fields packed as whole-trajectory (T, B, k) blobs, with
+// their trailing per-batch-row width. Matches STATE_FIELD_WIDTHS in
+// blobCodec.js (the per-frame equivalent) and _STATE_FIELD_WIDTHS in
+// server.py.
+const COLUMNAR_FIELD_WIDTHS = {
+    bodyTransform: 7,
+    velocity: 3,
+    angularVelocity: 3,
+    force: 3,
+    torque: 3,
+};
+
+class ColumnarStateStore {
+    // `bodies`: [{name, fields: {fieldName: Float32Array}, contacts?}], each
+    // fields Float32Array already reshaped to flat (T * B * k) row-major.
+    // `scalars`: {scalarName: Float32Array}, each flat (T * B) row-major.
+    constructor(times, bodies, scalars, simBatches) {
+        this.times = times;
+        this._bodies = bodies;
+        this._scalars = scalars;
+        this.simBatches = simBatches;
+        // Single-frame memo: playback only ever touches one frame at a time,
+        // so materializing the whole timeline into legacy-shaped objects up
+        // front would defeat the point of storing it columnar in the first place.
+        this._memoIndex = -1;
+        this._memoFrame = null;
+    }
+
+    get length() {
+        return this.times.length;
+    }
+
+    timeAt(i) {
+        return this.times[i];
+    }
+
+    lastTime() {
+        return this.times[this.times.length - 1];
+    }
+
+    // Slices one body's field at frame `i` into an array of per-batch rows,
+    // e.g. bodyTransform -> [[x,y,z,w,qx,qy,qz], ...] (one row per batch).
+    _sliceField(flatArray, width, i) {
+        const B = this.simBatches;
+        const base = i * B * width;
+        const rows = new Array(B);
+        for (let b = 0; b < B; b++) {
+            const rowBase = base + b * width;
+            const row = new Array(width);
+            for (let c = 0; c < width; c++) row[c] = flatArray[rowBase + c];
+            rows[b] = row;
+        }
+        return rows;
+    }
+
+    getFrame(i) {
+        if (i === this._memoIndex) return this._memoFrame;
+
+        const state = { time: this.times[i], bodies: [] };
+        for (const body of this._bodies) {
+            const bodyState = { name: body.name };
+            for (const field in body.fields) {
+                bodyState[field] = this._sliceField(
+                    body.fields[field],
+                    COLUMNAR_FIELD_WIDTHS[field],
+                    i
+                );
+            }
+            if (body.contacts) {
+                bodyState.contacts = body.contacts[i] ?? null;
+            }
+            state.bodies.push(bodyState);
+        }
+        for (const name in this._scalars) {
+            const flat = this._scalars[name];
+            const B = this.simBatches;
+            const base = i * B;
+            state[name] = Array.from(flat.subarray(base, base + B));
+        }
+
+        this._memoIndex = i;
+        this._memoFrame = state;
+        return state;
+    }
+
+    // Per-batch series for the scalar plotter: [{x: time, y: value}, ...] per batch.
+    // `simBatches` is accepted (and ignored) for API parity with
+    // LegacyStateStore.getScalarSeries -- the columnar store already knows
+    // its own batch count.
+    getScalarSeries(name, _simBatches) {
+        const flat = this._scalars[name];
+        const B = this.simBatches;
+        const series = new Array(B).fill().map(() => new Array(this.length));
+        for (let i = 0; i < this.length; i++) {
+            const base = i * B;
+            for (let b = 0; b < B; b++) {
+                series[b][i] = { x: this.times[i], y: flat[base + b] };
+            }
+        }
+        return series;
+    }
+}
+
+class LegacyStateStore {
+    // `statesArray`: the classic array of per-frame state objects (already
+    // decoded -- __b64__ fields expanded via decodeStatesChunk).
+    constructor(statesArray) {
+        this._states = statesArray;
+    }
+
+    // simBatches isn't known to the store itself in the legacy shape (each
+    // state object carries its own per-batch arrays without a fixed count
+    // recorded anywhere) -- callers pass it explicitly to getScalarSeries,
+    // matching how ScalarPlotter/ErrorMetrics already get it from
+    // app.batchManager.simBatches.
+
+    get length() {
+        return this._states.length;
+    }
+
+    // Recomputed on every access rather than cached, since `append()` can grow
+    // `_states` after this store is already in use (live streaming) -- plain
+    // arrays are cheap enough here that a stale cache isn't worth the risk.
+    get times() {
+        return this._states.map((s) => s.time);
+    }
+
+    timeAt(i) {
+        return this._states[i].time;
+    }
+
+    lastTime() {
+        return this._states[this._states.length - 1].time;
+    }
+
+    getFrame(i) {
+        return this._states[i];
+    }
+
+    getScalarSeries(name, simBatches) {
+        const series = new Array(simBatches).fill().map(() => []);
+        for (const state of this._states) {
+            const values = state[name];
+            if (values === undefined) {
+                throw new Error(`Scalar "${name}" not found in state.`);
+            }
+            for (let b = 0; b < simBatches; b++) {
+                if (values[b] === undefined) {
+                    throw new Error(`Scalar "${name}" not found in state at index ${b}.`);
+                }
+                series[b].push({ x: state.time, y: values[b] });
+            }
+        }
+        return series;
+    }
+
+    // Grows the store in place with an already-decoded chunk of new frames
+    // (live-streaming support -- see SimView.processStatesChunk). Returns the
+    // index of the first newly-appended frame.
+    append(chunk) {
+        const startIndex = this._states.length;
+        this._states.push(...chunk);
+        return startIndex;
+    }
+}
+
+export class StateStore {
+    static fromColumnar({ times, bodies, scalars }, simBatches) {
+        return new ColumnarStateStore(times, bodies, scalars, simBatches);
+    }
+
+    static fromLegacy(statesArray) {
+        return new LegacyStateStore(statesArray);
+    }
+}

simview/static/js/config.js

@@ -0,0 +1,233 @@
+export const UI_DEFAULT_CONFIG = {
+    bodyVisualizationMode: "points",
+    axesVisible: false,
+    trailsVisible: false,
+    smoothInterpolation: true,
+    attributeVisible: {
+        contacts: false,
+        velocity: false,
+        angularVelocity: false,
+        force: false,
+        torque: false,
+    },
+    terrainVisualizationModes: {
+        surface: true,
+        wireframe: true,
+        normals: false,
+    },
+    terrainColorMap: "magma", // Default colormap
+    terrainColorMode: "height", // height, friction, or stiffness
+    terrainProbe: false, // interactive terrain probe on click
+};
+
+export const FREQ_CONFIG = {
+    scene: 60, // Scene update frequency in Hz
+    scalarPlotter: 20,
+    bodyStateWindow: 30,
+    playbackControls: 20,
+    errorMetrics: 20,
+};
+
+export const CONTROLS_CONFIG = {
+    minDistance: 1,
+    maxDistance: 500,
+    enableDamping: false,
+    dampingFactor: 0.05,
+    screenSpacePanning: true,
+    maxPolarAngle: Math.PI,
+    enablePan: true,
+    panSpeed: 2.0,
+    rotateSpeed: 1.5,
+    zoomSpeed: 1.2,
+    listenToKeyEvents: true,
+};
+
+export const SCENE_CONFIG = {
+    defaultUp: [0, 0, 1],
+};
+
+export const RENDERER_CONFIG = {
+    antialias: true,
+    preserveDrawingBuffer: true,
+    pixelRatio: window.devicePixelRatio,
+    clearColor: 0x000000,
+    clearAlpha: 1.0,
+};
+
+export const CAMERA_CONFIG = {
+    fov: 40,
+    near: 0.1,
+    far: 500,
+    position: [-15, -15, 10],
+    up: [0, 0, 1],
+};
+
+export const LIGHTING_CONFIG = {
+    ambient: {
+        color: 0xffffff,
+        intensity: 0.9,
+    },
+    directional: {
+        color: 0xffffff,
+        intensity: 0.8,
+        position: [10, 10, 10],
+    },
+};
+
+export const GROUND_CONFIG = {
+    size: 1000, // Size of the ground plane
+    divisions: 100, // Number of grid divisions
+    mainColor: 0x444444, // Main ground color
+    gridColor: 0x888888, // Grid line color
+    position: [0, 0, 0], // Position of the ground plane
+    rotation: [0, 0, 0], // Rotation of the ground plane
+};
+
+export const TERRAIN_CONFIG = {
+    skipNormalCells: 10,
+    normalLength: 0.2,
+};
+
+export const BODY_CONFIG = {
+    geometry: {
+        box: {
+            widthSegments: 4,
+            heightSegments: 4,
+            depthSegments: 4,
+        },
+        sphere: {
+            widthSegments: 16,
+            heightSegments: 16,
+        },
+        cylinder: {
+            radialSegments: 32,
+            heightSegments: 4,
+        },
+    },
+    wireframe: {
+        color: 0x4080ff,
+    },
+    points: {
+        size: 0.1,
+        opacity: 0.7,
+        alphaTest: 0.5,
+        transparent: false,
+        texture: "static/textures/points/ball1.png",
+    },
+    contactPoints: {
+        size: 0.7,
+        opacity: 1.0,
+        alphaTest: 0.5,
+        transparent: false,
+        texture: "static/textures/contacts/red-cross0.png",
+    },
+};
+
+export const SCALAR_PLOTTER_CONFIG = {
+    stepsPerYAxis: 5,
+    inactiveBatchOpacity: 0.3,
+};
+
+export const TRAIL_CONFIG = {
+    opacity: 0.6,
+};
+
+export const BODY_VECTOR_CONFIG = {
+    // Linear velocity
+    velocity: {
+        color: 0x2ca02c,
+        scale: 1.0,
+    },
+    // Angular velocity
+    angularVelocity: {
+        color: 0xffff00,
+        scale: 1.0,
+    },
+    // Force
+    force: {
+        color: 0xff7f0e,
+        scale: 1.0,
+    },
+    // Torque
+    torque: {
+        color: 0xd62728,
+        scale: 1.0,
+    },
+};
+
+export const POINT_VECTOR_CONFIG = {
+    // Contact Normal (n)
+    contactNormal: {
+        color: 0xff0000,
+        scale: 0.5,
+        visible: false,
+    },
+};
+
+export const CONTACT_CONFIG = {
+    points: {
+        size: 0.5,
+        opacity: 1.0,
+        texture: "static/textures/contacts/red-cross0.png",
+        transparent: false,
+    },
+    normals: {
+        color: 0xff0000,
+    },
+};
+
+export const SELECTION_CONFIG = {
+    BODIES: {
+        key: "ctrl",
+        set: "selectedBodies",
+        objects: "bodies",
+    },
+    CONTACT_POINTS: {
+        key: "Alt",
+        set: "selectedContactPoints",
+        objects: "contactPoints",
+    },
+    BATCH: {
+        key: "shiftKey",
+    },
+};
+
+export const BATCH_PALETTE_GENERATION_CONFIG = {
+    colors: ["#00429d", "#96ffea", "#ff40e0", "#ffffe0", "#ff005e", "#93003a"],
+    correctLightness: true,
+};
+
+export const STATIC_OBJECT_CONFIG = {
+    geometry: {
+        box: {
+            widthSegments: 4,
+            heightSegments: 4,
+            depthSegments: 4,
+        },
+        sphere: {
+            widthSegments: 16,
+            heightSegments: 16,
+        },
+        cylinder: {
+            radialSegments: 32,
+            heightSegments: 4,
+        },
+    },
+    wireframe: {
+        color: 0x4080ff,
+    },
+    points: {
+        size: 0.2,
+        opacity: 0.7,
+        alphaTest: 0.5,
+        transparent: false,
+        texture: "static/textures/points/ball1.png",
+    },
+    contactPoints: {
+        size: 0.7,
+        opacity: 1.0,
+        alphaTest: 0.5,
+        transparent: false,
+        texture: "static/textures/contacts/red-cross0.png",
+    },
+};

simview/static/js/main.js

@@ -0,0 +1,3 @@
+import { SimView } from "./SimView.js";
+
+SimView.run();