A non-exhaustive list of WebGL and WebGPU frameworks and libraries. It is mostly for learning purposes as some of the libraries listed are wip/outdated/not maintained anymore.
| Name | Stars | Last Commit | Description |
|---|---|---|---|
| three.js | 
Andrej Premrn mikirejf
mattgperry
/ pregenerated-keyframe-performance.html
Last active
January 13, 2024 16:48
Pre-generated keyframes performance issues in Chrome
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Pre-generated keyframes performance</title> | |
| <!-- | |
| This file demonstrates that the performance of pre-generated keyframes is poor in Chrome | |
| under surprising circumstances. | |
| Specifically, pre-generated keyframes are fine in isolation. But when combined with a | |
| requestAnimationFrame animation, AND another WAAPI animation, performance becomes | |
| (literally) 100x worse. |
dmnsgn
/ WebGL-WebGPU-frameworks-libraries.md
Last active
August 16, 2026 11:00
A collection of WebGL and WebGPU frameworks and libraries
paulirish
/ what-forces-layout.md
Last active
August 15, 2026 15:32
What forces layout/reflow. The comprehensive list.
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
elem.offsetLeft,elem.offsetTop,elem.offsetWidth,elem.offsetHeight,elem.offsetParent
- Related Setup: https://gist.github.com/hofmannsven/6814278
- Related Pro Tips: https://ochronus.com/git-tips-from-the-trenches/
- Interactive Beginners Tutorial: http://try.github.io/
- Git Cheatsheet by GitHub: https://services.github.com/on-demand/downloads/github-git-cheat-sheet/
Press minus + shift + s and return to chop/fold long lines!
jaydson
/ gist:1780598
Created
February 9, 2012 15:11
How to detect a click event on a cross domain iframe
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var myConfObj = { | |
| iframeMouseOver : false | |
| } | |
| window.addEventListener('blur',function(){ | |
| if(myConfObj.iframeMouseOver){ | |
| console.log('Wow! Iframe Click!'); | |
| } | |
| }); | |
| document.getElementById('YOUR_CONTAINER_ID').addEventListener('mouseover',function(){ |
joelambert
/ README
Created
June 1, 2011 11:03
Drop in replacements for setTimeout()/setInterval() that makes use of requestAnimationFrame() where possible for better performance
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Drop in replace functions for setTimeout() & setInterval() that | |
| make use of requestAnimationFrame() for performance where available | |
| http://www.joelambert.co.uk | |
| Copyright 2011, Joe Lambert. | |
| Free to use under the MIT license. | |
| http://www.opensource.org/licenses/mit-license.php |