├── thumbnail.png ├── package └── lens-flare │ ├── src │ ├── index.jsx │ └── effect │ │ ├── util.jsx │ │ └── LensFlare.jsx │ ├── esbuild.dev.js │ ├── package.json │ ├── esbuild.build.js │ └── README.md ├── example ├── public │ ├── favicon.ico │ ├── social.jpg │ ├── background.hdr │ ├── Inter-Bold.woff │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── lensDirtTexture.png │ ├── apple-touch-icon.png │ ├── android-chrome-192x192.png │ ├── android-chrome-512x512.png │ ├── digital_painting_golden_hour_sunset.jpg │ ├── site.webmanifest │ ├── package.json │ └── index.html ├── jsconfig.json ├── next.config.js ├── src │ ├── pages │ │ ├── _app.js │ │ ├── _document.js │ │ └── index.js │ ├── components │ │ ├── Overlay.js │ │ ├── Skybox.js │ │ └── Scene.js │ └── styles │ │ └── globals.css ├── .gitignore ├── package.json ├── README.md └── package-lock.json ├── turbo.json ├── package.json ├── .gitignore ├── LICENSE └── README.md /thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ektogamat/R3F-Ultimate-Lens-Flare/HEAD/thumbnail.png -------------------------------------------------------------------------------- /package/lens-flare/src/index.jsx: -------------------------------------------------------------------------------- 1 | export { default as LensFlare } from "./effect/LensFlare.jsx"; 2 | -------------------------------------------------------------------------------- /example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ektogamat/R3F-Ultimate-Lens-Flare/HEAD/example/public/favicon.ico -------------------------------------------------------------------------------- /example/public/social.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ektogamat/R3F-Ultimate-Lens-Flare/HEAD/example/public/social.jpg -------------------------------------------------------------------------------- /example/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "paths": { 4 | "@/*": ["./src/*"] 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /example/public/background.hdr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ektogamat/R3F-Ultimate-Lens-Flare/HEAD/example/public/background.hdr -------------------------------------------------------------------------------- /example/public/Inter-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ektogamat/R3F-Ultimate-Lens-Flare/HEAD/example/public/Inter-Bold.woff -------------------------------------------------------------------------------- /example/public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ektogamat/R3F-Ultimate-Lens-Flare/HEAD/example/public/favicon-16x16.png -------------------------------------------------------------------------------- /example/public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ektogamat/R3F-Ultimate-Lens-Flare/HEAD/example/public/favicon-32x32.png -------------------------------------------------------------------------------- /example/public/lensDirtTexture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ektogamat/R3F-Ultimate-Lens-Flare/HEAD/example/public/lensDirtTexture.png -------------------------------------------------------------------------------- /example/public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ektogamat/R3F-Ultimate-Lens-Flare/HEAD/example/public/apple-touch-icon.png -------------------------------------------------------------------------------- /example/public/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ektogamat/R3F-Ultimate-Lens-Flare/HEAD/example/public/android-chrome-192x192.png -------------------------------------------------------------------------------- /example/public/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ektogamat/R3F-Ultimate-Lens-Flare/HEAD/example/public/android-chrome-512x512.png -------------------------------------------------------------------------------- /example/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | } 5 | 6 | module.exports = nextConfig 7 | -------------------------------------------------------------------------------- /example/src/pages/_app.js: -------------------------------------------------------------------------------- 1 | import '@/styles/globals.css' 2 | 3 | export default function App({ Component, pageProps }) { 4 | return 5 | } 6 | -------------------------------------------------------------------------------- /example/public/digital_painting_golden_hour_sunset.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ektogamat/R3F-Ultimate-Lens-Flare/HEAD/example/public/digital_painting_golden_hour_sunset.jpg -------------------------------------------------------------------------------- /example/public/site.webmanifest: -------------------------------------------------------------------------------- 1 | {"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} -------------------------------------------------------------------------------- /example/src/pages/_document.js: -------------------------------------------------------------------------------- 1 | import { Html, Head, Main, NextScript } from 'next/document' 2 | 3 | export default function Document() { 4 | return ( 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /turbo.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://turbo.build/schema.json", 3 | "pipeline": { 4 | "build": { 5 | "dependsOn": ["^build"], 6 | "outputs": ["dist/**", ".next/**", "!.next/cache/**"] 7 | }, 8 | "start": { 9 | "dependsOn": ["build"] 10 | }, 11 | "dev": { 12 | "cache": false, 13 | "persistent": true 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /example/src/components/Overlay.js: -------------------------------------------------------------------------------- 1 | export default function Overlay() { 2 | return ( 3 | <> 4 |

5 | 6 | ANDERSON MANCINI.DEV 7 | 8 |

9 | 10 |
11 |

REACT THREE FIBER ULTIMATE LENS FLARE

12 |
13 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env*.local 29 | 30 | # vercel 31 | .vercel 32 | 33 | # typescript 34 | *.tsbuildinfo 35 | next-env.d.ts 36 | -------------------------------------------------------------------------------- /example/src/components/Skybox.js: -------------------------------------------------------------------------------- 1 | import { useTexture } from "@react-three/drei"; 2 | import { BackSide } from "three"; 3 | 4 | export default function SkyBox() { 5 | const texture = useTexture("/digital_painting_golden_hour_sunset.jpg"); 6 | 7 | return ( 8 | 9 | 14 | 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lens-flare", 3 | "packageManager": "npm@8.1.2", 4 | "workspaces": [ 5 | "example", 6 | "package/lens-flare" 7 | ], 8 | "devDependencies": { 9 | "turbo": "1.9.8", 10 | "vercel": "^30.0.0" 11 | }, 12 | "scripts": { 13 | "dev": "turbo dev", 14 | "start": "turbo start", 15 | "build": "turbo build", 16 | "build:package": "turbo build --filter=@andersonmancini/lens-flare", 17 | "build:example": "turbo build --filter=example", 18 | "publish": "cd package/lens-flare && npm publish --access=public", 19 | "version": "cd package/lens-flare && npm version" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "build": "next build", 7 | "deploy": "vercel deploy --prod", 8 | "dev": "next dev", 9 | "lint": "next lint", 10 | "start": "next start" 11 | }, 12 | "dependencies": { 13 | "@andersonmancini/lens-flare": "file:../package/lens-flare", 14 | "@react-three/drei": "9.58.5", 15 | "@react-three/fiber": "^8.13.0", 16 | "@react-three/postprocessing": "2.8.2", 17 | "eslint": "8.41.0", 18 | "eslint-config-next": "13.4.3", 19 | "leva": "0.9.31", 20 | "maath": "^0.5.3", 21 | "mobile-device-detect": "^0.4.3", 22 | "next": "13.4.3", 23 | "react": "18.2.0", 24 | "react-dom": "18.2.0", 25 | "three": "^0.152.2" 26 | }, 27 | "devDependencies": { 28 | "vercel": "^30.0.0" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /package/lens-flare/esbuild.dev.js: -------------------------------------------------------------------------------- 1 | const esbuild = require("esbuild"); 2 | const packagejson = require("./package.json"); 3 | 4 | const sharedConfig = { 5 | loader: { 6 | ".jsx": "jsx", 7 | ".js": "jsx", 8 | }, 9 | entryPoints: ["src/index.jsx"], 10 | outbase: "./src", 11 | bundle: true, 12 | jsxFactory: "createElement", 13 | jsxFragment: "Fragment", 14 | target: ["esnext"], 15 | logLevel: "debug", 16 | external: [...Object.keys(packagejson.peerDependencies || {})], 17 | }; 18 | 19 | const watch = async () => { 20 | const context = await esbuild.context({ 21 | ...sharedConfig, 22 | outdir: "dist/esm", 23 | sourcemap: true, 24 | format: "esm", 25 | banner: { 26 | js: "const { createElement, Fragment } = require('react');\n", 27 | }, 28 | }); 29 | 30 | await context.watch(); 31 | }; 32 | 33 | watch(); 34 | -------------------------------------------------------------------------------- /package/lens-flare/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@andersonmancini/lens-flare", 3 | "version": "1.0.1", 4 | "main": "dist/cjs/index.js", 5 | "module": "dist/esm/index.js", 6 | "scripts": { 7 | "dev": "node ./esbuild.dev.js", 8 | "build": "node ./esbuild.build.js", 9 | "clean": "rm -rf ./dist", 10 | "prebuild": "npm run clean", 11 | "predev": "npm run clean" 12 | }, 13 | "devDependencies": { 14 | "@react-three/drei": "^9.58.5", 15 | "@react-three/fiber": "^8.13.0", 16 | "esbuild": "^0.17.19", 17 | "maath": "^0.5.3", 18 | "postprocessing": "^6.31.0", 19 | "react": "^18.2.0", 20 | "react-dom": "^18.2.0", 21 | "three": "^0.152.2" 22 | }, 23 | "peerDependencies": { 24 | "@react-three/drei": "^9.58.5", 25 | "@react-three/fiber": "^8.13.0", 26 | "maath": "^0.5.3", 27 | "postprocessing": "^6.31.0", 28 | "react": "^18.2.0", 29 | "react-dom": "^18.2.0", 30 | "three": "^0.152.2" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /example/src/components/Scene.js: -------------------------------------------------------------------------------- 1 | import { Billboard, Center, Text } from "@react-three/drei"; 2 | import SkyBox from "./Skybox"; 3 | 4 | export default function Scene(props) { 5 | return ( 6 | <> 7 |
8 | 9 | 10 | 19 | LENS 20 | 21 | 27 | FLARE 28 | 29 | 30 |
31 | 32 | ); 33 | } 34 | -------------------------------------------------------------------------------- /example/public/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "anderson-mancini-lens-flare-simple-example", 3 | "version": "1.0.0", 4 | "description": "", 5 | "keywords": [], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "@react-three/drei": "9.58.4", 9 | "@react-three/fiber": "8.12.0", 10 | "@react-three/postprocessing": "2.7.1", 11 | "@types/three": "0.144.0", 12 | "leva": "0.9.31", 13 | "maath": "0.5.3", 14 | "mobile-device-detect": "^0.4.3", 15 | "postprocessing": "6.30.2", 16 | "react": "18.2.0", 17 | "react-dom": "18.2.0", 18 | "react-scripts": "5.0.1", 19 | "three": "0.151.3", 20 | "vercel": "^29.3.6" 21 | }, 22 | "scripts": { 23 | "start": "react-scripts start", 24 | "build": "react-scripts build", 25 | "test": "react-scripts test --env=jsdom", 26 | "eject": "react-scripts eject", 27 | "deploy": "vercel --prod" 28 | }, 29 | "browserslist": [ 30 | ">0.2%", 31 | "not dead", 32 | "not ie <= 11", 33 | "not op_mini all" 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /package/lens-flare/esbuild.build.js: -------------------------------------------------------------------------------- 1 | const esbuild = require("esbuild"); 2 | const packagejson = require("./package.json"); 3 | 4 | const sharedConfig = { 5 | loader: { 6 | ".jsx": "jsx", 7 | ".js": "jsx", 8 | }, 9 | entryPoints: ["src/index.jsx"], 10 | outbase: "./src", 11 | bundle: true, 12 | minify: true, 13 | jsxFactory: "createElement", 14 | jsxFragment: "Fragment", 15 | target: ["esnext"], 16 | logLevel: "debug", 17 | external: [...Object.keys(packagejson.peerDependencies || {})], 18 | }; 19 | 20 | esbuild 21 | .build({ 22 | ...sharedConfig, 23 | outdir: "dist/cjs", 24 | format: "cjs", 25 | banner: { 26 | js: "const { createElement, Fragment } = require('react');\n", 27 | }, 28 | }) 29 | .catch(() => process.exit(1)); 30 | 31 | esbuild 32 | .build({ 33 | ...sharedConfig, 34 | outdir: "dist/esm", 35 | splitting: true, 36 | format: "esm", 37 | banner: { 38 | js: "import { createElement, Fragment } from 'react';\n", 39 | }, 40 | }) 41 | .catch(() => process.exit(1)); 42 | -------------------------------------------------------------------------------- /package/lens-flare/src/effect/util.jsx: -------------------------------------------------------------------------------- 1 | // File copy pasted from https://github.com/pmndrs/react-postprocessing/blob/master/src/util.tsx 2 | 3 | import React, { forwardRef, useMemo, useLayoutEffect } from "react"; 4 | import { useThree } from "@react-three/fiber"; 5 | import { BlendFunction } from "postprocessing"; 6 | 7 | const wrapEffect = ( 8 | effectImpl, 9 | defaultBlendMode = BlendFunction.NORMAL 10 | ) => 11 | forwardRef(({ blendFunction, opacity, ...props }, ref) => { 12 | const invalidate = useThree((state) => state.invalidate); 13 | const effect = useMemo(() => new effectImpl(props), [props]); 14 | 15 | useLayoutEffect(() => { 16 | effect.blendMode.blendFunction = 17 | !blendFunction && blendFunction !== 0 18 | ? defaultBlendMode 19 | : blendFunction; 20 | if (opacity !== undefined) effect.blendMode.opacity.value = opacity; 21 | invalidate(); 22 | }, [blendFunction, effect.blendMode, opacity]); 23 | return ; 24 | }); 25 | 26 | export { wrapEffect } -------------------------------------------------------------------------------- /example/src/styles/globals.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;500&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | padding: 0; 6 | margin: 0; 7 | } 8 | 9 | html, 10 | body, 11 | #__next { 12 | width: 100%; 13 | height: 100%; 14 | overflow: hidden; 15 | } 16 | 17 | body { 18 | background: #f0f0f0; 19 | } 20 | 21 | .container { 22 | bottom: 4%; 23 | left: 50%; 24 | margin: 0; 25 | padding: 0; 26 | transform: translate(-50%, 60px); 27 | position: absolute; 28 | pointer-events: none; 29 | } 30 | 31 | h1 { 32 | font-family: 'Clash Display', sans-serif; 33 | font-size: 16.5vw; 34 | line-height: 1em; 35 | opacity: 0.95; 36 | color: white; 37 | user-select: none; 38 | pointer-events: none; 39 | opacity: 0.3; 40 | } 41 | 42 | h3 { 43 | font-family: 'Roboto', sans-serif; 44 | font-size: 1.65vw; 45 | user-select: none; 46 | pointer-events: none; 47 | position: relative; 48 | bottom: 60px; 49 | left: 0.8%; 50 | line-height: 0em; 51 | font-weight: 100; 52 | color: white; 53 | } 54 | 55 | h2 > a { 56 | font-family: 'Roboto', sans-serif; 57 | position: absolute; 58 | top: 5%; 59 | left: 3%; 60 | margin: 0; 61 | padding: 0; 62 | font-size: 1.2vw; 63 | user-select: none; 64 | pointer-events: none; 65 | font-weight: bold; 66 | text-decoration: none; 67 | color: black; 68 | cursor: pointer; 69 | pointer-events: all; 70 | transition: all 0.4s ease-in-out; 71 | } 72 | 73 | h2 > a:hover { 74 | color: white; 75 | } -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | # or 12 | pnpm dev 13 | ``` 14 | 15 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 16 | 17 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. 18 | 19 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. 20 | 21 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 22 | 23 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 24 | 25 | ## Learn More 26 | 27 | To learn more about Next.js, take a look at the following resources: 28 | 29 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 30 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 31 | 32 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 33 | 34 | ## Deploy on Vercel 35 | 36 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 37 | 38 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 39 | -------------------------------------------------------------------------------- /example/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Ultimate Lens Flare - by Anderson Mancini 13 | 14 | 15 | 19 | 20 | 21 | 22 | 23 | 24 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 |
47 | 48 | 49 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | .pnpm-debug.log* 9 | 10 | # Diagnostic reports (https://nodejs.org/api/report.html) 11 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 12 | 13 | # Runtime data 14 | pids 15 | *.pid 16 | *.seed 17 | *.pid.lock 18 | 19 | # Directory for instrumented libs generated by jscoverage/JSCover 20 | lib-cov 21 | 22 | # Coverage directory used by tools like istanbul 23 | coverage 24 | *.lcov 25 | 26 | # nyc test coverage 27 | .nyc_output 28 | 29 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 30 | .grunt 31 | 32 | # Bower dependency directory (https://bower.io/) 33 | bower_components 34 | 35 | # node-waf configuration 36 | .lock-wscript 37 | 38 | # Compiled binary addons (https://nodejs.org/api/addons.html) 39 | build/Release 40 | 41 | # Dependency directories 42 | node_modules/ 43 | jspm_packages/ 44 | 45 | # Snowpack dependency directory (https://snowpack.dev/) 46 | web_modules/ 47 | 48 | # TypeScript cache 49 | *.tsbuildinfo 50 | 51 | # Optional npm cache directory 52 | .npm 53 | 54 | # Optional eslint cache 55 | .eslintcache 56 | 57 | # Optional stylelint cache 58 | .stylelintcache 59 | 60 | # Microbundle cache 61 | .rpt2_cache/ 62 | .rts2_cache_cjs/ 63 | .rts2_cache_es/ 64 | .rts2_cache_umd/ 65 | 66 | # Optional REPL history 67 | .node_repl_history 68 | 69 | # Output of 'npm pack' 70 | *.tgz 71 | 72 | # Yarn Integrity file 73 | .yarn-integrity 74 | 75 | # dotenv environment variable files 76 | .env 77 | .env.development.local 78 | .env.test.local 79 | .env.production.local 80 | .env.local 81 | 82 | # parcel-bundler cache (https://parceljs.org/) 83 | .cache 84 | .parcel-cache 85 | 86 | # Next.js build output 87 | .next 88 | out 89 | 90 | # Nuxt.js build / generate output 91 | .nuxt 92 | dist 93 | 94 | # Gatsby files 95 | .cache/ 96 | # Comment in the public line in if your project uses Gatsby and not Next.js 97 | # https://nextjs.org/blog/next-9-1#public-directory-support 98 | # public 99 | 100 | # vuepress build output 101 | .vuepress/dist 102 | 103 | # vuepress v2.x temp and cache directory 104 | .temp 105 | .cache 106 | 107 | # Docusaurus cache and generated files 108 | .docusaurus 109 | 110 | # Serverless directories 111 | .serverless/ 112 | 113 | # FuseBox cache 114 | .fusebox/ 115 | 116 | # DynamoDB Local files 117 | .dynamodb/ 118 | 119 | # TernJS port file 120 | .tern-port 121 | 122 | # Stores VSCode versions used for testing VSCode extensions 123 | .vscode-test 124 | 125 | # yarn v2 126 | .yarn/cache 127 | .yarn/unplugged 128 | .yarn/build-state.yml 129 | .yarn/install-state.gz 130 | .pnp.* 131 | .vercel 132 | .turbo 133 | -------------------------------------------------------------------------------- /example/src/pages/index.js: -------------------------------------------------------------------------------- 1 | import { LensFlare } from "@andersonmancini/lens-flare"; 2 | import { Loader, OrbitControls, PerformanceMonitor } from "@react-three/drei"; 3 | import { Canvas } from "@react-three/fiber"; 4 | import { Vignette, EffectComposer, Bloom } from "@react-three/postprocessing"; 5 | import { folder, useControls } from "leva"; 6 | import { isMobile } from "mobile-device-detect"; 7 | import Head from "next/head"; 8 | import { Suspense, useState } from "react"; 9 | import { Color } from "three"; 10 | 11 | import Overlay from "@/components/Overlay"; 12 | import Scene from "@/components/Scene"; 13 | 14 | const App = () => { 15 | const [dpr, setDpr] = useState(1.5); 16 | 17 | const lensFlareProps = useControls({ 18 | LensFlare: folder( 19 | { 20 | enabled: { value: true, label: "enabled?" }, 21 | opacity: { value: 1.0, min: 0.0, max: 1.0, label: "opacity" }, 22 | position: { 23 | value: { x: -25, y: 6, z: -60 }, 24 | step: 1, 25 | label: "position", 26 | }, 27 | glareSize: { value: 0.35, min: 0.01, max: 1.0, label: "glareSize" }, 28 | starPoints: { 29 | value: 6.0, 30 | step: 1.0, 31 | min: 0, 32 | max: 32.0, 33 | label: "starPoints", 34 | }, 35 | animated: { value: true, label: "animated?" }, 36 | followMouse: { value: false, label: "followMouse?" }, 37 | anamorphic: { value: false, label: "anamorphic?" }, 38 | colorGain: { value: new Color(56, 22, 11), label: "colorGain" }, 39 | 40 | Flare: folder({ 41 | flareSpeed: { 42 | value: 0.4, 43 | step: 0.001, 44 | min: 0.0, 45 | max: 1.0, 46 | label: "flareSpeed", 47 | }, 48 | flareShape: { 49 | value: 0.1, 50 | step: 0.001, 51 | min: 0.0, 52 | max: 1.0, 53 | label: "flareShape", 54 | }, 55 | flareSize: { 56 | value: 0.005, 57 | step: 0.001, 58 | min: 0.0, 59 | max: 0.01, 60 | label: "flareSize", 61 | }, 62 | }), 63 | 64 | SecondaryGhosts: folder({ 65 | secondaryGhosts: { value: true, label: "secondaryGhosts?" }, 66 | ghostScale: { value: 0.1, min: 0.01, max: 1.0, label: "ghostScale" }, 67 | aditionalStreaks: { value: true, label: "aditionalStreaks?" }, 68 | }), 69 | 70 | StartBurst: folder({ 71 | starBurst: { value: isMobile ? false : true, label: "starBurst?" }, 72 | haloScale: { value: 0.5, step: 0.01, min: 0.3, max: 1.0 }, 73 | }), 74 | }, 75 | { collapsed: true } 76 | ), 77 | }); 78 | 79 | return ( 80 | <> 81 | 82 | R3F Ultimate Lens Flare - Example 83 | 84 | 85 | 86 | 87 | 98 | setDpr(1)} 100 | onDecline={() => setDpr(0.6)} 101 | /> 102 | 108 | 109 | 110 | 111 | 112 | 113 | 120 | 124 | {/* Just instanciate like this */} 125 | 126 | 127 | 128 | 129 | 130 | 131 | ); 132 | }; 133 | 134 | export default App; 135 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Creative Commons Legal Code 2 | 3 | CC0 1.0 Universal 4 | 5 | CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE 6 | LEGAL SERVICES. DISTRIBUTION OF THIS DOCUMENT DOES NOT CREATE AN 7 | ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS 8 | INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES 9 | REGARDING THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS 10 | PROVIDED HEREUNDER, AND DISCLAIMS LIABILITY FOR DAMAGES RESULTING FROM 11 | THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS PROVIDED 12 | HEREUNDER. 13 | 14 | Statement of Purpose 15 | 16 | The laws of most jurisdictions throughout the world automatically confer 17 | exclusive Copyright and Related Rights (defined below) upon the creator 18 | and subsequent owner(s) (each and all, an "owner") of an original work of 19 | authorship and/or a database (each, a "Work"). 20 | 21 | Certain owners wish to permanently relinquish those rights to a Work for 22 | the purpose of contributing to a commons of creative, cultural and 23 | scientific works ("Commons") that the public can reliably and without fear 24 | of later claims of infringement build upon, modify, incorporate in other 25 | works, reuse and redistribute as freely as possible in any form whatsoever 26 | and for any purposes, including without limitation commercial purposes. 27 | These owners may contribute to the Commons to promote the ideal of a free 28 | culture and the further production of creative, cultural and scientific 29 | works, or to gain reputation or greater distribution for their Work in 30 | part through the use and efforts of others. 31 | 32 | For these and/or other purposes and motivations, and without any 33 | expectation of additional consideration or compensation, the person 34 | associating CC0 with a Work (the "Affirmer"), to the extent that he or she 35 | is an owner of Copyright and Related Rights in the Work, voluntarily 36 | elects to apply CC0 to the Work and publicly distribute the Work under its 37 | terms, with knowledge of his or her Copyright and Related Rights in the 38 | Work and the meaning and intended legal effect of CC0 on those rights. 39 | 40 | 1. Copyright and Related Rights. A Work made available under CC0 may be 41 | protected by copyright and related or neighboring rights ("Copyright and 42 | Related Rights"). Copyright and Related Rights include, but are not 43 | limited to, the following: 44 | 45 | i. the right to reproduce, adapt, distribute, perform, display, 46 | communicate, and translate a Work; 47 | ii. moral rights retained by the original author(s) and/or performer(s); 48 | iii. publicity and privacy rights pertaining to a person's image or 49 | likeness depicted in a Work; 50 | iv. rights protecting against unfair competition in regards to a Work, 51 | subject to the limitations in paragraph 4(a), below; 52 | v. rights protecting the extraction, dissemination, use and reuse of data 53 | in a Work; 54 | vi. database rights (such as those arising under Directive 96/9/EC of the 55 | European Parliament and of the Council of 11 March 1996 on the legal 56 | protection of databases, and under any national implementation 57 | thereof, including any amended or successor version of such 58 | directive); and 59 | vii. other similar, equivalent or corresponding rights throughout the 60 | world based on applicable law or treaty, and any national 61 | implementations thereof. 62 | 63 | 2. Waiver. To the greatest extent permitted by, but not in contravention 64 | of, applicable law, Affirmer hereby overtly, fully, permanently, 65 | irrevocably and unconditionally waives, abandons, and surrenders all of 66 | Affirmer's Copyright and Related Rights and associated claims and causes 67 | of action, whether now known or unknown (including existing as well as 68 | future claims and causes of action), in the Work (i) in all territories 69 | worldwide, (ii) for the maximum duration provided by applicable law or 70 | treaty (including future time extensions), (iii) in any current or future 71 | medium and for any number of copies, and (iv) for any purpose whatsoever, 72 | including without limitation commercial, advertising or promotional 73 | purposes (the "Waiver"). Affirmer makes the Waiver for the benefit of each 74 | member of the public at large and to the detriment of Affirmer's heirs and 75 | successors, fully intending that such Waiver shall not be subject to 76 | revocation, rescission, cancellation, termination, or any other legal or 77 | equitable action to disrupt the quiet enjoyment of the Work by the public 78 | as contemplated by Affirmer's express Statement of Purpose. 79 | 80 | 3. Public License Fallback. Should any part of the Waiver for any reason 81 | be judged legally invalid or ineffective under applicable law, then the 82 | Waiver shall be preserved to the maximum extent permitted taking into 83 | account Affirmer's express Statement of Purpose. In addition, to the 84 | extent the Waiver is so judged Affirmer hereby grants to each affected 85 | person a royalty-free, non transferable, non sublicensable, non exclusive, 86 | irrevocable and unconditional license to exercise Affirmer's Copyright and 87 | Related Rights in the Work (i) in all territories worldwide, (ii) for the 88 | maximum duration provided by applicable law or treaty (including future 89 | time extensions), (iii) in any current or future medium and for any number 90 | of copies, and (iv) for any purpose whatsoever, including without 91 | limitation commercial, advertising or promotional purposes (the 92 | "License"). The License shall be deemed effective as of the date CC0 was 93 | applied by Affirmer to the Work. Should any part of the License for any 94 | reason be judged legally invalid or ineffective under applicable law, such 95 | partial invalidity or ineffectiveness shall not invalidate the remainder 96 | of the License, and in such case Affirmer hereby affirms that he or she 97 | will not (i) exercise any of his or her remaining Copyright and Related 98 | Rights in the Work or (ii) assert any associated claims and causes of 99 | action with respect to the Work, in either case contrary to Affirmer's 100 | express Statement of Purpose. 101 | 102 | 4. Limitations and Disclaimers. 103 | 104 | a. No trademark or patent rights held by Affirmer are waived, abandoned, 105 | surrendered, licensed or otherwise affected by this document. 106 | b. Affirmer offers the Work as-is and makes no representations or 107 | warranties of any kind concerning the Work, express, implied, 108 | statutory or otherwise, including without limitation warranties of 109 | title, merchantability, fitness for a particular purpose, non 110 | infringement, or the absence of latent or other defects, accuracy, or 111 | the present or absence of errors, whether or not discoverable, all to 112 | the greatest extent permissible under applicable law. 113 | c. Affirmer disclaims responsibility for clearing rights of other persons 114 | that may apply to the Work or any use thereof, including without 115 | limitation any person's Copyright and Related Rights in the Work. 116 | Further, Affirmer disclaims responsibility for obtaining any necessary 117 | consents, permissions or other rights required for any use of the 118 | Work. 119 | d. Affirmer understands and acknowledges that Creative Commons is not a 120 | party to this document and has no duty or obligation with respect to 121 | this CC0 or use of the Work. 122 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ULTIMATE LENS FLARE FOR REACT THREE FIBER 2 | 3 | #### by Anderson Mancini 4 | 5 | [![twitter](https://flat.badgen.net/badge/twitter/@Andersonmancini/?icon&label)](https://twitter.com/Andersonmancini) 6 | 7 | A EffectComposer Effect for React Three Post Processing, `Ultimate Lens flare` adds the optical aberration caused by the dispersion of light entering the lens through its edges. 8 | 9 | [![screenshot](thumbnail.png)](https://ultimate-lens-flare.vercel.app) 10 | 11 | [Click here to see an example](https://ultimate-lens-flare.vercel.app) 12 | 13 | This captivating phenomenon creates a stunning optical effect that adds a touch of enchantment to your r3f projects, especially for sun lights. `Ultimate Lens Flare` creates mesmerizing circular or hexagonal bursts of light. Embrace the magic and elevate your projects with this unique and alluring effect. This captivating optical innovation introduces a new dimension to your content, amplifying its visual impact and captivating your audience. 14 | 15 | Unlock a world of possibilities with Ultimate Lens Flare's intuitive interface. Seamlessly adjust parameters such as brightness, star points, glare size, ghosts, burst and much more, while real-time previews allow you to see the impact of your adjustments instantly. Embrace your creativity and effortlessly bring your artistic vision to life. 16 | 17 | ## More demos on CodeSandbox 18 | 19 | - [Ultimate Lens Flare Text3D example](https://codesandbox.io/s/anderson-mancini-lens-flare-glass-text-example-9elqmx) 20 | 21 | - [Ultimate Lens Flare simple example ](https://codesandbox.io/s/anderson-mancini-lens-flare-simple-example-ox6611) 22 | 23 | - [Ultimate Lens Flare multiple materials example ](https://codesandbox.io/s/anderson-mancini-lens-lensflare-materials-example-4gjc16) 24 | 25 | - [Ultimate Lens Flare Glass Dome example ](https://codesandbox.io/s/anderson-mancini-lens-lensflare-glass-dome-gjl302) 26 | 27 | - [Ultimate Lens Flare StarWars Ship example ](https://codesandbox.io/s/anderson-mancini-lens-lensflare-starwars-example-qmpuj1) 28 | 29 | ### Customization options 30 | 31 | Here you can watch a video of customization options. You can fully customize it 32 | [![IMAGE ALT TEXT HERE](https://img.youtube.com/vi/a4W4SUZ5uu8/0.jpg)](https://www.youtube.com/watch?v=a4W4SUZ5uu8) 33 | 34 | # HOW TO USE? 35 | 36 | ## With the package 37 | 38 | First, install the `@andersonmancini/lens-flare` package on your project 39 | 40 | ```shell 41 | npm install @andersonmancini/lens-flare 42 | ``` 43 | 44 | Then, import it in your project: 45 | 46 | ```js 47 | import { LensFlare } from "@andersonmancini/lens-flare"; 48 | ``` 49 | 50 | and add it to your `EffectComposer`: 51 | 52 | ```js 53 | 54 | 55 | 56 | ``` 57 | 58 | ## Manually 59 | 60 | ### 1. Download the files component and save it on your project 61 | 62 | [Download the Ultimate Lens Flare source code](https://gist.github.com/ektogamat/9b02bf248cab901b1175524b00742964) and save into your project 63 | 64 | [Download the util source code](https://gist.github.com/ektogamat/18b84f5ad652091fe5a89555a5d30000) and save into your project in the same folder as the Ultimate Lens Flare is. 65 | 66 | ### 2. Import the component 67 | 68 | ```js 69 | import LensFlare from "./UltimateLensFlare"; 70 | // Remember to adjust the path to match your project's structure 71 | ``` 72 | 73 | ### 3. Provide an image for the lens dirt as a prop and add this to your EffectComposer 74 | 75 | You need to provide an image to act like a lens dirt filter. To implement this, supply an image with a 16:9 aspect ratio as a `dirtTextureFile` prop. It's important to keep the image size small to ensure efficient shader processing. You can find an example image in the public folder, but feel free to substitute it with any image of your choice. Remember to pass the file name as the `dirtTextureFile` prop, as demonstrated below. 76 | 77 | ```js 78 | 79 | 80 | 81 | ``` 82 | 83 | \*\*This is a mandatory parameter and it expects a path to find the file on your project. Don't need to load a texture using useTexture. 84 | 85 | ### And you are done ✨ 86 | 87 | --- 88 | 89 | # Changing the Blend Mode 90 | 91 | With the aim of simplicity and user-friendliness, `Ultimate Lens Flare` seamlessly integrates into your workflow. It employs a custom shader pass on Effect Composer to effortlessly apply the lens flare effect by overlaying it on the scene. 92 | 93 | Nevertheless, you have the flexibility to customize the effect to suit your specific requirements. The primary parameter that influences the overall appearance of the effect is the `blendFunction`. By default, this parameter is set to BlendFunction.NORMAL. However, you can modify it by providing a different blending mode through the blendFunction prop: 94 | 95 | ```js 96 | 97 | 101 | 102 | ``` 103 | 104 | Unlock a world of stunning and diverse outcomes by exploring alternative Blend functions like `BlendFunction.PIN_LIGHT`, `BlendFunction.OVERLAY`, `BlendFunction.PIN_MULTIPLY`, and more. Import the BlendModes from post processing using `import { BlendFunction } from 'postprocessing'` to utilize these options. Prepare to be amazed by the myriad possibilities they offer. 105 | 106 | # Using LEVA to adjust the parameters 107 | 108 | Enjoy the convenience of fine-tuning various parameters within Ultimate Lens Flare. To simplify the process, import `folder` and `useControls` from `LEVA`. Copy and paste the following props to create an interactive interface for adjusting the values. Once you're satisfied with the results, manually transfer the values from the Leva controls back to the default value of useControls. Save your changes, and you're all set! 109 | 110 | ```js 111 | import { folder, useControls } from "leva"; 112 | ``` 113 | 114 | ```js 115 | const lensFlareProps = useControls({ 116 | LensFlare: folder( 117 | { 118 | enabled: { value: true, label: "enabled?" }, 119 | opacity: { value: 1.0, min: 0.0, max: 1.0, label: "opacity" }, 120 | position: { value: { x: -25, y: 6, z: -60 }, step: 1, label: "position" }, 121 | glareSize: { value: 0.35, min: 0.01, max: 1.0, label: "glareSize" }, 122 | starPoints: { 123 | value: 6.0, 124 | step: 1.0, 125 | min: 0, 126 | max: 32.0, 127 | label: "starPoints", 128 | }, 129 | animated: { value: true, label: "animated?" }, 130 | followMouse: { value: false, label: "followMouse?" }, 131 | anamorphic: { value: false, label: "anamorphic?" }, 132 | colorGain: { value: new Color(56, 22, 11), label: "colorGain" }, 133 | 134 | Flare: folder({ 135 | flareSpeed: { 136 | value: 0.4, 137 | step: 0.001, 138 | min: 0.0, 139 | max: 1.0, 140 | label: "flareSpeed", 141 | }, 142 | flareShape: { 143 | value: 0.1, 144 | step: 0.001, 145 | min: 0.0, 146 | max: 1.0, 147 | label: "flareShape", 148 | }, 149 | flareSize: { 150 | value: 0.005, 151 | step: 0.001, 152 | min: 0.0, 153 | max: 0.01, 154 | label: "flareSize", 155 | }, 156 | }), 157 | 158 | SecondaryGhosts: folder({ 159 | secondaryGhosts: { value: true, label: "secondaryGhosts?" }, 160 | ghostScale: { value: 0.1, min: 0.01, max: 1.0, label: "ghostScale" }, 161 | aditionalStreaks: { value: true, label: "aditionalStreaks?" }, 162 | }), 163 | 164 | StartBurst: folder({ 165 | starBurst: { value: true, label: "starBurst?" }, 166 | haloScale: { value: 0.5, step: 0.01, min: 0.3, max: 1.0 }, 167 | }), 168 | }, 169 | { collapsed: true } 170 | ), 171 | }); 172 | ``` 173 | 174 | #### All parameters are self-explanatory. However, it's important to note some key details about certain parameters. 175 | 176 | | Parameter | Explanation | 177 | | :-------------- | :-------------------------------- | 178 | | colorGain | Only accecpts RGB color format | 179 | | followMouse | Can't work with occlusion | 180 | | anamorphic | You should turn animation off | 181 | | dirtTextureFile | Can be changed to another texture | 182 | 183 | # Ignoring occlusion on some objects 184 | 185 | To disable the occlusion effect, simply add `userData={{ lensflare: 'no-occlusion' }}` to your object/mesh. This feature is particularly useful for creating realistic skyboxes in demos. By utilizing this setting, the internal raycaster of Ultimate Lens Flare will exclude the designated object/mesh from occlusion calculations. 186 | 187 | # Improving performance 188 | 189 | For optimal performance, it's crucial to employ the `` structure when utilizing this occlusion detection effect. This setup ensures a faster response time and enhances overall performance. 190 | 191 | In the event of performance challenges, consider adjusting the `dpr` (device pixel ratio) and disabling `multisampling` on the EffectComposer, if feasible. These adjustments can help reclaim performance resources and improve the overall experience. 192 | 193 | ⚠️ The `StarBurst` option is very intense for some GPU's to compute. If you have any issues with the performance, you can disable it. You can also use this drei component https://github.com/pmndrs/drei#performancemonitor to automatically disable this parameter when the performance drops. 194 | 195 | # Follow the mouse cursor or Fake Sun Vector Position 196 | 197 | You can enable the `followMouse` to use this effect as a 2D effect, ignoring completelly the occlusion. If set to true, it will ignore the vector position to fake the sun light. 198 | 199 | ``` 200 | 201 | ``` 202 | 203 | You can also use a position `{x: NUMBER, y: NUMBER, z: NUMBER}` to pass a position in the 3D world so the effect can read that position and project it into the effect. In order for this to work, `followMouse` needs to be set to `false` 204 | 205 | ``` 206 | 207 | ``` 208 | 209 | # Compatibility 210 | 211 | `Ultimate Lens Flare` is compatible with all modern browsers that support WebGL 2.0 (WebGL 1 is not supported), using three.js version r152 or later is recommended. 212 | 213 | # Limitations 214 | 215 | The Ultimate Lens Flare leverages the raycaster to examine the material type of objects and determine if they are `MeshTransmissionMaterial` or `MeshPhysicalMaterial`. It checks for the transmission parameter to identify glass-like materials. Therefore, for an object to behave like glass, its material should have either `transmission = 1` or `transparent = true` and `opacity = NUMBER`. The effect automatically interprets the opacity `NUMBER` value to determine the brightness of the flare. 216 | 217 | Furthermore, the internal raycaster is configured to consider only the firstHit of the raycaster. This means that if the first detected object is neither transparent nor transmissive, it will occlude the effect. 218 | 219 | # Getting Started using this demo project 220 | 221 | Download and install Node.js on your computer (https://nodejs.org/en/download/). 222 | 223 | Then, open VSCODE, drag the project folder to it. Open VSCODE terminal and install dependencies (you need to do this only in the first time) 224 | 225 | ```shell 226 | npm install 227 | ``` 228 | 229 | Run this command in your terminal to open a local server at localhost:3000 230 | 231 | ```shell 232 | npm run start 233 | ``` 234 | 235 | # How to contribute 236 | 237 | 1. Install the dependency from the root of the project 238 | 239 | ```shell 240 | npm install 241 | ``` 242 | 243 | 2. Start the project in dev mode 244 | 245 | ```shell 246 | npm run dev 247 | ``` 248 | 249 | This will start the package in "dev mode" along with the example at `http://localhost:3000` 250 | 251 | 3. Edit the code of the package in `package/lens-flare`. The lens flare effect itself is defined under `package/lens-flare/src/effect/LensFlare.jsx`. 252 | 253 | 4. Every update made to the LensFlare effect should immediately be reflected on the example website. 254 | 255 | 5. To try a build of the package run: 256 | 257 | ```shell 258 | npm run start 259 | ``` 260 | 261 | This will bundle `@andersonmancini/lens-flare` and do a production build of the example and serve the resulting build at `http://localhost:3000` 262 | 263 | 6. Submit a pull request for review with your changes! 264 | 265 |
266 | 267 | # License 268 | 269 | A CC0 license is used for this project. You can do whatever you want with it, no attribution is required. However, if you do use it, I'd love to hear about it! 270 | 271 | # Can you leave a star please? 272 | 273 | I genuinely appreciate your support! If you're willing to show your appreciation, you can give me a star on GitHub 🎉 or consider buying a coffee to support my development at https://www.buymeacoffee.com/andersonmancini. The funds received will be utilized to create more valuable content about Three.js and invest in acquiring new courses. Thank you for your consideration! 274 | 275 | # Credits 276 | 277 | Hard to remember everything I read to achieve this, but here's a list of resources that have been helpful to me: 278 | 279 | - https://www.shadertoy.com/view/4sK3W3 280 | - https://www.shadertoy.com/view/4sX3Rs 281 | - https://www.shadertoy.com/view/dllSRX 282 | - https://www.shadertoy.com/view/Xlc3D2 283 | - https://www.shadertoy.com/view/XtKfRV 284 | - https://blog.maximeheckel.com/posts/the-study-of-shaders-with-react-three-fiber/ 285 | - https://blog.maximeheckel.com/posts/beautiful-and-mind-bending-effects-with-webgl-render-targets/ 286 | - https://docs.pmnd.rs/react-postprocessing/effects/custom-effects 287 | - https://threejs.org/docs/index.html#manual/en/introduction/How-to-use-post-processing 288 | - https://threejs.org/docs/index.html#manual/en/introduction/Matrix-transformations 289 | - https://github.com/mrdoob/three.js/blob/master/examples/jsm/objects/Lensflare.js 290 | - https://chat.openai.com/chat 291 | - https://skybox.blockadelabs.com/ 292 | 293 | ### Special thanks 294 | 295 | Here is some of the many friends that helped me to achieve this effect: 296 | 297 | - https://twitter.com/0xca0a 298 | - https://github.com/abernier 299 | - https://twitter.com/N8Programs 300 | - https://twitter.com/MaximeHeckel 301 | - https://twitter.com/spidersharma 302 | - https://twitter.com/vis_prime 303 | - https://twitter.com/Cody_J_Bennett 304 | - https://twitter.com/0beqz 305 | - https://twitter.com/maya_ndljk 306 | - https://twitter.com/bruno_simon 307 | - https://twitter.com/CantBeFaraz 308 | - https://twitter.com/th_ebenezer 309 | - https://github.com/alynevieira 310 | -------------------------------------------------------------------------------- /package/lens-flare/README.md: -------------------------------------------------------------------------------- 1 | # ULTIMATE LENS FLARE FOR REACT THREE FIBER 2 | 3 | #### by Anderson Mancini 4 | 5 | [![twitter](https://flat.badgen.net/badge/twitter/@Andersonmancini/?icon&label)](https://twitter.com/Andersonmancini) 6 | 7 | A EffectComposer Effect for React Three Post Processing, `Ultimate Lens flare` adds the optical aberration caused by the dispersion of light entering the lens through its edges. 8 | 9 | [![screenshot](thumbnail.png)](https://ultimate-lens-flare.vercel.app) 10 | 11 | [Click here to see an example](https://ultimate-lens-flare.vercel.app) 12 | 13 | This captivating phenomenon creates a stunning optical effect that adds a touch of enchantment to your r3f projects, especially for sun lights. `Ultimate Lens Flare` creates mesmerizing circular or hexagonal bursts of light. Embrace the magic and elevate your projects with this unique and alluring effect. This captivating optical innovation introduces a new dimension to your content, amplifying its visual impact and captivating your audience. 14 | 15 | Unlock a world of possibilities with Ultimate Lens Flare's intuitive interface. Seamlessly adjust parameters such as brightness, star points, glare size, ghosts, burst and much more, while real-time previews allow you to see the impact of your adjustments instantly. Embrace your creativity and effortlessly bring your artistic vision to life. 16 | 17 | ## More demos on CodeSandbox 18 | 19 | - [Ultimate Lens Flare Text3D example](https://codesandbox.io/s/anderson-mancini-lens-flare-glass-text-example-9elqmx) 20 | 21 | - [Ultimate Lens Flare simple example ](https://codesandbox.io/s/anderson-mancini-lens-flare-simple-example-ox6611) 22 | 23 | - [Ultimate Lens Flare multiple materials example ](https://codesandbox.io/s/anderson-mancini-lens-lensflare-materials-example-4gjc16) 24 | 25 | - [Ultimate Lens Flare Glass Dome example ](https://codesandbox.io/s/anderson-mancini-lens-lensflare-glass-dome-gjl302) 26 | 27 | - [Ultimate Lens Flare StarWars Ship example ](https://codesandbox.io/s/anderson-mancini-lens-lensflare-starwars-example-qmpuj1) 28 | 29 | ### Customization options 30 | 31 | Here you can watch a video of customization options. You can fully customize it 32 | [![IMAGE ALT TEXT HERE](https://img.youtube.com/vi/a4W4SUZ5uu8/0.jpg)](https://www.youtube.com/watch?v=a4W4SUZ5uu8) 33 | 34 | # HOW TO USE? 35 | 36 | ## With the package 37 | 38 | First, install the `@andersonmancini/lens-flare` package on your project 39 | 40 | ```shell 41 | npm install @andersonmancini/lens-flare 42 | ``` 43 | 44 | Then, import it in your project: 45 | 46 | ```js 47 | import { LensFlare } from "@andersonmancini/lens-flare"; 48 | ``` 49 | 50 | and add it to your `EffectComposer`: 51 | 52 | ```js 53 | 54 | 55 | 56 | ``` 57 | 58 | ## Manually 59 | 60 | ### 1. Download the files component and save it on your project 61 | 62 | [Download the Ultimate Lens Flare source code](https://gist.github.com/ektogamat/9b02bf248cab901b1175524b00742964) and save into your project 63 | 64 | [Download the util source code](https://gist.github.com/ektogamat/18b84f5ad652091fe5a89555a5d30000) and save into your project in the same folder as the Ultimate Lens Flare is. 65 | 66 | ### 2. Import the component 67 | 68 | ```js 69 | import LensFlare from "./UltimateLensFlare"; 70 | // Remember to adjust the path to match your project's structure 71 | ``` 72 | 73 | ### 3. Provide an image for the lens dirt as a prop and add this to your EffectComposer 74 | 75 | You need to provide an image to act like a lens dirt filter. To implement this, supply an image with a 16:9 aspect ratio as a `dirtTextureFile` prop. It's important to keep the image size small to ensure efficient shader processing. You can find an example image in the public folder, but feel free to substitute it with any image of your choice. Remember to pass the file name as the `dirtTextureFile` prop, as demonstrated below. 76 | 77 | ```js 78 | 79 | 80 | 81 | ``` 82 | 83 | \*\*This is a mandatory parameter and it expects a path to find the file on your project. Don't need to load a texture using useTexture. 84 | 85 | ### And you are done ✨ 86 | 87 | --- 88 | 89 | # Changing the Blend Mode 90 | 91 | With the aim of simplicity and user-friendliness, `Ultimate Lens Flare` seamlessly integrates into your workflow. It employs a custom shader pass on Effect Composer to effortlessly apply the lens flare effect by overlaying it on the scene. 92 | 93 | Nevertheless, you have the flexibility to customize the effect to suit your specific requirements. The primary parameter that influences the overall appearance of the effect is the `blendFunction`. By default, this parameter is set to BlendFunction.NORMAL. However, you can modify it by providing a different blending mode through the blendFunction prop: 94 | 95 | ```js 96 | 97 | 101 | 102 | ``` 103 | 104 | Unlock a world of stunning and diverse outcomes by exploring alternative Blend functions like `BlendFunction.PIN_LIGHT`, `BlendFunction.OVERLAY`, `BlendFunction.PIN_MULTIPLY`, and more. Import the BlendModes from post processing using `import { BlendFunction } from 'postprocessing'` to utilize these options. Prepare to be amazed by the myriad possibilities they offer. 105 | 106 | # Using LEVA to adjust the parameters 107 | 108 | Enjoy the convenience of fine-tuning various parameters within Ultimate Lens Flare. To simplify the process, import `folder` and `useControls` from `LEVA`. Copy and paste the following props to create an interactive interface for adjusting the values. Once you're satisfied with the results, manually transfer the values from the Leva controls back to the default value of useControls. Save your changes, and you're all set! 109 | 110 | ```js 111 | import { folder, useControls } from "leva"; 112 | ``` 113 | 114 | ```js 115 | const lensFlareProps = useControls({ 116 | LensFlare: folder( 117 | { 118 | enabled: { value: true, label: "enabled?" }, 119 | opacity: { value: 1.0, min: 0.0, max: 1.0, label: "opacity" }, 120 | position: { value: { x: -25, y: 6, z: -60 }, step: 1, label: "position" }, 121 | glareSize: { value: 0.35, min: 0.01, max: 1.0, label: "glareSize" }, 122 | starPoints: { 123 | value: 6.0, 124 | step: 1.0, 125 | min: 0, 126 | max: 32.0, 127 | label: "starPoints", 128 | }, 129 | animated: { value: true, label: "animated?" }, 130 | followMouse: { value: false, label: "followMouse?" }, 131 | anamorphic: { value: false, label: "anamorphic?" }, 132 | colorGain: { value: new Color(56, 22, 11), label: "colorGain" }, 133 | 134 | Flare: folder({ 135 | flareSpeed: { 136 | value: 0.4, 137 | step: 0.001, 138 | min: 0.0, 139 | max: 1.0, 140 | label: "flareSpeed", 141 | }, 142 | flareShape: { 143 | value: 0.1, 144 | step: 0.001, 145 | min: 0.0, 146 | max: 1.0, 147 | label: "flareShape", 148 | }, 149 | flareSize: { 150 | value: 0.005, 151 | step: 0.001, 152 | min: 0.0, 153 | max: 0.01, 154 | label: "flareSize", 155 | }, 156 | }), 157 | 158 | SecondaryGhosts: folder({ 159 | secondaryGhosts: { value: true, label: "secondaryGhosts?" }, 160 | ghostScale: { value: 0.1, min: 0.01, max: 1.0, label: "ghostScale" }, 161 | aditionalStreaks: { value: true, label: "aditionalStreaks?" }, 162 | }), 163 | 164 | StartBurst: folder({ 165 | starBurst: { value: true, label: "starBurst?" }, 166 | haloScale: { value: 0.5, step: 0.01, min: 0.3, max: 1.0 }, 167 | }), 168 | }, 169 | { collapsed: true } 170 | ), 171 | }); 172 | ``` 173 | 174 | #### All parameters are self-explanatory. However, it's important to note some key details about certain parameters. 175 | 176 | | Parameter | Explanation | 177 | | :-------------- | :-------------------------------- | 178 | | colorGain | Only accecpts RGB color format | 179 | | followMouse | Can't work with occlusion | 180 | | anamorphic | You should turn animation off | 181 | | dirtTextureFile | Can be changed to another texture | 182 | 183 | # Ignoring occlusion on some objects 184 | 185 | To disable the occlusion effect, simply add `userData={{ lensflare: 'no-occlusion' }}` to your object/mesh. This feature is particularly useful for creating realistic skyboxes in demos. By utilizing this setting, the internal raycaster of Ultimate Lens Flare will exclude the designated object/mesh from occlusion calculations. 186 | 187 | # Improving performance 188 | 189 | For optimal performance, it's crucial to employ the `` structure when utilizing this occlusion detection effect. This setup ensures a faster response time and enhances overall performance. 190 | 191 | In the event of performance challenges, consider adjusting the `dpr` (device pixel ratio) and disabling `multisampling` on the EffectComposer, if feasible. These adjustments can help reclaim performance resources and improve the overall experience. 192 | 193 | ⚠️ The `StarBurst` option is very intense for some GPU's to compute. If you have any issues with the performance, you can disable it. You can also use this drei component https://github.com/pmndrs/drei#performancemonitor to automatically disable this parameter when the performance drops. 194 | 195 | # Follow the mouse cursor or Fake Sun Vector Position 196 | 197 | You can enable the `followMouse` to use this effect as a 2D effect, ignoring completelly the occlusion. If set to true, it will ignore the vector position to fake the sun light. 198 | 199 | ``` 200 | 201 | ``` 202 | 203 | You can also use a position `{x: NUMBER, y: NUMBER, z: NUMBER}` to pass a position in the 3D world so the effect can read that position and project it into the effect. In order for this to work, `followMouse` needs to be set to `false` 204 | 205 | ``` 206 | 207 | ``` 208 | 209 | # Compatibility 210 | 211 | `Ultimate Lens Flare` is compatible with all modern browsers that support WebGL 2.0 (WebGL 1 is not supported), using three.js version r152 or later is recommended. 212 | 213 | # Limitations 214 | 215 | The Ultimate Lens Flare leverages the raycaster to examine the material type of objects and determine if they are `MeshTransmissionMaterial` or `MeshPhysicalMaterial`. It checks for the transmission parameter to identify glass-like materials. Therefore, for an object to behave like glass, its material should have either `transmission = 1` or `transparent = true` and `opacity = NUMBER`. The effect automatically interprets the opacity `NUMBER` value to determine the brightness of the flare. 216 | 217 | Furthermore, the internal raycaster is configured to consider only the firstHit of the raycaster. This means that if the first detected object is neither transparent nor transmissive, it will occlude the effect. 218 | 219 | # Getting Started using this demo project 220 | 221 | Download and install Node.js on your computer (https://nodejs.org/en/download/). 222 | 223 | Then, open VSCODE, drag the project folder to it. Open VSCODE terminal and install dependencies (you need to do this only in the first time) 224 | 225 | ```shell 226 | npm install 227 | ``` 228 | 229 | Run this command in your terminal to open a local server at localhost:3000 230 | 231 | ```shell 232 | npm run start 233 | ``` 234 | 235 | # How to contribute 236 | 237 | 1. Install the dependency from the root of the project 238 | 239 | ```shell 240 | npm install 241 | ``` 242 | 243 | 2. Start the project in dev mode 244 | 245 | ```shell 246 | npm run dev 247 | ``` 248 | 249 | This will start the package in "dev mode" along with the example at `http://localhost:3000` 250 | 251 | 3. Edit the code of the package in `package/lens-flare`. The lens flare effect itself is defined under `package/lens-flare/src/effect/LensFlare.jsx`. 252 | 253 | 4. Every update made to the LensFlare effect should immediately be reflected on the example website. 254 | 255 | 5. To try a build of the package run: 256 | 257 | ```shell 258 | npm run start 259 | ``` 260 | 261 | This will bundle `@andersonmancini/lens-flare` and do a production build of the example and serve the resulting build at `http://localhost:3000` 262 | 263 | 6. Submit a pull request for review with your changes! 264 | 265 |
266 | 267 | # License 268 | 269 | A CC0 license is used for this project. You can do whatever you want with it, no attribution is required. However, if you do use it, I'd love to hear about it! 270 | 271 | # Can you leave a star please? 272 | 273 | I genuinely appreciate your support! If you're willing to show your appreciation, you can give me a star on GitHub 🎉 or consider buying a coffee to support my development at https://www.buymeacoffee.com/andersonmancini. The funds received will be utilized to create more valuable content about Three.js and invest in acquiring new courses. Thank you for your consideration! 274 | 275 | # Credits 276 | 277 | Hard to remember everything I read to achieve this, but here's a list of resources that have been helpful to me: 278 | 279 | - https://www.shadertoy.com/view/4sK3W3 280 | - https://www.shadertoy.com/view/4sX3Rs 281 | - https://www.shadertoy.com/view/dllSRX 282 | - https://www.shadertoy.com/view/Xlc3D2 283 | - https://www.shadertoy.com/view/XtKfRV 284 | - https://blog.maximeheckel.com/posts/the-study-of-shaders-with-react-three-fiber/ 285 | - https://blog.maximeheckel.com/posts/beautiful-and-mind-bending-effects-with-webgl-render-targets/ 286 | - https://docs.pmnd.rs/react-postprocessing/effects/custom-effects 287 | - https://threejs.org/docs/index.html#manual/en/introduction/How-to-use-post-processing 288 | - https://threejs.org/docs/index.html#manual/en/introduction/Matrix-transformations 289 | - https://github.com/mrdoob/three.js/blob/master/examples/jsm/objects/Lensflare.js 290 | - https://chat.openai.com/chat 291 | - https://skybox.blockadelabs.com/ 292 | 293 | ### Special thanks 294 | 295 | Here is some of the many friends that helped me to achieve this effect: 296 | 297 | - https://twitter.com/0xca0a 298 | - https://github.com/abernier 299 | - https://twitter.com/N8Programs 300 | - https://twitter.com/MaximeHeckel 301 | - https://twitter.com/spidersharma 302 | - https://twitter.com/vis_prime 303 | - https://twitter.com/Cody_J_Bennett 304 | - https://twitter.com/0beqz 305 | - https://twitter.com/maya_ndljk 306 | - https://twitter.com/bruno_simon 307 | - https://twitter.com/CantBeFaraz 308 | - https://twitter.com/th_ebenezer 309 | - https://github.com/alynevieira 310 | -------------------------------------------------------------------------------- /package/lens-flare/src/effect/LensFlare.jsx: -------------------------------------------------------------------------------- 1 | // Created by Anderson Mancini 2023 2 | // React Three Fiber Ultimate LensFlare 3 | // To be used Effect together with react-three/postprocessing 4 | import { useFrame, useThree } from '@react-three/fiber'; 5 | import { useTexture } from '@react-three/drei'; 6 | import { easing } from 'maath'; 7 | import { BlendFunction, Effect } from 'postprocessing'; 8 | import { useRef, useMemo, useEffect, forwardRef, useLayoutEffect } from 'react'; 9 | import { Uniform, Color, Vector3 } from 'three'; 10 | 11 | import { wrapEffect } from './util'; 12 | 13 | 14 | const LensFlareShader = { 15 | fragmentShader: /* glsl */ ` 16 | 17 | uniform float iTime; 18 | uniform vec2 lensPosition; 19 | uniform vec2 iResolution; 20 | uniform vec3 colorGain; 21 | uniform float starPoints; 22 | uniform float glareSize; 23 | uniform float flareSize; 24 | uniform float flareSpeed; 25 | uniform float flareShape; 26 | uniform float haloScale; 27 | uniform float opacity; 28 | uniform bool animated; 29 | uniform bool anamorphic; 30 | uniform bool enabled; 31 | uniform bool secondaryGhosts; 32 | uniform bool starBurst; 33 | uniform float ghostScale; 34 | uniform bool aditionalStreaks; 35 | uniform sampler2D lensDirtTexture; 36 | vec2 vxtC; 37 | 38 | float rndf(float n){return fract(sin(n) * 43758.5453123);}float niz(float p){float fl = floor(p);float fc = fract(p);return mix(rndf(fl),rndf(fl + 1.0), fc);} 39 | vec3 hsv2rgb(vec3 c){vec4 k = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);vec3 p = abs(fract(c.xxx + k.xyz) * 6.0 - k.www);return c.z * mix(k.xxx, clamp(p - k.xxx, 0.0, 1.0), c.y);} 40 | float satU(float x){return clamp(x, 0.,1.);}vec2 rtU(vec2 naz, float rtn){return vec2(cos(rtn) * naz.x + sin(rtn) * naz.y,cos(rtn) * naz.y - sin(rtn) * naz.x);} 41 | vec3 drwF(vec2 p, float intensity, float rnd, float speed, int id){float flhos = (1. / 32.) * float(id) * 0.1;float lingrad = distance(vec2(0.), p);float expg = 1. / exp(lingrad * (fract(rnd) * 0.66 + 0.33));vec3 qzTg = hsv2rgb(vec3( fract( (expg * 8.) + speed * flareSpeed + flhos), pow(1.-abs(expg*2.-1.), 0.45), 20.0 * expg * intensity));float internalStarPoints;if(anamorphic){internalStarPoints = 1.0;} else{internalStarPoints = starPoints;}float ams = length(p * flareShape * sin(internalStarPoints * atan(p.x, p.y)));float kJhg = pow(1.-satU(ams), ( anamorphic ? 100. : 12.));kJhg += satU(expg-0.9) * 3.;kJhg = pow(kJhg * expg, 8. + (1.-intensity) * 5.);if(flareSpeed > 0.0){return vec3(kJhg) * qzTg;} else{return vec3(kJhg) * flareSize * 15.;}} 42 | float ams2(vec3 a, vec3 b) { return abs(a.x - b.x) + abs(a.y - b.y) + abs(a.z - b.z);}vec3 satU(vec3 x){return clamp(x, vec3(0.0), vec3(1.0));} 43 | float glR(vec2 naz, vec2 pos, float zsi){vec2 mni;if(animated){mni = rtU(naz-pos, iTime * 0.1);} else{mni = naz-pos;}float ang = atan(mni.y, mni.x) * (anamorphic ? 1.0 : starPoints);float ams2 = length(mni);ams2 = pow(ams2, .9);float f0 = 1.0/(length(naz-pos)*(1.0/zsi*16.0)+.2);return f0+f0*(sin((ang))*.2 +.3);} 44 | float sdHex(vec2 p){p = abs(p);vec2 q = vec2(p.x*2.0*0.5773503, p.y + p.x*0.5773503);return dot(step(q.xy,q.yx), 1.0-q.yx);}float fpow(float x, float k){return x > k ? pow((x-k)/(1.0-k),2.0) : 0.0;} 45 | vec3 rHx(vec2 naz, vec2 p, float s, vec3 col){naz -= p;if (abs(naz.x) < 0.2*s && abs(naz.y) < 0.2*s){return mix(vec3(0),mix(vec3(0),col,0.1 + fpow(length(naz/s),0.1)*10.0),smoothstep(0.0,0.1,sdHex(naz*20.0/s)));}return vec3(0);} 46 | vec3 mLs(vec2 naz, vec2 pos){vec2 mni = naz-pos;vec2 zxMp = naz*(length(naz));float ang = atan(mni.x,mni.y);float f0 = .3/(length(naz-pos)*16.0+1.0);f0 = f0*(sin(niz(sin(ang*3.9-(animated ? iTime : 0.0) * 0.3) * starPoints))*.2 );float f1 = max(0.01-pow(length(naz+1.2*pos),1.9),.0)*7.0;float f2 = max(.9/(10.0+32.0*pow(length(zxMp+0.99*pos),2.0)),.0)*0.35;float f22 = max(.9/(11.0+32.0*pow(length(zxMp+0.85*pos),2.0)),.0)*0.23;float f23 = max(.9/(12.0+32.0*pow(length(zxMp+0.95*pos),2.0)),.0)*0.6;vec2 ztX = mix(naz,zxMp, 0.1);float f4 = max(0.01-pow(length(ztX+0.4*pos),2.9),.0)*4.02;float f42 = max(0.0-pow(length(ztX+0.45*pos),2.9),.0)*4.1;float f43 = max(0.01-pow(length(ztX+0.5*pos),2.9),.0)*4.6;ztX = mix(naz,zxMp,-.4);float f5 = max(0.01-pow(length(ztX+0.1*pos),5.5),.0)*2.0;float f52 = max(0.01-pow(length(ztX+0.2*pos),5.5),.0)*2.0;float f53 = max(0.01-pow(length(ztX+0.1*pos),5.5),.0)*2.0;ztX = mix(naz,zxMp, 2.1);float f6 = max(0.01-pow(length(ztX-0.3*pos),1.61),.0)*3.159;float f62 = max(0.01-pow(length(ztX-0.325*pos),1.614),.0)*3.14;float f63 = max(0.01-pow(length(ztX-0.389*pos),1.623),.0)*3.12;vec3 c = vec3(glR(naz,pos, glareSize));vec2 prot;if(animated){prot = rtU(naz - pos, (iTime * 0.1));} else if(anamorphic){prot = rtU(naz - pos, 1.570796);} else {prot = naz - pos;}c += drwF(prot, (anamorphic ? flareSize * 10. : flareSize), 0.1, iTime, 1);c.r+=f1+f2+f4+f5+f6; c.g+=f1+f22+f42+f52+f62; c.b+=f1+f23+f43+f53+f63;c = c*1.3 * vec3(length(zxMp)+.09);c+=vec3(f0);return c;} 47 | vec3 cc(vec3 clr, float fct,float fct2){float w = clr.x+clr.y+clr.z;return mix(clr,vec3(w)*fct,w*fct2);}float rnd(vec2 p){float f = fract(sin(dot(p, vec2(12.1234, 72.8392) )*45123.2));return f;}float rnd(float w){float f = fract(sin(w)*1000.);return f;} 48 | float rShp(vec2 p, int N){float f;float a=atan(p.x,p.y)+.2;float b=6.28319/float(N);f=smoothstep(.5,.51, cos(floor(.5+a/b)*b-a)*length(p.xy)* 2.0 -ghostScale);return f;} 49 | vec3 drC(vec2 p, float zsi, float dCy, vec3 clr, vec3 clr2, float ams2, vec2 esom){float l = length(p + esom*(ams2*2.))+zsi/2.;float l2 = length(p + esom*(ams2*4.))+zsi/3.;float c = max(0.01-pow(length(p + esom*ams2), zsi*ghostScale), 0.0)*10.;float c1 = max(0.001-pow(l-0.3, 1./40.)+sin(l*20.), 0.0)*3.;float c2 = max(0.09/pow(length(p-esom*ams2/.5)*1., .95), 0.0)/20.;float s = max(0.02-pow(rShp(p*5. + esom*ams2*5. + dCy, 6) , 1.), 0.0)*1.5;clr = cos(vec3(0.44, .24, .2)*8. + ams2*4.)*0.5+.5;vec3 f = c*clr;f += c1*clr;f += c2*clr;f += s*clr;return f-0.01;} 50 | vec4 geLC(float x){return vec4(vec3(mix(mix(mix(mix(mix(mix(mix(mix(mix(mix(mix(mix(mix(mix(mix(vec3(0., 0., 0.),vec3(0., 0., 0.), smoothstep(0.0, 0.063, x)),vec3(0., 0., 0.), smoothstep(0.063, 0.125, x)),vec3(0.0, 0., 0.), smoothstep(0.125, 0.188, x)),vec3(0.188, 0.131, 0.116), smoothstep(0.188, 0.227, x)),vec3(0.31, 0.204, 0.537), smoothstep(0.227, 0.251, x)),vec3(0.192, 0.106, 0.286), smoothstep(0.251, 0.314, x)),vec3(0.102, 0.008, 0.341), smoothstep(0.314, 0.392, x)),vec3(0.086, 0.0, 0.141), smoothstep(0.392, 0.502, x)),vec3(1.0, 0.31, 0.0), smoothstep(0.502, 0.604, x)),vec3(.1, 0.1, 0.1), smoothstep(0.604, 0.643, x)),vec3(1.0, 0.929, 0.0), smoothstep(0.643, 0.761, x)),vec3(1.0, 0.086, 0.424), smoothstep(0.761, 0.847, x)),vec3(1.0, 0.49, 0.0), smoothstep(0.847, 0.89, x)),vec3(0.945, 0.275, 0.475), smoothstep(0.89, 0.941, x)),vec3(0.251, 0.275, 0.796), smoothstep(0.941, 1.0, x))),1.0);} 51 | float diTN(vec2 p){vec2 f = fract(p);f = (f * f) * (3.0 - (2.0 * f));float n = dot(floor(p), vec2(1.0, 157.0));vec4 a = fract(sin(vec4(n + 0.0, n + 1.0, n + 157.0, n + 158.0)) * 43758.5453123);return mix(mix(a.x, a.y, f.x), mix(a.z, a.w, f.x), f.y);} 52 | float fbm(vec2 p){const mat2 m = mat2(0.80, -0.60, 0.60, 0.80);float f = 0.0;f += 0.5000*diTN(p); p = m*p*2.02;f += 0.2500*diTN(p); p = m*p*2.03;f += 0.1250*diTN(p); p = m*p*2.01;f += 0.0625*diTN(p);return f/0.9375;} 53 | vec4 geLS(vec2 p){vec2 pp = (p - vec2(0.5)) * 2.0;float a = atan(pp.y, pp.x);vec4 cp = vec4(sin(a * 1.0), length(pp), sin(a * 13.0), sin(a * 53.0));float d = sin(clamp(pow(length(vec2(0.5) - p) * 0.5 + haloScale /2., 5.0), 0.0, 1.0) * 3.14159);vec3 c = vec3(d) * vec3(fbm(cp.xy * 16.0) * fbm(cp.zw * 9.0) * max(max(max(max(0.5, sin(a * 1.0)), sin(a * 3.0) * 0.8), sin(a * 7.0) * 0.8), sin(a * 9.0) * 10.6));c *= vec3(mix(2.0, (sin(length(pp.xy) * 256.0) * 0.5) + 0.5, sin((clamp((length(pp.xy) - 0.875) / 0.1, 0.0, 1.0) + 0.0) * 2.0 * 3.14159) * 1.5) + 0.5) * 0.3275;return vec4(vec3(c * 1.0), d);} 54 | vec4 geLD(vec2 p){p.xy += vec2(fbm(p.yx * 3.0), fbm(p.yx * 2.0)) * 0.0825;vec3 o = vec3(mix(0.125, 0.25, max(max(smoothstep(0.1, 0.0, length(p - vec2(0.25))),smoothstep(0.4, 0.0, length(p - vec2(0.75)))),smoothstep(0.8, 0.0, length(p - vec2(0.875, 0.125))))));o += vec3(max(fbm(p * 1.0) - 0.5, 0.0)) * 0.5;o += vec3(max(fbm(p * 2.0) - 0.5, 0.0)) * 0.5;o += vec3(max(fbm(p * 4.0) - 0.5, 0.0)) * 0.25;o += vec3(max(fbm(p * 8.0) - 0.75, 0.0)) * 1.0;o += vec3(max(fbm(p * 16.0) - 0.75, 0.0)) * 0.75;o += vec3(max(fbm(p * 64.0) - 0.75, 0.0)) * 0.5;return vec4(clamp(o, vec3(0.15), vec3(1.0)), 1.0);} 55 | vec4 txL(sampler2D tex, vec2 xtC){if(((xtC.x < 0.) || (xtC.y < 0.)) || ((xtC.x > 1.) || (xtC.y > 1.))){return vec4(0.0);}else{return texture(tex, xtC); }} 56 | vec4 txD(sampler2D tex, vec2 xtC, vec2 dir, vec3 ditn) {return vec4(txL(tex, (xtC + (dir * ditn.r))).r,txL(tex, (xtC + (dir * ditn.g))).g,txL(tex, (xtC + (dir * ditn.b))).b,1.0);} 57 | vec4 strB(){vec2 aspXtc = vec2(1.0) - (((vxtC - vec2(0.5)) * vec2(1.0)) + vec2(0.5)); vec2 xtC = vec2(1.0) - vxtC; vec2 ghvc = (vec2(0.5) - xtC) * 0.3 - lensPosition; vec2 ghNm = normalize(ghvc * vec2(1.0)) * vec2(1.0);vec2 haloVec = normalize(ghvc) * 0.6;vec2 hlNm = ghNm * 0.6;vec2 texelSize = vec2(1.0) / vec2(iResolution.xy);vec3 ditn = vec3(-(texelSize.x * 1.5), 0.2, texelSize.x * 1.5);vec4 c = vec4(0.0);for (int i = 0; i < 8; i++) {vec2 offset = xtC + (ghvc * float(i));c += txD(lensDirtTexture, offset, ghNm, ditn) * pow(max(0.0, 1.0 - (length(vec2(0.5) - offset) / length(vec2(0.5)))), 10.0);}vec2 uyTrz = xtC + hlNm; return (c * geLC((length(vec2(0.5) - aspXtc) / length(vec2(haloScale))))) +(txD(lensDirtTexture, uyTrz, ghNm, ditn) * pow(max(0.0, 1.0 - (length(vec2(0.5) - uyTrz) / length(vec2(0.5)))), 10.0));} 58 | void mainImage(vec4 v,vec2 r,out vec4 i){vec2 g=r-.5;g.y*=iResolution.y/iResolution.x;vec2 l=lensPosition*.5;l.y*=iResolution.y/iResolution.x;vec3 f=mLs(g,l)*20.*colorGain/256.;if(aditionalStreaks){vec3 o=vec3(.9,.2,.1),p=vec3(.3,.1,.9);for(float n=0.;n<10.;n++)f+=drC(g,pow(rnd(n*2e3)*2.8,.1)+1.41,0.,o+n,p+n,rnd(n*20.)*3.+.2-.5,lensPosition);}if(secondaryGhosts){vec3 n=vec3(0);n+=rHx(g,-lensPosition*.25,ghostScale*1.4,vec3(.25,.35,0));n+=rHx(g,lensPosition*.25,ghostScale*.5,vec3(1,.5,.5));n+=rHx(g,lensPosition*.1,ghostScale*1.6,vec3(1));n+=rHx(g,lensPosition*1.8,ghostScale*2.,vec3(0,.5,.75));n+=rHx(g,lensPosition*1.25,ghostScale*.8,vec3(1,1,.5));n+=rHx(g,-lensPosition*1.25,ghostScale*5.,vec3(.5,.5,.25));n+=fpow(1.-abs(distance(lensPosition*.8,g)-.7),.985)*colorGain/2100.;f+=n;}if(starBurst){vxtC=g+.5;vec4 n=geLD(g);float o=1.-clamp(0.5,0.,.5)*2.;n+=mix(n,pow(n*2.,vec4(2))*.5,o);float s=(g.x+g.y)*(1./6.);vec2 d=mat2(cos(s),-sin(s),sin(s),cos(s))*vxtC;n+=geLS(d)*2.;f+=clamp(n.xyz*strB().xyz,.01,1.);}i=enabled?vec4(mix(f,vec3(0),opacity)+v.xyz,v.w):vec4(v);} 59 | ` 60 | } 61 | 62 | export class LensFlareEffect extends Effect { 63 | constructor({ 64 | blendFunction = BlendFunction.NORMAL, 65 | enabled = true, 66 | glareSize = 0.2, 67 | lensPosition = [0.01, 0.01], 68 | iResolution = [0, 0], 69 | starPoints = 6, 70 | flareSize = 0.01, 71 | flareSpeed = 0.01, 72 | flareShape = 0.01, 73 | animated = true, 74 | anamorphic = false, 75 | colorGain = new Color(70, 70, 70), 76 | lensDirtTexture = null, 77 | haloScale = 0.5, 78 | secondaryGhosts = true, 79 | aditionalStreaks = true, 80 | ghostScale = 0.0, 81 | opacity = 1.0, 82 | starBurst = true 83 | } = {}) { 84 | super('LensFlareEffect', LensFlareShader.fragmentShader, { 85 | blendFunction, 86 | uniforms: new Map([ 87 | ['enabled', new Uniform(enabled)], 88 | ['glareSize', new Uniform(glareSize)], 89 | ['lensPosition', new Uniform(lensPosition)], 90 | ['iTime', new Uniform(0)], 91 | ['iResolution', new Uniform(iResolution)], 92 | ['starPoints', new Uniform(starPoints)], 93 | ['flareSize', new Uniform(flareSize)], 94 | ['flareSpeed', new Uniform(flareSpeed)], 95 | ['flareShape', new Uniform(flareShape)], 96 | ['animated', new Uniform(animated)], 97 | ['anamorphic', new Uniform(anamorphic)], 98 | ['colorGain', new Uniform(colorGain)], 99 | ['lensDirtTexture', new Uniform(lensDirtTexture)], 100 | ['haloScale', new Uniform(haloScale)], 101 | ['secondaryGhosts', new Uniform(secondaryGhosts)], 102 | ['aditionalStreaks', new Uniform(aditionalStreaks)], 103 | ['ghostScale', new Uniform(ghostScale)], 104 | ['starBurst', new Uniform(starBurst)], 105 | ['opacity', new Uniform(opacity)] 106 | ]) 107 | }) 108 | } 109 | 110 | update(renderer, inputBuffer, deltaTime) { 111 | this.uniforms.get('iTime').value += deltaTime 112 | } 113 | } 114 | 115 | function Effects({ 116 | position = { x: -25, y: 6, z: -60 }, 117 | blendFunction = BlendFunction.NORMAL, 118 | glareSize = 0.35, 119 | followMouse, 120 | starPoints = 6.0, 121 | flareSize = 0.005, 122 | flareSpeed = 0.3, 123 | flareShape = 0.02, 124 | animated = true, 125 | anamorphic = false, 126 | colorGain = new Color(56, 22, 11), 127 | dirtTextureFile = 'https://i.ibb.co/c3x4dBy/lens-Dirt-Texture.jpg', 128 | haloScale = 0.5, 129 | secondaryGhosts = true, 130 | aditionalStreaks = true, 131 | ghostScale = 0.5, 132 | starBurst = true, 133 | enabled = true, 134 | opacity = 1.0 135 | }) { 136 | const lensRef = useRef(); 137 | 138 | const LensFlare = wrapEffect(LensFlareEffect); 139 | 140 | const screenPosition = new Vector3(position.x, position.y, position.z) 141 | let flarePosition = new Vector3() 142 | 143 | const { viewport, raycaster } = useThree() 144 | const lensDirtTexture = useTexture(dirtTextureFile) 145 | 146 | let projectedPosition 147 | 148 | useFrame(({ scene, mouse, camera, delta }) => { 149 | if (lensRef) { 150 | if (followMouse) { 151 | lensRef.current.uniforms.get('lensPosition').value.x = mouse.x 152 | lensRef.current.uniforms.get('lensPosition').value.y = mouse.y 153 | easing.damp(lensRef.current.uniforms.get('opacity'), 'value', 0.0, 0.07, delta) 154 | } else { 155 | projectedPosition = screenPosition.clone() 156 | projectedPosition.project(camera) 157 | 158 | flarePosition.set(projectedPosition.x, projectedPosition.y, projectedPosition.z) 159 | 160 | if (flarePosition.z > 1) return 161 | 162 | raycaster.setFromCamera(projectedPosition, camera) 163 | const intersects = raycaster.intersectObjects(scene.children, true) 164 | 165 | if (intersects[0]) { 166 | if (intersects[0].object.userData && intersects[0].object.userData.lensflare === 'no-occlusion') { 167 | easing.damp(lensRef.current.uniforms.get('opacity'), 'value', 0.0, 0.07, delta) 168 | } else { 169 | //Check for MeshTransmissionMaterial 170 | if (intersects[0].object.material.uniforms) { 171 | if (intersects[0].object.material.uniforms._transmission) { 172 | if (intersects[0].object.material.uniforms._transmission.value > 0.2) { 173 | easing.damp(lensRef.current.uniforms.get('opacity'), 'value', 0.2, 0.07, delta) 174 | } 175 | } 176 | } else { 177 | easing.damp(lensRef.current.uniforms.get('opacity'), 'value', 1.0, 0.07, delta) 178 | } 179 | 180 | //Check for MeshPhysicalMaterial with transmission setting 181 | if (intersects[0].object.material._transmission && intersects[0].object.material._transmission > 0.2) { 182 | easing.damp(lensRef.current.uniforms.get('opacity'), 'value', 0.2, 0.07, delta) 183 | } else { 184 | easing.damp(lensRef.current.uniforms.get('opacity'), 'value', 1.0, 0.07, delta) 185 | } 186 | 187 | //Check for OtherMaterials with transparent parameter 188 | if (intersects[0].object.material.transparent) { 189 | easing.damp(lensRef.current.uniforms.get('opacity'), 'value', intersects[0].object.material.opacity, 0.07, delta) 190 | } else { 191 | easing.damp(lensRef.current.uniforms.get('opacity'), 'value', 1.0, 0.07, delta) 192 | } 193 | } 194 | } else { 195 | easing.damp(lensRef.current.uniforms.get('opacity'), 'value', 0.0, 0.07, delta) 196 | } 197 | 198 | lensRef.current.uniforms.get('lensPosition').value.x = flarePosition.x 199 | lensRef.current.uniforms.get('lensPosition').value.y = flarePosition.y 200 | } 201 | } 202 | }) 203 | 204 | useEffect(() => { 205 | lensRef.current.uniforms.get('iResolution').value.x = viewport.width 206 | lensRef.current.uniforms.get('iResolution').value.y = viewport.height 207 | }, [viewport]) 208 | 209 | return useMemo( 210 | () => ( 211 | 232 | ), 233 | 234 | [ 235 | glareSize, 236 | blendFunction, 237 | starPoints, 238 | flareSize, 239 | flareSpeed, 240 | flareShape, 241 | animated, 242 | anamorphic, 243 | colorGain, 244 | haloScale, 245 | secondaryGhosts, 246 | aditionalStreaks, 247 | ghostScale, 248 | starBurst, 249 | enabled, 250 | opacity 251 | ] 252 | ) 253 | } 254 | 255 | export default Effects -------------------------------------------------------------------------------- /example/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "version": "0.1.0", 4 | "lockfileVersion": 2, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "name": "example", 9 | "version": "0.1.0", 10 | "dependencies": { 11 | "next": "13.4.3", 12 | "react": "18.2.0", 13 | "react-dom": "18.2.0" 14 | } 15 | }, 16 | "node_modules/@next/env": { 17 | "version": "13.4.3", 18 | "resolved": "https://registry.npmjs.org/@next/env/-/env-13.4.3.tgz", 19 | "integrity": "sha512-pa1ErjyFensznttAk3EIv77vFbfSYT6cLzVRK5jx4uiRuCQo+m2wCFAREaHKIy63dlgvOyMlzh6R8Inu8H3KrQ==" 20 | }, 21 | "node_modules/@next/swc-darwin-arm64": { 22 | "version": "13.4.3", 23 | "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.3.tgz", 24 | "integrity": "sha512-yx18udH/ZmR4Bw4M6lIIPE3JxsAZwo04iaucEfA2GMt1unXr2iodHUX/LAKNyi6xoLP2ghi0E+Xi1f4Qb8f1LQ==", 25 | "cpu": [ 26 | "arm64" 27 | ], 28 | "optional": true, 29 | "os": [ 30 | "darwin" 31 | ], 32 | "engines": { 33 | "node": ">= 10" 34 | } 35 | }, 36 | "node_modules/@next/swc-darwin-x64": { 37 | "version": "13.4.3", 38 | "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.3.tgz", 39 | "integrity": "sha512-Mi8xJWh2IOjryAM1mx18vwmal9eokJ2njY4nDh04scy37F0LEGJ/diL6JL6kTXi0UfUCGbMsOItf7vpReNiD2A==", 40 | "cpu": [ 41 | "x64" 42 | ], 43 | "optional": true, 44 | "os": [ 45 | "darwin" 46 | ], 47 | "engines": { 48 | "node": ">= 10" 49 | } 50 | }, 51 | "node_modules/@next/swc-linux-arm64-gnu": { 52 | "version": "13.4.3", 53 | "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.3.tgz", 54 | "integrity": "sha512-aBvtry4bxJ1xwKZ/LVPeBGBwWVwxa4bTnNkRRw6YffJnn/f4Tv4EGDPaVeYHZGQVA56wsGbtA6nZMuWs/EIk4Q==", 55 | "cpu": [ 56 | "arm64" 57 | ], 58 | "optional": true, 59 | "os": [ 60 | "linux" 61 | ], 62 | "engines": { 63 | "node": ">= 10" 64 | } 65 | }, 66 | "node_modules/@next/swc-linux-arm64-musl": { 67 | "version": "13.4.3", 68 | "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.3.tgz", 69 | "integrity": "sha512-krT+2G3kEsEUvZoYte3/2IscscDraYPc2B+fDJFipPktJmrv088Pei/RjrhWm5TMIy5URYjZUoDZdh5k940Dyw==", 70 | "cpu": [ 71 | "arm64" 72 | ], 73 | "optional": true, 74 | "os": [ 75 | "linux" 76 | ], 77 | "engines": { 78 | "node": ">= 10" 79 | } 80 | }, 81 | "node_modules/@next/swc-linux-x64-gnu": { 82 | "version": "13.4.3", 83 | "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.4.3.tgz", 84 | "integrity": "sha512-AMdFX6EKJjC0G/CM6hJvkY8wUjCcbdj3Qg7uAQJ7PVejRWaVt0sDTMavbRfgMchx8h8KsAudUCtdFkG9hlEClw==", 85 | "cpu": [ 86 | "x64" 87 | ], 88 | "optional": true, 89 | "os": [ 90 | "linux" 91 | ], 92 | "engines": { 93 | "node": ">= 10" 94 | } 95 | }, 96 | "node_modules/@next/swc-linux-x64-musl": { 97 | "version": "13.4.3", 98 | "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.4.3.tgz", 99 | "integrity": "sha512-jySgSXE48shaLtcQbiFO9ajE9mqz7pcAVLnVLvRIlUHyQYR/WyZdK8ehLs65Mz6j9cLrJM+YdmdJPyV4WDaz2g==", 100 | "cpu": [ 101 | "x64" 102 | ], 103 | "optional": true, 104 | "os": [ 105 | "linux" 106 | ], 107 | "engines": { 108 | "node": ">= 10" 109 | } 110 | }, 111 | "node_modules/@next/swc-win32-arm64-msvc": { 112 | "version": "13.4.3", 113 | "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.3.tgz", 114 | "integrity": "sha512-5DxHo8uYcaADiE9pHrg8o28VMt/1kR8voDehmfs9AqS0qSClxAAl+CchjdboUvbCjdNWL1MISCvEfKY2InJ3JA==", 115 | "cpu": [ 116 | "arm64" 117 | ], 118 | "optional": true, 119 | "os": [ 120 | "win32" 121 | ], 122 | "engines": { 123 | "node": ">= 10" 124 | } 125 | }, 126 | "node_modules/@next/swc-win32-ia32-msvc": { 127 | "version": "13.4.3", 128 | "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.3.tgz", 129 | "integrity": "sha512-LaqkF3d+GXRA5X6zrUjQUrXm2MN/3E2arXBtn5C7avBCNYfm9G3Xc646AmmmpN3DJZVaMYliMyCIQCMDEzk80w==", 130 | "cpu": [ 131 | "ia32" 132 | ], 133 | "optional": true, 134 | "os": [ 135 | "win32" 136 | ], 137 | "engines": { 138 | "node": ">= 10" 139 | } 140 | }, 141 | "node_modules/@next/swc-win32-x64-msvc": { 142 | "version": "13.4.3", 143 | "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.3.tgz", 144 | "integrity": "sha512-jglUk/x7ZWeOJWlVoKyIAkHLTI+qEkOriOOV+3hr1GyiywzcqfI7TpFSiwC7kk1scOiH7NTFKp8mA3XPNO9bDw==", 145 | "cpu": [ 146 | "x64" 147 | ], 148 | "optional": true, 149 | "os": [ 150 | "win32" 151 | ], 152 | "engines": { 153 | "node": ">= 10" 154 | } 155 | }, 156 | "node_modules/@swc/helpers": { 157 | "version": "0.5.1", 158 | "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.1.tgz", 159 | "integrity": "sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==", 160 | "dependencies": { 161 | "tslib": "^2.4.0" 162 | } 163 | }, 164 | "node_modules/busboy": { 165 | "version": "1.6.0", 166 | "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz", 167 | "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==", 168 | "dependencies": { 169 | "streamsearch": "^1.1.0" 170 | }, 171 | "engines": { 172 | "node": ">=10.16.0" 173 | } 174 | }, 175 | "node_modules/caniuse-lite": { 176 | "version": "1.0.30001489", 177 | "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001489.tgz", 178 | "integrity": "sha512-x1mgZEXK8jHIfAxm+xgdpHpk50IN3z3q3zP261/WS+uvePxW8izXuCu6AHz0lkuYTlATDehiZ/tNyYBdSQsOUQ==", 179 | "funding": [ 180 | { 181 | "type": "opencollective", 182 | "url": "https://opencollective.com/browserslist" 183 | }, 184 | { 185 | "type": "tidelift", 186 | "url": "https://tidelift.com/funding/github/npm/caniuse-lite" 187 | }, 188 | { 189 | "type": "github", 190 | "url": "https://github.com/sponsors/ai" 191 | } 192 | ] 193 | }, 194 | "node_modules/client-only": { 195 | "version": "0.0.1", 196 | "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", 197 | "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==" 198 | }, 199 | "node_modules/js-tokens": { 200 | "version": "4.0.0", 201 | "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", 202 | "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" 203 | }, 204 | "node_modules/loose-envify": { 205 | "version": "1.4.0", 206 | "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", 207 | "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", 208 | "dependencies": { 209 | "js-tokens": "^3.0.0 || ^4.0.0" 210 | }, 211 | "bin": { 212 | "loose-envify": "cli.js" 213 | } 214 | }, 215 | "node_modules/nanoid": { 216 | "version": "3.3.6", 217 | "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", 218 | "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==", 219 | "funding": [ 220 | { 221 | "type": "github", 222 | "url": "https://github.com/sponsors/ai" 223 | } 224 | ], 225 | "bin": { 226 | "nanoid": "bin/nanoid.cjs" 227 | }, 228 | "engines": { 229 | "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" 230 | } 231 | }, 232 | "node_modules/next": { 233 | "version": "13.4.3", 234 | "resolved": "https://registry.npmjs.org/next/-/next-13.4.3.tgz", 235 | "integrity": "sha512-FV3pBrAAnAIfOclTvncw9dDohyeuEEXPe5KNcva91anT/rdycWbgtu3IjUj4n5yHnWK8YEPo0vrUecHmnmUNbA==", 236 | "dependencies": { 237 | "@next/env": "13.4.3", 238 | "@swc/helpers": "0.5.1", 239 | "busboy": "1.6.0", 240 | "caniuse-lite": "^1.0.30001406", 241 | "postcss": "8.4.14", 242 | "styled-jsx": "5.1.1", 243 | "zod": "3.21.4" 244 | }, 245 | "bin": { 246 | "next": "dist/bin/next" 247 | }, 248 | "engines": { 249 | "node": ">=16.8.0" 250 | }, 251 | "optionalDependencies": { 252 | "@next/swc-darwin-arm64": "13.4.3", 253 | "@next/swc-darwin-x64": "13.4.3", 254 | "@next/swc-linux-arm64-gnu": "13.4.3", 255 | "@next/swc-linux-arm64-musl": "13.4.3", 256 | "@next/swc-linux-x64-gnu": "13.4.3", 257 | "@next/swc-linux-x64-musl": "13.4.3", 258 | "@next/swc-win32-arm64-msvc": "13.4.3", 259 | "@next/swc-win32-ia32-msvc": "13.4.3", 260 | "@next/swc-win32-x64-msvc": "13.4.3" 261 | }, 262 | "peerDependencies": { 263 | "@opentelemetry/api": "^1.1.0", 264 | "fibers": ">= 3.1.0", 265 | "node-sass": "^6.0.0 || ^7.0.0", 266 | "react": "^18.2.0", 267 | "react-dom": "^18.2.0", 268 | "sass": "^1.3.0" 269 | }, 270 | "peerDependenciesMeta": { 271 | "@opentelemetry/api": { 272 | "optional": true 273 | }, 274 | "fibers": { 275 | "optional": true 276 | }, 277 | "node-sass": { 278 | "optional": true 279 | }, 280 | "sass": { 281 | "optional": true 282 | } 283 | } 284 | }, 285 | "node_modules/picocolors": { 286 | "version": "1.0.0", 287 | "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", 288 | "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" 289 | }, 290 | "node_modules/postcss": { 291 | "version": "8.4.14", 292 | "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz", 293 | "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==", 294 | "funding": [ 295 | { 296 | "type": "opencollective", 297 | "url": "https://opencollective.com/postcss/" 298 | }, 299 | { 300 | "type": "tidelift", 301 | "url": "https://tidelift.com/funding/github/npm/postcss" 302 | } 303 | ], 304 | "dependencies": { 305 | "nanoid": "^3.3.4", 306 | "picocolors": "^1.0.0", 307 | "source-map-js": "^1.0.2" 308 | }, 309 | "engines": { 310 | "node": "^10 || ^12 || >=14" 311 | } 312 | }, 313 | "node_modules/react": { 314 | "version": "18.2.0", 315 | "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", 316 | "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", 317 | "dependencies": { 318 | "loose-envify": "^1.1.0" 319 | }, 320 | "engines": { 321 | "node": ">=0.10.0" 322 | } 323 | }, 324 | "node_modules/react-dom": { 325 | "version": "18.2.0", 326 | "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", 327 | "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", 328 | "dependencies": { 329 | "loose-envify": "^1.1.0", 330 | "scheduler": "^0.23.0" 331 | }, 332 | "peerDependencies": { 333 | "react": "^18.2.0" 334 | } 335 | }, 336 | "node_modules/scheduler": { 337 | "version": "0.23.0", 338 | "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", 339 | "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", 340 | "dependencies": { 341 | "loose-envify": "^1.1.0" 342 | } 343 | }, 344 | "node_modules/source-map-js": { 345 | "version": "1.0.2", 346 | "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", 347 | "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", 348 | "engines": { 349 | "node": ">=0.10.0" 350 | } 351 | }, 352 | "node_modules/streamsearch": { 353 | "version": "1.1.0", 354 | "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz", 355 | "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==", 356 | "engines": { 357 | "node": ">=10.0.0" 358 | } 359 | }, 360 | "node_modules/styled-jsx": { 361 | "version": "5.1.1", 362 | "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz", 363 | "integrity": "sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==", 364 | "dependencies": { 365 | "client-only": "0.0.1" 366 | }, 367 | "engines": { 368 | "node": ">= 12.0.0" 369 | }, 370 | "peerDependencies": { 371 | "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0" 372 | }, 373 | "peerDependenciesMeta": { 374 | "@babel/core": { 375 | "optional": true 376 | }, 377 | "babel-plugin-macros": { 378 | "optional": true 379 | } 380 | } 381 | }, 382 | "node_modules/tslib": { 383 | "version": "2.5.2", 384 | "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.2.tgz", 385 | "integrity": "sha512-5svOrSA2w3iGFDs1HibEVBGbDrAY82bFQ3HZ3ixB+88nsbsWQoKqDRb5UBYAUPEzbBn6dAp5gRNXglySbx1MlA==" 386 | }, 387 | "node_modules/zod": { 388 | "version": "3.21.4", 389 | "resolved": "https://registry.npmjs.org/zod/-/zod-3.21.4.tgz", 390 | "integrity": "sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==", 391 | "funding": { 392 | "url": "https://github.com/sponsors/colinhacks" 393 | } 394 | } 395 | }, 396 | "dependencies": { 397 | "@next/env": { 398 | "version": "13.4.3", 399 | "resolved": "https://registry.npmjs.org/@next/env/-/env-13.4.3.tgz", 400 | "integrity": "sha512-pa1ErjyFensznttAk3EIv77vFbfSYT6cLzVRK5jx4uiRuCQo+m2wCFAREaHKIy63dlgvOyMlzh6R8Inu8H3KrQ==" 401 | }, 402 | "@next/swc-darwin-arm64": { 403 | "version": "13.4.3", 404 | "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.3.tgz", 405 | "integrity": "sha512-yx18udH/ZmR4Bw4M6lIIPE3JxsAZwo04iaucEfA2GMt1unXr2iodHUX/LAKNyi6xoLP2ghi0E+Xi1f4Qb8f1LQ==", 406 | "optional": true 407 | }, 408 | "@next/swc-darwin-x64": { 409 | "version": "13.4.3", 410 | "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.3.tgz", 411 | "integrity": "sha512-Mi8xJWh2IOjryAM1mx18vwmal9eokJ2njY4nDh04scy37F0LEGJ/diL6JL6kTXi0UfUCGbMsOItf7vpReNiD2A==", 412 | "optional": true 413 | }, 414 | "@next/swc-linux-arm64-gnu": { 415 | "version": "13.4.3", 416 | "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.3.tgz", 417 | "integrity": "sha512-aBvtry4bxJ1xwKZ/LVPeBGBwWVwxa4bTnNkRRw6YffJnn/f4Tv4EGDPaVeYHZGQVA56wsGbtA6nZMuWs/EIk4Q==", 418 | "optional": true 419 | }, 420 | "@next/swc-linux-arm64-musl": { 421 | "version": "13.4.3", 422 | "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.3.tgz", 423 | "integrity": "sha512-krT+2G3kEsEUvZoYte3/2IscscDraYPc2B+fDJFipPktJmrv088Pei/RjrhWm5TMIy5URYjZUoDZdh5k940Dyw==", 424 | "optional": true 425 | }, 426 | "@next/swc-linux-x64-gnu": { 427 | "version": "13.4.3", 428 | "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.4.3.tgz", 429 | "integrity": "sha512-AMdFX6EKJjC0G/CM6hJvkY8wUjCcbdj3Qg7uAQJ7PVejRWaVt0sDTMavbRfgMchx8h8KsAudUCtdFkG9hlEClw==", 430 | "optional": true 431 | }, 432 | "@next/swc-linux-x64-musl": { 433 | "version": "13.4.3", 434 | "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.4.3.tgz", 435 | "integrity": "sha512-jySgSXE48shaLtcQbiFO9ajE9mqz7pcAVLnVLvRIlUHyQYR/WyZdK8ehLs65Mz6j9cLrJM+YdmdJPyV4WDaz2g==", 436 | "optional": true 437 | }, 438 | "@next/swc-win32-arm64-msvc": { 439 | "version": "13.4.3", 440 | "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.3.tgz", 441 | "integrity": "sha512-5DxHo8uYcaADiE9pHrg8o28VMt/1kR8voDehmfs9AqS0qSClxAAl+CchjdboUvbCjdNWL1MISCvEfKY2InJ3JA==", 442 | "optional": true 443 | }, 444 | "@next/swc-win32-ia32-msvc": { 445 | "version": "13.4.3", 446 | "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.3.tgz", 447 | "integrity": "sha512-LaqkF3d+GXRA5X6zrUjQUrXm2MN/3E2arXBtn5C7avBCNYfm9G3Xc646AmmmpN3DJZVaMYliMyCIQCMDEzk80w==", 448 | "optional": true 449 | }, 450 | "@next/swc-win32-x64-msvc": { 451 | "version": "13.4.3", 452 | "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.3.tgz", 453 | "integrity": "sha512-jglUk/x7ZWeOJWlVoKyIAkHLTI+qEkOriOOV+3hr1GyiywzcqfI7TpFSiwC7kk1scOiH7NTFKp8mA3XPNO9bDw==", 454 | "optional": true 455 | }, 456 | "@swc/helpers": { 457 | "version": "0.5.1", 458 | "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.1.tgz", 459 | "integrity": "sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==", 460 | "requires": { 461 | "tslib": "^2.4.0" 462 | } 463 | }, 464 | "busboy": { 465 | "version": "1.6.0", 466 | "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz", 467 | "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==", 468 | "requires": { 469 | "streamsearch": "^1.1.0" 470 | } 471 | }, 472 | "caniuse-lite": { 473 | "version": "1.0.30001489", 474 | "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001489.tgz", 475 | "integrity": "sha512-x1mgZEXK8jHIfAxm+xgdpHpk50IN3z3q3zP261/WS+uvePxW8izXuCu6AHz0lkuYTlATDehiZ/tNyYBdSQsOUQ==" 476 | }, 477 | "client-only": { 478 | "version": "0.0.1", 479 | "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", 480 | "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==" 481 | }, 482 | "js-tokens": { 483 | "version": "4.0.0", 484 | "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", 485 | "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" 486 | }, 487 | "loose-envify": { 488 | "version": "1.4.0", 489 | "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", 490 | "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", 491 | "requires": { 492 | "js-tokens": "^3.0.0 || ^4.0.0" 493 | } 494 | }, 495 | "nanoid": { 496 | "version": "3.3.6", 497 | "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", 498 | "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==" 499 | }, 500 | "next": { 501 | "version": "13.4.3", 502 | "resolved": "https://registry.npmjs.org/next/-/next-13.4.3.tgz", 503 | "integrity": "sha512-FV3pBrAAnAIfOclTvncw9dDohyeuEEXPe5KNcva91anT/rdycWbgtu3IjUj4n5yHnWK8YEPo0vrUecHmnmUNbA==", 504 | "requires": { 505 | "@next/env": "13.4.3", 506 | "@next/swc-darwin-arm64": "13.4.3", 507 | "@next/swc-darwin-x64": "13.4.3", 508 | "@next/swc-linux-arm64-gnu": "13.4.3", 509 | "@next/swc-linux-arm64-musl": "13.4.3", 510 | "@next/swc-linux-x64-gnu": "13.4.3", 511 | "@next/swc-linux-x64-musl": "13.4.3", 512 | "@next/swc-win32-arm64-msvc": "13.4.3", 513 | "@next/swc-win32-ia32-msvc": "13.4.3", 514 | "@next/swc-win32-x64-msvc": "13.4.3", 515 | "@swc/helpers": "0.5.1", 516 | "busboy": "1.6.0", 517 | "caniuse-lite": "^1.0.30001406", 518 | "postcss": "8.4.14", 519 | "styled-jsx": "5.1.1", 520 | "zod": "3.21.4" 521 | } 522 | }, 523 | "picocolors": { 524 | "version": "1.0.0", 525 | "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", 526 | "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" 527 | }, 528 | "postcss": { 529 | "version": "8.4.14", 530 | "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz", 531 | "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==", 532 | "requires": { 533 | "nanoid": "^3.3.4", 534 | "picocolors": "^1.0.0", 535 | "source-map-js": "^1.0.2" 536 | } 537 | }, 538 | "react": { 539 | "version": "18.2.0", 540 | "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", 541 | "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", 542 | "requires": { 543 | "loose-envify": "^1.1.0" 544 | } 545 | }, 546 | "react-dom": { 547 | "version": "18.2.0", 548 | "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", 549 | "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", 550 | "requires": { 551 | "loose-envify": "^1.1.0", 552 | "scheduler": "^0.23.0" 553 | } 554 | }, 555 | "scheduler": { 556 | "version": "0.23.0", 557 | "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", 558 | "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", 559 | "requires": { 560 | "loose-envify": "^1.1.0" 561 | } 562 | }, 563 | "source-map-js": { 564 | "version": "1.0.2", 565 | "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", 566 | "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==" 567 | }, 568 | "streamsearch": { 569 | "version": "1.1.0", 570 | "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz", 571 | "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==" 572 | }, 573 | "styled-jsx": { 574 | "version": "5.1.1", 575 | "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz", 576 | "integrity": "sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==", 577 | "requires": { 578 | "client-only": "0.0.1" 579 | } 580 | }, 581 | "tslib": { 582 | "version": "2.5.2", 583 | "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.2.tgz", 584 | "integrity": "sha512-5svOrSA2w3iGFDs1HibEVBGbDrAY82bFQ3HZ3ixB+88nsbsWQoKqDRb5UBYAUPEzbBn6dAp5gRNXglySbx1MlA==" 585 | }, 586 | "zod": { 587 | "version": "3.21.4", 588 | "resolved": "https://registry.npmjs.org/zod/-/zod-3.21.4.tgz", 589 | "integrity": "sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==" 590 | } 591 | } 592 | } 593 | --------------------------------------------------------------------------------