@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)
...