{"id":14981235,"url":"https://github.com/ameobea/three-good-godrays","last_synced_at":"2025-04-06T03:06:23.411Z","repository":{"id":60957347,"uuid":"547078597","full_name":"Ameobea/three-good-godrays","owner":"Ameobea","description":"Screen-space raymarched godrays for three.js using the pmndrs postprocessing library","archived":false,"fork":false,"pushed_at":"2024-08-31T00:43:29.000Z","size":483,"stargazers_count":177,"open_issues_count":1,"forks_count":15,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-06T03:06:18.713Z","etag":null,"topics":["godrays","graphics","postprocessing","raymarching","three-js","threejs"],"latest_commit_sha":null,"homepage":"https://three-good-godrays.ameo.design","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Ameobea.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-10-07T05:17:24.000Z","updated_at":"2025-03-11T04:28:46.000Z","dependencies_parsed_at":"2024-06-19T03:52:59.478Z","dependency_job_id":"33fdbbf8-f814-49b4-acdb-d28bbdc1f161","html_url":"https://github.com/Ameobea/three-good-godrays","commit_stats":{"total_commits":51,"total_committers":4,"mean_commits":12.75,"dds":"0.11764705882352944","last_synced_commit":"cb6c85a68d81ae0969710c9b3cc54ba49d354180"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ameobea%2Fthree-good-godrays","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ameobea%2Fthree-good-godrays/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ameobea%2Fthree-good-godrays/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ameobea%2Fthree-good-godrays/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ameobea","download_url":"https://codeload.github.com/Ameobea/three-good-godrays/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247427005,"owners_count":20937200,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["godrays","graphics","postprocessing","raymarching","three-js","threejs"],"created_at":"2024-09-24T14:03:11.186Z","updated_at":"2025-04-06T03:06:23.384Z","avatar_url":"https://github.com/Ameobea.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `three-good-godrays`\n\n[![CI](https://github.com/ameobea/three-good-godrays/actions/workflows/cd.yml/badge.svg)](https://github.com/ameobea/three-good-godrays/actions/workflows/ci.yml)\n[![Version](https://badgen.net/npm/v/three-good-godrays?color=green)](https://www.npmjs.com/package/three-good-godrays)\n\nGood godrays effect for three.js using the [pmndrs `postprocessing` library](https://github.com/pmndrs/postprocessing)\n\nAdapted from [original implementation](https://github.com/n8python/goodGodRays) by [@n8python](https://github.com/n8python)\n\n**Demo**: \u003chttps://three-good-godrays.ameo.design\u003e\n\n![A screenshot showing the three-good-godrays effect in action within the sponza demo scene. A white sphere in the middle of a terrace with pillars has white godrays emanating from it along with prominent shadows.](https://ameo.link/u/al8.jpg)\n\n## Install\n\n`npm install three-good-godrays`\n\nOr import from unpkg as a module:\n\n```ts\nimport { GodraysPass } from 'https://unpkg.com/three-good-godrays@0.7.1/build/three-good-godrays.esm.js';\n```\n\n## Supported Three.JS Version\n\nThis library was tested to work with Three.JS versions `\u003e= 0.125.0 \u003c= 0.168.0`.  Although it might work with versions outside that range, support is not guaranteed.\n\n## Usage\n\n```ts\nimport { EffectComposer, RenderPass } from 'postprocessing';\nimport * as THREE from 'three';\nimport { GodraysPass } from 'three-good-godrays';\n\nconst { scene, camera, renderer } = initYourScene();\n\n// shadowmaps are needed for this effect\nrenderer.shadowMap.enabled = true;\nrenderer.shadowMap.type = THREE.PCFSoftShadowMap;\nrenderer.shadowMap.autoUpdate = true;\n\n// Make sure to set applicable objects in your scene to cast + receive shadows\n// so that this effect will work\nscene.traverse(obj =\u003e {\n  if (obj instanceof THREE.Mesh) {\n    obj.castShadow = true;\n    obj.receiveShadow = true;\n  }\n});\n\n// godrays can be cast from either `PointLight`s or `DirectionalLight`s\nconst lightPos = new THREE.Vector3(0, 20, 0);\nconst pointLight = new THREE.PointLight(0xffffff, 1, 10000);\npointLight.castShadow = true;\npointLight.shadow.mapSize.width = 1024;\npointLight.shadow.mapSize.height = 1024;\npointLight.shadow.autoUpdate = true;\npointLight.shadow.camera.near = 0.1;\npointLight.shadow.camera.far = 1000;\npointLight.shadow.camera.updateProjectionMatrix();\npointLight.position.copy(lightPos);\nscene.add(pointLight);\n\n// set up rendering pipeline and add godrays pass at the end\nconst composer = new EffectComposer(renderer, { frameBufferType: THREE.HalfFloatType });\n\nconst renderPass = new RenderPass(scene, camera);\nrenderPass.renderToScreen = false;\ncomposer.addPass(renderPass);\n\n// Default values are shown.  You can supply a sparse object or `undefined`.\nconst params = {\n  density: 1 / 128,\n  maxDensity: 0.5,\n  edgeStrength: 2,\n  edgeRadius: 2,\n  distanceAttenuation: 2,\n  color: new THREE.Color(0xffffff),\n  raymarchSteps: 60,\n  blur: true,\n  gammaCorrection: true,\n};\n\nconst godraysPass = new GodraysPass(pointLight, camera, params);\n// If this is the last pass in your pipeline, set `renderToScreen` to `true`\ngodraysPass.renderToScreen = true;\ncomposer.addPass(godraysPass);\n\nfunction animate() {\n  requestAnimationFrame(animate);\n  composer.render();\n}\nrequestAnimationFrame(animate);\n```\n\n### Gamma Correction\n\nGamma correction is enabled by this effect by default, matching expectations of sRGB buffers from `postprocessing`. However, you can disable this by setting `gammaCorrection: false` in the configuration object for the pass.\n\nThis may be necessary if you use other effect passes after `GodraysPass` that perform their own output encoding. If you see artifacts similar to these:\n\n![Screenshot of artifacts caused by double encoding in a Three.Js pmndrs postprocessing pipeline.  There is a grainy pattern of colorful pixels appearing over an otherwise blank black background.](https://i.ameo.link/bto.png)\n\nTry setting `gammaCorrection: false` on the `GodraysPass` or setting `encodeOutput = false` on any `EffectPass` that is added after the `GodraysPass`.\n\n## Develop + Run Demos Locally\n\n- Clone repo\n- `npm install`\n- `npm run prepublishOnly` to run initial builds\n- `npm install -g serve`\n- Run `node esbuild.mjs` whenever files are chnaged to re-build\n- Run `serve public/demo -p 5001` and visit http://localhost:5001 in your browser\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fameobea%2Fthree-good-godrays","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fameobea%2Fthree-good-godrays","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fameobea%2Fthree-good-godrays/lists"}