@react-vertex/material-hooks

@react-vertex/material-hooks

Documentation and Examples

React hooks for working with materials in React Vertex.

Install via npm:

npm install @react-vertex/material-hooks

Importing:

import {
  usePhongSolid,
  usePhongTextured,
  useBasicSolid,
  useBasicTextured,
  useLambertSolid,
  useLambertTextured,
} from '@react-vertex/material-hooks'

Naming convention

This package uses a naming convention based (loosely) on the convention used by the .mtl format.

Name	Description
kd	Material Diffuse
ka	Material Ambient
na	Ambient Strength
ks	Material Specular
ns	Specular Strength
mapKd	Diffuse Map
mapKs	Specular Map

usePhongSolid(kd?, na?, ns?, ka?, ks?) => WebGLProgram

Hook for Phong with a solid color. This program reacts to lights in the scene.

Arguments:

kd (optional): An array of length 3 for the diffuse color (defaults to white [1, 1, 1]).

na (optional): Number for amount of ambient lighting should be between 0 and 1 (defaults to 0).

ns (optional): Number for specular strength should be between 0 and 1000 (defaults to 500).

ka (optional): An array of length 3 for the ambient color (defaults to white [1, 1, 1]).

ks (optional): An array of length 3 for the specular color (defaults to grey [0.6, 0.6, 0.6]).

Returns:

WebGLProgram: A WebGLProgram instance.

Required attributes:

Geometries using this program must set the following attributes:

• vec3 position
• vec3 normal

Example Usage:

import { useHex } from '@react-vertex/color-hooks'
import { usePhongSolid } from '@react-vertex/material-hooks'

...
  const diffuse = useHex('#323334', true)
  const program = usePhongSolid(diffuse, 0.15)

  return (
    <material program={program}>
      ...
    </material>
  )
...

usePhongTextured(mapKd, na?, ns?, ka?, ks?) => WebGLProgram

Hook for Phong with texture colors. This program reacts to lights in the scene.

Arguments:

mapKd: A texture to be used for the material colors.

na (optional): Number for amount of ambient lighting should be between 0 and 1 (defaults to 0).

ns (optional): Number for specular strength should be between 0 and 1000 (defaults to 500).

ka (optional): An array of length 3 for the ambient color (defaults to white [1, 1, 1]).

ks (optional): An array of length 3 for the specular color (defaults to grey [0.6, 0.6, 0.6]).

Returns:

WebGLProgram: A WebGLProgram instance.

Required attributes:

Geometries using this program must set the following attributes:

• vec3 position
• vec3 normal
• vec2 uv

Example Usage:

import { useTexture2d } from '@react-vertex/core'
import { usePhongTextured } from '@react-vertex/material-hooks'

...
  const [texture] = useTexture2d(textureUrl)
  const program = usePhongTextured(texture, 0.15)

  return (
    <material program={program}>
      ...
    </material>
  )
...

useBasicSolid(kd?) => WebGLProgram

Hook for basic program with a solid color. This program does not react to lights in the scene.

Arguments:

kd (optional): An array of length 3 for the diffuse color (default to white [1, 1, 1]).

Returns:

WebGLProgram: A WebGLProgram instance.

Required attributes:

Geometries using this program must set the following attributes:

• vec3 position

Example Usage:

import { useHex } from '@react-vertex/color-hooks'
import { useBasicSolid } from '@react-vertex/material-hooks'

...
  const diffuse = useHex('#323334', true)
  const program = useBasicSolid(diffuse)

  return (
    <material program={program}>
      ...
    </material>
  )
...

useBasicTextured(mapKd) => WebGLProgram

Hook for basic program with texture colors. This program does not react to lights in the scene.

Arguments:

mapKd: An array of length 3 for the diffuse color (default to white [1, 1, 1]).

Returns:

WebGLProgram: A WebGLProgram instance.

Required attributes:

Geometries using this program must set the following attributes:

• vec3 position
• vec2 uv

Example Usage:

import { useTexture2d } from '@react-vertex/core'
import { useBasicTextured } from '@react-vertex/material-hooks'

...
  const [texture] = useTexture2d(textureUrl)
  const program = useBasicTextured(texture)

  return (
    <material program={program}>
      ...
    </material>
  )
...

useLambertSolid(kd?, na?, ka?) => WebGLProgram

Hook for Lambert with a solid color. This program reacts to lights in the scene.

Arguments:

kd (optional): An array of length 3 for the diffuse color (defaults to white [1, 1, 1]).

na (optional): Number for amount of ambient lighting should be between 0 and 1 (defaults to 0).

ka (optional): An array of length 3 for the ambient color (defaults to white [1, 1, 1]).

Returns:

WebGLProgram: A WebGLProgram instance.

Required attributes:

Geometries using this program must set the following attributes:

• vec3 position
• vec3 normal

Example Usage:

import { useHex } from '@react-vertex/color-hooks'
import { useLambertSolid } from '@react-vertex/material-hooks'

...
  const diffuse = useHex('#323334', true)
  const program = useLambertSolid(diffuse, 0.15)

  return (
    <material program={program}>
      ...
    </material>
  )
...

useLambertTextured(mapKd, na?, ka?) => WebGLProgram

Hook for Lambert with texture colors. This program reacts to lights in the scene.

Arguments:

mapKd: A texture to be used for the material colors.

na (optional): Number for amount of ambient lighting should be between 0 and 1 (defaults to 0).

ka (optional): An array of length 3 for the ambient color (defaults to white [1, 1, 1]).

Returns:

WebGLProgram: A WebGLProgram instance.

Required attributes:

Geometries using this program must set the following attributes:

• vec3 position
• vec3 normal
• vec2 uv

Example Usage:

import { useTexture2d } from '@react-vertex/core'
import { useLambertTextured } from '@react-vertex/material-hooks'

...
  const [texture] = useTexture2d(textureUrl)
  const program = useLambertTextured(texture, 0.15)

  return (
    <material program={program}>
      ...
    </material>
  )
...