Point cloud → shaded spheres

Render PLY point clouds as
shaded 3D beads, in the browser.

Bead Lab is a static, single-page viewer built with Three.js. Drop in a PLY file, tune lighting and materials, orbit the camera, and export a PNG — no build step, no backend, no upload.

Launch Bead Lab → View source on GitHub Star

Static HTML + Three.js r128  ·  no install  ·  MIT licensed

Interface

Viewer + control panel

Everything lives in one screen: the 3D view on the left, and shape, bead, lighting, camera, and export controls in the panel on the right.

Bead Lab interface showing a bead-rendered point cloud on the left and the shape, bead, lighting, and camera control panel on the right

Examples

Sample renders

The repository ships with two example point clouds of the same shape at different densities. Each render below was produced by loading the matching examples/ file into Bead Lab with default studio lighting.

Bead-rendered point cloud from examples/sample_pcd_3000.ply
examples/sample_pcd_3000.ply 3,000 vertices · ASCII PLY Download .ply ↓
Bead-rendered point cloud from examples/sample_pcd_10000.ply
examples/sample_pcd_10000.ply 10,000 vertices · ASCII PLY Download .ply ↓

Both files describe the same stepped-cylinder shape at different point densities. Load either one in Bead Lab, then import examples/sample_bead_preset.json (Preset → import .json) to reproduce the bead size, lighting, and camera angle used above. Presets store appearance and camera settings only, not point coordinates.

Features

What it does

Instanced bead rendering

Every point becomes a shaded sphere via instanced rendering, with adjustable bead size and tessellation.

Built-in shapes

Start from a built-in sample or generate a cylinder, stepped cylinder, sphere, torus, or box without any input file.

Studio lighting

Directional key light, ambient fill, soft shadows, optional ground plane, and background color presets.

Surface-normal tint

Shading estimated from neighboring points, with key-light, viewer, or up-axis tint modes.

Full camera control

Orbit, zoom, independent object rotation, and auto-rotate — separate from the lighting direction.

PNG export & presets

Save the current canvas view as a PNG, and export, import, or copy appearance settings as JSON.

Quick start

Try it in four steps

  1. Open the app. Click “Launch Bead Lab” above, or open beed_lab.html directly in a desktop browser with WebGL support. Internet access is needed once, to load Three.js r128 from cdnjs.
  2. Load a point cloud. Click load .ply file or drag a PLY onto the view. Try examples/sample_pcd_3000.ply from the gallery above first.
  3. Import the preset (optional). Click import .json or drag examples/sample_bead_preset.json onto the view to match the bead size, lighting, and camera angle used in the reference renders above.
  4. Tune and export. Adjust bead size, lighting, and camera, then click save png to export the current view.
# or serve the repository locally — no build step required
python3 -m http.server 8000 --bind 127.0.0.1
# then visit http://localhost:8000/beed_lab.html

Input is PLY, not the PCL .pcd format, and only vertex positions are used. Loading and normal estimation run on the main thread, so very large clouds can pause the interface — start with the 3,000-point example and increase complexity gradually. Full format support, limitations, and repository layout are documented in the README.