# @shader-art/plugin-texture

> Texture support for shader-art

Latest version **1.1.1** (published 2021-02-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install @shader-art/plugin-texture
pnpm add @shader-art/plugin-texture
yarn add @shader-art/plugin-texture
bun add @shader-art/plugin-texture
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2021-02-16 |
| First published | 2021-02-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=12 |
| Dependencies | 1 |
| Unpacked size | 16 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Lea Rosema |
| Maintainers | lea.rosema |
| Keywords | webgl, glsl, creative-coding |

## Links

- npm: https://www.npmjs.com/package/@shader-art/plugin-texture
- Repository: https://github.com/shader-art/plugin-texture
- Homepage: https://github.com/shader-art/plugin-texture#readme
- Issues: https://github.com/shader-art/plugin-texture/issues
- npm.io page: https://npm.io/package/@shader-art/plugin-texture

## Dependencies (1)

- [@shader-art/plugin-base](https://npm.io/package/@shader-art/plugin-base.md) ^0.1.1

## Recent versions

- 1.1.1 (latest) — 2021-02-16
- 1.1.0 — 2021-02-16
- 1.0.0 — 2021-02-16
- 0.1.2 — 2021-02-14
- 0.1.1 — 2021-02-14
- 0.1.0 — 2021-02-14

## README

# `<shader-art>` TexturePlugin

## Installation

Install via NPM:

```sh
npm i shader-art @shader-art/plugin-texture
```

Or use directly via skypack:

```js
import { TexturePlugin } from 'https://cdn.skypack.dev/@shader-art/plugin-texture';
```

## Usage

Texture support can be added via a TexturePlugin.

You can load the texture plugin by importing the TexturePlugin and adding it to the `ShaderArt.register` call like this:

```js
ShaderArt.register([() => new TexturePlugin()]);
```

### Adding textures to your `shader-art`

Inside the shader art component, add an `img` tag like this;

```html
<img
  src="https://placekitten.com/512/512"
  name="cat"
  wrap-s="mirrored-repeat"
  wrap-t="clamp-to-edge"
  min-filter="nearest"
  mag-filter="nearest"
  hidden
/>
```

Inside your glsl shader code (which is placed inside a `<script type="vert|frag">` tag), you can access the texture via
a uniform variable:

```
uniform sampler2D cat;
```

### Attributes

- `src` url of the texture.
- `name` name of the uniform variable
- `wrap-s` horizontal texture wrapping (mirrored-repeat|repeat(default)|clamp-to-edge)
- `wrap-t` vertical texture wrapping (mirrored-repeat|repeat(default)|clamp-to-edge)
- `min-filter` texture minification filter (linear, nearest(default), nearest-mipmap-nearest, linear-mipmap-nearest, linear-mipmap-linear, nearest-mipmap-linear)
- `mag-filter` texture magnification filter (linear|nearest(default))

### Further resources

For more information about using textures inside glsl code, look at [`texture2D`](https://thebookofshaders.com/glossary/?search=texture2D).

### Example

- [Example using textures on CodePen](https://codepen.io/terabaud/pen/xxROeRJ)

---
_Source: https://npm.io/package/@shader-art/plugin-texture · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._