Three.js: Safari Canvas inspector shows drawElements being called twice

[dbismut]

Description of the problem

As I was trying to work on performance for another project, Safari Canvas Inspector seemed to show the canvas being rendered _twice_ per frame. I put together a very simple example showing just an image and run it through Safari Canvas Inspector once again and stumbled upon the same issue, with drawElements and clear methods being called twice per frame.

Codesandbox link of the simplified example is here: https://j3o32qpxpy.codesandbox.io

I've tried to implement a clumsy count log of drawElements (commented out in the Codesandbox link) and it only logged one call per frame, so I'm thinking that this might be a Safari Canvas Inspector issue.

Three.js version

• [ ] Dev
• [x] r102
• [ ] ...

Browser

• [ ] All of them
• [ ] Chrome
• [ ] Firefox
• [ ] Internet Explorer
• [x] Safari

OS

• [] All of them
• [ ] Windows
• [x ] macOS
• [ ] Linux
• [ ] Android
• [ ] iOS

[Mugen87]

three.js definitely draws the plane just once per frame. I've tested the Canvas Inspector of Safari 12.0.3 on my system and it shows even three calls of drawElements. So yeah, as you said this looks more like a problem of the dev tools in Safari.

[mrdoob]

Good to know that Safari is adding these tools though!

[dbismut]

I agree, is it the only canvas inspector remaining?

[Mugen87]

Firefox has a similar tool.

[dbismut]

I thought it was deprecated though 😞
https://developer.mozilla.org/en-US/docs/Tools/Deprecated_tools

[Mugen87]

It was deprecated due to lack of use.

Too bad...

[dbismut]

Just for information, Safari Technology Preview seems to have fixed the problem in its latest release!