@lumiscaphe/viewer 4.2.2 → 4.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -0
- package/dist/lib/index.cjs +4 -6
- package/dist/lib/index.d.ts +48 -52
- package/dist/lib/index.js +1688 -1778
- package/package.json +16 -9
- package/CLAUDE.md +0 -174
package/package.json
CHANGED
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lumiscaphe/viewer",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.3.1",
|
|
4
4
|
"description": "Lumiscaphe 3D Viewer",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/lib/index.cjs",
|
|
7
7
|
"module": "dist/lib/index.js",
|
|
8
8
|
"types": "dist/lib/index.d.ts",
|
|
9
|
+
"files": [
|
|
10
|
+
"dist/lib",
|
|
11
|
+
"CHANGELOG.md"
|
|
12
|
+
],
|
|
9
13
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
10
14
|
"scripts": {
|
|
11
15
|
"dev": "vite --config ./vite.config.sample.ts",
|
|
@@ -13,7 +17,9 @@
|
|
|
13
17
|
"build:lib": "vite build --config ./vite.config.lib.ts",
|
|
14
18
|
"build:sample": "vite build --config ./vite.config.sample.ts",
|
|
15
19
|
"lint": "eslint src/**/*.ts",
|
|
16
|
-
"
|
|
20
|
+
"typecheck": "tsc --noEmit",
|
|
21
|
+
"prepare": "husky",
|
|
22
|
+
"prepublishOnly": "npm run build:lib"
|
|
17
23
|
},
|
|
18
24
|
"dependencies": {
|
|
19
25
|
"debounce-promise": "~3.1.0",
|
|
@@ -21,18 +27,19 @@
|
|
|
21
27
|
"twgl.js": "~7.0.0"
|
|
22
28
|
},
|
|
23
29
|
"devDependencies": {
|
|
30
|
+
"@eslint/js": "~10.0.0",
|
|
31
|
+
"@microsoft/api-extractor": "~7.59.0",
|
|
24
32
|
"@types/debounce-promise": "~3.1.0",
|
|
25
|
-
"@types/node": "~24.
|
|
33
|
+
"@types/node": "~24.13.0",
|
|
26
34
|
"@types/regression": "~2.0.0",
|
|
27
|
-
"eslint": "~
|
|
35
|
+
"eslint": "~10.10.0",
|
|
28
36
|
"husky": "~9.1.0",
|
|
29
37
|
"prettier": "~3.8.0",
|
|
30
38
|
"typescript": "~5.9.0",
|
|
31
|
-
"typescript-eslint": "~8.
|
|
32
|
-
"vite": "~
|
|
33
|
-
"vite-plugin-css-injected-by-js": "~
|
|
34
|
-
"vite-plugin-dts": "~
|
|
35
|
-
"vite-plugin-eslint": "~1.8.0",
|
|
39
|
+
"typescript-eslint": "~8.70.0",
|
|
40
|
+
"vite": "~8.3.0",
|
|
41
|
+
"vite-plugin-css-injected-by-js": "~5.0.0",
|
|
42
|
+
"vite-plugin-dts": "~5.1.0",
|
|
36
43
|
"vite-plugin-glsl": "~1.6.0"
|
|
37
44
|
}
|
|
38
45
|
}
|
package/CLAUDE.md
DELETED
|
@@ -1,174 +0,0 @@
|
|
|
1
|
-
# CLAUDE.md
|
|
2
|
-
|
|
3
|
-
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
|
4
|
-
|
|
5
|
-
## Project Overview
|
|
6
|
-
|
|
7
|
-
Lumiscaphe 3D Viewer (@lumiscaphe/viewer) is a TypeScript-based WebGL viewer library for rendering interactive 3D products from WebRender server. It supports multiple viewing modes (static images, VRCube panoramas, VRObject rotation) and integrates with Lumiscaphe's WebRender API (v1 and v2).
|
|
8
|
-
|
|
9
|
-
## Common Commands
|
|
10
|
-
|
|
11
|
-
### Development
|
|
12
|
-
```bash
|
|
13
|
-
npm run dev # Start development server with sample viewer
|
|
14
|
-
npm run preview # Preview built sample application
|
|
15
|
-
```
|
|
16
|
-
|
|
17
|
-
### Building
|
|
18
|
-
```bash
|
|
19
|
-
npm run build:lib # Build library distribution (ES + CJS)
|
|
20
|
-
npm run build:sample # Build sample application
|
|
21
|
-
```
|
|
22
|
-
|
|
23
|
-
### Linting
|
|
24
|
-
```bash
|
|
25
|
-
npm run lint # Run ESLint on all TypeScript files in src/
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
### Pre-commit Hook
|
|
29
|
-
The repository uses Husky with a pre-commit hook that runs `npm run lint` automatically before commits.
|
|
30
|
-
|
|
31
|
-
## Architecture
|
|
32
|
-
|
|
33
|
-
### Core Components
|
|
34
|
-
|
|
35
|
-
**Viewer (src/lib/Viewer.ts)**
|
|
36
|
-
- Main entry point and orchestrator
|
|
37
|
-
- Manages canvas instances (Canvas2D, Canvas3D, Video)
|
|
38
|
-
- Handles scene loading, view changes, and user interactions
|
|
39
|
-
- Delegates rendering to Widget implementations based on view mode
|
|
40
|
-
- Uses debouncing for resize and loading operations
|
|
41
|
-
|
|
42
|
-
**Widget System**
|
|
43
|
-
- `Widget` interface defines the contract for all view modes
|
|
44
|
-
- Four concrete implementations:
|
|
45
|
-
- `WidgetImage`: Static image rendering using Canvas2D
|
|
46
|
-
- `WidgetVideo`: Video playback for animations
|
|
47
|
-
- `WidgetVRCube`: Interactive WebGL cube map viewer with camera controls
|
|
48
|
-
- `WidgetVRObject`: Image sequence viewer for product rotation
|
|
49
|
-
- Each widget handles its own interaction model and rendering
|
|
50
|
-
|
|
51
|
-
**Loader (src/lib/Loader.ts)**
|
|
52
|
-
- Abstracts WebRender API communication
|
|
53
|
-
- Supports three API modes: 'static', 'v1', 'v2'
|
|
54
|
-
- Manages progressive loading with priority-based image loading (center-out for VRObject)
|
|
55
|
-
- Handles conversion between v1 camera paths and v2 camera IDs
|
|
56
|
-
- Caches database XML for camera lookups
|
|
57
|
-
|
|
58
|
-
**WebRender Integrations**
|
|
59
|
-
- `WebRenderStatic`: Direct image URLs
|
|
60
|
-
- `WebRenderV1`: Legacy API using camera paths (e.g., "EXTER/1")
|
|
61
|
-
- `WebRenderV2`: Modern REST API using GUIDs and structured requests
|
|
62
|
-
- API requests use POST with JSON body for snapshots, hotspots, and picking
|
|
63
|
-
|
|
64
|
-
### Canvas Architecture
|
|
65
|
-
|
|
66
|
-
**Canvas3D (src/lib/Canvas3D.ts)**
|
|
67
|
-
- WebGL rendering context for VRCube mode
|
|
68
|
-
- Uses twgl.js for WebGL utilities
|
|
69
|
-
- Handles context loss detection
|
|
70
|
-
- Implements preserveDrawingBuffer for snapshot capability
|
|
71
|
-
|
|
72
|
-
**Canvas2D (src/lib/Canvas2D.ts)**
|
|
73
|
-
- 2D rendering for images and VRObject sequences
|
|
74
|
-
- Supports three fit modes: 'cover', 'contain', 'fill'
|
|
75
|
-
|
|
76
|
-
**WidgetVRCube WebGL Pipeline**
|
|
77
|
-
- Uses custom GLSL shaders (WidgetVRCube.frag, WidgetVRCube.vert)
|
|
78
|
-
- Implements cube map texture rendering
|
|
79
|
-
- Features camera interaction with inertia
|
|
80
|
-
- Handles hotspot projection from cube faces to screen space
|
|
81
|
-
- Includes workaround for MacIntel Chrome OpenGL texture size limit (1812x1812)
|
|
82
|
-
|
|
83
|
-
### Scene and View Model
|
|
84
|
-
|
|
85
|
-
**Scene**
|
|
86
|
-
- Array of products with database GUID, configuration strings, and animations
|
|
87
|
-
- Supports decor and accessory products with transformation data
|
|
88
|
-
- Configuration format: slash-separated values (e.g., "Bin.Blue/Cabin.Yellow/Style.Design1")
|
|
89
|
-
|
|
90
|
-
**View**
|
|
91
|
-
- Defines rendering mode: 'image', 'video', 'vrcube', 'vrobject'
|
|
92
|
-
- Camera specification (v1: path string, v2: GUID or camera object with POV)
|
|
93
|
-
- Background modes: 'product', 'transparent', 'gradient'
|
|
94
|
-
- VRObject supports both animation-based and bookmark-set navigation
|
|
95
|
-
|
|
96
|
-
**Snapshot**
|
|
97
|
-
- Internal type combining Scene, View, Parameters, and Encoder
|
|
98
|
-
- Used for all WebRender API requests
|
|
99
|
-
|
|
100
|
-
### Interaction System
|
|
101
|
-
|
|
102
|
-
**InteractiveCamera/InteractivePosition**
|
|
103
|
-
- Implements mouse/touch drag with inertia physics
|
|
104
|
-
- VRCube uses spherical coordinates for camera rotation
|
|
105
|
-
- VRObject uses discrete position indices
|
|
106
|
-
- Debounced interaction callbacks prevent excessive API calls
|
|
107
|
-
|
|
108
|
-
**Hotspots**
|
|
109
|
-
- 3D position markers projected to 2D screen space
|
|
110
|
-
- Supports both tag-based (string) and position-based (Vector3D) definitions
|
|
111
|
-
- Visibility culling based on camera frustum
|
|
112
|
-
- Requires WebRender API v2
|
|
113
|
-
|
|
114
|
-
**Picking**
|
|
115
|
-
- Ray-casting for 3D point selection on product surface
|
|
116
|
-
- Returns point, normal, and material information
|
|
117
|
-
- VRCube implements custom cube face determination and UV mapping
|
|
118
|
-
|
|
119
|
-
## Key Implementation Details
|
|
120
|
-
|
|
121
|
-
### API Version Compatibility
|
|
122
|
-
- Loader automatically uses WebRenderV2 for hotspots and picking even when main API is v1
|
|
123
|
-
- Database caching prevents redundant XML fetches during v1-to-v2 camera path conversion
|
|
124
|
-
- Camera conversion logic in `Loader.convert()` handles both camera IDs and camera group IDs
|
|
125
|
-
|
|
126
|
-
### GLSL Shader Integration
|
|
127
|
-
- Vite plugin 'vite-plugin-glsl' processes .frag and .vert files
|
|
128
|
-
- Custom type declarations in src/lib/types/ for shader imports
|
|
129
|
-
- Shaders are imported as strings and compiled at runtime via twgl.createProgramInfo
|
|
130
|
-
|
|
131
|
-
### ESLint Configuration
|
|
132
|
-
- Uses flat config format (eslint.config.mjs)
|
|
133
|
-
- Enforces explicit function return types but allows expressions
|
|
134
|
-
- Disables @typescript-eslint/no-explicit-any (project uses `any` extensively)
|
|
135
|
-
- Disabled unused-vars checking
|
|
136
|
-
|
|
137
|
-
### Build Configuration
|
|
138
|
-
- Two separate Vite configs:
|
|
139
|
-
- `vite.config.lib.ts`: Library build (ES + CJS) with type declarations
|
|
140
|
-
- `vite.config.sample.ts`: Sample app for development/testing
|
|
141
|
-
- CSS injection via vite-plugin-css-injected-by-js (no separate CSS file)
|
|
142
|
-
- External dependencies: debounce-promise, regression, twgl.js
|
|
143
|
-
- Tree-shaking enabled with moduleSideEffects: false
|
|
144
|
-
|
|
145
|
-
### Resolution and Viewport
|
|
146
|
-
- Auto-resolution (`autores: true`) computes standard resolutions based on viewport
|
|
147
|
-
- `Viewport.getStandardResolution()` rounds to WebRender-friendly dimensions
|
|
148
|
-
- Super-sampling coefficient (1-4) for quality control
|
|
149
|
-
- Separate parameters for render resolution vs canvas display size
|
|
150
|
-
|
|
151
|
-
### Loading Strategy
|
|
152
|
-
- LoadingId pattern prevents race conditions when requests are cancelled
|
|
153
|
-
- Progressive image loading for VRObject starts from current position and spirals outward
|
|
154
|
-
- Video frame extraction uses canvas.toDataURL for animation sequences
|
|
155
|
-
- Debounced onLoadError prevents error spam during rapid view changes
|
|
156
|
-
|
|
157
|
-
## WebRender API Types
|
|
158
|
-
|
|
159
|
-
The `WRAPIv2` namespace (src/lib/WRAPIv2.ts) defines comprehensive TypeScript types for:
|
|
160
|
-
- Scene composition (Product, Scene)
|
|
161
|
-
- Rendering modes (ImageMode, VrCubeMode, VrObjectMode, AnimationMode)
|
|
162
|
-
- Requests (SnapshotRequest, HotspotRequest, PickRequest)
|
|
163
|
-
- Camera specifications (including POV and lens parameters)
|
|
164
|
-
- Encoder configurations (JPEG, PNG, WebP)
|
|
165
|
-
|
|
166
|
-
## Testing Notes
|
|
167
|
-
|
|
168
|
-
This project does not currently have automated tests. When adding features, manual testing should cover:
|
|
169
|
-
- All four view modes with representative scenes
|
|
170
|
-
- API version switching (static, v1, v2)
|
|
171
|
-
- Hotspot visibility and picking accuracy
|
|
172
|
-
- Cross-browser WebGL compatibility (especially Mac Chrome with OpenGL)
|
|
173
|
-
- Touch and mouse interactions with proper inertia
|
|
174
|
-
- Loading cancellation during rapid scene/view changes
|