Viewer-4dv NPM

`<viewer-4dv>`

Easely embed 4ds volumetric videos on your website with the <viewer-4dv> HTML tag. More infos, examples and 4ds samples on creators.4dviews.com (free registration).

Use

Setup your HTML file as follow:

    ...
    
    <head>

+       <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

+       <script type="module" src="https://unpkg.com/viewer-4dv/viewer-4dv.min.js" defer></script>

+       <!-- Add custom style to the video container -->
+       <style>
+           .video-placeholder {
+               width: 75vw;
+               height: 75vh;
+           }
+       </style>

    </head>

    <body>
    
    ...

+       <div class='video-placeholder'>
+           <viewer-4dv [options] 
+           src-mobile="your-mobile-optimized.4ds"
+           src-desktop="your-desktop-optimized.4ds">
+           </viewer-4dv>
+       </div>

    ...

    </body>

viewport-fit=cover viewport option enables the viewer to fit all mobile screen when fullcreen is on.

Avalaible options

stats displays statistics on the viewer (framerate, faces, vertices, displayed frame number, sequence length)

loop replay the video endlessly

grid displays gridhelper on the ground of the scene

camera-pos="[x,y,z]" set initial camera position (default is [0, 2, 5])

camera-target="[x,y,z]" set camera target position (default is [0, 1, 0])

min-distance="1.5" minimum distance to target position (default is 0)

max-distance="20" maximum distance to target position (default is Infinity)

bg-color="#1a1e2f" background color (hex) of the scene (default is #1a1e2f)

poster="path/to/your/waiter/poster.webp" filepath to an image displayed on the waiter (default is bg-color).

no-interaction-prompt to disable the suggestive help for interaction controls with the scene.

Note that webp is one of the lightest image format largely supported on the web, use it for better performances.

Compatibility

This volumetric video player is compatible with most existing browsers. For now, it has been tested on Chrome (desktop, Android, iOS), Firefox desktop and Safari iOS.

AR/VR modes are available on the latest Android devices and headsets (e.g. Meta Quest 2). iOS devices need the WebXR Viewer app downloadable from the App Store.

Sound level slider is disabled (removed) for more space on mobile.

Requirements and advices

Only 4ds files are supported by the <viewer-4dv> webplayer
volumetric videos could be very large files. Optimize your sequence weight on 4Dfx and/or use 720p textures when generating your source files to be compatible with the most users' bandwiths
prefer short sequences (less than 1 min)
always specify both desktop AND mobile optimized 4ds source files (use 4Dcoder to generate them)
use a well-sized server (large bandwidth) to host your 4ds files

Average data rate needed by quality/framerate for a one actor captured 4ds file:

1440 desktop (DXT) @30fps: ~15 MB/s
1440 mobile (ASTC) @30fps: ~11 MB/s
720 desktop (DXT) @30fps: ~5 MB/s
720 mobile (ASTC) @30fps: ~3,4 MB/s

Limitations

Choppy or/and slow down FPS when using an undersized connection (server or client). Optic fiber and wifi 5+ are recommended for end-users
fullscreen mode is not available on iOS (Apple's limitation)