🔲 Ombra

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

yarn add ombra 

Components

ScreenQuad

<ScreenQuad>
  <myMaterial />
</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

const material = useRef()
useBasicUniforms(material)

return (
  <ScreenQuad>
    <myMaterial ref={material} />
  </ScreenQuad>
)

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

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)

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.