poppenhuis /
- Jackie (1 collection)
- cakes (4 items)
- Max (4 collections)
- plucked instruments (6 items)
- pedals (4 items)
- badminton racquets (2 items)
- friends (27 items)
- Leaonie (1 collection)
- pottery (3 items)
poppenhuis (Dutch for "dollhouse") is a space for sharing collections and their 3D scans.
Have a collection you care about? of pottery? of sculptures? of guitars? of cars? of cakes? of plants? of dolls?
They're welcome to live here too. Open a GitHub PR to the poppenhuis repo and:
- Upload your
.gltf/.glbmodels to//public/models/ - Add your metadata to
//src/manifest.tsx
What file formats can poppenhuis render?
poppenhuis uses model-viewer for rendering 3D models, which only renders
Ideally poppenhuis would also support
.gltf/.glb files.Ideally poppenhuis would also support
.ply-based Gaussian splats, perhaps with Spark. PRs welcome.What app should I use to scan to .gltf/.glb files?
I personally use Polycam in LiDAR mode. The produced models, while jank and low poly, are small, compressed, easy to edit, and dimensionally accurate.
I also like Scaniverse, but I exclusively use it for Gaussian splatting, and have not used its LiDAR mode.
I also like Scaniverse, but I exclusively use it for Gaussian splatting, and have not used its LiDAR mode.
Want to load models from an Are.na user profile?
Enter an Are.na profile slug:
The following (shareable!) link will only display channels that contain blocks uploaded as
https://poppenhu.is/arena:
You can add structured metadata to your Are.na blocks by including YAML in the description. Everything after a
The following (shareable!) link will only display channels that contain blocks uploaded as
.glb files:https://poppenhu.is/arena:
You can add structured metadata to your Are.na blocks by including YAML in the description. Everything after a
--- divider will be parsed as YAML and used to set item metadata fields, for example:My beautiful ceramic vase, hand-thrown on the wheel. --- formalName: "Ceramic Vase #42" releaseDate: "2023-10-15" manufacturer: "Jane Smith" material: - "stoneware clay" - "celadon glaze" acquisitionDate: "2023-11-01" captureDevice: "iPhone 15 Pro" captureMethod: "LiDAR"
Want to mount a 3rd party manifest?
Your 3rd party manifest will be merged with poppenhuis's 1st party manifest, and the manifest URL will be stored in
?manifest= query param so you can share your collections with others.Manifest schema
type Manifest = User[];
interface User {
id: string;
name: string;
bio?: string;
collections: Collection[];
}
interface Collection {
id: string;
name: string;
description?: string;
items: Item[];
}
export const ITEM_FIELD_DESCRIPTIONS = {
formalName: "A more specific name (like a model number or a scientific name) than the general name.",
model: "The path to the 3D model. Only glTF/GLB models are supported.",
alt: "Custom text that will be used to describe the model to viewers who use a screen reader or otherwise depend on additional semantic context to understand what they are viewing.",
poster: "The image to be displayed instead of the model it is loaded and ready to render.",
releaseDate: `The release date and the manufacture date are subtly different. The release date is the date this item's specific variant was made available to the public. The manufacture date is the date the item was actually made.
e.g. while the iPhone SE 1 was released in 2016, it was manufactured up until 2018.`,
// YAML parsing feature for Are.na integration
yamlInDescription: `You can include YAML metadata in Are.na block descriptions by adding a "---" divider.
Everything before "---" becomes the description, everything after is parsed as YAML that can set Item fields.
Example Are.na block description:
This is my beautiful sculpture made from clay.
---
formalName: "Clay Sculpture #42"
releaseDate: "2023-10-15"
manufacturer: "Artist Name"
material:
- "clay"
- "glaze"
acquisitionDate: "2023-11-01"
captureDevice: "iPhone 15 Pro"
captureMethod: "LiDAR"
If there's no "---" divider, the entire description is treated normally.`
};
export interface Item {
// required fields
id: string;
name: string;
// model-viewer fields
model: string;
poster?: string;
alt?: string;
// abstract details
formalName?: string;
releaseDate?: string;
description?: string;
// material reality
manufacturer?: string;
manufactureDate?: string;
manufactureLocation?: string;
material?: string[];
// acquisition
acquisitionDate?: string;
acquisitionLocation?: string;
// post-acquisition
storageLocation?: string;
// capture
captureDate?: string;
captureLocation?: string;
captureLatLon?: string;
captureDevice?: string;
captureApp?: string;
captureMethod?: string;
// misc
customFields?: {
[key: string]: string | undefined;
};
}
Why?
My partner has a large collection of dolls, so I built poppenhuis to make it easier for her to catalogue and track metadata. Some of the dolls are culturally sensitive and shouldn't be displayed on a public forum, so she hosts her collection privately with a 3rd party manifest.
Why am I being forced to use GitHub to add my collection?
- GitHub has everything we need for authenticated bulk uploading of models and metadata.
- Rather than using a database,
baking
//src/manifest.tsxinto the bundle keeps the app snappy.
Credits and inspiration
poppenhuis takes inspiration from Are.na, The Hydrant Directory and Tony Hawk's Pro Skater 4.
I discovered this Sam Peitz tweet, nathannhan.art, What's in Jisu's bag?, and rotating sandwiches after first release, and they guided poppenhuis's development in its final stages.
I discovered this Sam Peitz tweet, nathannhan.art, What's in Jisu's bag?, and rotating sandwiches after first release, and they guided poppenhuis's development in its final stages.
Technical challenges
I tried porting the app to Next.js to get some of that sweet, sweet SSR. But to my dismay I discovered that clicking any link was causing a full page load and remount, which invalidated the camera state of all model-viewer components. Alas, the app remains a Vite React SPA. If anyone has a solution to this, please reach out to me on Twitter.