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

推荐订阅源

雷峰网
雷峰网
G
Google Developers Blog
Blog — PlanetScale
Blog — PlanetScale
P
Proofpoint News Feed
博客园 - Franky
L
LangChain Blog
GbyAI
GbyAI
A
About on SuperTechFans
MongoDB | Blog
MongoDB | Blog
F
Fortinet All Blogs
Y
Y Combinator Blog
Stack Overflow Blog
Stack Overflow Blog
博客园 - 叶小钗
N
Netflix TechBlog - Medium
D
DataBreaches.Net
Martin Fowler
Martin Fowler
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Hugging Face - Blog
Hugging Face - Blog
博客园_首页
爱范儿
爱范儿
罗磊的独立博客
H
Help Net Security
云风的 BLOG
云风的 BLOG
C
Check Point Blog

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.