React Regl Mesh

Standardized shader attributes in react-regl.

Install

Recommended dependencies: glsl-solid-wireframe @ 1.0.x

npm install --save @psychobolt/react-regl-mesh
# or
yarn add @psychobolt/react-regl-mesh

Example

Render the bunny mesh as a wireframe. See a interactive demo from the react-regl-orbit-camera package.

import React from 'react';
import { Mesh } from '@psychobolt/react-regl-mesh';

import bunny from 'bunny';
import vert from './Wireframe/Wireframe.vert';
import frag from './Wireframe/Wireframe.frag';

export default () => (
  <Mesh
    vert={vert}
    frag={frag}
    positions={bunny.positions}
    cells={mesh.cells}
    normals
    wireframe
  />
);

Documentation

Components

Mesh

Standardize mesh shader attributes for Drawable.

import React from 'react';
import { Mesh } from '@psychobolt/react';

import mesh, { vert, frag } from './Mesh';

export default () => (
  <Mesh
    vert={vert}
    frag={frag}
    positions={mesh.positions}
    cells={mesh.cells}
    normals
    wireframe
  />
);

Props

Inherits props from Drawable.

positions: number[][]

Access to the vertex shader attribute (abtribute vec3 position) .

cells: number[] | number[][]

Analogous to elements.

normals?: boolean | number[][]

Enables the vertex shader attribute (attribute vec3 normal). If normal is a boolean, then the normals is calculated using cells and positions.

wireframe?: boolean

Access to the vertex shader attribute (attribute vec2 barycentric). Uses the glsl-solid-wireframe library. Note: OES_standard_derivatives extension is required.