[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_157":158,"_159":160},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_119":-5,"_20":120,"_22":121,"_122":123,"_124":125,"_25":126,"_24":-5,"_127":-5,"_128":-5,"_129":53,"_130":131,"_132":44,"_133":-5,"_134":-5,"_135":136},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","ziggyware","name","ziggyware-ai","branchName","main","version","path","","project",{"_33":61,"_13":14,"_45":62,"_63":-5,"_64":53,"_65":66,"_67":66,"_68":69,"_70":-5,"_71":72,"_73":-5,"_74":53,"_75":-5,"_76":-5,"_77":78,"_79":80,"_81":82,"_83":84,"_85":86,"_87":-5,"_88":89,"_90":89,"_91":92,"_93":92,"_94":92,"_95":89,"_96":89,"_97":98,"_99":100,"_101":102,"_103":53},"tree",[56],"file","contents",[32],"upstream","pull","ahead","behind","envVars",{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":46,"_17":47,"_48":49,"_50":51,"_52":53,"_54":12,"_18":55},"id","04aab00c-ff97-4ed6-b3d6-f00d7429a651","main.ts","fileId","5b16bd1a-5708-11f1-bbe0-ee650bb23af1","parentId","branchId","5af74cd2-5708-11f1-bbe0-ee650bb23af1","branchVersion",22,"latest",true,"createdAt",["D",1782932321522],21,"fileType","http","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\n// ─── DB SETUP ─────────────────────────────────────────────────────────────────\n\nconst DB_VERSION = \"ziggyware_v1\";\n\nasync function initDB() {\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS posts (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n slug TEXT UNIQUE NOT NULL,\n title TEXT NOT NULL,\n excerpt TEXT NOT NULL,\n content TEXT NOT NULL,\n category TEXT NOT NULL,\n tags TEXT NOT NULL DEFAULT '[]',\n cover_gradient TEXT NOT NULL DEFAULT 'gr-cyan',\n published INTEGER NOT NULL DEFAULT 1,\n featured INTEGER NOT NULL DEFAULT 0,\n views INTEGER NOT NULL DEFAULT 0,\n created_at TEXT NOT NULL DEFAULT (datetime('now')),\n updated_at TEXT NOT NULL DEFAULT (datetime('now'))\n )\n `);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS categories (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n slug TEXT UNIQUE NOT NULL,\n name TEXT NOT NULL,\n description TEXT NOT NULL,\n icon TEXT NOT NULL DEFAULT 'cpu',\n color TEXT NOT NULL DEFAULT '#00ffc3'\n )\n `);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS subscribers (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n email TEXT UNIQUE NOT NULL,\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n )\n `);\n\n // Seed categories\n const catCount = await sqlite.execute(`SELECT COUNT(*) as n FROM categories`);\n if (catCount.rows[0].n === 0) {\n await sqlite.execute(`\n INSERT INTO categories (slug, name, description, icon, color) VALUES\n ('graphics', 'Graphics Programming', 'Shaders, rendering pipelines, ray tracing, and GPU wizardry', 'cpu', '#00ffc3'),\n ('ai', 'Artificial Intelligence', 'ML, neural networks, LLMs, and the frontier of machine intelligence', 'brain', '#a78bfa'),\n ('math', 'Math & Algorithms', 'Linear algebra, quaternions, and the mathematics of 3D space', 'math-function', '#fbbf24'),\n ('tools', 'Tools & Workflows', 'Dev tools, frameworks, and productivity for creative coders', 'tools', '#fb923c')\n `);\n }\n\n // Seed demo posts\n const postCount = await sqlite.execute(`SELECT COUNT(*) as n FROM posts`);\n if (postCount.rows[0].n === 0) {\n await sqlite.execute(`\n INSERT INTO posts (slug, title, excerpt, content, category, tags, cover_gradient, featured, views) VALUES\n (\n 'real-time-ray-tracing-vulkan',\n 'Real-Time Ray Tracing with Vulkan Ray Tracing API',\n 'A deep dive into hardware-accelerated ray tracing using Vulkan''s VK_KHR_ray_tracing_pipeline extension — BVH construction, ray generation shaders, and denoising strategies.',\n '# Real-Time Ray Tracing with Vulkan\\n\\nRay tracing has moved from offline renders to real-time pipelines. In this post we cover the fundamental building blocks...\\n\\n## BVH Construction\\n\\nThe Bounding Volume Hierarchy is the spatial acceleration structure that makes ray tracing tractable. Vulkan exposes this via \\`VkAccelerationStructureKHR\\`...\\n\\n## Ray Generation Shaders\\n\\n\\`\\`\\`glsl\\n#version 460\\n#extension GL_KHR_ray_tracing : require\\n\\nlayout(location = 0) rayPayloadEXT vec3 hitValue;\\n\\nvoid main() {\\n vec2 uv = vec2(gl_LaunchIDEXT.xy) / vec2(gl_LaunchSizeEXT.xy);\\n // Generate primary ray\\n vec3 origin = uCamera.position;\\n vec3 direction = normalize(uCamera.forward + uv.x * uCamera.right + uv.y * uCamera.up);\\n traceRayEXT(topLevelAS, gl_RayFlagsOpaqueEXT, 0xFF, 0, 0, 0, origin, 0.001, direction, 10000.0, 0);\\n imageStore(outputImage, ivec2(gl_LaunchIDEXT.xy), vec4(hitValue, 1.0));\\n}\\n\\`\\`\\`\\n\\n## Denoising\\n\\nTemporally-stable denoising is critical for real-time ray tracing...',\n 'graphics',\n '[\"vulkan\",\"ray-tracing\",\"glsl\",\"gpu\"]',\n 'gr-cyan',\n 1,\n 2847\n ),\n (\n 'transformers-from-scratch',\n 'Transformers From Scratch: Attention Is All You Need — Implemented',\n 'Build a full transformer architecture in pure numpy, then optimize it with CUDA kernels. We go from attention math to a working language model.',\n '# Transformers From Scratch\\n\\nEveryone uses transformers. Few understand them at the implementation level...',\n 'ai',\n '[\"transformers\",\"attention\",\"cuda\",\"llm\"]',\n 'gr-purple',\n 1,\n 4123\n ),\n (\n 'pbr-material-system',\n 'Physically Based Rendering: Building a PBR Material System',\n 'Understand the Cook-Torrance BRDF, metalness-roughness workflows, and how to build a production-ready PBR pipeline from the GLSL math up.',\n '# PBR Material System\\n\\nPBR changed game graphics forever. Understanding the underlying physics makes you a better graphics programmer...',\n 'graphics',\n '[\"pbr\",\"glsl\",\"brdf\",\"materials\"]',\n 'gr-orange',\n 0,\n 1654\n ),\n (\n 'quaternions-for-3d-rotation',\n 'Quaternions Demystified: 3D Rotation Without Gimbal Lock',\n 'The mathematical object that every 3D programmer needs to understand. We go from complex numbers to Hamilton''s quaternion algebra to SLERP interpolation.',\n '# Quaternions Demystified\\n\\nQuaternions strike fear into the hearts of many developers. They shouldn''t...',\n 'math',\n '[\"quaternions\",\"math\",\"3d\",\"rotation\"]',\n 'gr-gold',\n 0,\n 3201\n ),\n (\n 'stable-diffusion-architecture',\n 'Inside Stable Diffusion: Latent Diffusion Models Explained',\n 'What actually happens when you generate an image? We dissect the U-Net, VAE, CLIP text encoder, and the denoising scheduler that ties it all together.',\n '# Inside Stable Diffusion\\n\\nStable Diffusion is a masterpiece of applied deep learning...',\n 'ai',\n '[\"diffusion\",\"stable-diffusion\",\"deep-learning\",\"generative-ai\"]',\n 'gr-pink',\n 0,\n 5788\n ),\n (\n 'compute-shaders-intro',\n 'Compute Shaders: General-Purpose GPU Programming in OpenGL',\n 'Move beyond vertex and fragment shaders. Compute shaders unlock the full power of the GPU for physics simulation, particle systems, and ML inference.',\n '# Compute Shaders\\n\\nThe GPU is a massively parallel machine. Compute shaders let you harness that power directly...',\n 'graphics',\n '[\"opengl\",\"compute-shaders\",\"gpu\",\"simulation\"]',\n 'gr-cyan',\n 0,\n 2110\n )\n `);\n }\n}\n\n// ─── HTML SHELL ───────────────────────────────────────────────────────────────\n\nfunction buildPage(data) {\n const { posts, categories, featuredPosts } = data;\n\n const postsJSON = JSON.stringify(posts);\n const catsJSON = JSON.stringify(categories);\n const featuredJSON = JSON.stringify(featuredPosts);\n\n return `\n\n\n\n\nZiggyware — Graphics & AI Programming\n\n\n\n\n\n\n\n\n\n\n\n\n

\n\n \n

\n Graphics · AI · Deep Technical Tutorials\n

Where pixels
meet intelligence

Deep technical tutorials on graphics programming, AI, and the mathematics that powers both. No hand-waving — real code, real math.

\n \n \n

—

Tutorials

—

Total Reads

2004

Est.

MVP

Microsoft XNA

\n\n \n

\n Featured\n

\n\n \n

\n Topics\n

\n\n \n

\n All Tutorials\n

\n \n \n \n \n \n

\n\n \n

About the Author

Ziggy — Graphics Programmer & AI Explorer

Ziggyware started in 2004 as a resource for Microsoft XNA developers. For five years it was one of the premier destinations for 3D graphics tutorials on the web — covering shaders, physics, game AI, and everything in between.

I received the Microsoft MVP Award for DirectX/XNA during that era, recognizing the community contributions the site made. XNA was eventually discontinued, but the passion for graphics programming never died.

Now Ziggyware is back — evolved. Graphics programming has never been more exciting: real-time ray tracing, compute shaders, and the collision of AI with rendering opens an entirely new frontier. That's what this site is about.

Expect deep technical content. No tutorials that stop at \"Hello Triangle.\" We go all the way to the metal.

🏆

Microsoft MVP Award

DirectX / XNA · 2004–2009

✓

\n 100+ XNA tutorials published\n

✓

\n Active MSDN community contributor\n

✓

\n Covered 3D math, shaders, physics\n

✓

\n Now: graphics · AI · open frontier\n

\n\n \n \n\n

\n\n\n

\n ← Back to all posts\n

\n \n ·\n \n ·\n \n

\n\n\n

\n\n\n\n\n\n`;\n}\n\n// ─── API HANDLER ──────────────────────────────────────────────────────────────\n\nexport default async function handler(req) {\n await initDB();\n\n const url = new URL(req.url);\n const path = url.pathname;\n\n // Subscribe endpoint\n if (path === \"/api/subscribe\" && req.method === \"POST\") {\n try {\n const { email } = await req.json();\n if (!email || !email.includes(\"@\")) {\n return Response.json({ ok: false, error: \"Invalid email\" }, {\n status: 400,\n });\n }\n await sqlite.execute(\n `INSERT OR IGNORE INTO subscribers (email) VALUES (?)`,\n [email],\n );\n return Response.json({ ok: true });\n } catch (e) {\n return Response.json({ ok: false, error: \"Server error\" }, {\n status: 500,\n });\n }\n }\n\n // View increment endpoint\n if (path.startsWith(\"/api/view/\") && req.method === \"POST\") {\n const slug = path.replace(\"/api/view/\", \"\");\n await sqlite.execute(`UPDATE posts SET views = views + 1 WHERE slug = ?`, [\n slug,\n ]);\n return Response.json({ ok: true });\n }\n\n // RSS feed\n if (path === \"/api/rss\") {\n const posts = await sqlite.execute(\n `SELECT * FROM posts WHERE published=1 ORDER BY created_at DESC LIMIT 20`,\n );\n const items = posts.rows.map((p) => `\n \n <![CDATA[${p.title}]]>\n https://ziggyware-ai.val.run/post/${p.slug}\n \n ${new Date(p.created_at).toUTCString()}\n https://ziggyware-ai.val.run/post/${p.slug}\n `).join(\"\");\n return new Response(\n `\n\n \n Ziggyware — Graphics & AI Programming\n https://ziggyware-ai.val.run\n Deep technical tutorials on graphics programming and AI\n ${items}\n \n`,\n { headers: { \"Content-Type\": \"application/rss+xml\" } },\n );\n }\n\n // Main page\n const posts = await sqlite.execute(\n `SELECT * FROM posts WHERE published=1 ORDER BY created_at DESC`,\n );\n const categories = await sqlite.execute(\n `SELECT * FROM categories ORDER BY id`,\n );\n const featuredPosts = await sqlite.execute(\n `SELECT * FROM posts WHERE published=1 AND featured=1 ORDER BY views DESC LIMIT 2`,\n );\n\n const page = buildPage({\n posts: posts.rows,\n categories: categories.rows,\n featuredPosts: featuredPosts.rows,\n });\n\n return new Response(page, {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n}","deleted",false,"label",[35],{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":57,"_17":47,"_48":49,"_50":51,"_52":53,"_54":12,"_58":59,"_18":60},["D",1782932321522],"children",[],[35],"5af64440-5708-11f1-bbe0-ee650bb23af1",["D",1779582882262],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Ziggyware is back","imageUrl","userId","2c6d46b0-54dd-11f0-a86c-6fbc2b29331a","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","850db142-aa5e-4914-bceb-1e2e085ae4c5","tursoName","5af64440570811f1bbe0ee650bb23af1","tursoHostname","5af64440570811f1bbe0ee650bb23af1-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789555877593],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_118":114},"org",{"_11":12,"_112":-5,"_113":114,"_71":72,"_115":116,"_117":53},"branch",{"_17":42,"_13":16,"_33":40,"_104":61,"_105":-5,"_106":-5,"_107":-5,"_108":-5,"_109":-5,"_110":14,"_111":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yekJHRDE5SGVoUHUzUENQaXY2MTRkT3h0cncifQ","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_33":61,"_13":14,"_45":152,"_63":-5,"_64":53,"_65":66,"_67":66,"_68":69,"_70":-5,"_71":72,"_73":-5,"_74":53,"_75":-5,"_76":-5,"_77":78,"_79":80,"_81":82,"_83":84,"_85":153,"_87":-5,"_88":89,"_90":89,"_91":92,"_93":92,"_94":92,"_95":89,"_96":89,"_97":154,"_99":155,"_101":156,"_103":53},[149],"files",[149],"counts",{"_139":78,"_140":141,"_142":78,"_31":143,"_144":145},[137],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":46,"_17":47,"_48":49,"_50":51,"_52":53,"_54":12,"_18":138},[35],"pulls","branches",1,"forks",{"_146":78,"_148":78},"connections",{"_146":78,"_147":78},"count","unfilledCount","emptyCount",{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":57,"_17":47,"_48":49,"_50":51,"_52":53,"_54":12,"_58":150,"_18":151},[],[35],["D",1779582882262],["D",1789555877593],{"_11":12,"_118":114},{"_11":12,"_112":-5,"_113":114,"_71":72,"_115":116,"_117":53},{"_17":42,"_13":16,"_33":40,"_104":61,"_105":-5,"_106":-5,"_107":-5,"_108":-5,"_109":-5,"_110":14,"_111":12},"ctx",{"_97":-5,"_134":190,"_191":192,"_193":194,"_195":53,"_196":53,"_197":53,"_198":44,"_199":-5,"_200":-7,"_201":-7,"_202":78,"_203":53,"_204":53,"_205":-5,"_206":53,"_207":53,"_208":53,"_209":-5},"ENV",{"_161":162,"_163":164,"_165":16,"_166":167,"_168":169,"_170":171,"_172":173,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185,"_186":187,"_188":189},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Where pixelsmeet intelligence

Ziggy — Graphics Programmer & AI Explorer

Stay on the bleeding edge

Where pixels
meet intelligence

Code