OptiPlayer — Användarguide
Gränssnitt
Tidslinje
Tidslinjen visas längst ner i spelaren. Dra i handtaget eller klicka på tidslinjen för att hoppa till valfri frame. Markers visas som färgade prickar på tidslinjen — klicka på en marker för att hoppa dit.
Knappar i timelinen (vänster till höger)
| Knapp |
Ikon |
Funktion |
| Tillbaka |
⏮ |
Återställer animationen till frame 0. |
| Play / Pause |
▶ / ⏸ |
Startar eller pausar animationen. |
| Lineart |
🌐 |
Växlar mellan normal rendering och lineart (kantlinjer). |
| Inställningar |
⚙️ |
Öppnar debug-GUI med kamera, ljus, rendering m.m. (visas i debug-läge). |
| Kamera |
🎥 |
Bläddrar mellan kameror i scenen. Döljs om bara en kamera finns. |
| Kameravyer |
🏠 |
Dropdown med förinställda kameravyer (preset cameras). Döljs om inga presets finns. |
| Visa/Dölj objekt |
👁️ |
Popup med checkboxar för att visa/dölja objekt och collections. |
| Verktyg |
🔧 |
Öppnar verktygsraden med mätverktyg och objektval. Döljs om enableMeasurement: false. |
| Information |
ℹ️ |
Togglar synligheten för annotations och callouts. Döljs om inga finns. |
| Minimera |
⌄ |
Fäller ihop panelen. Klicka igen (⌃) för att expandera. |
Hamburger-meny (mobil)
På mobil visas en ☰-meny med en lista av alla markers. Klicka på en marker för att hoppa till den framen.
Verktygsraden (🔧)
Öppnas via verktygsknappen. Bara ett verktyg kan vara aktivt åt gången.
| Verktyg |
Ikon |
Funktion |
| Välj Objekt |
❓ |
Klicka på ett objekt för att se titel, beskrivning och ev. pris/länk. Klicka [ZOOM] för att fokusera. |
| Mät Avstånd |
📏 |
Klicka på två punkter för att mäta avståndet mellan dem. |
| Mät Objekt |
📦 |
Klicka på ett objekt för att visa dess bounding box med dimensioner. |
| Rensa |
✕ |
Tar bort alla aktiva mätningar. |
Kortkommandon
| Tangent |
Funktion |
| Space |
Play / Pause |
| W |
Växla lineart / normal rendering |
| E |
Växla wireframe |
| O (håll inne) |
Objektval — klicka på ett objekt medan O hålls inne |
| L |
Lås / lås upp kameran mot målobjekt |
| C |
Bläddra mellan kameror |
| B |
Växla bounding box-djup (alltid överst / djuptestad) |
| H |
Visa / dölj debug-info (stats, frame counter, GUI) |
| I |
Visa GLB/GLTF-modellinformation (se nedan) |
| ← → |
Stega en frame framåt / bakåt |
| ↑ ↓ |
Hoppa till nästa / föregående marker |
| Dubbelklick |
Fullskärm |
GLB/GLTF-info (I)
Tryck I för att visa/dölja en modal med teknisk information om den laddade 3D-modellen:
Geometri
| Fält |
Beskrivning |
| Mesh-objekt |
Antal mesh-objekt i scenen. |
| InstancedMesh |
Antal instansierade meshes (GPU-effektiva kopior). |
| Polygoner (trianglar) |
Totalt antal trianglar — avgörande för prestanda. |
| Vertex |
Totalt antal hörn (vertices) i alla meshes. |
| Noder totalt |
Alla objekt i scengrafen (meshes, ljus, kameror, tomma noder). |
Skelett & Morph Targets (visas om de finns)
| Fält |
Beskrivning |
| Skinned Meshes |
Meshes med skelettanimation (karaktärer, riggade objekt). |
| Bones |
Totalt antal ben i alla skelett. |
| Morph Targets |
Antal shape keys / blend shapes (ansiktsuttryck, formändringar). |
Material
| Fält |
Beskrivning |
| Antal |
Unika material. Färre = bättre draw call-batching. |
| Typ |
Material-typ (MeshStandardMaterial, MeshPhysicalMaterial, etc). |
Texturer
| Fält |
Beskrivning |
| Antal |
Unika texturer (diffuse, normal, roughness, metalness m.m.). |
| Upplösning |
Varje textur med namn och storlek (t.ex. 2048×2048). |
| Texturminne |
Ungefärligt GPU-minne för alla texturer (RGBA). |
Scen
| Fält |
Beskrivning |
| Bounding Box |
Scenens totala storlek i X × Y × Z (i vald måttenhet). |
| Kameror |
Antal kameror med namn. |
| Lampor |
Ljuskällor med typ (PointLight, SpotLight, etc.) och intensitet. |
Animationer
| Fält |
Beskrivning |
| Klipp |
Antal animationsklipp med namn och längd i sekunder. |
| FPS / maxFrames |
Bildfrekvens och totalt antal frames i timelinen. |
Renderer (live-statistik)
| Fält |
Beskrivning |
| Draw calls |
Antal GPU-anrop per frame. Lägre = bättre prestanda. |
| Trianglar (renderade) |
Faktiskt renderade trianglar (efter culling). |
| Geometrier (GPU) |
Antal geometribuffertar i GPU-minnet. |
| Texturer (GPU) |
Antal textur-objekt i GPU-minnet. |
| Program (shaders) |
Antal kompilerade shader-program. |
Annotations & Callouts
Informationsrutor kopplade till 3D-objekt. Tre visningslägen:
| Läge |
Beskrivning |
| Callout |
Permanent synlig ruta med SVG-ledlinje till objektet. |
| Annotation |
Svävande hotspot (ℹ️) i 3D-rummet. Klicka för att öppna info. |
| Hidden |
Syns bara vid objektval (O + klick). |
Toggla alla med ℹ️-knappen i timelinen.
Viewer Toggles (👁️)
Klicka på öga-knappen för att öppna en popup med checkboxar. Varje toggle visar/döljer ett objekt eller en collection i scenen.
Objektval & Zoom
- Håll inne O — markören blir ett frågetecken.
- Klicka på objektet du vill inspektera.
- En ruta visas med titel, beskrivning och ev. pris/länk.
- Klicka [ZOOM] för att zooma in. Kameran roterar nu runt det valda objektet.
- Släpp fokus: tryck Space (play) eller dra i tidslinjen.
Lineart
Teknisk visualisering med kantlinjer.
- Tryck W eller klicka lineart-knappen (🌐).
- Visar threshold edges, normal edges och conditional (silhuett) edges.
- SAO stängs av automatiskt vid lineart och återställs vid normal rendering.
Mätverktyg
Avstånd
- Aktivera mätverktyget (📏).
- Klicka på en yta → första punkt sätts.
- Klicka på en annan yta → avstånd visas med linje och etikett.
Dimensioner
- Aktivera dimensionsverktyget (📦).
- Klicka på ett objekt → bounding box visas med bredd, höjd och djup.
- Tryck B för att växla mellan "alltid överst" och djuptestad rendering.