🔲 Ombra

Ombra is a collection of components and abstractions to help working with shaders in react-three-fiber.

yarn add ombra 

Components

ScreenQuad

1<ScreenQuad>
2  <myMaterial />
3</ScreenQuad>

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

1const material = useRef()
2useBasicUniforms(material)
3
4return (
5  <ScreenQuad>
6    <myMaterial ref={material} />
7  </ScreenQuad>
8)

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

useFBO

1const myBuffer = useFBO({
2  width: 1024,      // Buffer width, defaults to window width * DPI
3  height: 1024      // Buffer height, defaults to window width * DPI,
4  settings: { ... } // Any valid WebglRenderTarget option https://threejs.org/docs/#api/en/renderers/WebGLRenderTarget
5})

Creates and returns a memoized WebglRenderTarget.

usePrototypeTexture (Suspense)

1const texture = usePrototypeTexture(
2  color // any valid color, you can check the types to see what's avaialable
3)

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.