4 min read
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. |
Default Ranking
| Rank | Source | Use when | Boundary |
|---|---|---|---|
| 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 | Frontend and Design 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
Selection Rules
- Use Three.js or R3F only when runtime 3D interaction is required.
- 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.
Audit Coverage
| Named source | Coverage |
|---|---|
| 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, Frontend and Design 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
- 2026-07-06 | Added the consolidated Web3D ranking route covering WebGL, Three.js, React Three Fiber, shader tools, ContentCore, and LS Graphics. Source: User request, 2026-07-06
- 2026-07-07 | Added audit coverage rows for Three.js/WebGL/WebGPU, React Three Fiber, shader tools, no-code WebGL, and asset/mockup alternatives after the component/motion library coverage audit. Source: User request, 2026-07-07