{"id":48403997,"url":"https://github.com/lifeart/openrv-web","last_synced_at":"2026-04-06T02:35:05.813Z","repository":{"id":335510496,"uuid":"1139011112","full_name":"lifeart/openrv-web","owner":"lifeart","description":" Web-based VFX viewer inspired by OpenRV. Frame-accurate playback, professional color grading (CDL, LUTs, curves), waveform/vectorscope/histogram, annotations, A/B comparison, stereo 3D and RV session file support.","archived":false,"fork":false,"pushed_at":"2026-03-27T15:50:28.000Z","size":34311,"stargazers_count":4,"open_issues_count":2,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-03-28T00:01:15.208Z","etag":null,"topics":["annotation-tool","annotations","avif","dailies-review","hdr","heic","image-sequence","image-sequence-player","media","open-rv","openrv","playback","post-production-tools","review-tools","vectorscope","vfx","vfx-software","vfx-tools","video-player"],"latest_commit_sha":null,"homepage":"https://lifeart.github.io/openrv-web/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lifeart.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-21T12:04:22.000Z","updated_at":"2026-03-22T19:19:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"98542168-3452-450d-9569-bfa7a8bef8cf","html_url":"https://github.com/lifeart/openrv-web","commit_stats":null,"previous_names":["lifeart/openrv-web"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/lifeart/openrv-web","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lifeart%2Fopenrv-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lifeart%2Fopenrv-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lifeart%2Fopenrv-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lifeart%2Fopenrv-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lifeart","download_url":"https://codeload.github.com/lifeart/openrv-web/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lifeart%2Fopenrv-web/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31457722,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-05T21:22:52.476Z","status":"online","status_checked_at":"2026-04-06T02:00:07.287Z","response_time":112,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["annotation-tool","annotations","avif","dailies-review","hdr","heic","image-sequence","image-sequence-player","media","open-rv","openrv","playback","post-production-tools","review-tools","vectorscope","vfx","vfx-software","vfx-tools","video-player"],"created_at":"2026-04-06T02:35:05.127Z","updated_at":"2026-04-06T02:35:05.796Z","avatar_url":"https://github.com/lifeart.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# OpenRV Web\n\n[![Deploy to GitHub Pages](https://github.com/lifeart/openrv-web/actions/workflows/deploy.yml/badge.svg)](https://github.com/lifeart/openrv-web/actions/workflows/deploy.yml)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n**[Live Demo](https://lifeart.github.io/openrv-web)** | **[Documentation](https://lifeart.github.io/openrv-web/docs/)**\n\nA professional web-based image and video review tool inspired by [OpenRV](https://github.com/AcademySoftwareFoundation/OpenRV). Built for VFX, animation, and post-production workflows, OpenRV Web provides frame-accurate playback, comprehensive color management, annotation tools, collaborative review sessions, and RV session file compatibility -- all running entirely in the browser with no server-side processing.\n\n---\n\n## Features\n\n### Format Support\n\n**Images**\n- PNG, JPEG, WebP, GIF, BMP, AVIF, HEIC/HEIF -- via browser-native decoding\n- **EXR** (.exr/.sxr) -- TypeScript decoder with Float32 HDR precision\n  - Multi-layer EXR with AOV selection and channel remapping\n  - Compression: NONE, RLE, ZIP, ZIPS, PIZ, PXR24, DWAA, DWAB\n  - Multi-view EXR for stereo workflows\n  - Data window / display window visualization overlay\n- **DPX** -- Digital Picture Exchange format with log-to-linear conversion\n- **Cineon** -- Kodak Cineon format with configurable film gamma\n- **Radiance HDR** (.hdr/.pic) -- RGBE encoding with adaptive RLE decompression\n- **Float TIFF** -- 16/32/64-bit floating-point TIFF images\n- **JPEG XL** (.jxl) -- modern HDR-capable format via WASM decoder and browser-native HDR path\n- **JPEG 2000 / HTJ2K** (.jp2/.j2k/.j2c/.jph/.jhc) -- via openjph-based WASM module\n- **JPEG Gainmap HDR** -- MPF parsing, XMP headroom extraction, sRGB-to-linear + gain reconstruction\n- **HEIC Gainmap HDR** -- Apple gainmap format and ISO 21496-1 standard; ISOBMFF parsing with WASM fallback for non-Safari browsers\n- **AVIF Gainmap HDR** -- auxiliary gain map items per ISO 21496-1\n- **RAW Preview** -- embedded preview extraction from camera RAW files\n\n**Video**\n- Mediabunny WebCodecs containers: MP4/M4V/3GP/3G2, MOV/QuickTime, MKV/WebM, OGG/OGV/OGX\n- AVI browser fallback\n- **MXF Demuxer** -- Material eXchange Format container parsing (identifies codec, resolution, frame rate)\n- ProRes/DNxHD codec detection with FFmpeg transcoding guidance\n- HDR video support with VideoFrame texturing (HLG, PQ transfer functions)\n\n**Sequences and Sessions**\n- Image sequences with numbered files (e.g., `frame_001.png`, `file.0001.exr`)\n  - Pattern notation: `%04d` (printf), `####` (hash), `@` notation\n  - Single-file sequence inference and directory scanning\n  - Missing frame detection with visual overlay\n- RV/GTO session files with full graph reconstruction\n- **RV EDL** -- OpenRV edit decision list format parsing\n- **OTIO (OpenTimelineIO)** -- import editorial timelines with clips, gaps, transitions, and markers\n\n### Color Management\n\n**Primary Color Controls**\n- Exposure, gamma, saturation, contrast, brightness\n- Color temperature and tint\n- Hue rotation\n- Vibrance with skin tone protection (hue 20-50 degrees protected)\n- Clarity / local contrast enhancement\n- Highlight and shadow recovery\n- Whites and blacks clipping adjustment\n- Color inversion\n\n**Three-Way Color Correction**\n- Lift / Gamma / Gain color wheels with master wheel\n- 120px wheels with color preview ring, undo/redo, and linked gang adjustments\n\n**HSL Qualifier**\n- Secondary color correction via hue/saturation/luminance selection\n- Matte preview, invert selection, and eyedropper color picking\n\n**CDL (Color Decision List)**\n- ASC CDL support (slope, offset, power, saturation) with .cdl file import\n\n**LUT Support**\n- 3D LUT and 1D LUT loading (.cube, .csp, .3dl, and other formats)\n- Single-pass float LUT pipeline in the fragment shader (no 8-bit bottleneck)\n- Hardware trilinear interpolation on GPU; tetrahedral interpolation available for CPU-side processing\n- LUT pipeline with pre-cache stage and GPU chain\n- Film emulation presets (10 built-in looks: Warm Film, Cool Chrome, Bleach Bypass, Cross Process, Monochrome, Cinematic Teal \u0026 Orange, Vintage Fade, High Contrast, Low Contrast)\n\n**Color Curves**\n- Master / R / G / B channel curves with presets and import/export\n\n**Log Curve Presets**\n- Camera-specific log-to-linear conversion: Cineon Film Log, ARRI LogC3/LogC4, Sony S-Log3, RED Log3G10\n- GLSL shader generation for GPU processing\n\n**OCIO Color Management**\n- OpenColorIO-style color pipeline with built-in presets (ACES 1.2, sRGB)\n- Custom .ocio config file loading with drag-and-drop and validation\n- Input color space auto-detection from metadata\n- Working, display, and view transform selection\n- Look transforms with forward/inverse direction\n- Reverse transforms for bidirectional camera space conversions\n- WASM-based OCIO processing with shader translation\n\n**Tone Mapping**\n- Reinhard operator with adjustable white point\n- Filmic operator with configurable exposure bias and white point\n- ACES filmic tone mapping\n- Per-operator parameter sliders with real-time preview\n\n**Display Color Management**\n- Transfer functions: Linear, sRGB, Rec.709, Gamma 2.2, Gamma 2.4, Custom Gamma\n- Display gamma and brightness adjustments\n- GPU-accelerated via fragment shader\n- LocalStorage persistence for profile settings\n- Display profile indicator HUD with flash-on-change\n\n**HDR and Wide Color Gamut**\n- Display P3 automatic wide gamut output on supported displays\n- HLG and PQ output modes for HDR displays (experimental)\n- Display capabilities detection (P3, HDR, WebGPU)\n- User gamut preference (force sRGB or Display P3)\n- Gamut mapping control (clip, soft compress) with source/target gamut selection\n- HDR-aware scopes extending beyond 1.0\n- Canvas2D HDR fallback path (srgb-linear, rec2100-hlg, float16)\n\n**Additional Color Tools**\n- ICC profile support\n- Auto exposure controller\n- Scene analysis\n- Temporal smoother for color adjustments\n- Color space conversion utilities\n\n### Rendering\n\n- **WebGL2** GPU-accelerated renderer with full fragment shader pipeline\n  - Input EOTF, exposure, temperature/tint, brightness, contrast, saturation, hue, tone mapping, gamma, inversion, output mode\n  - Shader state management and texture cache (LRU)\n  - Tiled rendering for large images\n  - Mipmap generation for static textures\n- **WebGPU Backend** (experimental) -- rgba16float, extended tone mapping\n- **WebGPU HDR Blit** -- direct HDR output via WebGPU\n- **Canvas2D HDR Blit** -- fallback HDR display when WebGL2 native HDR and WebGPU are unavailable\n- **Spherical / 360-degree Projection** -- equirectangular panorama viewing with interactive yaw/pitch and FOV zoom\n- **Render Worker** -- off-main-thread rendering via OffscreenCanvas\n- **Luminance Analyzer** -- scene luminance analysis\n- **Adaptive Proxy Rendering** -- DPI-aware canvas, interaction quality tiering, GL mipmaps, cache-level resize\n- **Premultiply / Unpremultiply** alpha control\n\n### Scopes and Analysis\n\n- **Histogram** -- RGB, luminance, and separate channel modes with log scale\n  - Clipping indicators showing percentage of clipped highlights/shadows\n  - Clipping overlay (red for highlights, blue for shadows)\n- **Waveform Monitor** -- luma, RGB, parade, and YCbCr modes (BT.709 coefficients)\n- **Vectorscope** -- with zoom levels\n- **Pixel Probe / Color Sampler** -- click to sample RGB/HSL/IRE values\n  - Area averaging (1x1, 3x3, 5x5, 9x9), source vs rendered toggle\n  - Alpha channel display, HDR out-of-range indicators, nits readout, color space info\n  - Float precision toggle (3 or 6 decimal places)\n- **False Color** -- exposure visualization with ARRI, RED, and custom presets\n- **Zebra Stripes** -- animated diagonal stripes for high (\u003e95% IRE) and low (\u003c5% IRE) exposure warnings\n- **Luminance Visualization** -- luminance heatmap display\n- **Gamut Diagram** -- CIE 1931 chromaticity diagram\n- All scopes are WebGL-accelerated\n\n### Playback and Audio\n\n- Frame-accurate timeline with scrubbing\n- **Timeline Thumbnails** -- LRU-cached preview thumbnails with progressive loading\n- In/out points and markers with notes (color-coded, with text annotations)\n  - Duration markers spanning frame ranges\n- Loop modes: once, loop, ping-pong\n- Playback speed control (0.1x to 8x) with J/K/L shuttle shortcuts\n  - Audio pitch correction at non-1x speeds\n- Sub-frame interpolation (alpha blending between frames for smooth slow motion)\n- Smooth zoom animation with ease-out cubic easing\n- Cache indicator showing cached frames and memory usage\n- **Prerender Buffer** -- double-buffered cache for glitch-free effect parameter changes\n  - SIMD-like TypedArray optimizations, half-resolution convolution, async chunked processing\n- **Representation Selector** -- switch between frames, movie, and proxy representations per source\n- **Multi-Clip Playlist** -- manage and play multiple clips in sequence\n  - Drag-and-drop reordering, loop modes, in/out points\n  - EDL (CMX3600) export and OTIO import\n  - Web Worker parallel effect processing with smart LRU cache\n- **Audio Playback** -- Web Audio API with HTMLVideoElement and Mediabunny fallbacks\n  - Audio sync with drift correction, graceful autoplay handling\n  - Automatic muting during reverse playback\n- Audio waveform display with multi-channel support\n- Volume control with mute (volume preserved across mute/unmute cycles)\n- Page visibility handling (auto-pause when tab is hidden)\n\n### Comparison and Composition\n\n- **Wipe Comparison** -- horizontal/vertical split view with interactive drag\n- **Split Screen** -- side-by-side A/B comparison with draggable divider\n- **Difference Matte** -- pixel differences between A/B with gain and heatmap modes\n- **Blend Modes** for A/B comparison: onion skin, flicker (1-30 Hz), blend ratio\n- **Quad View** -- A/B/C/D four-up comparison mode\n- Multi-layer stack with blend modes and per-layer opacity/visibility\n- A/B source switching with auto-assignment when loading multiple files\n- Quick toggle between sources with backtick key\n- **Reference Image Manager** -- capture and compare against a stored snapshot\n  - View modes: split-h, split-v, overlay, side-by-side, toggle\n- **Matte Overlay** -- letterbox/pillarbox with configurable aspect ratio and opacity\n\n### Stereo 3D Viewing\n\n- Side-by-side and over/under stereo modes\n- Mirror mode (side-by-side with flipped right eye)\n- Anaglyph mode (red/cyan) and luminance anaglyph (reduced color fringing)\n- Checkerboard mode (for DLP projectors with shutter glasses)\n- Scanline interleaved mode (for line-blanking displays)\n- Eye swap control and convergence offset adjustment\n- **Stereo Eye Transform** -- per-eye geometric transforms\n- **Stereo Alignment Overlay** -- alignment aids for stereo setup\n- **Convergence Measurement** -- measure convergence between eyes\n- **Floating Window Detection** -- detect floating window violations\n- **Per-Eye Annotations** -- separate annotations for left and right eyes\n\n### Annotations\n\n- **Pen Tool** with pressure sensitivity and brush types (soft/hard)\n- **Text Annotations** with formatting (bold, italic, underline, background color, callouts)\n- **Shape Tools** -- rectangle, ellipse, line, arrow, and polygon with fill/stroke options\n- **Spotlight Tool** -- dim everything except highlighted region (circle or rectangle)\n- Eraser tool\n- Ghost mode (show nearby frame annotations)\n- Hold mode (persist annotations across frames)\n- Per-frame annotation storage\n- **Ghost Frames / Onion Skin** -- semi-transparent previous/next frames for animation review\n  - Configurable range (0-5 frames before/after), opacity falloff, optional color tinting\n- **Comparison Annotations** -- annotate during A/B compare\n- **WebGL Paint Renderer** -- GPU-accelerated annotation rendering\n\n### Filters and Effects\n\n- **Noise Reduction** -- edge-preserving bilateral filter (GPU-accelerated with CPU fallback)\n- **Sharpen** -- WebGL-accelerated unsharp mask\n- **Deinterlace** -- bob, weave, and blend methods with field order selection\n- **Film Emulation** -- classic film stock emulation with grain overlay\n  - Kodak Portra 400, Kodak Ektar 100, Fuji Pro 400H, Fuji Velvia 50, Kodak Tri-X 400, Ilford HP5+\n  - Luminance-dependent grain with per-frame animation\n- **Motion Stabilization** -- preview 2D stabilization with block-matching, EMA smoothing, and border cropping\n- **Effect Registry** -- extensible effect system with category-based lookup and registration-order pipeline\n\n### Transform\n\n- Rotation (90/180/270 degrees) and flip (horizontal/vertical)\n- Crop with aspect ratio presets and rule-of-thirds guides\n- **Uncrop / Canvas Extension** -- add padding with uniform or per-side controls and custom fill color\n- **Pixel Aspect Ratio (PAR)** -- auto-detection from metadata with presets for DV NTSC, DV PAL, HD Anamorphic, 2:1 Anamorphic\n- **Lens Distortion Correction** -- barrel/pincushion\n- **Perspective Correction** -- four-point perspective transform with grid overlay\n\n### Export\n\n- **Frame Export** -- PNG, JPEG, WebP with single-frame or sequence export with progress\n- **Copy to Clipboard** -- copy current frame to system clipboard\n- **Video Export** -- WebCodecs-based encoding to H.264 (Baseline/Main/High), VP9, and AV1\n  - Configurable bitrate, GOP size, hardware acceleration preference\n  - MP4 muxer (ISO BMFF) for single-track video output\n- **Slate / Leader Frames** -- production metadata overlay (show, shot, version, artist, date, timecode, resolution)\n  - Studio logo placement, custom fields, configurable typography and colors\n  - Slate editor UI with live preview\n- **Frameburn Compositor** -- burn-in timecode, frame number, shot name, date, resolution, FPS, color space, codec, and custom text\n- **EDL Writer** -- CMX3600-format edit decision lists with drop-frame timecode support\n- **OTIO Support** -- OpenTimelineIO import with conform/re-link panel\n- **Dailies Report Exporter** -- CSV and HTML reports with shot status, notes, version info, frame ranges, and timecodes\n- **Annotation Export** -- JSON round-trip (export/import with merge and frame offset) and PDF printable reports\n- Session save/load (.orvproject format)\n\n### Overlays and Guides\n\n- **Timecode Overlay** -- on-screen SMPTE timecode display (HH:MM:SS:FF)\n- **Safe Areas** -- title safe, action safe zones, rule of thirds, center crosshair, aspect ratio overlays\n- **Clipping Overlay** -- visual overlay showing blown-out highlights and crushed shadows\n- **False Color Overlay** -- exposure heatmap\n- **Zebra Stripes** -- animated exposure warning stripes\n- **Spotlight Overlay** -- focus attention on a region by dimming the rest\n- **Missing Frame Overlay** -- visual indicator for gaps in image sequences\n- **EXR Window Overlay** -- data window and display window boundary visualization\n- **Matte Overlay** -- letterbox/pillarbox with configurable aspect ratio\n- **Bug Overlay** -- small corner logo/branding image (configurable position, size, opacity)\n- **Watermark Overlay** -- logos/watermarks with 9 preset positions, adjustable scale, opacity, and margin\n- **Perspective Grid Overlay** -- vanishing point grid for perspective reference\n- **Note Overlay** -- color-coded timeline bars for review notes (open, resolved, wontfix)\n\n### Review Workflow\n\n- **Shot Status Tracking** -- per-source status (pending, approved, needs-work, CBB, omit) with color-coded badges\n- **Version Management** -- group multiple versions of the same shot with version navigation and annotation carry-forward\n- **Note System** -- per-source, per-frame-range threaded notes with status filtering (all/open/resolved), inline editing, and replies\n- **Dailies Reports** -- CSV/HTML export of review session with status, notes, timecodes, and version info\n- **Client Mode** -- locked UI for review presentations (playback and navigation only, editing blocked)\n  - URL parameter locking for secure viewer-only links\n- **Conform / Re-link Panel** -- re-link unresolved media from OTIO/EDL imports with fuzzy filename matching\n\n### Network and Collaboration\n\n- **WebSocket-based Sync** -- real-time collaboration between multiple viewers\n  - Room creation and joining with unique room codes\n  - User presence overlay with participant avatars and remote cursors\n  - Configurable sync: playback, view (pan/zoom), color adjustments, annotations, cursor position\n  - Host/participant role distinction\n  - Reconnection with exponential backoff\n- **WebRTC Peer Connections** -- NAT traversal via public STUN/TURN servers (Google, Cloudflare, OpenRelay)\n  - URL-based signaling for serverless P2P connections\n- **PIN-based Encryption** -- encrypted message payloads for secure review sessions\n- **Media Transfer** -- request/offer/chunk-based media sharing between peers\n- Configurable signaling servers via `VITE_NETWORK_SIGNALING_SERVERS`\n\n### Integrations\n\n- **DCC Bridge** -- WebSocket-based integration with Nuke, Maya, Houdini, and other DCC tools\n  - JSON message protocol with auto-reconnect and heartbeat\n  - Inbound commands: loadMedia, syncFrame, syncColor\n  - Outbound events: frameChanged, colorChanged, annotationAdded\n- **ShotGrid (ShotGun) Integration** -- REST API bridge\n  - Authentication, version loading, note push, and status sync\n  - Bidirectional status mapping between OpenRV Web and ShotGrid\n  - Playlist import from ShotGrid into PlaylistManager\n\n### Scripting API\n\n- **Public JavaScript API** (`window.openrv`) for programmatic control\n  - Playback: `play()`, `pause()`, `toggle()`, `stop()`, `seek(frame)`, `step()`, `setSpeed()`, `isPlaying()`, `getCurrentFrame()`\n  - Media: `getCurrentSource()`, `getDuration()`, `getFPS()`, `getResolution()`\n  - Audio: `setVolume()`, `getVolume()`, `mute()`, `unmute()`, `isMuted()`\n  - Loop: `setMode()`, `getMode()`, `setInPoint()`, `setOutPoint()`, `clearInOut()`\n  - View: `setZoom()`, `getZoom()`, `fitToWindow()`, `setPan()`, `setChannel()`\n  - Color: `setAdjustments()`, `getAdjustments()`, `reset()`, `setCDL()`, `loadLUT()`\n  - Markers: `add()`, `remove()`, `getAll()`, `clear()`, `goToNext()`, `goToPrevious()`\n  - Sequence: `getSequenceInfo()`, `getMissingFrames()` for sequence inspection\n  - Events: `on()`, `off()`, `once()` for frameChange, play, pause, sourceLoaded, error, etc.\n  - Version and readiness: `openrv.version`, `openrv.isReady()`\n\n### UI and UX\n\n- **Dark/Light Theme** with auto (system) mode\n- **Fullscreen Mode** via F11 or toolbar button\n- **Presentation Mode** -- clean display with all UI hidden and cursor auto-hide on inactivity\n- **External Presentation** -- secondary browser window via BroadcastChannel with synced frame/playback/color (text-only metadata; full viewer mirroring tracked in issue #29)\n- **Background Pattern Selector** -- checkerboard, grey 18%/50%, white, black, crosshatch, custom color\n- **History Panel** -- visual undo/redo with jump to any state\n- **Floating Info Panel** -- filename, resolution, frame, FPS, cursor color readout\n- **Hi-DPI / Retina Support** -- crisp rendering on 2x, 3x, and fractional DPR displays\n- **Overlay State Persistence** -- all overlay toggle states saved and restored with sessions\n- **Session Snapshots** -- named version history with preview and restore (IndexedDB persistence)\n- **Auto-Save** -- configurable interval with crash recovery, storage quota monitoring, and visual indicator\n- **Session Recovery** -- detects invalid blob URLs after browser restart with file re-selection prompts\n- **Shortcut Editor** -- view and customize keyboard shortcuts with conflict detection and export/import\n- **Contextual Keyboard Shortcuts** -- tab-dependent shortcut dispatch (e.g., H/W/G resolve per active panel)\n- **Shortcut Cheat Sheet** -- quick-reference keyboard shortcut overlay\n- **Accessibility** -- ARIA announcer for screen reader support\n\n---\n\n## Documentation\n\nComprehensive documentation is available at **[lifeart.github.io/openrv-web/docs/](https://lifeart.github.io/openrv-web/docs/)**:\n\n- **Getting Started** -- installation, browser requirements, quick start, UI overview\n- **Playback \u0026 Navigation** -- timeline, J/K/L shuttle, loop modes, image sequences, EXR layers, channel isolation\n- **Color Management** -- primary controls, color wheels, HSL qualifier, CDL, curves, LUTs, OCIO, tone mapping, display profiles\n- **Comparison \u0026 Review** -- A/B switching, wipe, split screen, difference matte, blend modes\n- **Scopes \u0026 Analysis** -- histogram, waveform, vectorscope, pixel probe, false color, zebra, gamut diagram\n- **Annotations** -- pen, shapes, text, per-frame modes, export\n- **Export** -- frame/video export, slate, frameburn, EDL/OTIO, sessions\n- **Advanced Topics** -- stereo 3D, network sync, DCC integration, scripting API, filters, transforms\n- **API Reference** -- auto-generated TypeDoc reference for all 10 public API classes\n- **Technical Guides** -- rendering pipeline, LUT system, CDL, OCIO, node graph, file formats, session compatibility\n\n---\n\n## Installation\n\n```bash\n# Clone the repository\ngit clone https://github.com/lifeart/openrv-web.git\ncd openrv-web\n\n# Install dependencies\npnpm install\n\n# Start development server\npnpm dev\n```\n\n## Usage\n\n### Opening Media\n- Drag and drop files onto the viewer\n- Click the folder icon to open file picker\n- Load RV session files (.rv) directly\n- Load multiple files for A/B comparison (second file auto-assigns as source B)\n\n### Keyboard Shortcuts\n\n#### Playback\n| Key | Action |\n|-----|--------|\n| `Space` | Play/Pause |\n| `Left/Right` | Step frame backward/forward |\n| `Up` | Toggle play direction |\n| `Home/End` | Go to start/end |\n| `I` or `[` | Set in point |\n| `O` or `]` | Set out point |\n| `R` | Reset in/out points |\n| `M` | Toggle mark at current frame |\n| `L` | Cycle loop mode (once/loop/ping-pong) |\n| `J` | Decrease playback speed |\n| `K` | Pause playback |\n| `L` | Increase playback speed |\n\n#### View and Navigation\n| Key | Action |\n|-----|--------|\n| `F` | Fit to window |\n| `=` / `-` | Zoom in/out |\n| `Shift+=` / `Shift+-` | Fine zoom in/out |\n| `1-5` | Switch tabs (View, Color, Effects, Transform, Annotate) |\n| `0` | Set zoom to 50% |\n| `F11` | Toggle fullscreen mode |\n| `Ctrl+Shift+P` | Toggle presentation mode (clean display, cursor auto-hide) |\n| `Shift+B` | Cycle background pattern (checker, grey, white, etc.) |\n| `Shift+Alt+B` | Toggle checkerboard background |\n| `Shift+P` | Toggle pixel aspect ratio correction |\n\n#### A/B Compare\n| Key | Action |\n|-----|--------|\n| `` ` `` (backtick) | Toggle between A/B sources |\n| `~` (tilde) | Toggle between A/B sources |\n| `Shift+D` | Toggle difference matte |\n| `Shift+Alt+S` | Toggle split screen A/B comparison |\n\n#### Scopes and Wipe\n| Key | Action |\n|-----|--------|\n| `Shift+W` | Cycle wipe modes (off/horizontal/vertical) |\n| `w` | Toggle waveform monitor |\n| `h` | Toggle histogram |\n| `y` | Toggle vectorscope |\n\n#### Exposure and Analysis\n| Key | Action |\n|-----|--------|\n| `Shift+I` | Toggle pixel probe |\n| `Shift+Alt+F` | Toggle false color display |\n| `Shift+Alt+Z` | Toggle zebra stripes |\n| `;` | Toggle safe areas overlay |\n| `Shift+Alt+T` | Toggle timecode overlay |\n| `Shift+Alt+W` | Toggle color wheels panel |\n\n#### Stereo 3D\n| Key | Action |\n|-----|--------|\n| `Shift+3` | Cycle stereo modes (off/side-by-side/over-under/mirror/anaglyph/etc.) |\n\n#### Channel View\n| Key | Action |\n|-----|--------|\n| `Shift+R` | Red channel |\n| `Shift+G` | Green channel |\n| `Shift+B` | Blue channel |\n| `Shift+A` | Alpha channel |\n| `Shift+L` | Luminance/Grayscale |\n| `Shift+Y` | Grayscale (alias for Shift+L) |\n| `Shift+N` | Normal (RGB) |\n\n#### Color and Effects\n| Key | Action |\n|-----|--------|\n| `C` | Toggle color panel |\n| `U` | Toggle curves panel |\n| `Shift+O` | Toggle OCIO color management panel |\n| `Shift+Alt+J` | Toggle tone mapping |\n| `Shift+D` | Cycle display color profile |\n| `Shift+Alt+E` | Toggle effects/filter panel |\n| `Shift+K` | Toggle crop mode |\n| `Shift+H` | Toggle HSL Qualifier |\n\n#### Transform\n| Key | Action |\n|-----|--------|\n| `Shift+R` | Rotate left 90 degrees |\n| `Alt+R` | Rotate right 90 degrees |\n| `Alt+H` | Flip horizontal |\n| `Shift+V` | Flip vertical |\n\n#### Annotations\n| Key | Action |\n|-----|--------|\n| `V` | Pan tool |\n| `P` | Pen tool |\n| `E` | Eraser tool |\n| `T` | Text tool |\n| `R` | Rectangle tool |\n| `O` | Ellipse tool |\n| `L` | Line tool |\n| `A` | Arrow tool |\n| `B` | Toggle brush type (soft/hard) |\n| `G` | Toggle ghost mode |\n| `Shift+G` | Toggle ghost frames (onion skin) |\n| `X` | Toggle hold mode (persist annotations across frames) |\n| `Shift+Q` | Toggle spotlight |\n| `Ctrl+Z` | Undo |\n| `Ctrl+Y` | Redo |\n| `,` / `.` | Jump to prev/next annotation |\n\n#### UI Panels\n| Key | Action |\n|-----|--------|\n| `Shift+T` | Cycle theme (auto/dark/light) |\n| `Shift+Alt+H` | Toggle history panel |\n| `Shift+Alt+I` | Toggle info panel |\n| `Shift+Alt+M` | Toggle markers panel |\n| `Shift+N` | Toggle network sync panel |\n| `Ctrl+Shift+S` | Create quick snapshot |\n| `Ctrl+Shift+Alt+S` | Toggle snapshots panel |\n| `Shift+Alt+P` | Toggle playlist panel |\n\n#### Export\n| Key | Action |\n|-----|--------|\n| `Ctrl+S` | Export frame |\n| `Ctrl+C` | Copy frame to clipboard |\n\n### Mouse Controls\n- **Scroll**: Zoom in/out\n- **Drag**: Pan image\n- **Click timeline**: Seek to frame\n- **Drag timeline**: Scrub\n\n---\n\n## Architecture\n\n```\nsrc/\n├── api/                # Public scripting API (window.openrv)\n├── core/\n│   ├── graph/          # Node graph system (Graph, Property, Signal)\n│   ├── image/          # IPImage data structure (with PAR metadata)\n│   └── session/        # Session management, GTO loading, serialization, auto-save\n│       ├── SnapshotManager.ts   # IndexedDB-based session snapshots\n│       ├── PlaylistManager.ts   # Multi-clip playlist with EDL export \u0026 OTIO import\n│       ├── StatusManager.ts     # Per-source shot status tracking\n│       ├── VersionManager.ts    # Shot versioning and navigation\n│       └── NoteManager.ts       # Threaded review notes\n├── formats/\n│   ├── EXRDecoder.ts            # TypeScript EXR decoder with multi-layer support\n│   ├── EXRPIZCodec.ts           # PIZ wavelet compression codec\n│   ├── EXRDWACodec.ts           # DWA compression codec\n│   ├── DPXDecoder.ts            # DPX format decoder\n│   ├── CineonDecoder.ts         # Cineon format decoder\n│   ├── HDRDecoder.ts            # Radiance HDR decoder with RLE support\n│   ├── TIFFFloatDecoder.ts      # Float TIFF decoder\n│   ├── JXLDecoder.ts            # JPEG XL decoder (WASM + browser-native HDR)\n│   ├── JP2Decoder.ts            # JPEG 2000 / HTJ2K decoder\n│   ├── JPEGGainmapDecoder.ts    # JPEG HDR gainmap decoder\n│   ├── HEICGainmapDecoder.ts    # HEIC HDR gainmap decoder\n│   ├── AVIFGainmapDecoder.ts    # AVIF HDR gainmap decoder\n│   ├── RAWPreviewDecoder.ts     # RAW preview extraction\n│   ├── MXFDemuxer.ts            # MXF container demuxer\n│   ├── RVEDLParser.ts           # RV EDL format parser\n│   └── MultiViewEXR.ts          # Multi-view EXR support\n├── nodes/\n│   ├── base/           # IPNode, NodeFactory with @RegisterNode decorator\n│   ├── sources/        # FileSourceNode, VideoSourceNode, SequenceSourceNode\n│   └── groups/         # SequenceGroup, StackGroup, SwitchGroup, LayoutGroup, FolderGroup\n├── render/\n│   ├── Renderer.ts              # WebGL2 renderer and shader pipeline\n│   ├── RendererBackend.ts       # Renderer abstraction (WebGL2/WebGPU)\n│   ├── WebGPUBackend.ts         # WebGPU HDR renderer\n│   ├── WebGPUHDRBlit.ts         # WebGPU HDR output\n│   ├── Canvas2DHDRBlit.ts       # Canvas 2D API HDR fallback\n│   ├── SphericalProjection.ts   # 360-degree panorama projection\n│   ├── TextureCacheManager.ts   # LRU texture cache\n│   ├── RenderWorkerProxy.ts     # Off-main-thread rendering\n│   ├── LuminanceAnalyzer.ts     # Scene luminance analysis\n│   └── webgpu/                  # WebGPU backend modules (Phase 1: passthrough rendering)\n│       ├── WebGPUTypes.ts       # WebGPU type definitions\n│       ├── WebGPUDevice.ts      # GPU device management\n│       ├── WebGPURenderPipeline.ts # Render pipeline setup\n│       └── shaders/\n│           └── passthrough.wgsl # WGSL passthrough shader\n├── color/\n│   ├── CDL.ts                   # ASC CDL processing\n│   ├── ColorCurves.ts           # Color curves\n│   ├── HueRotation.ts           # Hue rotation\n│   ├── LogCurves.ts             # Camera log curve presets\n│   ├── LUTLoader.ts             # 3D/1D LUT loading\n│   ├── LUTPresets.ts            # Film emulation preset library\n│   ├── LUTFormats.ts            # Multi-format LUT parsing\n│   ├── TetrahedralInterp.ts     # Tetrahedral interpolation for 3D LUTs\n│   ├── WebGLLUT.ts              # GPU LUT application\n│   ├── DisplayCapabilities.ts   # HDR/P3/WebGPU detection\n│   ├── DisplayTransfer.ts       # Display transfer functions\n│   ├── TransferFunctions.ts     # PQ, HLG, sRGB transfer functions\n│   ├── HDRPixelData.ts          # HDR-aware pixel value access\n│   ├── ICCProfile.ts            # ICC profile support\n│   ├── AutoExposureController.ts # Auto exposure\n│   ├── SceneAnalysis.ts         # Scene analysis\n│   ├── TemporalSmoother.ts      # Temporal smoothing\n│   ├── Inversion.ts             # Color inversion\n│   ├── OCIO*.ts                 # OCIO config, transforms, processor, presets\n│   ├── pipeline/                # LUT pipeline, stages, GPU chain\n│   └── wasm/                    # OCIO WASM bridge, shader translator, virtual FS\n├── scopes/\n│   └── WebGLScopes.ts           # GPU-accelerated waveform, vectorscope, histogram, parade\n├── stereo/\n│   ├── StereoRenderer.ts        # Stereo display modes\n│   ├── StereoEyeTransform.ts    # Per-eye transforms\n│   ├── StereoAlignOverlay.ts    # Stereo alignment aids\n│   ├── ConvergenceMeasure.ts    # Convergence measurement\n│   └── FloatingWindowDetector.ts # Floating window detection\n├── paint/\n│   ├── PaintEngine.ts           # Freehand drawing engine\n│   ├── PaintRenderer.ts         # WebGL annotation rendering\n│   └── AdvancedPaintTools.ts    # Shapes, text, arrows, spotlight\n├── filters/\n│   ├── NoiseReduction.ts        # Bilateral filter (CPU)\n│   ├── WebGLNoiseReduction.ts   # Bilateral filter (GPU)\n│   ├── WebGLSharpen.ts          # GPU sharpen\n│   ├── Deinterlace.ts           # Deinterlacing\n│   ├── FilmEmulation.ts         # Film stock emulation with grain\n│   └── StabilizeMotion.ts       # 2D motion stabilization\n├── effects/\n│   ├── EffectRegistry.ts        # Central effect registry\n│   ├── ImageEffect.ts           # Effect interface\n│   └── adapters/                # Effect adapters (CDL, inversion, hue, tone mapping, etc.)\n├── export/\n│   ├── VideoExporter.ts         # WebCodecs video encoder\n│   ├── MP4Muxer.ts              # ISO BMFF MP4 muxer\n│   ├── EDLWriter.ts             # CMX3600 EDL writer\n│   ├── SlateRenderer.ts         # Slate/leader frame generator\n│   └── ReportExporter.ts        # Dailies report exporter (CSV/HTML)\n├── network/\n│   ├── WebSocketClient.ts       # WebSocket sync client\n│   ├── WebRTCURLSignaling.ts    # URL-based WebRTC signaling\n│   ├── NetworkSyncManager.ts    # Sync orchestrator\n│   ├── SyncStateManager.ts      # Sync state tracking\n│   ├── PinEncryption.ts         # PIN-based message encryption\n│   └── MessageProtocol.ts       # Typed message protocol\n├── plugin/\n│   ├── PluginEventBus.ts        # Plugin event subscriptions\n│   ├── PluginSettingsStore.ts   # Plugin settings persistence\n│   └── dev/\n│       └── HotReloadManager.ts  # Plugin hot-reload\n├── integrations/\n│   ├── DCCBridge.ts             # Maya/Nuke/Houdini WebSocket bridge\n│   └── ShotGridBridge.ts        # ShotGrid REST API integration\n├── transform/\n│   ├── LensDistortion.ts        # Barrel/pincushion correction\n│   └── PerspectiveCorrection.ts # Four-point perspective transform\n├── composite/                   # Blend modes\n├── audio/\n│   ├── AudioPlaybackManager.ts  # Web Audio API with fallbacks\n│   └── WaveformRenderer.ts      # Waveform extraction and rendering\n├── ui/\n│   ├── components/              # All UI panels, controls, overlays, and editors\n│   └── shared/                  # Button, Modal, Panel utilities\n├── utils/                       # EventEmitter, FrameExporter, SequenceLoader, HiDPICanvas, etc.\n├── workers/\n│   └── effectProcessor.worker.ts # Background effect processing\n└── config/                      # Image size limits, playback, render, timing, UI config\n```\n\n### Node Graph\n\nThe application uses a directed acyclic graph (DAG) for media processing:\n\n```\n[Source Nodes] -\u003e [Group Nodes] -\u003e [Effect Nodes] -\u003e [Output]\n     |                |               |\nFileSource      SequenceGroup     CDL, Tone Mapping\nVideoSource     StackGroup        Hue Rotation, etc.\nSequenceSource  SwitchGroup\n                LayoutGroup\n                FolderGroup\n```\n\nNodes are registered via decorators:\n```typescript\n@RegisterNode('RVFileSource')\nexport class FileSourceNode extends BaseSourceNode { ... }\n```\n\n### GTO/RV Session Loading\n\nRV session files are parsed using `gto-js` and reconstructed into the node graph, restoring key session settings such as playback ranges, channel selection, scopes, and paint effects. Exporting `.rv`/`.gto` sessions currently preserves playback and annotation data (not the full media graph), and re-exports loaded sessions with UI changes applied.\n\n```typescript\n// Session loads GTO and builds graph\nawait session.loadFromGTO(fileData);\n\n// Access the reconstructed graph\nconst graph = session.graph;\nconst rootNode = session.graphParseResult?.rootNode;\n```\n\n---\n\n## Development\n\n```bash\n# Type check\npnpm typecheck\n\n# Lint and format\npnpm lint                # ESLint check\npnpm format:check        # Prettier check\npnpm format              # Prettier fix\n\n# Run unit tests (20,000+ tests)\npnpm test\n\n# Run e2e tests (requires dev server running)\npnpm dev  # in one terminal\nnpx playwright test  # in another terminal\n\n# Build for production\npnpm build\n\n# Preview production build\npnpm preview\n```\n\n### Test Coverage\n\nThe codebase includes comprehensive test coverage with **20,000+ unit tests** across 500+ test files and **103 e2e test suites**.\n\n---\n\n## Tech Stack\n\n- **TypeScript** -- type-safe development\n- **Vite** -- fast bundler with HMR\n- **Vitest** -- unit testing framework\n- **Playwright** -- end-to-end testing\n- **WebGL2** -- GPU-accelerated rendering (tone mapping, LUT processing, color transforms)\n- **WebGPU** -- experimental backend alongside WebGL2 (rgba16float, extended tone mapping)\n- **WebAssembly** -- high-performance JPEG XL, JPEG 2000, HEIC, and OCIO decoding\n- **WebCodecs API** -- frame-accurate video decoding via [mediabunny](https://github.com/nickarora/mediabunny) and video encoding for export\n- **Web Audio API** -- audio playback, waveform generation, volume control, and pitch correction\n- **WebRTC** -- peer-to-peer connections for collaborative review\n- **BroadcastChannel API** -- same-origin cross-window communication for external presentation\n- **Fullscreen API** -- native fullscreen and presentation modes\n- **IndexedDB** -- persistent storage for snapshots, auto-save, and session recovery\n- **gto-js** -- RV/GTO file parsing\n- **@jsquash/jxl** -- JPEG XL WebAssembly decoder (libjxl)\n- **libheif-js** -- HEIC/HEIF WebAssembly decoder (libheif)\n- **gl-matrix** -- matrix/vector math\n- **ESLint v9** (flat config) + **Prettier** -- code quality and formatting\n- **simple-git-hooks** + **lint-staged** -- pre-commit hooks\n- **GitHub Actions CI** -- lint, format, and typecheck on PRs (`.github/workflows/lint.yml`)\n\n## Browser Support\n\nRequires WebGL2 support:\n- Chrome 56+\n- Firefox 51+\n- Safari 15+\n- Edge 79+\n\nHi-DPI/Retina displays are fully supported with automatic detection of `devicePixelRatio`. All canvas-based UI components (scopes, color wheels, curve editor, overlays) render at native resolution for crisp display on 2x, 3x, and fractional DPR screens.\n\n## License\n\nMIT\n\n## Related Projects\n\n- [OpenRV](https://github.com/AcademySoftwareFoundation/OpenRV) -- Original C++ application\n- [gto-js](https://github.com/lifeart/gto-js) -- GTO file format parser for JavaScript\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flifeart%2Fopenrv-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flifeart%2Fopenrv-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flifeart%2Fopenrv-web/lists"}