{"id":20197982,"url":"https://github.com/fyrestar/three.drawcallinspector","last_synced_at":"2025-04-10T10:46:05.470Z","repository":{"id":108183854,"uuid":"330278361","full_name":"Fyrestar/THREE.DrawCallInspector","owner":"Fyrestar","description":"Visualize draw call cost.","archived":false,"fork":false,"pushed_at":"2022-09-01T14:06:58.000Z","size":117,"stargazers_count":86,"open_issues_count":3,"forks_count":11,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-03-24T09:38:41.246Z","etag":null,"topics":["analysis","drawcall","drawcalls","javascript","js","profiling","threejs","webgl"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Fyrestar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-01-16T23:31:59.000Z","updated_at":"2025-01-06T21:22:44.000Z","dependencies_parsed_at":null,"dependency_job_id":"007e505f-008c-47da-a2f2-1ecb1f479562","html_url":"https://github.com/Fyrestar/THREE.DrawCallInspector","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Fyrestar%2FTHREE.DrawCallInspector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Fyrestar%2FTHREE.DrawCallInspector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Fyrestar%2FTHREE.DrawCallInspector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Fyrestar%2FTHREE.DrawCallInspector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Fyrestar","download_url":"https://codeload.github.com/Fyrestar/THREE.DrawCallInspector/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248201335,"owners_count":21064099,"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":["analysis","drawcall","drawcalls","javascript","js","profiling","threejs","webgl"],"created_at":"2024-11-14T04:28:57.753Z","updated_at":"2025-04-10T10:46:05.458Z","avatar_url":"https://github.com/Fyrestar.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"![DCI-01](https://user-images.githubusercontent.com/28584767/157973141-f7e16f1f-7a5d-435d-93ed-6bb9ea7cb7f2.png)\n\n# THREE.DrawCallInspector\nThis is a quick experimental attempt of a helper to monitor draw call costs. It could help spotting expensive draw calls caused by costly shaders and geometries.\n\n# Update\nIt is now using the disjoint timer extension that is available for WebGL2 giving more precise results and being able to run non-blocking. For WebGL1 it falls back to the previous method. It now measure straight at the WebGL API draw call by proxying the function.\n\nI'm going to extend this further soon with different analysis options, multiple inspector views etc.\n\n\n![image](https://user-images.githubusercontent.com/28584767/157782042-0f13420f-6a99-40c0-bc48-0b9394667aa6.png)\n\n_(Demo scene not included in the example, it's from sketchfab, when using locally any gltf scene can be placed in the directory, enable the demoScene bool in the index.html to load the model instead the primitives example)_\n\n**Example**: https://codepen.io/Fyrestar/full/PoGXVZv\n\nYou see a sphere with a expensive shader, a high oply sphere in the middle and boxes, when going close you see the boxes become hotter even if the spheres are in view, as the boxes cover more pixels on the screen.\n\n**The output**:\n\nThe output is a map that renders all objects tinted as a heatmap by how much time they took relative to each other. This means a average scene with equally expensive meshes in view is likely going to be mostly blueish, while if there is a more expensive objectt with an expensive shader it will be more red while the cheapest go towards solid blue.\n\n**Usage**:\n\nCreate the inspector, **call mount** in order to attach the UI and add the hooks into THREE.\n\n    const dci = new THREE.DrawCallInspector( renderer, scene, camera );\n    dci.mount();\n\nIn your render loop right at the beginning call `dci.update()` for the overlay output. And at your scene draw call, call `dci.begin()` before and `dci.end()` after your scene is rendered to the screen or a render target.\n\n    dci.update();\n\n    dci.begin();\n    renderer.render( scene, camera );\n    dci.end();\n\n\nClick on the overlay for a capture or enter a number of frames in the input, so it will automatically take a snapshot after that number of frames. \n\n\n**Parameters**:\n\n* `renderer`\n* `scene`\n* `camera`\n* `options`\n\n**Options**\n* `enabled (bool)`\nA flag to disable the tool, it's wont create UI or do anything, to leave it in the code but enable it when required.\n* `record (constant)`\nEither THREE.DrawCallInspector.RecordDraw (default) or THREE.DrawCallInspector.RecordRange, RecordDraw will measure right before and right after the actual WebGL drawcall, while RecordRender will measure before and after renderBufferDirect.\n* `wait (bool)`\nFor WebGL2, will wait till all timing queries finished before making the next so the timings of the same draw call are available.\n* `enableMaterials (bool)`\nYou have the option to let the plugin extend your scenes original materials which are going to be extended, this is only useful for custom and special shaders where the transformation otherwise would make it not visible without. \n\n* `overlayStrength (float , 0-1)`\nWhen `enableMaterials` is enabled, this is how much the heat coloring is mixed with it's original rendered color, default is 0.5.\n* `skipFrames (number)`\nFor WebGL1 this should be set to manual (-1) to render by clicking on it, or a higher number as the blocking methods will cause a lagg when measuring, for WebGL2 the measurments can be done in realtime, however timings are fluctuating so it makes sense to use some delay before the next time queries are issued. \n* `scale (float , 0-1)`\nThe size of the overlay relative to the screen.\n* `fade (float, 0+-1 )`\nThe results are lerped across captures to get closer to some average viewable result, with a value of 1 the measured delta time is instantly used for the next capture preview.\n* `bias (float, 0+-1 )`\nWhen the results are lerped and they were shorter they will decrease slower by this factor, if an object really doesn't take long it should be able to cool down then.\n\n**Compatibility**:\n\nThis should work with all most recent 113+ revisions.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffyrestar%2Fthree.drawcallinspector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffyrestar%2Fthree.drawcallinspector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffyrestar%2Fthree.drawcallinspector/lists"}