{"id":15310864,"url":"https://github.com/gsimone/ombra","last_synced_at":"2025-09-07T10:35:49.898Z","repository":{"id":42666676,"uuid":"316807991","full_name":"gsimone/ombra","owner":"gsimone","description":"🔲 A collection of shader-related utilities for react-three-fiber","archived":false,"fork":false,"pushed_at":"2022-01-24T23:47:43.000Z","size":482,"stargazers_count":43,"open_issues_count":11,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-08-31T18:02:02.256Z","etag":null,"topics":["react","react-three-fiber","threejs"],"latest_commit_sha":null,"homepage":"https://github.com/gsimone/ombra","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gsimone.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}},"created_at":"2020-11-28T19:34:11.000Z","updated_at":"2025-02-19T17:06:22.000Z","dependencies_parsed_at":"2022-08-24T09:10:33.576Z","dependency_job_id":null,"html_url":"https://github.com/gsimone/ombra","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/gsimone/ombra","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gsimone%2Fombra","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gsimone%2Fombra/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gsimone%2Fombra/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gsimone%2Fombra/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gsimone","download_url":"https://codeload.github.com/gsimone/ombra/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gsimone%2Fombra/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274026708,"owners_count":25209739,"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","status":"online","status_checked_at":"2025-09-07T02:00:09.463Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["react","react-three-fiber","threejs"],"created_at":"2024-10-01T08:29:47.093Z","updated_at":"2025-09-07T10:35:49.810Z","avatar_url":"https://github.com/gsimone.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![ombra](https://github.com/gsimone/ombra/blob/main/_logo.png?raw=true)\n\n\n[![Version](https://img.shields.io/npm/v/ombra?style=flat\u0026colorA=000000\u0026colorB=000000)](https://www.npmjs.com/package/ombra)\n[![Downloads](https://img.shields.io/npm/dt/ombra.svg?style=flat\u0026colorA=000000\u0026colorB=000000)](https://www.npmjs.com/package/ombra)\n[![Discord Shield](https://img.shields.io/discord/740090768164651008?style=flat\u0026colorA=000000\u0026colorB=000000\u0026label=discord\u0026logo=discord\u0026logoColor=ffffff)](https://discord.gg/ZZjjNvJ)\n\n# 🔲 Ombra\n\nOmbra is a collection of components and abstractions to help working with shaders in react-three-fiber.\n\n```\nyarn add ombra \n```\n\n### Components\n\n#### ScreenQuad\n\n```jsx\n\u003cScreenQuad\u003e\n  \u003cmyMaterial /\u003e\n\u003c/ScreenQuad\u003e\n```\n\nA triangle that fills the screen, ideal for full-screen fragment shader work (raymarching, postprocessing).\n\n👉 Why a triangle? https://www.cginternals.com/en/blog/2018-01-10-screen-aligned-quads-and-triangles.html\n\n\n#### useBasicUniforms\n\n\n```jsx\nconst material = useRef()\nuseBasicUniforms(material)\n\nreturn (\n  \u003cScreenQuad\u003e\n    \u003cmyMaterial ref={material} /\u003e\n  \u003c/ScreenQuad\u003e\n)\n```\n\n\nA hook that adds and updates a set of common uniforms to your shader material:\n\n- `float u_time` the absolute elapsed time\n- `vec2 u_resolution` the width and height of the browser window, updated on resize\n- `vec2 u_mouse` the normalized mouse position, update every frame (from r3f state)\n\nTODO: Add shadertoy variant\n\n#### FBOGUI [WIP]\n\nA GUI helper for framebuffer objects, currently WIP\n\n#### usePiP \n\nHook used to build FBOGUI, see more here:\n[See more here](https://twitter.com/ggsimm/status/1335565094000922626)\n\n#### useFBO\n\n```jsx\nconst myBuffer = useFBO({\n  width: 1024,      // Buffer width, defaults to window width * DPI\n  height: 1024      // Buffer height, defaults to window width * DPI,\n  settings: { ... } // Any valid WebglRenderTarget option https://threejs.org/docs/#api/en/renderers/WebGLRenderTarget\n})\n```\n\nCreates and returns a memoized WebglRenderTarget.\n\n\n#### usePrototypeTexture (Suspense)\n\n📦 https://codesandbox.io/s/ombra-prototype-dt02k?file=/src/index.js\n\n```jsx\nconst texture = usePrototypeTexture(\n  color // any valid color, you can check the types to see what's avaialable\n)\n```\n\nLoads a 512x512 prototype texture, useful for demos. \nFrom this Unity asset: https://assetstore.unity.com/packages/2d/textures-materials/gridbox-prototype-materials-129127\n\nThe textures are served via githack and hosted in this repo https://github.com/gsimone/gridbox-prototype-materials\n\n---\n\n🇮🇹 Ombrawhat? Ombra is `shadow` in Italian.  \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgsimone%2Fombra","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgsimone%2Fombra","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgsimone%2Fombra/lists"}