<shader-art>
TexturePlugin
Installation
Install via NPM:
npm i shader-art @shader-art/plugin-texture
Or use directly via skypack:
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:
ShaderArt.register([() => new TexturePlugin()]);
shader-art
Adding textures to your Inside the shader art component, add an img
tag like this;
<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
.