@roukara/itapori NPM

@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)`	`widthSegmentsheightSegments`	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)`	`widthSegmentsheightSegments`	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

3 years ago