@emotionagency/glhtml v1.0.1

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

Scetch instance options

Figure methods

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