https://github.com/takahirox/webgl-cpu-profiler-extension

WebExtension profiling CPU elapsed time for WebGL
https://github.com/takahirox/webgl-cpu-profiler-extension

javascript webextension webgl

Last synced: about 1 month ago
JSON representation

WebExtension profiling CPU elapsed time for WebGL

• Host: GitHub
• URL: https://github.com/takahirox/webgl-cpu-profiler-extension
• Owner: takahirox
• License: mit
• Created: 2019-06-28T09:05:02.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-07-24T17:56:22.000Z (over 5 years ago)
• Last Synced: 2024-12-20T13:43:59.789Z (about 2 months ago)
• Topics: javascript, webextension, webgl
• Language: JavaScript
• Homepage:
• Size: 1.81 MB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# WebGL-CPU-Profiler-Extension

WebGL-CPU-Profiler-Extension is a cross platform WebExtension profiling CPU side performance of WebGL call.

![Screenshot](./screenshots/screenshot.png)

## Features

- WebExtension

- Cross platform

- Any graphics engine

- WebGL command history

- CPU elapsed time

## Install

Download this project and install extension to your browser. This extension is in development. I recommend temporary/Developer mode installation.

### FireFox

[Temporary installation in Firefox](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox)

I recommend to set privacy.reduceTimerPrecision false via [about:config](about:config) for this extension. But of course please understand the risk of that.

### Chrome

[Getting Started Tutorial](https://developer.chrome.com/extensions/getstarted)

### Other browsers

T.B.D.

## Usage

After install the extension, go to WebGL application page (for example, [Three.js example](https://threejs.org/examples/webgl_animation_cloth.html)), and open the console.

You can access WebGL call history with `WebGLCPUProfiler.history`. It's an JavaScript array so that you can filter, sort, and so on.

![history](./screenshots/history.png)

![filter](./screenshots/filter.png)

![sort](./screenshots/sort.png)

## Background

I originaly made this extension for investigating (unexpectedly) blocking WebGL call on Chrome. But I realized it can be useful on wider cases so decided to release.

## Other WebGL profiler

- [Spector.js](https://spector.babylonjs.com/)

## License 

MIT License