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 oglimage

Basic 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 },  
    }
})