A library that allows you to upload html elements to webgl and manipulate them

Instalation

npm i @emotionagency/glhtml

or

yarn add @emotionagency/glhtml

Usage

Basic example at first you need to create Figure (shader program)

import {Figure, Scetch} from '@emotionagency/glhtml'

class Images extends Figure {
  constructor(scene, renderer, $el) {
    super(scene, renderer, $el)
  }

  createMaterial() {
    const uniforms = {
      uTexture: {type: 't', value: this.texture},
    }

    const vertex = `
      varying vec2 vUv;

      void main() {
        vUv = bgCover(size, resolution, uv);

        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
      }
    `

    const fragment = `
      varying vec2 vUv;
      uniform sampler2D uTexture;

      void main() {
        vec4 myTexture = texture2D(uTexture, uv);
        gl_FragColor = myTexture;
      }
    `

    super.createMaterial({uniforms, vertex, fragment})
  }

  async createMesh() {
    this.texture = await this.uploadTexture(this.$el.dataset.src)
    super.createMesh()
  }

  destroy() {
    this.disposeTexture(this.texture)
    super.destroy()
  }
}

Then you need to make a node

const imgs = [...document.querySelectorAll('.js-gl-img')]

let nodes = imgs.map((img) => ({
  $el: img,
  Figure: Images,
}))

Then you need to create an instance of the Sketch class and pass the nodes there

// The first parameter is the container selector into which the canvas will be inserted
new Scetch('#gl', {
  nodes,
})

this library is built based on OGL library: https://github.com/oframe/ogl

If you need you can import all OGL modules

import {OGL} from '@emotionagency/glhtml'

const scene = new OGL.Transform();

Nodes options

| Option | Type | Default | Description | |--------|--------------|-----------------------------------------------|----------------------------------------------------------------------------------------------| | el | HTML Element | undefined | The element to be rendered in the webgl | | Figure | Figure class | undefined | A program that has been extended from the Figure's base class | | cover | Object | {state: true, positionX: 0.5, positionY: 0.5} | If you want to render an image, then you can assign properties to it as css background cover |

Scetch instance options

| Option | Type | Default | Description | |-----------------------|------------------|----------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | nodes | Array of objects | [] | An array of objects that consists of a reference to an element and a shape that refers to it | | camera | Object | { near: 0.01, far: 10000 } | An object that consists of a field near and a field far. Which is responsible for the range of the camera | | raf | Function | null | Allows you to pass a custom function to requestAnimationFrame | | dpr | Number | 2 | Value of canvas pixel ratio | | antialias | Boolean | true | Determines if anti-aliasing is enabled | | alpha | Boolean | true | Determines if the canvas can be transparent | | premultipliedAlpha | Boolean | true | Smoothes transparency | | depth | Boolean | true | Displays whether depth accuracy is enabled | | stencil | Boolean | false | Indicates whether stencil drawing is enabled | | preserveDrawingBuffer | Boolean | false | Whether to preserve the buffers until manually cleared or overwritten | | powerPreference | String | 'default' | Provides a hint to the user agent indicating what configuration of GPU is suitable for this WebGL context. Can be "high-performance", "low-power" or "default". Default is "default" | | autoClear | Boolean | true | Defines whether the renderer should automatically clear its output before rendering a frame | | webgl | Number | 2 | The version of the webgl that will render

Figure methods

| Method | Description | |----------------|------------------------------------------------------------------------------------------------------------------------| | uploadTexture | An async method that allows you to load textures | | disposeTexture | Method that allows you to destroy the texture | | createMaterial | Method for creating material . You need to inherit and throw uniforms, fragment and vertex shaders into it | | createGeometry | Method for creating geometry. | | createMesh | Method for creating a mesh. You can inherit and load textures here, for example | | update | Method that is updated by ticker. Here you can add your animations | | destroy | Allows you to safely destroy an instance, avoiding memory leaks

Structure

• Figure.js — Shader program
• Scetch.js — Launches functionality
• DefaultScetch.js — If the functionality of the library is not enough for you, you can use the base class and write your own functionality
• TextureLoader.js — If you need to load a texture outside the Figure class. Required parameter {gl: /* renderer.gl */} — And all methods from ogl library

If you need some functionality from ogl, you can call any method from its structure

More about ogl structure: https://github.com/oframe/ogl

You can add or remove Figures from the Sketch by id

import {Figure, Scetch} from '@emotionagency/glhtml'

const scetch = new Scetch('#gl')

const imgs = [...document.querySelectorAll('.js-gl-img')]

let nodes = imgs.map((img) => ({
  $el: img,
  Figure: Images,
}))

scetch.addFigures(nodes)
scetch.removeFigure([id]) // all figures has a unic id