oglimage

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