# webgl-sketch

> A WebGL canvas—shader wrapper library

Latest version **0.5.0-pre1** (published 2023-03-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install webgl-sketch
pnpm add webgl-sketch
yarn add webgl-sketch
bun add webgl-sketch
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.0-pre1 |
| Published | 2023-03-17 |
| First published | 2018-04-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | joshforisha |
| Keywords | canvas, webgl |

## Links

- npm: https://www.npmjs.com/package/webgl-sketch
- Repository: https://github.com/joshforisha/webgl-sketch
- Homepage: https://github.com/joshforisha/webgl-sketch#readme
- Issues: https://github.com/joshforisha/webgl-sketch/issues
- npm.io page: https://npm.io/package/webgl-sketch

## Recent versions

- 0.5.0-pre1 (latest) — 2023-03-17
- 0.4.1 — 2021-07-13
- 0.4.0 — 2020-07-15
- 0.3.0 — 2018-07-28
- 0.2.0 — 2018-04-16
- 0.1.0 — 2018-04-13

## README

# WebGL Sketch

[![npm](https://img.shields.io/npm/v/webgl-sketch.svg)](https://www.npmjs.org/package/webgl-sketch)


## Example

```js
import * as Sketch from 'webgl-sketch';

Sketch.create({
  canvas: document.getElementById('Output'),
  fragmentShaderSource: require('my-fragment.glsl'),
  size: [window.innerWidth, window.innerHeight],
  uniforms: {
    baseColor: [0.424, 0.357, 0.482],
    seed: 42.0
  },
  vertexShaderSource: require('basic-vertex.glsl')
});
```


## API

### `create (options = {})`

Instantiates a WebGL context on a canvas, and renders shaders to it.<br />
Options can include:

- `canvas` *(optional)* – An existing canvas element to render into; if not supplied, a new canvas is created instead.
- `dynamic` *(optional)* – A boolean, whether to animate dynamic rendering of the canvas, which sets the uniform float `u_time` each render; defaults to `false`.
- `fragmentShaderSource` – GLSL shader source string to use as the fragment shader.
- `size` *(optional)* – An array of `[width, height]` to size the canvas to; if not supplied, `[200, 200]` is used.
- `uniforms` *(optional)* – An object to inject as uniforms into the fragment shader, using each key as the uniform name (e.g., `"name"` as `u_name`) and the value encoded based on type(s).
- `vertexShaderSource` – GLSL shader source string to use as the vertex shader.

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