{"id":25304322,"url":"https://github.com/1bye/threlte-postprocessing","last_synced_at":"2025-04-07T03:35:30.502Z","repository":{"id":277132486,"uuid":"931094489","full_name":"1bye/threlte-postprocessing","owner":"1bye","description":"📬 postprocessing for svelte three.js (threlte)","archived":false,"fork":false,"pushed_at":"2025-03-03T10:27:05.000Z","size":1366,"stargazers_count":9,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-04T06:47:24.797Z","etag":null,"topics":["3d","js","postprocessing","svelte","svelte-postprocessing","threejs","threlte","ts","webgl"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/1bye.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-11T17:54:28.000Z","updated_at":"2025-03-22T01:07:57.000Z","dependencies_parsed_at":"2025-02-13T08:48:52.318Z","dependency_job_id":null,"html_url":"https://github.com/1bye/threlte-postprocessing","commit_stats":null,"previous_names":["1bye/threlte-postprocessing"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/1bye%2Fthrelte-postprocessing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/1bye%2Fthrelte-postprocessing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/1bye%2Fthrelte-postprocessing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/1bye%2Fthrelte-postprocessing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/1bye","download_url":"https://codeload.github.com/1bye/threlte-postprocessing/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247589653,"owners_count":20963020,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d","js","postprocessing","svelte","svelte-postprocessing","threejs","threlte","ts","webgl"],"created_at":"2025-02-13T08:19:59.736Z","updated_at":"2025-04-07T03:35:30.496Z","avatar_url":"https://github.com/1bye.png","language":"TypeScript","funding_links":[],"categories":["Related Frameworks"],"sub_categories":["Svelte"],"readme":"# Threlte Postprocessing\n\n[//]: # (\u003cp align=\"center\"\u003e)\n\n[//]: # (  \u003cimg width=\"1200\" src=\"https://raw.githubusercontent.com/1bye/threlte-postprocessing/main/banner.png\" alt=\"Threlte Postprocessing\" /\u003e)\n\n[//]: # (\u003c/p\u003e)\n\n[![Version](https://img.shields.io/npm/v/threlte-postprocessing?style=flat\u0026colorA=000000\u0026colorB=000000)](https://www.npmjs.com/package/threlte-postprocessing)\n[![Downloads](https://img.shields.io/npm/dt/threlte-postprocessing.svg?style=flat\u0026colorA=000000\u0026colorB=000000)](https://www.npmjs.com/package/threlte-postprocessing)\n[![License](https://img.shields.io/npm/l/threlte-postprocessing?style=flat\u0026colorA=000000\u0026colorB=000000)](https://github.com/1bye/threlte-postprocessing/blob/main/LICENSE)\n\nThrelte Postprocessing is a postprocessing effects library for [Threlte](https://threlte.xyz/), bringing powerful post-processing capabilities to your Svelte 3D applications. Built on top of [three.js](https://threejs.org/) and [postprocessing](https://github.com/pmndrs/postprocessing), it provides a set of ready-to-use effects that can be easily integrated into your Threlte scenes.\n\n```bash\nnpm install threlte-postprocessing\n```\n\n## Quick start 🚀\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n  import { Canvas } from \"@threlte/core\";\n  import Scene from \"./Scene.svelte\";\n\u003c/script\u003e\n\n\u003cCanvas\u003e\n  \u003cScene /\u003e\n\u003c/Canvas\u003e\n```\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n  import { EffectComposer } from 'threlte-postprocessing'\n  import { DepthOfFieldEffect, BloomEffect, NoiseEffect, VignetteEffect } from 'threlte-postprocessing/effects'\n\u003c/script\u003e\n\n\u003cEffectComposer\u003e\n  \u003cDepthOfFieldEffect focusDistance={0} focalLength={0.02} bokehScale={2} height={480} /\u003e\n  \u003cBloomEffect luminanceThreshold={0} luminanceSmoothing={0.9} height={300} /\u003e\n  \u003cNoiseEffect opacity={0.02} /\u003e\n  \u003cVignetteEffect eskil={false} offset={0.1} darkness={1.1} /\u003e\n\u003c/EffectComposer\u003e\n```\n\n## Demo\nLink to [demo](https://codesandbox.io/p/github/1bye/threlte-postprocessing/main)\n\n## Features ✨\n\n- 🎯 Seamless integration with Threlte and Svelte\n- ⚡️ Simple, declarative API\n- 🎨 Rich set of post-processing effects\n- 📦 Tree-shakeable effects\n- 🔧 Fully typed with TypeScript\n- 🎮 Real-time effect parameter updates\n\n## Effects Documentation 📚\n\n### Bloom\nAdds a glow effect to bright areas of the scene.\n\n```svelte\n\u003cBloomEffect\n  intensity={1.0}           // The intensity of the bloom effect (default: 1.0)\n  luminanceThreshold={0.9}  // Minimum luminance required for bloom (default: 0.9)\n  luminanceSmoothing={0.025}// Smoothing of the luminance threshold (default: 0.025)\n  mipmapBlur={false}       // Whether to use mipmap blur (default: false)\n  height={480}             // Render height (default: 480)\n/\u003e\n```\n\n### BrightnessContrast\nAdjusts the brightness and contrast of the scene.\n\n```svelte\n\u003cBrightnessContrastEffect\n  brightness={0}           // Brightness adjustment (-1 to 1, default: 0)\n  contrast={0}            // Contrast adjustment (-1 to 1, default: 0)\n/\u003e\n```\n\n### ChromaticAberration\nSimulates lens color separation artifacts.\n\n```svelte\n\u003cChromaticAberrationEffect\n  offset={[0.002, 0.002]}  // RGB offset vector (default: [0.002, 0.002])\n  radialModulation={false} // Enable radial offset modulation (default: false)\n  modulationOffset={0.15}  // Modulation offset (default: 0.15)\n/\u003e\n```\n\n### ColorAverage\nReduces the image to a single average color.\n\n```svelte\n\u003cColorAverageEffect /\u003e\n```\n\n### ColorDepth\nReduces the color depth of the image.\n\n```svelte\n\u003cColorDepthEffect\n  bits={16}               // Number of bits per channel (default: 16)\n/\u003e\n```\n\n### ColorGrading\nApplies color adjustments to the final render.\n\n```svelte\n\u003cColorGradingEffect\n  lut={texture}            // Color lookup texture\n  lutSize={32}            // Size of the lookup texture (default: 32)\n  intensity={1.0}         // Effect intensity (default: 1.0)\n/\u003e\n```\n\n### Depth\nRenders the scene's depth buffer.\n\n```svelte\n\u003cDepthEffect\n  inverted={false}        // Invert the depth values (default: false)\n  near={0}               // Near plane distance (default: 0)\n  far={1}               // Far plane distance (default: 1)\n/\u003e\n```\n\n### DepthOfField\nSimulates camera focus effects by blurring objects based on their distance from the focal point.\n\n```svelte\n\u003cDepthOfFieldEffect\n  focusDistance={0.0}      // Distance to the focus point (default: 0.0)\n  focalLength={0.02}       // Focal length of the simulated camera (default: 0.02)\n  bokehScale={2.0}         // Size of the bokeh effect (default: 2.0)\n  height={480}             // Render height (default: 480)\n/\u003e\n```\n\n### DotScreen\nCreates a dot-screen effect similar to halftone printing.\n\n```svelte\n\u003cDotScreenEffect\n  angle={1.57}            // Pattern angle in radians (default: 1.57)\n  scale={1.0}             // Pattern scale (default: 1.0)\n/\u003e\n```\n\n### Glitch\nCreates digital glitch effects.\n\n```svelte\n\u003cGlitchEffect\n  delay={[1.5, 3.5]}      // Min/max delay between glitches (default: [1.5, 3.5])\n  duration={[0.6, 1.0]}   // Min/max glitch duration (default: [0.6, 1.0])\n  strength={[0.3, 1.0]}   // Min/max glitch strength (default: [0.3, 1.0])\n  mode={GlitchMode.CONSTANT} // Glitch mode (CONSTANT, SPORADIC)\n/\u003e\n```\n\n### GodRays\nCreates volumetric lighting effects.\n\n```svelte\n\u003cGodRaysEffect\n  decay={0.95}            // Light decay factor (default: 0.95)\n  density={0.96}          // Ray density (default: 0.96)\n  weight={0.4}            // Ray weight (default: 0.4)\n  exposure={0.6}          // Ray exposure (default: 0.6)\n  samples={60}            // Number of samples (default: 60)\n/\u003e\n```\n\n### Grid\nOverlays a grid pattern on the scene.\n\n```svelte\n\u003cGridEffect\n  scale={1.0}             // Grid scale (default: 1.0)\n  lineWidth={0.0}         // Grid line width (default: 0.0)\n/\u003e\n```\n\n### HueSaturation\nAdjusts the hue and saturation of the scene.\n\n```svelte\n\u003cHueSaturationEffect\n  hue={0}                 // Hue adjustment (-Math.PI to Math.PI, default: 0)\n  saturation={0}          // Saturation adjustment (-1 to 1, default: 0)\n/\u003e\n```\n\n### Noise\nAdds film grain or noise to the scene.\n\n```svelte\n\u003cNoiseEffect\n  opacity={0.02}           // Noise opacity (default: 0.02)\n  premultiply={false}      // Whether to premultiply the noise (default: false)\n  blendFunction={BlendFunction.SCREEN} // Blend mode for the noise\n/\u003e\n```\n\n### Pixelation\nCreates a pixelated effect by reducing the resolution.\n\n```svelte\n\u003cPixelationEffect\n  granularity={5}         // Size of pixels (default: 5)\n/\u003e\n```\n\n### Scanline\nAdds scanlines to the scene, similar to old CRT displays.\n\n```svelte\n\u003cScanlineEffect\n  density={1.25}          // Line density (default: 1.25)\n/\u003e\n```\n\n### Sepia\nApplies a sepia tone to the scene.\n\n```svelte\n\u003cSepiaEffect\n  intensity={1.0}         // Effect intensity (default: 1.0)\n/\u003e\n```\n\n### SMAA (Subpixel Morphological Antialiasing)\nProvides high-quality antialiasing.\n\n```svelte\n\u003cSMAAEffect\n  preset={SMAAPreset.HIGH} // Quality preset (LOW, MEDIUM, HIGH, ULTRA)\n  edgeDetectionMode={EdgeDetectionMode.COLOR} // Detection mode (COLOR, DEPTH, LUMA)\n/\u003e\n```\n\n### ToneMapping\nApplies tone mapping to the scene.\n\n```svelte\n\u003cToneMappingEffect\n  mode={ToneMappingMode.REINHARD} // Tone mapping mode (REINHARD, OPTIMIZED, ACES, HEJL)\n  exposure={1.0}          // Exposure level (default: 1.0)\n  maxLuminance={16.0}     // Maximum luminance (default: 16.0)\n  middleGrey={0.6}        // Middle grey point (default: 0.6)\n  whitePoint={16.0}       // White point (default: 16.0)\n/\u003e\n```\n\n### Vignette\nDarkens the edges of the scene.\n\n```svelte\n\u003cVignetteEffect\n  offset={0.5}             // Offset of the effect (default: 0.5)\n  darkness={0.5}           // Intensity of the darkening (default: 0.5)\n  eskil={false}            // Use Eskil's vignette technique (default: false)\n/\u003e\n```\n\n### Custom Fluid Effect\nFluid like in [react-fluid](https://github.com/whatisjery/react-fluid-distortion/tree/main)\n```svelte\n\u003cscript lang=\"ts\"\u003e\n    import { FluidEffect } from \"threlte-postprocessing/custom\";\n\u003c/script\u003e\n\n\u003c!-- Don't forget to wrap it with \u003cEffectComposer\u003e! --\u003e\n\u003cFluidEffect /\u003e\n```\n\n### And more...\nYou can check more effects in [effects folder](./src/lib/effects)\n\n## Contributing 🤝\n\nWe welcome contributions! Here's how you can help:\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-effect`)\n3. Commit your changes (`git commit -m 'Add amazing effect'`)\n4. Push to the branch (`git push origin feature/amazing-effect`)\n5. Open a Pull Request\n\n## Performance Tips 💨\n\n- Only use the effects you need\n- Adjust effect quality settings based on device capabilities\n- Consider using the `\u003cEffectComposer\u003e` component for better control\n- Enable effect pass switching for dynamic performance optimization\n\n## Credits 🙏\n\nThis library builds upon several amazing projects:\n- [Threlte](https://threlte.xyz/)\n- [three.js](https://threejs.org/)\n- [postprocessing](https://github.com/pmndrs/postprocessing)\n\n## License 📄\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n---\n\n\u003cp align=\"center\"\u003eMade with ❤️ for the Threlte and Svelte community\u003c/p\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F1bye%2Fthrelte-postprocessing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F1bye%2Fthrelte-postprocessing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F1bye%2Fthrelte-postprocessing/lists"}