# gl-geometry

> A flexible wrapper for gl-vao and gl-buffer that you can use to set up renderable WebGL geometries from a variety of different formats.

Latest version **3.1.1** (published 2016-07-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install gl-geometry
pnpm add gl-geometry
yarn add gl-geometry
bun add gl-geometry
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.1.1 |
| Published | 2016-07-19 |
| First published | 2014-06-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Hugh Kennedy |
| Maintainers | hughsk, mattdesl, mikkoh, mikolalysenko, substack, tatumcreative, yoshuawuyts |
| Keywords | gl, webgl, geometry, vao, mesh, buffer, convenience, shader |

## Links

- npm: https://www.npmjs.com/package/gl-geometry
- Repository: https://github.com/stackgl/gl-geometry
- Issues: https://github.com/stackgl/gl-geometry/issues
- npm.io page: https://npm.io/package/gl-geometry

## Dependencies (7)

- [dtype](https://npm.io/package/dtype.md) ^0.1.0
- [gl-vao](https://npm.io/package/gl-vao.md) ^1.1.2
- [gl-buffer](https://npm.io/package/gl-buffer.md) ^2.0.6
- [isndarray](https://npm.io/package/isndarray.md) ^0.1.0
- [gl-to-dtype](https://npm.io/package/gl-to-dtype.md) ^1.1.0
- [array-pack-2d](https://npm.io/package/array-pack-2d.md) ^0.1.0
- [is-typedarray](https://npm.io/package/is-typedarray.md) 0.0.0

## Alternatives

- [flatbuffers](https://npm.io/package/flatbuffers.md) — 6.0M weekly downloads
- [jwt-simple](https://npm.io/package/jwt-simple.md) — 259.5K weekly downloads
- [@exodus/patch-broken-hermes-typed-arrays](https://npm.io/package/@exodus/patch-broken-hermes-typed-arrays.md) — 28.5K weekly downloads
- [@native-to-anchor/buffer-layout](https://npm.io/package/@native-to-anchor/buffer-layout.md) — 12.2K weekly downloads
- [binary-parser-encoder](https://npm.io/package/binary-parser-encoder.md) — 5.3K weekly downloads

## Recent versions

- 3.1.1 (latest) — 2016-07-19
- 3.1.0 — 2016-01-23
- 3.0.1 — 2016-01-17
- 3.0.0 — 2016-01-17
- 2.0.0 — 2016-01-04
- 1.3.0 — 2015-12-11
- 1.2.0 — 2015-11-10
- 1.1.1 — 2015-06-15
- 1.1.0 — 2015-06-15
- 1.0.3 — 2015-03-02
- 1.0.2 — 2014-11-24
- 1.0.1 — 2014-11-23
- 1.0.0 — 2014-10-07
- 0.0.0 — 2014-06-01

## README

# gl-geometry [![experimental](http://badges.github.io/stability-badges/dist/experimental.svg)](http://github.com/badges/stability-badges)

A flexible wrapper for [gl-vao](http://github.com/stackgl/gl-vao)
and [gl-buffer](http://github.com/stackgl/gl-buffer) that you can use to
set up renderable WebGL geometries from a variety of different formats.

## Usage ##

[![NPM](https://nodei.co/npm/gl-geometry.png)](https://nodei.co/npm/gl-geometry/)

### geom = createGeometry(gl) ###

Creates a new geometry attached to the WebGL canvas context `gl`.

### geom.attr(name, values[, opt]) ###

Define or update an attribute value, for example using a simplicial complex:

``` javascript
var createGeometry = require('gl-geometry')
var bunny = require('bunny')

var geom = createGeometry(gl)
  .attr('positions', bunny)
```

The following vertex formats are supported and will be normalized:

* Arrays of arrays, e.g. `[[0, 0, 0], [1, 0, 0], [1, 1, 0]]`.

* Flat arrays, e.g. `[0, 0, 0, 1, 0, 0, 1, 1, 0]`.

* [Typed arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays),
  preferably a `Float32Array`.

* 1-dimensional [ndarrays](https://github.com/scijs/ndarray).

* [simplicial complexes](https://github.com/mikolalysenko/simplicial-complex),
  i.e. an object with a `positions` array and a `cells` array. The former is
  a list of unique vertices in the mesh (if you've used three.js, think
  `THREE.Vector3`), and the latter is an index mapping these vertices to faces
  (`THREE.Face3`) in the mesh. It looks something like this:

  ``` json
  {
    "positions": [
      [0.0, 0.0, 0.0],
      [1.5, 0.0, 0.0],
      [1.5, 1.5, 0.0],
      [0.0, 1.5, 0.0]
    ],
    "cells": [
      [0, 1, 2],
      [1, 2, 3]
    ]
  }
  ```

You can specify `opt.size` for the vertex size, defaults to 3.

You can update attribute values by calling `attr` again with the same `name`:

* By default the entire contents of the associated `gl-buffer` are replaced by
`data`; the buffer will be resized accordingly.

* Alternatively, you can pass `opt.offset` to copy `data` into the current
buffer at a specific offset (in bytes). In this case, the buffer cannot be
resized.

### geom.faces(values[, opt]) ###

Pass a simplicial complex's `cells` property here in any of the above formats
to use it as your index when drawing the geometry. For example:

``` javascript
var createGeometry = require('gl-geometry')
var bunny = require('bunny')

bunny.normals = normals.vertexNormals(
    bunny.cells
  , bunny.positions
)

var geom = createGeometry(gl)
  .attr('positions', bunny.positions)
  .attr('normals', bunny.normals)
  .faces(bunny.cells)
```

You can specify `opt.size` for the cell size, defaults to 3.

### geom.bind([shader]) ###

Binds the underlying [VAO](https://github.com/stackgl/gl-vao) – this must
be called before calling `geom.draw`. Optionally, you can pass in a
[gl-shader](http://github.com/stackgl/gl-shader) to
automatically set up your attribute locations for you.

### geom.draw(mode, start, stop) ###

Draws the geometry to the screen using the currently bound shader.

Optionally, you can pass in the drawing mode, which should be one of the
following:

* `gl.POINTS`
* `gl.LINES`
* `gl.LINE_STRIP`
* `gl.LINE_LOOP`
* `gl.TRIANGLES`
* `gl.TRIANGLE_STRIP`
* `gl.TRIANGLE_FAN`

The default value is `gl.TRIANGLES`. You're also able to pass in a `start` and
`stop` range for the points you want to render, just the same as you would
with `gl.drawArrays` or `gl.drawElements`.

### geom.unbind() ###

Unbinds the underlying VAO. This *must* be done when you're finished drawing,
unless you're binding to another gl-geometry or gl-vao instance.

### geom.dispose() ###

Disposes the underlying element and array buffers, as well as the VAO.

## See Also

* [ArrayBuffer and Typed Arrays](https://www.khronos.org/registry/webgl/specs/1.0/#5.13)
* [The WebGL Context](https://www.khronos.org/registry/webgl/specs/1.0/#5.14)
* [simplicial-complex](http://github.com/mikolalysenko/simplicial-complex)
* [ndarray](https://github.com/scijs/ndarray)
* [gl-shader](https://github.com/stackgl/gl-shader)
* [gl-buffer](https://github.com/stackgl/gl-buffer)
* [gl-vao](https://github.com/stackgl/gl-vao)

## License

MIT. See [LICENSE.md](http://github.com/hughsk/is-typedarray/blob/master/LICENSE.md) for details.

---
_Source: https://npm.io/package/gl-geometry · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._