Pin Art

100%

✓ Published0🌍 Public

Last edited May 26, 2026

Created on May 26, 2026

A webcam feeds a live depth map into a Three.js WebGPU scene, where thousands of metallic capsules on a pin-art board extend and retract to reflect the user's silhouette. The depth estimation runs through the Hugging Face Transformers pipeline in the browser, producing a low-resolution depth image that drives each pin’s position. The scene uses TSL shaders for ambient occlusion, reflections, and post-processing, with OrbitControls for interactive viewing.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 8232daa7d3b24a25b9f7566ff1da4522

This WebGL visualization uses p5.js to render a dynamic 3D scene composed of primitive shapes, including planes, boxes, spheres, cylinders, cones, ellipsoids, and toruses. The code applies normalMaterial to map normal vectors to RGB colors, with ambient and directional lighting enhancing the depth of each geometry. Through camera positioning and rotation transformations, the shapes appear to float and spin in space. The example demonstrates p5.js’s WEBGL renderer capabilities for creating three-dimensional compositions from basic geometric primitives, highlighting the library’s built-in shape functions and material systems.

Aabonello

66% match

Loading thumbnail…

Gist d773d6efc9640e3600ce

This WebGL-based visualization uses Three.js's CSS3DRenderer to position and animate 3D objects in a browser scene, with device orientation controls enabling rotation based on a mobile device's physical movement. The renderer maps 3D transforms onto CSS3D objects, preserving depth and perspective. The scene is rendered using a combination of CSS3D and WebGL techniques, with animated transitions driven by device orientation input.

Aabernier

65% match

Loading thumbnail…

Gist 8b397c6c25320dd8963daebaa9c8b847

A webcam feed is displayed as a continuously distorted, glitching video stream. The visualization captures the user's webcam video using the `getUserMedia` API and renders it to a canvas, which is then processed in real-time. The glitch effect is achieved by taking the canvas's JPEG data and randomly corrupting individual characters within its base64 encoding using JavaScript, before displaying the result as a dynamically updating image. The animation runs on a timer, cycling the corruption process to create a perpetually shifting, pixelated output.

MMAKIO135

64% match

Loading thumbnail…

pro_2

A single pink torus rotates slowly in a dark blue 3D scene, with interactive camera controls that let viewers orbit around the object. The visualization uses Three.js with WebGL rendering, creating a MeshPhongMaterial that responds to ambient and directional lighting for realistic shading. An animation loop updates the torus rotation and calls OrbitControls for smooth damping, while a window resize listener keeps the perspective camera aligned with the viewport. The scene demonstrates basic Three.js geometry, lighting, and animation in a minimal setup.

Aarchanaadharani1@gmail.com

64% match

Loading thumbnail…

Gist 3a15019e7485e512117d4a041eb217dd

An interactive WebGL visualization displays a partially transparent human brain surface model, rendered in white with a randomized pattern of fully transparent faces that create a mesh-like see-through effect. The scene uses Three.js with the VTKLoader to load a FreeSurfer curvature dataset, applying dual materials—one opaque and one fully transparent—to individual faces. TrackballControls enable rotation, zoom, and panning, while a directional light and stats monitor support the animated 3D exploration.

Aakeshavan

64% match

Loading thumbnail…

Gist 1c55837a8248d790382976cbb62f37c1

This example displays a volumetric video of a person, loaded and played inside a WebGL scene using the Depthkit.js library. The code creates a script element to load the latest Depthkit.js version, then instantiates a `Depthkit` object to fetch a metadata text file and an MP4 video from a proxy URL. Once loaded, the resulting character is added to the A-Frame scene’s root object, and playback is initiated. The setup targets A-Frame’s boilerplate “hello world” page but fails on Mozilla Hubs due to its custom world-update logic.

UUtopiah

64% match

Loading thumbnail…

Gist 2bf4f8f77b581264da82c111addb1dd0

This example provides a web-based control panel for managing a 3D virtual reality drawing environment. It allows users to configure brush types, sizes, and colors, as well as set the spectator camera’s position, target, and movement modes like stationary, follow, circular, or wobble. The interface also toggles visibility of canvas layers, UI elements, and user tools, and triggers actions such as saving, exporting, or clearing the scene. The code uses plain HTML form controls and JavaScript event handlers, with template placeholders for brush and environment data, but does not rely on external visualization libraries.

Aandybak

63% match

Loading thumbnail…

sketch 02

A 3D block model rotates in a dark WebGL scene, its dimensions adjustable in real time through a dat.GUI control panel. The sketch uses Three.js with a perspective camera and OrbitControls, rendering both wireframe and flat-shaded materials to highlight the box’s edges and surfaces. Animate continuously rebuilds the geometry from parametric width, depth, and height inputs, while the directional and ambient lights define the form. The code does not load external data, relying instead on procedural geometry and interactive user sliders.

BBillyBHWong

63% match