using with vanilla threejs

[arpu]

Hello awesome looking perf tool! is it possible tio use this with vanilla threejs app?

[RenaudRohlinger]

@arpu Thanks! For the moment I recommend the tool that I based my work on https://github.com/munsocket/gl-bench.
I will work on a vanilla support this year.

[Ben-Mack]

+1 This tool is very useful (and really nice looking too!), looking forward to use it with vanilla three.js

[ertugrulcetin]

Can't wait to use it with vanilla three.js!

[RenaudRohlinger]

Here is a demo by @CodyJasonBennett of r3f working with vanilla.
https://codesandbox.io/s/rw6pdo

Not the best solution at this moment but it works 😄

[CodyJasonBennett]

I updated the box so it works the same as in R3F and with latest versions. It has a start(timestamp) and end(timestamp) method that start and stop measuring in your render loop.

import * as THREE from 'three'
import { createElement } from 'react'
import { extend, createRoot, flushGlobalEffects } from '@react-three/fiber'
import { Perf as R3FPerf } from 'r3f-perf'

export class Perf {
  constructor(renderer, scene, camera) {
    extend(THREE)
    createRoot(renderer.domElement)
      .configure({
        frameloop: 'never',
        gl: renderer,
        camera,
        scene
      })
      .render(createElement(R3FPerf))
  }

  start(timestamp) {
    flushGlobalEffects('before', timestamp)
  }
  end(timestamp) {
    flushGlobalEffects('after', timestamp)
  }
}

//

const perf = new Perf(renderer, scene, camera)

renderer.setAnimationLoop((time) => {
  perf.start(time)
  controls.update()
  renderer.render(scene, camera)
  perf.end(time)
})

[ifg-sam]

I'm using this and it works great, only every few frames I see my GPU time become NaN and a few other properties go to 0 before returning to their normal number. I can see the same thing in the JSFiddle above. Do you see the same thing? @CodyJasonBennett @RenaudRohlinger

[CodyJasonBennett]

FWIW there's a vanilla port of this https://github.com/TheoTheDev/three-perf.