JSStats modified

JSStats.js

// Modified from https://github.com/joshmarinacci/webxr-experiments/blob/master/nonogram/jstats.js
import * as THREE from 'three'
export default class JStats extends THREE.Group {
  constructor (renderer) {
    super()
    this.renderer = renderer
    const can = document.createElement('canvas')
    can.width = 256
    can.height = 128
    this.canvas = can
    const c = can.getContext('2d')
    c.fillStyle = '#00ffff'
    c.fillRect(0, 0, can.width, can.height)
    const ctex = new THREE.CanvasTexture(can)
    const mesh = new THREE.Mesh(
      new THREE.PlaneGeometry(0.5, 0.25),
      // new THREE.BoxGeometry(1,0.5,0.1),
      new THREE.MeshBasicMaterial({
        map: ctex,
        transparent: true,
        opacity: 0.2,
        depthTest: false,
        depthWrite: false
      })
    )
    mesh.position.z = -1
    mesh.position.y = -0.3
    this.add(mesh)
    this.cmesh = mesh

    this.last = 0
    this.lastFrame = 0
  }

  update (dt, time) {
    time = time * 1000
    if (time - this.last > 300) {
      // console.log("updating",this.rendereer.info)
      // console.log(`stats calls:`,this.renderer.info)

      const fps = ((this.renderer.info.render.frame - this.lastFrame) * 1000) / (time - this.last)
      // console.log(fps)

      const c = this.canvas.getContext('2d')
      c.fillStyle = 'white'
      c.fillRect(0, 0, this.canvas.width, this.canvas.height)
      c.fillStyle = 'black'
      c.font = '16pt sans-serif'
      if (this.renderer.xr.isPresenting) {
        c.fillText(`calls per eye: ${this.renderer.info.render.calls / 2}`, 3, 20)
        c.fillText(`tris per eye: ${this.renderer.info.render.triangles / 2}`, 3, 40)
      } else {
        c.fillText(`calls: ${this.renderer.info.render.calls}`, 3, 20)
        c.fillText(`tris: ${this.renderer.info.render.triangles}`, 3, 40)
      }
      c.fillText(`fps: ${fps.toFixed(2)}`, 3, 60)
      c.fillText('-------', 3, 80)
      c.fillText(`Geometries: ${this.renderer.info.memory.geometries}`, 3, 100)
      c.fillText(`Textures: ${this.renderer.info.memory.textures}`, 3, 120)
      this.cmesh.material.map.needsUpdate = true
      this.last = time
      this.lastFrame = this.renderer.info.render.frame
    }
  }
}