rayzee 4.8.9 → 4.8.11

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/README.md CHANGED
@@ -62,6 +62,11 @@ npm install rayzee three
62
62
  // Tweak settings
63
63
  engine.set('bounces', 8);
64
64
  engine.set('exposure', 1.2);
65
+
66
+ // Use namespaced sub-APIs
67
+ engine.camera.switch(0);
68
+ engine.lights.add('PointLight');
69
+ engine.output.screenshot();
65
70
  ```
66
71
 
67
72
  4. **Run**
@@ -111,7 +116,7 @@ A single HTML file — no Node.js, no build step. Uses [ES module import maps](h
111
116
  window.addEventListener('resize', () => {
112
117
  canvas.width = window.innerWidth;
113
118
  canvas.height = window.innerHeight;
114
- engine.onResize();
119
+ engine.output.resize();
115
120
  });
116
121
  </script>
117
122
  </body>
@@ -163,7 +168,7 @@ No special build config is needed — models and HDRs are loaded via URL at runt
163
168
 
164
169
  ### PathTracerApp
165
170
 
166
- The main engine class. Extends Three.js `EventDispatcher`.
171
+ The main engine class. Extends Three.js `EventDispatcher`. Related functionality is grouped into **namespaced sub-APIs** accessed via `engine.camera`, `engine.lights`, etc.
167
172
 
168
173
  ```js
169
174
  const engine = new PathTracerApp(canvas, options?)
@@ -184,9 +189,7 @@ engine.pause() // Pause rendering
184
189
  engine.resume() // Resume rendering
185
190
  engine.reset() // Reset accumulation (restart from sample 0)
186
191
  engine.dispose() // Clean up all resources
187
- engine.wake() // Resume render loop if idle (called automatically on interaction)
188
- engine.isComplete() // Check if rendering has converged
189
- engine.getFrameCount() // Get the current accumulated frame count
192
+ engine.wake() // Resume render loop if idle
190
193
  ```
191
194
 
192
195
  #### Loading Assets
@@ -243,102 +246,143 @@ engine.configureForMode('preview') // Real-time navigation (3 bounces)
243
246
  engine.configureForMode('results') // Paused rendering for image viewing
244
247
  ```
245
248
 
246
- #### Camera
249
+ ---
250
+
251
+ ### engine.camera
252
+
253
+ Camera switching, auto-focus, DOF, and direct Three.js access.
247
254
 
248
255
  ```js
249
- engine.switchCamera(index) // Switch between scene cameras
250
- engine.getCameraNames() // List available cameras
251
- engine.toggleFocusMode() // Enable click-to-focus DOF
252
- engine.focusOnPoint(center) // Focus orbit camera on a world-space point
253
- engine.camera // Access the active PerspectiveCamera
254
- engine.controls // Access OrbitControls
256
+ engine.camera.active // The active PerspectiveCamera
257
+ engine.camera.controls // The OrbitControls instance
258
+ engine.camera.switch(index) // Switch between scene cameras
259
+ engine.camera.getNames() // List available cameras
260
+ engine.camera.focusOn(center) // Focus orbit camera on a world-space point
261
+ engine.camera.setAutoFocusMode(mode) // 'auto' | 'manual'
262
+ engine.camera.setAFScreenPoint(x, y) // Set normalized AF screen point (0-1)
255
263
  ```
256
264
 
257
- #### Lights
265
+ ### engine.lights
266
+
267
+ Light CRUD, visual helpers, and GPU sync.
258
268
 
259
269
  ```js
260
- engine.addLight('point') // Add a light (point, spot, directional, area)
261
- engine.removeLight(uuid) // Remove by UUID
262
- engine.clearLights() // Remove all lights
263
- engine.getLights() // Get all lights
264
- engine.updateLights() // Re-upload light data to GPU
265
- engine.setShowLightHelper(true) // Toggle visual helpers
270
+ engine.lights.add('PointLight') // Add a light (PointLight, SpotLight, DirectionalLight, RectAreaLight)
271
+ engine.lights.remove(uuid) // Remove by UUID
272
+ engine.lights.clear() // Remove all lights
273
+ engine.lights.getAll() // Get all light descriptors
274
+ engine.lights.sync() // Re-upload light data to GPU
275
+ engine.lights.showHelpers(true) // Toggle visual helpers
266
276
  ```
267
277
 
268
- #### Object Selection & Transform
278
+ ### engine.animation
279
+
280
+ GLTF animation playback controls.
269
281
 
270
282
  ```js
271
- engine.toggleSelectMode() // Toggle object selection mode
272
- engine.selectObject(object) // Programmatically select an object
273
- engine.setTransformMode('translate') // Set gizmo mode: 'translate' | 'rotate' | 'scale'
274
- engine.setTransformSpace('world') // Set gizmo space: 'world' | 'local'
275
- engine.transformManager // Access the underlying TransformManager
283
+ engine.animation.play(clipIndex) // Play an animation clip
284
+ engine.animation.pause() // Pause playback
285
+ engine.animation.resume() // Resume playback
286
+ engine.animation.stop() // Stop and reset
287
+ engine.animation.setSpeed(2) // Set playback speed multiplier
288
+ engine.animation.setLoop(true) // Enable/disable looping
289
+ engine.animation.clips // Get available animation clips
276
290
  ```
277
291
 
278
- #### Animation
292
+ ### engine.materials
293
+
294
+ Material property updates and texture transforms.
279
295
 
280
296
  ```js
281
- engine.playAnimation(clipIndex) // Play a GLTF animation clip
282
- engine.pauseAnimation() // Pause playback
283
- engine.resumeAnimation() // Resume playback
284
- engine.stopAnimationPlayback() // Stop and reset
285
- engine.setAnimationSpeed(speed) // Set playback speed multiplier
286
- engine.setAnimationLoop(loop) // Enable/disable looping
287
- engine.animationClips // Get available animation clips
297
+ engine.materials.setProperty(index, property, value) // Update a material property
298
+ engine.materials.setTextureTransform(index, name, transform)
299
+ engine.materials.refresh() // Re-upload all material data to GPU
300
+ engine.materials.replace(index, mat) // Replace a material entirely
301
+ await engine.materials.rebuild(scene) // Full rebuild (after texture changes)
288
302
  ```
289
303
 
290
- #### Denoising
304
+ ### engine.environment
305
+
306
+ Environment maps, sky modes, and procedural generation.
291
307
 
292
308
  ```js
293
- engine.setDenoiserStrategy('asvgf') // Real-time temporal denoiser
294
- engine.setDenoiserStrategy('oidn') // Intel OIDN (higher quality, final renders)
295
- engine.setDenoiserStrategy('edgeaware') // Edge-preserving temporal filter (default)
296
- engine.setDenoiserStrategy('none') // No denoising
297
- engine.setASVGFEnabled(true, 'medium') // ASVGF with quality preset (low/medium/high)
298
- engine.applyASVGFPreset('high') // Apply an ASVGF quality preset
299
- engine.setAutoExposureEnabled(true) // Toggle auto-exposure
300
- engine.setAdaptiveSamplingEnabled(true) // Toggle adaptive sampling
309
+ engine.environment.params // Current environment parameters
310
+ engine.environment.texture // The loaded environment texture
311
+ await engine.environment.load(url) // Load HDR/EXR environment map
312
+ await engine.environment.setTexture(tex) // Set a custom environment texture
313
+ await engine.environment.setMode(mode) // 'hdri' | 'procedural' | 'gradient' | 'color'
314
+ await engine.environment.generateProcedural() // Preetham-model sky
315
+ await engine.environment.generateGradient() // Gradient sky
316
+ await engine.environment.generateSolid() // Solid color sky
317
+ engine.environment.markDirty() // Flag environment for GPU re-upload
301
318
  ```
302
319
 
303
- #### Environment
320
+ ### engine.denoising
321
+
322
+ Denoiser strategy, ASVGF, OIDN, upscaler, adaptive sampling, and auto-exposure.
304
323
 
305
324
  ```js
306
- engine.getEnvParams() // Get current environment parameters
307
- engine.getEnvironmentTexture() // Get the loaded environment texture
308
- engine.setEnvironmentMap(texture) // Set a custom environment texture
309
- engine.setEnvironmentMode('procedural') // Switch sky mode
310
- engine.generateProceduralSkyTexture() // Generate Preetham-model sky
311
- engine.generateGradientTexture() // Generate gradient sky
312
- engine.generateSolidColorTexture() // Generate solid color sky
313
- engine.markEnvironmentNeedsUpdate() // Flag environment for GPU re-upload
325
+ // Strategy
326
+ engine.denoising.setStrategy('asvgf', 'medium') // 'none' | 'asvgf' | 'ssrc' | 'edgeaware'
327
+ engine.denoising.setASVGFEnabled(true, 'medium')
328
+ engine.denoising.applyASVGFPreset('high') // 'low' | 'medium' | 'high'
329
+ engine.denoising.setAutoExposure(true)
330
+ engine.denoising.setAdaptiveSampling(true)
331
+
332
+ // Fine-grained parameters
333
+ engine.denoising.setASVGFParams({ temporalAlpha: 0.1, phiColor: 10 })
334
+ engine.denoising.setSSRCParams({ temporalAlpha: 0.1, spatialRadius: 3 })
335
+ engine.denoising.setEdgeAwareParams({ pixelEdgeSharpness: 1.0 })
336
+ engine.denoising.setAutoExposureParams({ keyValue: 0.18 })
337
+ engine.denoising.setAdaptiveSamplingParams({ varianceThreshold: 0.01 })
338
+
339
+ // OIDN & Upscaler
340
+ engine.denoising.setOIDNEnabled(true)
341
+ engine.denoising.setOIDNQuality('high')
342
+ engine.denoising.setUpscalerEnabled(true)
343
+ engine.denoising.setUpscalerScaleFactor(2)
344
+ engine.denoising.setUpscalerQuality('high')
314
345
  ```
315
346
 
316
- #### Canvas & Resolution
347
+ ### engine.selection
348
+
349
+ Object picking and interaction modes.
317
350
 
318
351
  ```js
319
- engine.setCanvasSize(1920, 1080) // Set explicit canvas dimensions
320
- engine.onResize() // Trigger manual resize recalculation
321
- engine.getOutputCanvas() // Get the canvas with the final rendered image
322
- engine.takeScreenshot() // Download a PNG screenshot
352
+ engine.selection.select(object) // Programmatically select an object
353
+ engine.selection.deselect() // Deselect the current object
354
+ engine.selection.toggleMode() // Toggle object selection mode
355
+ engine.selection.disableMode() // Disable selection mode
356
+ engine.selection.toggleFocusMode() // Toggle click-to-focus DOF
357
+ engine.selection.on(type, handler) // Subscribe to interaction events
323
358
  ```
324
359
 
325
- #### Materials
360
+ ### engine.transform
361
+
362
+ Transform gizmo controls.
326
363
 
327
364
  ```js
328
- engine.updateMaterialProperty(index, property, value) // Update a material property
329
- engine.updateTextureTransform(index, textureName, transform)
330
- engine.refreshMaterial() // Re-upload all material data to GPU
331
- engine.updateMaterial(index, material) // Replace a material entirely
332
- await engine.rebuildMaterials(scene) // Full material rebuild (texture changes)
365
+ engine.transform.setMode('translate') // 'translate' | 'rotate' | 'scale'
366
+ engine.transform.setSpace('world') // 'world' | 'local'
367
+ engine.transform.manager // Access the underlying TransformManager
333
368
  ```
334
369
 
335
- #### Scene Info
370
+ ### engine.output
371
+
372
+ Canvas output, screenshots, and scene statistics.
336
373
 
337
374
  ```js
338
- engine.getSceneStatistics() // Triangle count, mesh count, etc.
339
- engine.stages // Named access to all pipeline stages
375
+ engine.output.getCanvas() // Get the canvas with the final rendered image
376
+ engine.output.screenshot() // Download a PNG screenshot
377
+ engine.output.getStatistics() // Triangle count, mesh count, etc.
378
+ engine.output.setSize(1920, 1080) // Set explicit canvas dimensions
379
+ engine.output.resize() // Trigger manual resize recalculation
380
+ engine.output.isComplete() // Check if rendering has converged
381
+ engine.output.getFrameCount() // Get the current accumulated frame count
340
382
  ```
341
383
 
384
+ ---
385
+
342
386
  ### Events
343
387
 
344
388
  Subscribe to engine lifecycle events via `addEventListener`:
@@ -349,10 +393,6 @@ import { EngineEvents } from 'rayzee';
349
393
  engine.addEventListener(EngineEvents.RENDER_COMPLETE, (e) => {
350
394
  console.log('Render complete');
351
395
  });
352
-
353
- engine.addEventListener(EngineEvents.STATS_UPDATE, (e) => {
354
- console.log('Stats:', e);
355
- });
356
396
  ```
357
397
 
358
398
  | Event | Fired when |
@@ -401,6 +441,19 @@ class MyCustomStage extends RenderStage {
401
441
  // Core
402
442
  import { PathTracerApp, EngineEvents } from 'rayzee';
403
443
 
444
+ // Sub-API facades (also accessible as engine.camera, engine.lights, etc.)
445
+ import {
446
+ CameraAPI,
447
+ LightsAPI,
448
+ AnimationAPI,
449
+ MaterialsAPI,
450
+ EnvironmentAPI,
451
+ DenoisingAPI,
452
+ SelectionAPI,
453
+ TransformAPI,
454
+ OutputAPI,
455
+ } from 'rayzee';
456
+
404
457
  // Configuration & presets
405
458
  import {
406
459
  ENGINE_DEFAULTS,
@@ -419,7 +472,7 @@ import {
419
472
  PREVIEW_RENDER_CONFIG,
420
473
  } from 'rayzee';
421
474
 
422
- // Advanced: managers
475
+ // Advanced: managers & pipeline
423
476
  import {
424
477
  RenderSettings,
425
478
  CameraManager,
@@ -429,10 +482,6 @@ import {
429
482
  AnimationManager,
430
483
  TransformManager,
431
484
  VideoRenderManager,
432
- } from 'rayzee';
433
-
434
- // Advanced: pipeline infrastructure
435
- import {
436
485
  RenderPipeline,
437
486
  RenderStage,
438
487
  StageExecutionMode,
@@ -452,6 +501,43 @@ import {
452
501
  | `oidn-web` | Intel Open Image Denoise for high-quality final renders | Yes — `npm install oidn-web` |
453
502
  | `onnxruntime-web` | AI-powered upscaling | No — loaded from CDN at runtime |
454
503
 
504
+ ### Enabling OIDN (Intel Open Image Denoise)
505
+
506
+ OIDN provides high-quality AI denoising for final renders. It runs automatically after the render converges (reaches `maxSamples`).
507
+
508
+ 1. **Install the package**
509
+
510
+ ```bash
511
+ npm install oidn-web
512
+ ```
513
+
514
+ 2. **Enable in your app**
515
+
516
+ ```js
517
+ // After engine.init() completes
518
+ engine.denoising.setOIDNEnabled(true);
519
+ engine.denoising.setOIDNQuality('balance'); // 'fast' | 'balance' | 'high'
520
+ ```
521
+
522
+ 3. **Listen for progress** (optional)
523
+
524
+ ```js
525
+ engine.addEventListener(EngineEvents.DENOISING_START, () => {
526
+ console.log('Denoising started');
527
+ });
528
+ engine.addEventListener(EngineEvents.DENOISING_END, () => {
529
+ console.log('Denoising complete');
530
+ });
531
+ ```
532
+
533
+ | Quality | Model size | Speed | Best for |
534
+ |---|---|---|---|
535
+ | `'fast'` | ~20 MB | Fastest | Quick previews |
536
+ | `'balance'` | ~50 MB | Moderate | General use (default) |
537
+ | `'high'` | ~100 MB | Slowest | Final quality renders |
538
+
539
+ > **Note:** The neural network model is downloaded on first use. Subsequent runs use the browser cache. OIDN also works with `configureForMode('final-render')`, which enables it automatically alongside high-quality render settings.
540
+
455
541
  ## Troubleshooting
456
542
 
457
543
  **Black screen / "WebGPU not supported"**