`@react-vertex/attribute-hooks`

Documentation and Examples

React hooks for working with WebGL attributes. More info on WebGL atrributes on MDN.

Install via npm:

npm install @react-vertex/attribute-hooks

Importing:

import {
  useAttribute
} from '@react-vertex/attribute-hooks'

`useAttribute(gl, program, name, size, buffer, [getOptions])` => `index`

React hook for WebGL attributes.

Arguments:

gl: A WebGL context.

program: The WebGLProgram you want to attach the attribute to.

name: String name of the attribute used in the shader for the supplied program.

size: An integer indicating the number of components per vertex attribute. Must be 1, 2, 3, or 4.

buffer: A WebGL buffer. You can use hooks from buffer-hooks to create it.

getOptions: A function that will be called with the context (gl) that returns an object with the options you wish to override.

Valid keys in object returned by getOptions:

target defualts to gl.ARRAY_BUFFER
type defaults to gl.FLOAT
normalized defaults to false
stride defualts to 0
offset defaults to 0

Returns:

index: The index of the attribute.

Example Usage

import { useStaticBuffer } from '@react-vertex/buffer-hooks'
import { useProgram } from '@react-vertex/shader-hooks'
import { useAttribute } from '@react-vertex/attribute-hooks'

const attrOptions = gl => ({
  type: gl.SHORT,
  stride: 20,
  offset: 16,
})

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

  const myBuffer = useStaticBuffer(gl, position.array)
  useAttribute(gl, program, 'attrName', 3, myBuffer, attrOptions)
...

Package detail