Open arpu opened 3 years ago
@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.
+1 This tool is very useful (and really nice looking too!), looking forward to use it with vanilla three.js
Can't wait to use it with vanilla three.js!
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 😄
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)
})
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
FWIW there's a vanilla port of this https://github.com/TheoTheDev/three-perf.
Hello awesome looking perf tool! is it possible tio use this with vanilla threejs app?