0.0.6 • Published 5 months ago
oglimage v0.0.6
Image-OGL
⚠️ BETA ⚠️
oglimage is a concise JavaScript library based on OGL, enabling the conversion of DOM images into flat 3D images on a WebGL canvas.
Install
npm i oglimageBasic setup
import Experience from "oglimage"
const experience = new Experience()
const myImage = document.querySelector(".my-image")
experience.addImage(myImage)Instance setting
| Option | Type | Default | Description |
|---|---|---|---|
container | HTMLElement | document.body | Specifies the DOM element for the canvas. |
alpha | boolean | true | Enables canvas transparency. |
antialias | boolean | true | Toggles antialiasing for smoother rendering. |
dpr | number | Math.min(window.devicePixelRatio, 2) | Sets the device pixel ratio for the canvas. |
scroll | object | false → browser scroll | Change the current value to your own scroll |
Instance Method: addImage(image, options)
| Option | Type | Description |
|---|---|---|
image | HTMLImageElement or null | The image to be transformed into a WebGL-renderable format. |
options | Object | Configuration options for the transformation. |
vertex (optional) | Custom vertex shader. | |
fragment (optional) | Custom fragment shader. | |
uniforms (optional) | A function that returns custom uniforms. |
Example
// ...
experience.addImage(myImage, {
vertex: vertex,
fragment: fragment,
uniformes: {
uStrength: { value: 0.5 },
}
})