3D skins · 26 animated materials · WebGL, no libraries

Mastery, in 3D.

Real-time 3D objects in the kind of skins you grind for: animated obsidian, dark matter, damascus, gold, diamond and 21 more. Every one is drawn live by skins3d.js from one HTML attribute. Drag any of them to turn it.

Open the viewer Scroll the mastery grind →Add to a zip

Obsidian · animated

drag to turn ↻

Viewer

Inspect every skin.

Pick a material and a shape, set the spin and the studio light, then copy the markup. It's the same tag you'd paste into your own page.

MasteryObsidian

Material

Shape

Spin0.35Light1.00

Backdrop

The grind

Gold to Obsidian.

The classic mastery ladder, one material per rung. Scroll through it in the MASTERY example.

Gold100 headshots on every weapon in a class.

PlatinumGold on every weapon in a class.

DamascusPlatinum on every weapon.

ObsidianDamascus, then a little more. Animated.

All skins

Twenty-six finishes.

Use it

One attribute.

Load lib/js/core.js (or the full uivault.js) and then lib/js/skins3d.js. Then any element with data-uv-3d becomes a live 3D object. Give it a size and it fills it.

Options: data-shape (blade, gem, knot, coin, sphere, cube, tag, torus), data-spin, data-tilt, data-drag, data-light, data-sync, data-fps + data-hover-fps and data-res. In JavaScript, UV.skins3d.mount(el, { material, shape }) returns an object with .set() and .stop().

It's built for ordinary laptops. Objects draw only while on screen, at 30 fps on 4-core machines, and the browser never holds more than 12 at once. Each one uses a few kilobytes of shader and no textures.

<script src="uivault/js/core.js"></script>
<script src="uivault/js/skins3d.js"></script>

<div data-uv-3d="obsidian" data-shape="blade" data-drag
     style="width:420px;height:420px;background:#0b0b0e"></div>

<script>
  const v = UV.skins3d.mount(el, { material: "dark-matter", shape: "gem" });
  v.set({ material: "gold" });   // swap live
</script>