npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

viewer-4dv

v1.8.0

Published

viewer-4dv is a volumetric video webplayer for 4ds files. See more on 4dviews.com.

Downloads

667

Readme

<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)

License

See End User License Agreement in EULA.pdf.