0.0.1 • Published 12 months ago
@roukara/itapori v0.0.1
@roukara/itapori
A lightweight WebGL library that enables you to easily apply shaders to images on your website.
Features
- Lightweight.
- Automatically synchronize the DOM and the WebGL.
- Easily apply shaders to images on your website.
Install
npm i @roukara/itapori
import Itapori from '@roukara/itapori';
Basic usage
const itapori = new Itapori();
const vertexShader = `
attribute vec3 position; //required
attribute vec2 uv; //required
uniform mat4 projectionViewMatrix; //required
uniform mat4 modelMatrix; //required
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionViewMatrix * modelMatrix * vec4(position, 1.0);
}
`;
const fragmentShader = `
precision mediump float; //recommended
uniform sampler2D uTexture; //required
varying vec2 vUv;
void main() {
vec4 texture = texture2D(uTexture, vUv);
gl_FragColor = texture;
}
`;
const img = document.querySelector('img');
let plane;
img.onload = () => {
plane = itapori.create(img, {
vertexShader,
fragmentShader
});
}
window.addEventListener('resize', resize);
requestAnimationFrame(raf);
function resize() {
itapori.resize();
}
function raf() {
itapori.render();
requestAnimationFrame(raf);
}
Itapori instance
Options
Option | Type | Default | Description |
---|---|---|---|
canvas | HTMLCanvasElement | <canvas> | A canvas for drawing WebGL. |
sync | Boolean | false | Whether to synchronize the img element and the plane every frame. If set to true , the getBoundingClientRect() will be called every frame to synchronize the plane, which can cause performance degradation. |
antialias | Boolean | false | Whether to perform antialiasing. |
Properties
Property | Type | Description |
---|---|---|
canvas | HTMLCanvasElement | A canvas for drawing WebGL. |
gl | WebGL2RenderingContext or WebGLRenderingContext | A WebGL context for drawing on the canvas. |
isWebGL2 | Boolean | Whether it is WebGL2. |
Methods
Method | Arguments | Description |
---|---|---|
create(img, { vertexShader, fragmentShader, uniforms, transparent }) | img : img element to which a shader effect should be applied.programOptions :vertexShader : A vertex shader written in GLSL.fragmentShader : A fragment shader written in GLSL.uniforms : The variables that have the same value for all vertices.transparent : Whether this program is transparent. Set it to true when manipulating the alpha channel. Default is false . | Create a Plane instance that synchronizes the coordinates, size, and image of an img element, and add it to the WebGL scene, and return the instance. |
remove(...plane) | plane | Remove the plane instance from the WebGL scene. |
render() | Render the WebGL scene. | |
resize() | Resize the canvas. | |
setDefaultSegments(widthSegments, heightSegments) | widthSegments heightSegments | Set the default segments of the plane geometry. Default segments are (1, 1) . |
Plane instance
The plane instance create by Itapori.create().
Properties
Property | Type | Description |
---|---|---|
img | HTMLImageElement | The img element that was used as the basis for the Plane. |
position | Object extends Float32Array | The position. Note that in the WebGL scene, the origin is located at the center, unlike in DOM coordinates. |
scale | Object extends Float32Array | The scale. Scale is synonymous with size, and width is equal to scale.x. |
uniforms | Object | The uniforms are inputs to both the vertex shader and the fragment shader. |
needsResize | Boolean | Whether to synchronize position and size with the img element on resize. Default is true . |
Method
Method | Arguments | Description |
---|---|---|
setSegments(widthSegments, heightSegments) | widthSegments heightSegments | Set the segments of the plane geometry. Default is (1, 1) . If you want to change the default segments, call Itapori.setDefaultSegments() . |
Considerations
- The coordinate systems of DOM and WebGL are different. The origin of the coordinate system in DOM is at the top-left, whereas in WebGL it is at the center.
- The canvas size is fixed to the window size and has
position: fixed;
applied.
<!-- example -->
<canvas width="1440" height="900" style="position: fixed; top: 0px; left: 0px; width: 1440px; height: 900px;"></canvas>
License
0.0.1
12 months ago