{"id":13350622,"url":"https://github.com/PixelsCommander/HTML-GL","last_synced_at":"2025-03-12T09:32:48.765Z","repository":{"id":28007093,"uuid":"31501586","full_name":"PixelsCommander/HTML-GL","owner":"PixelsCommander","description":"Get as many FPS as you need and amazing effects by rendering HTML/CSS in WebGL","archived":false,"fork":false,"pushed_at":"2021-03-28T15:53:15.000Z","size":44615,"stargazers_count":3455,"open_issues_count":24,"forks_count":154,"subscribers_count":139,"default_branch":"master","last_synced_at":"2024-10-29T15:48:25.044Z","etag":null,"topics":["css","glsl","html","webgl"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PixelsCommander.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}},"created_at":"2015-03-01T16:03:22.000Z","updated_at":"2024-10-23T11:09:17.000Z","dependencies_parsed_at":"2022-08-07T13:01:28.465Z","dependency_job_id":null,"html_url":"https://github.com/PixelsCommander/HTML-GL","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/PixelsCommander%2FHTML-GL","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PixelsCommander%2FHTML-GL/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PixelsCommander%2FHTML-GL/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PixelsCommander%2FHTML-GL/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PixelsCommander","download_url":"https://codeload.github.com/PixelsCommander/HTML-GL/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243191634,"owners_count":20251089,"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":["css","glsl","html","webgl"],"created_at":"2024-07-29T20:02:37.244Z","updated_at":"2025-03-12T09:32:48.067Z","avatar_url":"https://github.com/PixelsCommander.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Threejs 相关的库","webgl"],"sub_categories":["网上收集资料"],"readme":"\u003cimg alt=\"HTML GL\" src=\"http://pixelscommander.com/polygon/htmlgl/figures/logo-blue.png\"/\u003e\n\n60 FPS and amazing effects by rendering HTML/CSS in WebGL, framework agnostic\n=======================================================================================\n\n[![Gitter chat](https://badges.gitter.im/gitterHQ/gitter.png)](https://gitter.im/PixelsCommander/HTML-GL)\n\nHTML GL solves \"the slow DOM problem\" by creating WebGL representations of DOM elements and hiding actual DOM after. This speeds up HTML/CSS animations and transformations by using 3D hardware acceleration and allows to apply OpenGL effects as modern 3D games have.\n\n- [Demo](http://pixelscommander.com/polygon/htmlgl/demo/filters.html)\n- [Project page](http://htmlgl.com)\n- [Theory behind HTML GL](http://pixelscommander.com/en/web-applications-performance/render-html-css-in-webgl-to-get-highest-performance-possibl/)\n\nUsing HTML GL you still work with HTML/CSS as you are common to, but DOM elements are just facades to their WebGL representations. These GPU accelerated textures are very effective from resources consuming perspective and are very cheap to transform or animate.\n\nInstall\n-------\nnpm:\n```bash\nnpm install --save html-gl\n```\nBower:\n```bash\nbower install --save htmlgl\n```\n\nUsage\n-----\n\nAs Web Component\n\n```html\n\u003chtml-gl\u003e\n    This element`s content is rendered in \u003ch1\u003eWebGL\u003c/h1\u003e\n    \u003cspan style=\"color: green;\"\u003ewas it easy?\u003c/span\u003e\n    Feel free to use CSS, images and all you are common to in HTML/CSS world.\n\u003c/html-gl\u003e\n```\n\nAs jQuery plugin\n\n```js\n$('.some div').htmlgl();\n```\n\nNo DOM + WebGL rendering = highest FPS possible for Web platform\n-------------------------------------------------------\n\n\u003cimg alt=\"HTML GL flow diagram\" src=\"http://pixelscommander.com/polygon/htmlgl/figures/htmlgl-flow-diagram.png\"/\u003e\n\nDemos\n-----\n\n- [Filters](http://pixelscommander.com/polygon/htmlgl/demo/filters.html) WebGL is not only about performance. It breaks any HTML/CSS limits in terms of animations and interactivity\n- [Mobile effects](http://pixelscommander.com/polygon/htmlgl/demo/ripples.html) use attribute `effects` on `\u003chtml-gl\u003e` element to specify effects you use, this one is nice for mobile\n- [Basic HTML GL](http://pixelscommander.com/polygon/htmlgl/demo/basic-webgl.html) demo shows how to use HTML GL and animate GL Elements. It also demonstrate that HTML GL handle content change events and repaints element`s WebGL representation\n- [Basic DOM](http://pixelscommander.com/polygon/htmlgl/demo/basic-dom.html) this is the same project as previous. The only difference is that htmlgl.js is not included\n- [Advanced content HTML GL](http://pixelscommander.com/polygon/htmlgl/demo/advanced-content-webgl.html) slider with nested content rendered via WebGL and animated, ability to drag with mouse horizontaly, click event listeners on boxes\n- [Advanced content DOM](http://pixelscommander.com/polygon/htmlgl/demo/advanced-content-dom.html)\n\nHow to use?\n-----------\nInclude HTMLGL.js into project. Use tag name `\u003chtml-gl\u003e` or jQuery plugin `$(myElement).htmlgl()` for elements you are going to animate. These elements will be rendered in WebGL and their CSS Transform properties will be mapped to WebGL representation transformations. So DOM node itself will not be animated or displayed in order to avoid resources consuming.\nHTML GL is framework agnostic and is easy to inject into existing project which needs performance tweaking.\n\nRasterization API\n-----------------\nIn order to improve technology we are trying to promote standardized native Rasterization API for JavaScript. Help us to be better and to add this cool feature to browsers by spreading the [article](http://pixelscommander.com/en/javascript/state-of-html-content-rasterization-draw-html-to-canvas-image/) and [proposal draft](https://gist.github.com/PixelsCommander/a0b5882139cbb8a1781c#file-proposal-md).\n\nFast way to animate\n-------------------\nThe most performant way to animate HTML-GL tags is to operate on tag's `styleGL.transform` in the same way you operate on `style.transform`. E.g. `style.transform = 'translateX(100px) translateY(50px)'`.\nVelocity.js copy from HTML-GL repository (https://github.com/PixelsCommander/HTML-GL/blob/master/demo/js/vendor/velocity.js) have this optimization built-in. Feel free to use it in the way described in official Velocity.js documentation.\n\nAnimating HTML-GL tag children\n------------------------------\nSince it is very efficient to make transformations (move, rotate, scale, change opacity) on HTML-GL tags it becomes very slow to animate it's children until they are HTML-GL tags too. This happens because of necessity to rasterize and send HTML-GL tag texture to GPU.\n\nRunning demos from repository\n-----------------------------\nPlease run `bower install` before running demos\n\nLicense\n-------\nMIT: http://mit-license.org/\n\nCopyright 2015 Denis Radin aka [PixelsCommander](http://pixelscommander.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPixelsCommander%2FHTML-GL","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FPixelsCommander%2FHTML-GL","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPixelsCommander%2FHTML-GL/lists"}