Skip to content
A helpful Chrome extension for WebGL development
Branch: master
Clone or download
Aaron Morais
Latest commit 1e50990 Apr 26, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build Update release version of content script Mar 14, 2016
src Add feedback tab and bump version number Apr 26, 2019
static Add logo to Chrome manifest Mar 15, 2016
.gitignore remote unnecessary lines in copy attributes Feb 24, 2016
CONTRIBUTING.md Add CONTRIBUTING guide Mar 15, 2016
LICENSE.md
README.md add the smallest amount of developer docs. Sep 6, 2018
cloc.sh cloc.sh script for counting lines of code Mar 13, 2016
manifest.json Add feedback tab and bump version number Apr 26, 2019

README.md

WebGL Insight

About

Insight is a WebGL debugging toolkit providing a variety of capabilities enabling more productive WebGL development and more efficient WebGL applications.

Features

  • Chrome Extension embedded in the Chrome DevTools panel
  • Overdraw Inspector
  • Mipmap Inspector
  • Depth Inspector
  • Call Stack Timeline and Statistics
  • Program Usage Count
  • Duplicate Program Usage Detector
  • Program Viewer
  • Frame Control
  • State Variable Editor
  • Resource Viewer

Installation & Usage

Install Insight from the Chrome Web Store.

When the extension is installed, open up the Chrome DevTools panel, click on the "WebGL Insight" tab, and browse to a WebGL application.

Overdraw Inspector

Detects how how many times a pixel has been drawn. The color ranges from green to red. Red shows a pixel that has been overdrawn multiple times while green is drawn on clear.

Before After

Mipmap Inspector

Displays the mipmap levels for a selected texture in different colors. Depending on how many mipmap levels there are and the maximum mipmap level, the colors will vary. This can be used to show whether certain mipmap levels of a selected texture is used.

Before After

Depth Inspector

Displays the relative depths of the pixels being drawn. Lighter values are further away whereas darker values are closer.

Before After

Call Stack Timeline and Statistics

Collects WebGL calls in a timeline.

Call Timeline

Counts WebGL calls during that time and displays the result in a histogram.

Call Statistics

Program Usage Count

Record how many times each shader program has been called by useProgram.

Program Usage

Duplicate Program Usage Detection

Detects whether there are any duplicate useProgram calls on the same program.

Duplicate Usage

Program Viewer

Program View

Frame Control

Pauses and controls animated frames.

Frame Control

State Variable Editor

Edit WebGL states.

State Editor

Resource Viewer

View textures, buffers, frame buffers, and render buffers.

Resource Viewer

Known Issues

  • Unity Web Game support is limited

Development

Just load the folder as an unpacked Extension.

There are 3 possible DevTools to open to debug the extension.

  1. The extension's background page. This isn't useful.
  2. The DevTools you have open to inspect the page (and view the extension panel). Obviously neccessary, and since the instrumentation is injected into the page, much of the extension code is debuggable here.
  3. DevTools on DevTools. Much of the tricky stuff runs in this context, so you'll want to keep it open.

Releasing

(Guesses from a non-maintainer) Run build/build.sh, which should concatenate the src files and copy to your (Mac) clipboard. Then paste into the top of content_script_init.js.

You can’t perform that action at this time.