designwebglwebgputhreejsreact-three-fibershaders3drankingUpdated 2026-08-12

Web3D Library Ranking

Separate runtime 3D engines from shader catalogs, no-code effect tools, and asset/mockup sources.

This page is the ranking layer for X Bookmarks: 3D & Shaders (Mar–May 2026) and Shader Effects Libraries. Use it before deciding whether a design needs real runtime 3D, a shader component, an exported asset, or a mockup source.

Routing Summary

Load this page before choosing WebGL, WebGPU, Three.js, React Three Fiber, shader tools, no-code WebGL, SVG voxel output, or 3D asset/mockup sources. It separates runtime engine choices from shader catalogs and export/mockup sources such as ContentCore and LS Graphics.

Version Snapshot

Checked against npm and official docs on 2026-07-07.

Package/platform Latest Published Role
WebGL / WebGPU Browser platform - Low-level graphics APIs. Use directly only when library abstractions are the bottleneck.
three 0.185.1 2026-07-01 Default JavaScript 3D library for custom WebGL scenes.
@react-three/fiber 9.6.1 2026-04-28 React renderer for Three.js when the app is React and component ownership matters.
img2threejs signed d667338; tag v1.5-beta; upstream skill metadata 1.4.4 2026-08-06 commit Specialized agent skill for reconstructing one reference image as procedural TypeScript/Three.js through a resumable, quality-gated pipeline. The tag/frontmatter mismatch remains visible.
voxel-icon BIAsia/voxel-icon@8bed7e8; no release tag 2026-08-09 commit Retained image-family procedure, not a global installed authority: MIT skill plus separately licensed examples. A CC0 owned 17-part route specimen passed img2threejs blockout, four-angle, hierarchy, reduced-motion and 71 KB GLB proof. Brin caution stays visible and the non-idempotent background normalizer is quarantined.
threejs-towers, threejs-landscape, threejs-weather MengTo/Skills main, reviewed 2026-08-12 2026-08-12 snapshot MIT procedural-environment skill trio with standalone demos. Installed as source-owned skills; use together only when the product really needs procedural architecture, a live landscape, and weather.

Default Ranking

Rank Source Use when Boundary
Specialized img2threejs / skills/engineering/img2threejs/SKILL.md One suitable object or character reference should become editable, diffable, animation-ready procedural Three.js code rather than an inert generated mesh. It reconstructs by code, not photogrammetry. A single view cannot prove hidden geometry or exact likeness. Preserve source rights and identity, run the local state/spec/pass/visual gates, and keep approximate regions explicit. App integration still belongs to Three.js or R3F.
Retained procedure voxel-icon A product needs a coherent image-first family of coarse isometric block icons and can accept generated bitmap output before optionally reconstructing an accepted, rights-cleared specimen as procedural Three.js. Keep it project-scoped: skill/docs are MIT; bundled icons have a separate no-redistribution-as-library restriction; live Three.js source visibility does not grant reuse rights. Never auto-run the non-idempotent normalizer on an accepted image. A controlled CC0 specimen proves the local path, not arbitrary-reference reconstruction.
Specialized threejs-towers + threejs-landscape + threejs-weather A rights-cleared product needs parameterized architecture assembled by a clipping plane, a camera-centered terrain/sky stage, or rain/storm/snow as inspectable scene state. The skills are MIT; the Towers showcase code and artwork explicitly grant no reuse or redistribution license. Reimplement from the skills and owned assets. Keep architecture, landscape, and weather as separate modules; prove geometry winding/caps, draw calls/disposal, frustum density, state transitions, audio rights, reduced motion, mobile input, semantic fallback, and measured runtime budgets.
1 Frontend and Design Skills / Three.js The project needs custom runtime 3D, cameras, lights, meshes, materials, controls, or a serious WebGL scene. Verify canvas is nonblank, framed, interactive, and performant across target viewports.
2 Cloud, Data, and Service Skills React owns the surrounding app and the 3D scene should compose with React state/components. Keep imperative escape hatches contained; still understand the Three.js scene graph.
3 Shaders.com, Shaders MCP, Shader Effects Libraries, ShaderGradient, Shader Lab The design needs shader material, background effects, logo shaders, DOMTexture experiments, or agent-searchable presets. Use shader components when material is the point. Avoid runtime shaders for static decoration.
4 Unicorn Studio The need is no-code WebGL prototyping, embedded interactive visuals, dither/glyph/mouse-trail effects, or fast visual proofs. Decide later whether to embed, rebuild, export, or flatten.
5 Heerich.js The visual wants 3D-like voxel/isometric output but SVG/vector output beats WebGL. Good for illustrations and print-like vector treatment, not physics-heavy scenes.
6 ContentCore The need is creating/exporting 3D-ish or motion content as images/videos from one place. Treat as a content/render asset source, not a web runtime library. Official site frames it as creating content and exporting images or videos.
7 LS Graphics The need is high-end mockups, device renders, 3D icon/illustration assets, abstractions, online mockup editing, or Figma mockup assets. Treat as an asset/mockup library. Do not confuse polished mockup source with runtime 3D implementation.

Source Cards

View original tweet

Selection Rules

  • Use Three.js or R3F only when runtime 3D interaction is required.
  • Use img2threejs when the job begins with one rights-cleared object or character reference and the output must be editable procedural code. Use an existing model/asset source or Blender pipeline when literal asset fidelity, multiple views, authored topology, or ordinary import/export is the real job.
  • Treat the source image as evidence, not geometry truth. Record image hash and rights, intended use, suitability, visible-versus-hidden regions, quality contract, state file, spec, per-pass render/comparison evidence, rejected corrections, remaining mismatches, and final runtime budget.
  • Keep voxel icon image authoring separate from img2threejs procedural reconstruction. An accepted bitmap does not prove hidden geometry, export quality, runtime performance, animation readiness, or source rights. Retain the upstream procedure project-scoped, preserve Brin's caution as advisory risk evidence, and quarantine its background normalizer: applying it to an already-exact bundled image changed pixels twice. Kevin-Wiki's controlled CC0 workflow-router specimen now proves the local intake/generator/review/export route at blockout—17 named meshes, 204 triangles, 0.9104 silhouette IoU, four non-degenerate views, reduced-motion behavior, and a sanitized 71,004-byte GLB. It does not prove arbitrary-reference reconstruction. A technical admission pass alone is still insufficient: the 1024×1024 circuit logo passed pixel intake, but its portrait, translucent globe, fine circuits, and single view require deliberate stylization and more views.
  • Separate public presentation captures from diagnostic gate captures. Labels, toolbars, and contact shadows belong in the former; fixed framing, clean background, and map-stripped evidence belong in the latter. Never make a polished screenshot the mask ground truth when its presentation chrome changes the measured silhouette.
  • Export the asset boundary, not the live scene graph. Clone the named object, remove texture maps and runtime object references from userData, retain only portable semantic metadata, then probe the resulting GLB. The controlled specimen shrank from about 9.6 MB to 71,004 bytes without losing its 35 named nodes or 17 meshes.
  • Use threejs-towers for the procedural subject, threejs-landscape for the stage, and threejs-weather for atmosphere. Their useful seam is three independent modules sharing explicit scene state—not one copied monolith. Merge geometry by material; build clipped-section caps from the current plan; keep terrain, grass, and stones on one height function; anchor precipitation to the camera frustum; model time/weather as transitions; and test from the public scene controls. Never copy Towers application bytes or generated artwork without separate permission.
  • Use shader tools when the primary value is material, distortion, gradient, or effect composition.
  • Use ContentCore, LS Graphics, video, or image exports when the output is a marketing/social/portfolio asset.
  • Keep 3D scenes full-bleed or intentionally framed; do not hide them in decorative cards unless the product surface demands a preview card.
  • Verify WebGL work with screenshots, mobile viewport checks, and canvas-pixel/nonblank checks.
  • Use Motion's vgpu adapter when the project already uses vgpu and the job is to animate uniforms, effects, cameras, lights, materials, orbit controls, or scroll-driven shaders through one batched frame loop. This is an integration convenience inside the existing renderer decision, not a reason to choose vgpu for every scene. Source: X/@motiondotdev 2097650753942823321; Motion vgpu documentation, reviewed 2026-09-11
  • Treat claims that Three.js should always be replaced by direct WebGPU/Wasm as opinion until the project's hot path is measured. Choose by abstraction fit, portability, debugging, ecosystem support, and the value of direct modern-GPU access. Source: X/@0xDaedalus 2097634541699559790, reviewed 2026-09-11

Audit Coverage

Named source Coverage
img2threejs Installed complete Apache-2.0 snapshot at signed d667338; 673 tests passed and 25 environment/showcase tests skipped locally. The live gallery was also inspected: 13 demo cards, two visibly labeled placeholders, about 6.66 MB initial transfer and 12.65 MB after opening one demo, plus a generic action-control set that offered weapon actions on an earbuds reconstruction. Keep these as beta/product-integration counterexamples; they do not invalidate the specialized pipeline.
voxel-icon Exact repository 8bed7e8, complete 157-line skill, required style/palette references, both deterministic scripts, visual calibration assets, split license, live wall/video/manifest/viewer, and two owned img2threejs intakes were inspected. The public manifest reports 600 bitmap variants, 300 subjects, 289 loops, and 303 available Three.js models; runtime visibility remains observation-only. Python compilation passed. Normalization changed 1,497 pixels on an already-exact source and another 531 on pass two, so that utility is quarantined. Brin remains caution/pending. The retained procedure nevertheless passed a controlled CC0 route test: strict spec, generated 17-part factory, 0.91 visual review, clean/map-stripped Tier-1, four-angle and intersection checks, named click/explode hierarchy, reduced motion, zero part-coverage errors, and a probed 71,004-byte GLB with runtime metadata removed at the export boundary.
MengTo procedural scene trio Installed the exact MIT threejs-towers, threejs-landscape, and threejs-weather folders with demos. The upstream Towers study is a 2.3 MB self-contained page (about 1.4 MB transferred), reports 1.31M triangles in 18 draw calls, and documents measured texture/audio compression, procedural geometry, clipping caps, terrain, instancing, weather, sound and mobile controls. Its repository explicitly grants no license for reuse of the application code or artwork, so it is evidence and a visual benchmark—not a copy source.
Three.js / WebGL / WebGPU Rank 1, Frontend and Design Skills executable skill, official docs, npm three@0.185.1.
React Three Fiber / R3F Rank 2, Cloud, Data, and Service Skills executable skill, official docs, npm @react-three/fiber@9.6.1.
Shader tools Rank 3 through Shader Effects Libraries, Shaders.com, ShaderGradient, Shader Lab, and Shader Gallery.
No-code WebGL Rank 4 through Unicorn Studio.
Asset/mockup alternatives ContentCore and LS Graphics rows remain external-source routes because they are asset/render sources, not runtime libraries.

Timeline

Related Pages

X Bookmarks: 3D & Shaders (Mar–May 2026)Shader Effects LibrariesFrontend and Design SkillsCloud, Data, and Service SkillsMotion 3D PlaybookUnicorn StudioShaders.comHeerich.jsDesign Effects and Motion Sources

12 pages link here

Active Stack (What to Actually Use)MetaCapability Routing MapMetaComponent Library SourcesDesignDesign Effects and Motion SourcesDesignDesign Engineering ResourcesToolsMotion Library RankingDesignScroll WorldToolsShader Effects LibrariesDesignUI Library RankingDesignWebsite Design StylesDesignX Bookmark Signals - 2026-09-11MetaX Bookmarks: 3D & Shaders (Mar–May 2026)Tools