[
{
"path": ".gitignore",
"content": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndist-ssr\n*.local\n\n# Editor directories and files\n.vscode/*\n!.vscode/extensions.json\n.idea\n.DS_Store\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw?\n.yarn"
},
{
"path": ".prettierrc",
"content": "{\n \"trailingComma\": \"none\",\n \"tabWidth\": 2,\n \"semi\": true,\n \"singleQuote\": false\n}\n"
},
{
"path": ".yarnrc.yml",
"content": "nodeLinker: node-modules\n"
},
{
"path": "LICENSE.md",
"content": "MIT License\n\nCopyright (c) 2024 Poimandres\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
},
{
"path": "README.md",
"content": "
\n\nreact-three-gpu-pathtracer
\n\n\n
\n\n\n ![](\"https://github.com/pmndrs/react-three-gpu-pathtracer/blob/main/assets/hero-screenshot.png?raw=true\"/)
\n
\n\n This demo is real, you can click it! It contains full code, too. 📦\n
\n\nGameBoy model by \n(@kleingeo)\n\n on Sketchfab\n\n. GameBoy Cartridge by \n(@MeBob)\n\n on Sketchfab\n\n.\n
\n\n
\n\n\n \n ![](\"https://img.shields.io/npm/v/@react-three/gpu-pathtracer.svg?style=flat&colorA=000000&colorB=000000\")
\n \n \n ![](\"https://img.shields.io/npm/dm/@react-three/gpu-pathtracer.svg?style=flat&colorA=000000&colorB=000000\")
\n \n \n ![\"Chat](\"https://img.shields.io/twitter/follow/pmndrs?label=%40pmndrs&style=flat&colorA=000000&colorB=000000&logo=twitter&logoColor=000000\")
\n \n \n ![\"Chat](\"https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=000000\")
\n \n
\n\n
\n\n`react-three-gpu-pathtracer` lets you render your `react-three-fiber` scenes using Path Tracing! It is as simple as\n\n```jsx\nimport { Pathtracer } from \"@react-three/gpu-pathtracer\";\n\nfunction GradientSphere() {\n return (\n \n );\n}\n```\n\nThe `` component wraps your scene. The scene is then rendered using Path Tracing.\n\n#### Props\n\n| Prop | Type | Default | Description |\n| ------------ | ---------------------------------------------------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------- |\n| `minSamples` | `number` | `1` | Default: 5. Min number of samples before blending the base scene with the pathtraced one. |\n| `samples` | `number` | `1` | Max number of samples before the pathtracer stops. |\n| `frames` | `number` | `Infinity` | Number of frames to path trace. Will pause rendering once this number is reached. |\n| `tiles` | `[number, number] / THREE.Vector2 / { x: number; y: number } / number` | `2` | Number of tiles. Can be used to improve the responsiveness of a page while still rendering a high resolution target. |\n| `bounces` | `number` | `1` | The number of ray bounces to test. Higher is better quality but slower performance. |\n| `enabled` | `boolean` | `true` | Wether to enable pathtracing. |\n\n### Env maps\n\nEnv maps can be added using [Drei's ``](https://github.com/pmndrs/drei#environment) component just like in a regular scene.\n\n```jsx\n\n \n\n```\n\n### `usePathtracer`\n\nThis hook provides access to useful functions in the internal renderer. Can only be used within the `` component.\n\n```ts\nconst { renderer, update, reset } = usePathtracer();\n```\n\n| Return value | Type | Description |\n| -------------- | ----------------- | ------------------------------------------------------------------------------------------- |\n| `pathtracer` | `WebGLPathTracer` | Internal renderer. Can be used to access/edit internal properties |\n| ~~`renderer`~~ | `WebGLPathTracer` | DEPRECIATED: use `pathtracer` to not get confused with raster renderer |\n| `reset` | `() => void` | Flushes the rendered scene and resets the samples count. |\n| `update` | `() => void` | Tells the pathtracer that the scene has been updated. Everything is managed internally now. |\n\n### Note on controls\n\nWhen you set controls be sure to use `makeDefault` and it's best to import the `OrbitControls` [from drei](https://drei.docs.pmnd.rs/controls/introduction)\n\n```jsx\n\n // ...\n```\n\n### Development\n\n#### Dev\n\n```bash\ncd project-root\nyarn\nyarn dev\n```\n\n#### Build\n\n```bash\nyarn build\n```\n\n#### Publish\n\n```bash\ncd package\nnpm run release\n```\n"
},
{
"path": "example/.codesandbox/tasks.json",
"content": "{\n // These tasks will run in order when initializing your CodeSandbox project.\n \"setupTasks\": [\n {\n \"name\": \"Installing Dependencies\",\n \"command\": \"yarn install\"\n }\n ],\n\n // These tasks can be run from CodeSandbox. Running one will open a log in the app.\n \"tasks\": {\n \"dev\": {\n \"name\": \"dev\",\n \"command\": \"rm -f vite.config.ts && cp csb.vite.config.js vite.config.ts && yarn add @react-three/gpu-pathtracer && yarn dev\",\n \"runAtStart\": true,\n \"preview\": {\n \"port\": 5173\n }\n },\n \"build\": {\n \"name\": \"build\",\n \"command\": \"yarn build\",\n \"runAtStart\": false\n },\n \"preview\": {\n \"name\": \"preview\",\n \"command\": \"yarn preview\",\n \"runAtStart\": false\n }\n }\n}\n"
},
{
"path": "example/README.md",
"content": "
\n\nreact-three-gpu-pathtracer
\n\n\n---\n\nExample
\n"
},
{
"path": "example/csb.vite.config.js",
"content": "import react from '@vitejs/plugin-react'\nimport { defineConfig } from 'vite'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n resolve: {\n plugins: [react()],\n },\n})\n"
},
{
"path": "example/index.html",
"content": "\n\n \n \n ⚡️\"\n />\n \n @react-three/gpu-pathtracer | Example\n \n \n \n \n \n\n"
},
{
"path": "example/package.json",
"content": "{\n \"name\": \"@react-three/gpu-pathtracer-example\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"tsc -b && vite build\",\n \"preview\": \"vite preview\"\n },\n \"dependencies\": {\n \"@pmndrs/branding\": \"^0.0.8\",\n \"@react-three/drei\": \"^10.3.0\",\n \"@react-three/fiber\": \"^9.1.2\",\n \"@react-three/gpu-pathtracer\": \"^0.1.1\",\n \"leva\": \"^0.9.35\",\n \"react\": \"^19.1.0\",\n \"react-dom\": \"^19.1.0\",\n \"react-icons\": \"^5.3.0\",\n \"three\": \"^0.169.0\"\n },\n \"devDependencies\": {\n \"@types/node\": \"^22.5.5\",\n \"@types/react\": \"^18.3.3\",\n \"@types/react-dom\": \"^18.3.0\",\n \"@vitejs/plugin-react\": \"^4.3.1\",\n \"globals\": \"^15.9.0\",\n \"typescript\": \"^5.5.3\",\n \"vite\": \"^5.4.1\"\n }\n}\n"
},
{
"path": "example/src/App.tsx",
"content": "import {\n Bounds,\n Center,\n Circle,\n Environment,\n OrbitControls,\n PerspectiveCamera,\n Stats,\n useTexture\n} from \"@react-three/drei\";\nimport { Canvas, useFrame } from \"@react-three/fiber\";\nimport { Pathtracer, usePathtracer } from \"@react-three/gpu-pathtracer\";\nimport { Leva } from \"leva\";\nimport { useEffect, useRef } from \"react\";\n\nimport Controls from \"./Controls\";\n\nimport { ACESFilmicToneMapping, MathUtils } from \"three\";\nimport Model from \"./Model\";\nimport Tag from \"./Tag\";\n\nconst baseURL = import.meta.env.BASE_URL;\n\nfunction Floor() {\n const [aoMap, diffMap, norMap, roughMap] = useTexture([\n baseURL + \"/textures/wood_cabinet_worn_long_ao_2k.jpg\",\n baseURL + \"/textures/wood_cabinet_worn_long_diff_2k.jpg\",\n baseURL + \"/textures/wood_cabinet_worn_long_nor_gl_2k.jpg\",\n baseURL + \"/textures/wood_cabinet_worn_long_rough_2k.jpg\"\n ]);\n\n return (\n <>\n \n \n \n \n );\n}\n\nfunction UI({ infoRef }) {\n const { pathtracer } = usePathtracer();\n const opts = Controls();\n\n useFrame(() => {\n if (pathtracer && infoRef.current) {\n infoRef.current.children[0].textContent = `Samples: ${Math.ceil(\n // @ts-ignore\n pathtracer.samples\n )}/${opts.Rendering_Samples}`;\n\n // @ts-ignore\n infoRef.current.children[1].textContent = pathtracer.isCompiling\n ? `Initializing...`\n : \"\";\n }\n });\n\n return null;\n}\n\nfunction Thing() {\n const { reset, update } = usePathtracer();\n const opts = Controls();\n\n // Trigger updates when envmap stuff changes\n useEffect(() => {\n update();\n }, [\n opts.Environment_Visible,\n opts.Environment_Preset,\n opts.Environment_Intensity,\n opts.Environment_Blur\n ]);\n\n return (\n <>\n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nexport default function App() {\n const infoRef = useRef();\n const opts = Controls();\n\n return (\n <>\n \n \n \n \n\n \n {opts.Environment_Visible ? (\n \n ) : (\n \n )}\n\n \n \n \n \n \n \n
Samples: 0
\n
Initializing...
\n
\n
\n @react-three/gpu-pathtracer\n {\" \"}\n \n
\n \n \n \n \n\n
\n \n \n \n @react-three/gpu-pathtracer\n {\" \"}\n is a React port of{\" \"}\n \n three-gpu-pathtracer\n {\" \"}\n by{\" \"}\n \n Garrett Johnson\n \n \n \n GameBoy model by{\" \"}\n (@kleingeo){\" \"}\n \n on Sketchfab\n \n . GameBoy Cartridge by{\" \"}\n (@MeBob){\" \"}\n \n on Sketchfab\n \n .\n \n