`@react-vertex/shader-hooks`

Documentation and Examples

React hooks for working with WebGL programs and shaders. More info on WebGL Programs and WebGL shaders.

Install via npm:

npm install @react-vertex/shader-hooks

Importing:

import {
  useProgram,
  useShader,
} from '@react-vertex/shader-hooks'

`useProgram(gl, vertSource, fragSource)` => `WebGLProgram`

React hook for creating a WebGL program. It uses useShader internally so you likely only need to use this hook to setup a basic program. More info on WebGL Programs. The hook will warn on compile errors and provide debug information. The program will also be deleted automatically when the containing component unmounts to conserve resources.

Arguments:

gl: A WebGL context.

vertSource: A string containing the vertex shader source or a compiled WebGLShader (see useShader below).

fragSource: A string containing the fragment shader source or a compiled WebGLShader (see useShader below).

Returns:

program: A WebGLProgram.

Example Usage:

import { useProgram } from '@react-vertex/shader-hooks'
import vert from './vert.glsl'
import frag from './frag.glsl'

...
  const program = useProgram(gl, vert, frag)
...

`useShader(gl, source, [isVertShader])` => `WebGLShader`

React hook for creating a WebGL shader. This is used internally by useProgram so you might not need it. This is useful if you want to compile your shaders higher up in your app. The hook will warn on compile errors and provide debug information.

Arguments:

gl: A WebGL context.

source: A string containing the shader source.

isVertShader (optional): Boolean value that defualts to false.

Returns:

shader: A WebGLShader.

Example Usage:

import { useShader, useProgram } from '@react-vertex/shader-hooks'
import vert from './vert.glsl'
import frag from './frag.glsl'

...
  const vertShader = useShader(gl, vert, true) // compile shaders higher up in your app
  const fragShader = useShader(gl, frag)
...

// Then somewhere else in your app (same conext of course)...
...
  const program = useProgram(gl, vertShader, fragShader)
...