Object.js

import gsap from 'gsap'

import { store, u } from '@/app/index'
import { Transform } from '@/lib/ogl'
import Core from './Core'

const { dom, bounds } = store
const { qs, rect } = u

export default class extends Transform {

  init(args = {}) {
    this.args = args
    this.el = this.args.el

    this.pid = this.setPid()
    this.name = this.args.name

    this.progress = {
      x: 0,
      y: 0,
    }

    this.static = false
    this.out = true

    this.setBounds()
  }

  update(parent = dom.body) {
    this.el = qs(`[data-gl-id="${this.name}"]`, parent)
    this.pid = this.setPid()
    this.resize()
  }

  setPid(el = this.el) {
    return el.closest('[data-id]') 
    && el.closest('[data-id]').dataset.id
  }

  setBounds() {
    const { ww, wh } = bounds
    const { left, top, bottom, width, height } = rect(this.el)

    this.bounds = {
      left, width, height, top,
      current: top < wh ? 'a' : 'b',
      start: top - wh,
      end: bottom,
    }

    this.updateSize()
    this.updateY()
    this.updateX()
  }

  resize() {
    if (!this.visible) return
    this.setBounds()
  }

  calculateUnitSize(distance = this.position.z) {
    const vFov = (Core.camera.fov * Math.PI) / 180
    const height = 2 * Math.tan(vFov / 2) * distance
    const width = height * Core.camera.aspect

    return {
      width,
      height,
    }
  }

  updateSize() {
    this.camUnit = this.calculateUnitSize(
      Core.camera.position.z - this.position.z,
    )

    const { ww, wh } = bounds
    const x = this.bounds.width / ww
    const y = this.bounds.height / wh

    if (!x || !y) return

    this.scale.x = this.camUnit.width * x
    this.scale.y = this.camUnit.height * y
  }

  updateY(y = 0) {
    const { wh } = bounds
    const { top } = this.bounds

    this.position.y = this.camUnit.height / 2 - this.scale.y / 2
    this.position.y -= ((top - y) / wh) * this.camUnit.height
  }

  updateX(x = 0) {
    const { ww } = bounds
    const { left } = this.bounds

    this.position.x = -(this.camUnit.width / 2) + this.scale.x / 2
    this.position.x += ((left + x) / ww) * this.camUnit.width
  }

  onRaf(y = 0) {
    !this.static && this.updateY(y)
  }

  destroy() {
    this.parent && this.parent.removeChild(this)
    this.visible = this.static = false
  }
}

Plane.js

import {
  Mesh,
  Plane,
  Program,
  Texture,
} from '@/lib/ogl'

import Core from '../Core'
import Elem from '../Elem'
import Pool from '../Pool'

import vertex from '@/gl/shaders/video/vert.vert'
import fragment from '@/gl/shaders/video/frag.frag'

import { evt } from '@/app/index'

export default class extends Elem {

  init(args) {
    const { gl } = Core

    super.init(args)

    this.geometry = new Plane(gl)
    this.texture = new Texture(gl, {
      generateMipmaps: false,
      minFilter: gl.LINEAR,
    })

    const img = new Image()
    img.src = this.el.dataset.src
    img.decode().then(() => this.texture.image = img)

    this.program = new Program(gl, { 
      vertex, 
      fragment,
      uniforms: {
        uTexture: { value: this.texture },
        uProgress: { value: 1 },
        uAlpha: { value: 1 },
      },
      cullFace: null,
    })

    this.mesh = new Mesh(gl, { 
      geometry: this.geometry, 
      program: this.program,
    })

    this.addChild(this.mesh)

    Pool.group.addChild(this)
    Pool.planes[this.name] = this

    this.onAdd()
  }

  onAdd() {
    evt.on('click', this.click)
  }

  destroy() {
    super.destroy()
    //this.program.uniforms.uProgress.value = 0
    this.out = true
    this.animated = false
  }
}