惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

爱范儿
爱范儿
Y
Y Combinator Blog
博客园 - Franky
D
Docker
B
Blog RSS Feed
M
MIT News - Artificial intelligence
雷峰网
雷峰网
博客园 - 司徒正美
人人都是产品经理
人人都是产品经理
宝玉的分享
宝玉的分享
S
SegmentFault 最新的问题
GbyAI
GbyAI
Recent Announcements
Recent Announcements
Martin Fowler
Martin Fowler
H
Hackread – Cybersecurity News, Data Breaches, AI and More
MyScale Blog
MyScale Blog
B
Blog
H
Help Net Security
Microsoft Security Blog
Microsoft Security Blog
WordPress大学
WordPress大学
Vercel News
Vercel News
The Cloudflare Blog
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
Google DeepMind News
Google DeepMind News

ALBERTAZ

OpenStreetMap Data Pipeline for Canvas Maps | EveryCityMap 每日关灯:今天这题理论最少 8 步 OpenStreetMap + Canvas 城市地图实践:EveryCityMap 的五个工程取舍 OpenStreetMap + Canvas 城市地图实践:EveryCityMap 的五个工程取舍 博客 CDN 迁移到 Cloudflare R2 博客 CDN 迁移到 Cloudflare R2 Migrate my website to SvelteKit2 Migrate my website to SvelteKit2 漫谈编辑器 漫谈编辑器 Pure ESM package Pure ESM package 又折腾博客了 又折腾博客了 Rewrite my website with Svelte Rewrite my website with Svelte 字体漫谈-网站字体最佳实践 字体漫谈-网站字体最佳实践 你不知道的 Web Components - 现状 你不知道的 Web Components - 现状 你不知道的 Web Components - 过去和未来 你不知道的 Web Components - 过去和未来 Node 应用本地 HTTPS Node 应用本地 HTTPS docker 部署 Gatsby 应用 docker 部署 Gatsby 应用 再提示『您的磁盘几乎已满』算我输 再提示『您的磁盘几乎已满』算我输 G6-Mobile 的前世今生 G6-Mobile 的前世今生
How I Built a Scannable 3D QR Code Generator | Every QR Code
https://www.albertaz.com/about · 2026-09-01 · via ALBERTAZ

I built Every QR Code as a scannable 3D QR code generator: enter a URL and it grows into a Tree or Terrain world, then reveal the standard QR code that points to the same destination. The complete Studio is embedded above. You can replace the URL, switch between Tree and Terrain, and download or share the result.

A conventional QR code solves machine recognition first, but people rarely remember a link from its black-and-white grid alone. I wanted to try a different approach: let the link itself determine a recognizable world without giving up the QR code’s original scannability.

Every QR Code normalizes the URL, generates a standard QR matrix, and derives a deterministic Link DNA. The same identity always produces the same seeds. Tree and Terrain are two visual expressions of that identity; neither changes the URL stored in the QR code. When the 3D world reveals its QR form, the blocks return to that standard matrix instead of approximating it with a decorative image.

The 3D renderer uses WebGPU and loads only the model that is currently needed. When WebGPU is not available, the component falls back to a static SVG QR code, so the link remains visible and scannable. The Studio also lets you choose a theme, weather, and light or dark mode before copying a share link or downloading the image.

A different kind of artistic QR code generator

Many artistic QR code generators restyle the modules, blend an image into the grid, or ask an AI model to reinterpret the code. Every QR Code keeps the standard QR matrix separate and derives the Tree or Terrain world from the URL’s deterministic Link DNA. The artwork can become expressive without asking a decorative image to carry the link.

That separation also makes the behavior easier to reason about. The URL creates both a conventional QR code and a repeatable visual identity; revealing the code returns to the original matrix rather than generating a visually similar approximation.

Use it as a React QR code component or Web Component

I published the identity protocol, renderer, and React and Web Component adapters on GitHub under the MIT License. A React project can install the public component directly:

Bash
pnpm add @every-qrcode/react
TypeScript
import { EveryQRCode } from '@every-qrcode/react';

export function WebsiteIdentity() {
	return <EveryQRCode url="https://example.com" />;
}

For pages that do not use React, the same system is available as @every-qrcode/web-component. The public components generate the QR code and render the 3D world in the browser rather than sending that work to a server. Tree and Terrain are loaded only when they are actually selected.

The Gallery and Studio are free to use. You can browse the Gallery or put your own URL into the Studio and see what kind of world it grows into.

For another browser-rendering system built around deterministic source data, read how I designed the OpenStreetMap data pipeline behind EveryCityMap.