@react-vertex/texture-hooks v2.1.0

@react-vertex/texture-hooks

Documentation and Examples

React hooks for working with WebGL textures. More info on using textures in WebGL.

Install via npm:

npm install @react-vertex/texture-hooks

Importing:

import {
  useTexture2d
} from '@react-vertex/texture-hooks'

useTexture2d(gl, url, [getOptions]) => [WebGLTexture, isLoaded]

React hook for 2d WebGL textures. It returns a texture immediately with a placeholder pixel and updates it when the image loads.

Arguments:

gl: A WebGL context.

url: The URL of the texture image to load.

getOptions (optional): 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:

• format defualts to gl.RGBA
• mipMapsBoolean defaults to true. More on mipmaps.
• type defaults to gl.UNSIGNED_BYTE
• wrap defaults to null (sets both wrapS and wrapT)
• wrapS defaults to gl.REPEAT (will be overridden by wrap if used)
• wrapT defaults to gl.REPEAT (will be overridden by wrap if used)
• minMag defaults to null (sets both minFilter and magFilter)
• minFilter defaults to gl.NEAREST_MIPMAP_LINEAR (will be overridden by minMag if used)
• magFilter defaults to gl.LINEAR (will be overridden by minMag if used)
• placeholder defaults to a black pixel (new Uint8Array([0, 0, 0, 1]))

Returns:

[texture, isLoaded] : An array with a WebGLTexture as the first item and a boolean isLoaded indicating whether the full image has loaded yet.

Example Usage

import { useProgram } from '@react-vertex/shader-hooks'
import { useUniformSampler2d } from '@react-vertex/uniform-hooks'
import { useTexture2d } from '@react-vertex/texture-hooks'

const textureOptions = gl => ({
  placeholder: new Uint8Array([0, 0, 1, 1]) // blue
})

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

  const [texDiff] = useTexture2d(gl, tilesDiffUrl, textureOptions)
  useUniformSampler2d(gl, program, 'texDiff', texDiff, 0) // setup a sampler uniform to read unit 0
...