https://r3f.maximeheckel.com/webgpu/caustics

1<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8" data-next-head=""/><meta charSet="utf-8"/><meta name="viewport" content="width=device-width" data-next-head=""/><link rel="preload" href="/fonts/inter-var-latin.woff2" as="font" type="font/woff2" crossorigin="anonymous"/><link rel="preload" href="/fonts/inter-var-latin-italic.woff2" as="font" type="font/woff2" crossorigin="anonymous"/><link rel="preload" href="/fonts/fira-code.woff2" as="font" type="font/woff2" crossorigin="anonymous"/><link rel="preload" href="/fonts/SpaceGrotesk-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous"/><link rel="preload" href="/fonts/SpaceGrotesk-Medium.woff2" as="font" type="font/woff2" crossorigin="anonymous"/><link rel="preload" href="/fonts/SpaceGrotesk-SemiBold.woff2" as="font" type="font/woff2" crossorigin="anonymous"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><link rel="preload" href="/_next/static/css/8faf108f5dc9964b.css?dpl=dpl_2DSE3bCib5yWAjykJ8xxhuP677gi" as="style"/><style id="stitches">--sxs{--sxs:1 k-bRZEnT k-kQEVqH iWVZMG}@media{@keyframes k-bRZEnT{from{height:0;opacity:0;transform:translateY(16px)}to{height:var(--radix-collapsible-content-height);opacity:1;transform:translateY(0px)}}@keyframes k-kQEVqH{from{height:var(--radix-collapsible-content-height);opacity:1;transform:translateY(0px)}to{height:0;opacity:0;transform:translateY(16px)}}:root{--border-radius-0:4px;--border-radius-1:8px;--border-radius-2:12px;--border-radius-3:16px;--space-0:0px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:40px;--space-8:48px;--space-9:56px;--space-10:64px;--space-11:80px;--space-12:96px;--space-13:128px;--space-14:256px;--space-15:512px;-webkit-font-smoothing:antialiased;--font-fallback:-apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;--font-display:'Inter', var(--font-fallback);--font-mono:'Fira Code', monospace;--font-numeric:'Space Grotesk', var(--font-fallback);--font-size-1:14px;--font-size-3:16px;--font-size-4:18px;--font-size-5:20px;--font-size-6:24px;--font-size-7:32px;--font-size-8:44px;--font-weight-400:400;--font-weight-500:500;--font-weight-600:560}*{box-sizing:border-box}*:before{box-sizing:border-box}*:after{box-sizing:border-box}.maximeheckel-light{--base-hue:266;--white:oklch(100% 0 0);--gray-000:oklch(99.5% 0 var(--base-hue));--gray-100:oklch(99.24% 0.008 var(--base-hue));--gray-200:oklch(98.08% 0.008 var(--base-hue));--gray-300:oklch(95.94% 0.004 var(--base-hue));--gray-400:oklch(94.3% 0.005 var(--base-hue));--gray-500:oklch(91.83% 0.008 var(--base-hue));--gray-600:oklch(90.18% 0.009 var(--base-hue));--gray-700:oklch(87.68% 0.012 var(--base-hue));--gray-800:oklch(80.94% 0.019 var(--base-hue));--gray-900:oklch(62.57% 0.038 var(--base-hue));--gray-1000:oklch(50.13% 0.047 var(--base-hue));--gray-1100:oklch(40.47% 0.038 var(--base-hue));--gray-1200:oklch(19.83% 0.01 var(--base-hue));--blue-100:oklch(100% 0 var(--base-hue));--blue-200:oklch(98.91% 0.005 var(--base-hue));--blue-300:oklch(96.85% 0.013 var(--base-hue));--blue-400:oklch(93.66% 0.027 var(--base-hue));--blue-500:oklch(88.34% 0.052 var(--base-hue));--blue-600:oklch(82% 0.082 var(--base-hue));--blue-700:oklch(73.65% 0.124 var(--base-hue));--blue-800:oklch(64.6% 0.172 var(--base-hue));--blue-900:oklch(55.52% 0.223 var(--base-hue));--blue-1000:oklch(46.51% 0.225 var(--base-hue));--blue-1100:oklch(36.42% 0.168 var(--base-hue));--blue-1200:oklch(23.85% 0.101 var(--base-hue));--green-100:oklch(99.15% 0.012 170);--green-200:oklch(98.73% 0.017 170);--green-300:oklch(97.92% 0.028 170);--green-400:oklch(96.76% 0.046 170);--green-500:oklch(94.97% 0.073 170);--green-600:oklch(93.1% 0.102 170);--green-700:oklch(91.3% 0.134 170);--green-800:oklch(89.62% 0.167 170);--green-900:oklch(88.54% 0.19 170);--green-1000:oklch(78.76% 0.177 170);--green-1100:oklch(52.84% 0.117 170);--green-1200:oklch(26.65% 0.056 170);--red-100:oklch(98.89% 0.005 22);--red-200:oklch(97.93% 0.009 22);--red-300:oklch(95.73% 0.02 22);--red-400:oklch(92.67% 0.033 22);--red-500:oklch(87.55% 0.059 22);--red-600:oklch(81.57% 0.092 22);--red-700:oklch(74.19% 0.138 22);--red-800:oklch(67.08% 0.186 22);--red-900:oklch(56.25% 0.221 22);--red-1000:oklch(44.11% 0.171 22);--red-1100:oklch(28.99% 0.108 22);--red-1200:oklch(18.93% 0.066 22);--orange-100:oklch(98.05% 0.013 60);--orange-200:oklch(97.41% 0.017 60);--orange-300:oklch(96.13% 0.026 60);--orange-400:oklch(94.22% 0.039 60);--orange-500:oklch(91.12% 0.061 60);--orange-600:oklch(87.51% 0.088 60);--orange-700:oklch(83.5% 0.117 60);--orange-800:oklch(78.74% 0.151 60);--orange-900:oklch(74.12% 0.181 60);--orange-1000:oklch(63.71% 0.165 60);--orange-1100:oklch(54.63% 0.140 60);--orange-1200:oklch(31.24% 0.075 60);--pink-100:oklch(91.7% 0.052 352);--pink-200:oklch(90.69% 0.059 352);--pink-300:oklch(89.72% 0.06 352);--pink-400:oklch(86.75% 0.086 352);--pink-500:oklch(82.97% 0.114 352);--pink-600:oklch(77.72% 0.155 352);

1--pink-700:oklch(73.12% 0.194 352);--pink-800:oklch(68.84% 0.231 352);--pink-900:oklch(65.43% 0.257 352);--pink-1000:oklch(55.6% 0.24 352);--pink-1100:oklch(42.39% 0.195 352);--pink-1200:oklch(30.21% 0.138 352);--accent:var(--blue-900);--background:var(--gray-100);--header:oklch(from var(--gray-100) l c h / 40%);--emphasis:oklch(from var(--blue-900) l c h / 5%);--hyperlink:#2480ed;--foreground:oklch( from var(--gray-200) l c h / 100%);--danger:var(--red-900);--danger-emphasis:oklch(from var(--red-700) l c h / 10%);--warning:var(--orange-900);--warning-emphasis:oklch(from var(--orange-900) l c h / 7%);--success:var(--green-1100);--success-emphasis:oklch(from var(--green-900) l c h / 10%);--text-primary:var(--gray-1200);--text-secondary:var(--gray-1100);--text-tertiary:var(--gray-1000);--border-color:var(--gray-400);--card-background:var(--gray-200);--input-active:var(--blue-900);--input-background:var(--gray-000);--input-disabled:var(--gray-300);--input-border:var(--gray-500);--input-focus:var(--blue-800);--shadow-color:var(--local-shadow-color, 223deg 5% 80%);--code-snippet-background:var(--gray-200);--token-comment:var(--gray-1000);--token-selector:var(--blue-900);--token-symbol:var(--blue-1100);--token-operator:var(--gray-1000);--token-keyword:var(--blue-1000);--token-function:var(--pink-1000);--token-punctuation:var(--blue-900)}@supports not (color: rgb(from white r g b)){.maximeheckel-light{--header:oklch(99.24% 0.008 var(--base-hue) / 40%);--emphasis:oklch(64.6% 0.172 var(--base-hue) / 7%);--foreground:oklch(98.08% 0.008 var(--base-hue) / 100%);--danger-emphasis:oklch(91.3% 0.134 170 / 10%);--warning-emphasis:oklch(54.63% 0.140 60 / 10%);--success-emphasis:oklch(88.54% 0.19 170 / 10%)}}.maximeheckel-dark{--base-hue:262.04;--white:oklch(100% 0 0);--gray-000:oklch(12.92% 0.005 var(--base-hue));--gray-100:oklch(14.68% 0.01 var(--base-hue));--gray-200:oklch(16.75% 0.011 var(--base-hue));--gray-300:oklch(17.8% 0.012 var(--base-hue));--gray-400:oklch(24.84% 0.018 var(--base-hue));--gray-500:oklch(28.69% 0.023 var(--base-hue));--gray-600:oklch(35.33% 0.028 var(--base-hue));--gray-700:oklch(41.6% 0.035 var(--base-hue));--gray-800:oklch(48.49% 0.042 var(--base-hue));--gray-900:oklch(56.78% 0.05 var(--base-hue));--gray-1000:oklch(66.65% 0.04 var(--base-hue));--gray-1100:oklch(77.16% 0.028 var(--base-hue));--gray-1200:oklch(94.23% 0.006 var(--base-hue));--blue-100:oklch(100% 0 var(--base-hue));--blue-200:oklch(98.91% 0.005 var(--base-hue));--blue-300:oklch(96.85% 0.013 var(--base-hue));--blue-400:oklch(93.66% 0.027 var(--base-hue));--blue-500:oklch(88.34% 0.052 var(--base-hue));--blue-600:oklch(81.53% 0.078 var(--base-hue));--blue-700:oklch(71.65% 0.122 var(--base-hue));--blue-800:oklch(61.53% 0.1675 var(--base-hue));--blue-900:oklch(53.19% 0.212 var(--base-hue));--blue-1000:oklch(44.51% 0.216 var(--base-hue));--blue-1100:oklch(36.42% 0.168 var(--base-hue));--blue-1200:oklch(23.85% 0.101 var(--base-hue));--green-100:oklch(23.08% 0.04 170);--green-200:oklch(24.95% 0.04 170);--green-300:oklch(28.57% 0.056 170);--green-400:oklch(33.81% 0.067 170);--green-500:oklch(40.49% 0.081 170);--green-600:oklch(50.03% 0.101 170);--green-700:oklch(60.62% 0.123 170);--green-800:oklch(73.6% 0.150 170);--green-900:oklch(86.02% 0.176 170);--green-1000:oklch(89.3% 0.169 170);--green-1100:oklch(91.18% 0.134 170);--green-1200:oklch(94.49% 0.08 170);--red-100:oklch(20.11% 0.07 22);--red-200:oklch(21.27% 0.075 22);--red-300:oklch(23.51% 0.084 22);--red-400:oklch(26.84% 0.099 22);--red-500:oklch(31.03% 0.116 22);--red-600:oklch(37.24% 0.143 22);--red-700:oklch(43.14% 0.167 22);--red-800:oklch(51.82% 0.204 22);--red-900:oklch(60.12% 0.235 22);--red-1000:oklch(64.51% 0.204 22);--red-1100:oklch(73.3% 0.145 22);--red-1200:oklch(85.47% 0.071 22);--orange-100:oklch(20.38% 0.044 60);--orange-200:oklch(21.87% 0.048 60);--orange-300:oklch(24.79% 0.055 60);--orange-400:oklch(28.78% 0.067 60);--orange-500:oklch(34.43% 0.081 60);--orange-600:oklch(42.19% 0.101 60);--orange-700:oklch(50.38% 0.125 60);--orange-800:oklch(60.87% 0.153 60);--orange-900:oklch(70.93% 0.18 60);--orange-1000:oklch(76.91% 0.165 60);--orange-1100:oklch(83.38% 0.121 60);--orange-1200:oklch(90.99% 0.066 60);--pink-100:oklch(91.7% 0.052 352);--pink-200:oklch(90.69% 0.059 352);--pink-300:oklch(89.72% 0.06 352);--pink-400:oklch(86.75% 0.086 352);--pink-500:oklch(82.97% 0.114 352);--pink-600:oklch(77.72% 0.155 352);

1--pink-700:oklch(73.12% 0.194 352);--pink-800:oklch(68.84% 0.231 352);--pink-900:oklch(65.43% 0.257 352);--pink-1000:oklch(55.6% 0.24 352);--pink-1100:oklch(42.39% 0.195 352);--pink-1200:oklch(30.21% 0.138 352);--accent:var(--blue-800);--background:var(--gray-100);--header:oklch(from var(--gray-100) l c h / 40%);--emphasis:oklch(from var(--blue-800) l c h / 7%);--hyperlink:var(--blue-800);--foreground:var(--gray-300);--danger:var(--red-1000);--danger-emphasis:oklch(from var(--red-1000) l c h / 10%);--warning:var(--orange-900);--warning-emphasis:oklch(from var(--orange-900) l c h / 10%);--success:var(--green-900);--success-emphasis:;--text-primary:var(--blue-400);--text-secondary:var(--gray-1100);--text-tertiary:var(--gray-1000);--border-color:var(--gray-400);--card-background:var(--gray-200);--input-active:var(--blue-800);--input-background:var(--gray-000);--input-disabled:var(--gray-400);--input-border:var(--gray-600);--input-focus:var(--blue-900);--shadow-color:var(--local-shadow-color, 223deg 5% 1%);--code-snippet-background:var(--gray-200);--token-comment:var(--gray-1000);--token-selector:var(--blue-600);--token-symbol:var(--blue-800);--token-operator:var(--orange-1200);--token-keyword:var(--blue-700);--token-function:var(--pink-400);--token-punctuation:var(--blue-600)}@supports not (color: rgb(from white r g b)){.maximeheckel-dark{--header:oklch(18.68% 0.01 var(--base-hue) / 40%);--emphasis:oklch(64.6% 0.172 var(--base-hue) / 7%);--danger-emphasis:oklch(64.51% 0.204 22 / 10%);--warning-emphasis:oklch(76.91% 0.165 60 / 10%);--success-emphasis:oklch(86.02% 0.176 170 / 10%)}}}</style><link rel="stylesheet" href="/_next/static/css/8faf108f5dc9964b.css?dpl=dpl_2DSE3bCib5yWAjykJ8xxhuP677gi" data-n-g=""/><noscript data-n-css=""></noscript>

1<script defer="" noModule="" src="/_next/static/chunks/polyfills-42372ed130431b0a.js?dpl=dpl_2DSE3bCib5yWAjykJ8xxhuP677gi"></script>

1<script src="/_next/static/chunks/webpack-cef8094b540cadfb.js?dpl=dpl_2DSE3bCib5yWAjykJ8xxhuP677gi" defer=""></script>

1<script src="/_next/static/chunks/framework-33bcc45ceb18950f.js?dpl=dpl_2DSE3bCib5yWAjykJ8xxhuP677gi" defer=""></script>

1<script src="/_next/static/chunks/main-c96c41e25ca82029.js?dpl=dpl_2DSE3bCib5yWAjykJ8xxhuP677gi" defer=""></script>

1<script src="/_next/static/chunks/pages/_app-9a1513b74e4d0e55.js?dpl=dpl_2DSE3bCib5yWAjykJ8xxhuP677gi" defer=""></script>

1<script src="/_next/static/chunks/394f23e0-6a5cba437b20b753.js?dpl=dpl_2DSE3bCib5yWAjykJ8xxhuP677gi" defer=""></script>

1<script src="/_next/static/chunks/f8e28c46-769763167d0447fe.js?dpl=dpl_2DSE3bCib5yWAjykJ8xxhuP677gi" defer=""></script>

1<script src="/_next/static/chunks/c1049093-9414bfe28d1bf25c.js?dpl=dpl_2DSE3bCib5yWAjykJ8xxhuP677gi" defer=""></script>

1<script src="/_next/static/chunks/b31a666a-c50b3876b58aedd0.js?dpl=dpl_2DSE3bCib5yWAjykJ8xxhuP677gi" defer=""></script>

1<script src="/_next/static/chunks/7965-af995815268c2637.js?dpl=dpl_2DSE3bCib5yWAjykJ8xxhuP677gi" defer=""></script>

1<script src="/_next/static/chunks/456-78709ac951e365aa.js?dpl=dpl_2DSE3bCib5yWAjykJ8xxhuP677gi" defer=""></script>

1<script src="/_next/static/chunks/5499-9e2861d9f4980661.js?dpl=dpl_2DSE3bCib5yWAjykJ8xxhuP677gi" defer=""></script>

1<script src="/_next/static/chunks/4853-44d5cc12817c33da.js?dpl=dpl_2DSE3bCib5yWAjykJ8xxhuP677gi" defer=""></script>

1<script src="/_next/static/chunks/9294-4c06bcbf3baed857.js?dpl=dpl_2DSE3bCib5yWAjykJ8xxhuP677gi" defer=""></script>

1<script src="/_next/static/chunks/2953-b59467b8bdb2ce55.js?dpl=dpl_2DSE3bCib5yWAjykJ8xxhuP677gi" defer=""></script>

1<script src="/_next/static/chunks/6387-878e400fc085c155.js?dpl=dpl_2DSE3bCib5yWAjykJ8xxhuP677gi" defer=""></script>

1<script src="/_next/static/chunks/pages/webgpu/caustics-8e1673efb0beb1d1.js?dpl=dpl_2DSE3bCib5yWAjykJ8xxhuP677gi" defer=""></script>

1<script src="/_next/static/it_4Im1JcGlm1MyNdpkNL/_buildManifest.js?dpl=dpl_2DSE3bCib5yWAjykJ8xxhuP677gi" defer=""></script>

1<script src="/_next/static/it_4Im1JcGlm1MyNdpkNL/_ssgManifest.js?dpl=dpl_2DSE3bCib5yWAjykJ8xxhuP677gi" defer=""></script>

1</head><body><div id="__next"><div style="position:relative;width:100%;height:100%;overflow:hidden;pointer-events:auto"><div style="width:100%;height:100%"><canvas style="display:block"></canvas></div></div></div>

1<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/webgpu/caustics","query":{},"buildId":"it_4Im1JcGlm1MyNdpkNL","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script>

1</body></html>