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

@pmndrs/assets

v1.7.0

Published

📦 Base64 encoded CC0 assets

Downloads

15,832

Readme

Version Downloads Discord Shield

npm install @pmndrs/assets

Base64-packed javascript (default-)module exports that can be npm installed and imported. Assets are thereby self-hosted and safe from outages. All assets are resized, optimized and compressed, ready to be consumed on the web.

Index

Usage

React-three-fiber

In React you can use suspend from suspend-react, or anything else that can resolve a promise. The assets will be lazy loaded and cached for multiple re-use, they will not appear in the main bundle.

import { Environment, Gltf, Text, Text3D } from '@react-three/drei'
import { suspend } from 'suspend-react'

const bridge = import('@pmndrs/assets/hdri/bridge.exr')
const suzi = import('@pmndrs/assets/models/suzi.glb')
const inter = import('@pmndrs/assets/fonts/inter_regular.woff')
const interBold = import('@pmndrs/assets/fonts/inter_bold.json')

function Scene() {
  return (
    <Environment files={suspend(bridge).default} />
    <Gltf src={suspend(suzi).default} />
    <Text font={suspend(inter).default}>hello</Text>
    <Text3D font={suspend(interBold).default}>hello</Text3D>

Vanilla javascript

Dynamic import

[!NOTE]

This is the recommended way

If you import dynamically the asset will be bundle split, it will not be part of your main bundle.

const city = await import('@pmndrs/assets/hdri/city.exr')
new EXRLoader().load(city.default, (texture) => {
  // ...
})

Keep bundler limitations in mind when you use fully dynamic imports with template literals.

Import

[!IMPORTANT]

With care, if you know what you're doing, otherwise: go with dynamic import

You can of course also directly import the assets, but do it only in modules that already are split from the main bundle! It is not recommended for your entry points as it would considerally impede time-to-load.

import city from '@pmndrs/assets/hdri/city.exr'

new EXRLoader().load(city, (texture) => {
  // ...
})

Fonts

The Inter font family converted to _.json using facetype.js, and _.woff using fonttools with a subset of: https://github.com/pmndrs/assets/blob/e46e0fc9ebb5faff61d19dabdb5c2fdbabb75ad0/Makefile#L6 Each json is ~40kb, each woff ~20kb.

import { FontLoader, TextGeometry } from 'three-stdlib'

const interJson = await import('@pmndrs/assets/fonts/inter_regular.json')
const geometry = new TextGeometry('hello', { font: new FontLoader().parse(interJson.default) })
import { Text } from 'troika-three-text'

const interWoff = await import('@pmndrs/assets/fonts/inter_regular.woff')
const mesh = new Text()
mesh.font = interWoff.default
mesh.text = 'hello'
mesh.sync()

index: src/fonts

HDRIs

A selection of Polyhaven HDRIs, resized to 512x512 and converted to EXR with DWAB compression. They are about 7x smaller than the Polyhaven originals. Each exr is ~100-200kb.

import { EXRLoader } from 'three-stdlib'

const apartment = await import('@pmndrs/assets/hdri/apartment.exr')
new EXRLoader().load(apartment.default, (texture) => {
  texture.mapping = THREE.EquirectangularReflectionMapping
  scene.environment = texture
})

index: src/hdri

Matcaps

Compressed matcaps, resized to 512x512 and converted to webp. refer to emmelleppi/matcaps for previews.

const matcap = await import('@pmndrs/assets/matcaps/0000.webp')
new THREE.TextureLoader().load(matcap.default, (texture) => {
  const mesh = new THREE.Mesh(geometry, new THREE.MatCapMaterial({ matcap: texture }))
})

index: src/matcaps

Normals

Compressed normal-maps, resized to 512x512 and converted to webp. refer to emmelleppi/normal-maps for previews.

const normal = await import('@pmndrs/assets/normals/0000.webp')
new THREE.TextureLoader().load(normal.default, (texture) => {
  const mesh = new THREE.Mesh(geometry, new THREE.MatStandardMaterial({ normalMap: texture }))
})

index: src/normals

Models

A selection of models optimized with gltf-transform optimize and converted to glb.

import { GLTFLoader } from 'three-stdlib'

const suzi = await import('@pmndrs/assets/models/suzi.glb')
new GLTFLoader().load(suzi.default, (gltf) => {
  scene.add(gltf.scene)
})

index: src/models

Textures

Compressed textures, resized to 512x512 and converted to webp.

const cloud = await import('@pmndrs/assets/textures/cloud.webp')
new THREE.TextureLoader().load(cloud.default, (map) => {
  const m = new THREE.MeshStandardMaterial({ map })
})

index: src/textures

Build

Pre-requisites:

  • Make
  • Nodejs
  • ImageMagick 7+
  • jq
  • fonttools
  • openssl
$ make