{"id":13801838,"url":"https://github.com/3Dparallax/insight","last_synced_at":"2025-05-13T12:30:27.391Z","repository":{"id":38239385,"uuid":"52135330","full_name":"3Dparallax/insight","owner":"3Dparallax","description":"A helpful Chrome extension for WebGL development","archived":false,"fork":false,"pushed_at":"2021-09-30T16:30:40.000Z","size":1082,"stargazers_count":905,"open_issues_count":22,"forks_count":47,"subscribers_count":16,"default_branch":"master","last_synced_at":"2024-05-19T05:34:44.605Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/3Dparallax.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-02-20T03:56:28.000Z","updated_at":"2024-04-16T10:59:25.000Z","dependencies_parsed_at":"2022-08-09T02:00:13.891Z","dependency_job_id":null,"html_url":"https://github.com/3Dparallax/insight","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3Dparallax%2Finsight","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3Dparallax%2Finsight/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3Dparallax%2Finsight/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3Dparallax%2Finsight/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/3Dparallax","download_url":"https://codeload.github.com/3Dparallax/insight/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253942100,"owners_count":21987983,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T00:01:28.451Z","updated_at":"2025-05-13T12:30:26.954Z","avatar_url":"https://github.com/3Dparallax.png","language":"JavaScript","readme":"_This project is **DEPRECATED** and no longer available on the Chrome Web Store._\n\n![WebGL Insight](http://i.imgur.com/Zb2PHLp.png)\n\n\n## About\n\nInsight is a WebGL debugging toolkit providing a variety of capabilities enabling more productive WebGL development and more efficient WebGL applications.\n\n\n## Features\n\n* Chrome Extension embedded in the Chrome DevTools panel    \n* Overdraw Inspector\n* Mipmap Inspector\n* Depth Inspector\n* Call Stack Timeline and Statistics\n* Program Usage Count\n* Duplicate Program Usage Detector\n* Program Viewer\n* Frame Control\n* State Variable Editor\n* Resource Viewer\n\n\n## Installation \u0026 Usage\n\nInstall Insight from the [Chrome Web Store](https://chrome.google.com/webstore/detail/webgl-insight/djdcbmfacaaocoomokenoalbomllhnko).\n\nWhen the extension is installed, open up the Chrome DevTools panel, click on the \"WebGL Insight\" tab, and browse to a WebGL application.\n\n\n### Overdraw Inspector\n\nDetects 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.\n\n![Before](http://i.imgur.com/WfCwiDJ.jpg)\n![After](http://i.imgur.com/RSkEeQu.jpg)\n\n### Mipmap Inspector\n\nDisplays 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.\n\n![Before](http://i.imgur.com/v717Sb9.jpg)\n![After](http://i.imgur.com/gT1y3Ir.jpg)\n\n### Depth Inspector \n\nDisplays the relative depths of the pixels being drawn. Lighter values are further away whereas darker values are closer.\n\n![Before](http://i.imgur.com/4Je54s1.jpg)\n![After](http://i.imgur.com/M3xDkpp.jpg)\n\n### Call Stack Timeline and Statistics\n\nCollects WebGL calls in a timeline.\n\n![Call Timeline](http://i.imgur.com/xouoZXV.jpg)\n\nCounts WebGL calls during that time and displays the result in a histogram.\n\n![Call Statistics](http://i.imgur.com/2r0yXd4.jpg)\n\n### Program Usage Count\n\n Record how many times each shader program has been called by useProgram.\n\n![Program Usage](http://i.imgur.com/gjlMI8y.jpg)\n\n### Duplicate Program Usage Detection\n\nDetects whether there are any duplicate useProgram calls on the same program.\n\n![Duplicate Usage](http://i.imgur.com/UOJ2GnX.jpg)\n\n### Program Viewer\n\n![Program View](http://i.imgur.com/v6cgTGb.jpg)\n\n### Frame Control\n\nPauses and controls animated frames.\n\n![Frame Control](http://i.imgur.com/YS3uhw9.jpg)\n\n### State Variable Editor\n\nEdit WebGL states.\n\n![State Editor](http://i.imgur.com/1QBVF9M.jpg)\n\n### Resource Viewer\n\nView textures, buffers, frame buffers, and render buffers.\n\n![Resource Viewer](http://i.imgur.com/y1YETWv.jpg)\n\n## Known Issues\n\n* Unity Web Game support is limited\n\n# Development\n\nJust load the folder as an unpacked Extension. \n\nThere are 3 possible DevTools to open to debug the extension.\n\n1. The extension's background page. This isn't useful.\n1. 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.\n1. [DevTools on DevTools](https://stackoverflow.com/a/12291163/89484). Much of the tricky stuff runs in this context, so you'll want to keep it open.\n\n# Releasing\n\n(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`. \n","funding_links":[],"categories":["WebGL"],"sub_categories":["Tools/Debugging"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F3Dparallax%2Finsight","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F3Dparallax%2Finsight","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F3Dparallax%2Finsight/lists"}