https://github.com/gsimone/ombra
🔲 A collection of shader-related utilities for react-three-fiber
https://github.com/gsimone/ombra
react react-three-fiber threejs
Last synced: 10 months ago
JSON representation
🔲 A collection of shader-related utilities for react-three-fiber
- Host: GitHub
- URL: https://github.com/gsimone/ombra
- Owner: gsimone
- License: mit
- Created: 2020-11-28T19:34:11.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2022-01-24T23:47:43.000Z (over 4 years ago)
- Last Synced: 2025-08-31T18:02:02.256Z (10 months ago)
- Topics: react, react-three-fiber, threejs
- Language: TypeScript
- Homepage: https://github.com/gsimone/ombra
- Size: 471 KB
- Stars: 43
- Watchers: 2
- Forks: 2
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/ombra)
[](https://www.npmjs.com/package/ombra)
[](https://discord.gg/ZZjjNvJ)
# 🔲 Ombra
Ombra is a collection of components and abstractions to help working with shaders in react-three-fiber.
```
yarn add ombra
```
### Components
#### ScreenQuad
```jsx
```
A triangle that fills the screen, ideal for full-screen fragment shader work (raymarching, postprocessing).
👉 Why a triangle? https://www.cginternals.com/en/blog/2018-01-10-screen-aligned-quads-and-triangles.html
#### useBasicUniforms
```jsx
const material = useRef()
useBasicUniforms(material)
return (
)
```
A hook that adds and updates a set of common uniforms to your shader material:
- `float u_time` the absolute elapsed time
- `vec2 u_resolution` the width and height of the browser window, updated on resize
- `vec2 u_mouse` the normalized mouse position, update every frame (from r3f state)
TODO: Add shadertoy variant
#### FBOGUI [WIP]
A GUI helper for framebuffer objects, currently WIP
#### usePiP
Hook used to build FBOGUI, see more here:
[See more here](https://twitter.com/ggsimm/status/1335565094000922626)
#### useFBO
```jsx
const myBuffer = useFBO({
width: 1024, // Buffer width, defaults to window width * DPI
height: 1024 // Buffer height, defaults to window width * DPI,
settings: { ... } // Any valid WebglRenderTarget option https://threejs.org/docs/#api/en/renderers/WebGLRenderTarget
})
```
Creates and returns a memoized WebglRenderTarget.
#### usePrototypeTexture (Suspense)
📦 https://codesandbox.io/s/ombra-prototype-dt02k?file=/src/index.js
```jsx
const texture = usePrototypeTexture(
color // any valid color, you can check the types to see what's avaialable
)
```
Loads a 512x512 prototype texture, useful for demos.
From this Unity asset: https://assetstore.unity.com/packages/2d/textures-materials/gridbox-prototype-materials-129127
The textures are served via githack and hosted in this repo https://github.com/gsimone/gridbox-prototype-materials
---
🇮🇹 Ombrawhat? Ombra is `shadow` in Italian.