在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:PixelsCommander/HTML-GL开源软件地址:https://github.com/PixelsCommander/HTML-GL开源编程语言:JavaScript 91.3%开源软件介绍:60 FPS and amazing effects by rendering HTML/CSS in WebGL, framework agnosticHTML 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. Using 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. Installnpm: npm install --save html-gl Bower: bower install --save htmlgl UsageAs Web Component <html-gl>
This element`s content is rendered in <h1>WebGL</h1>
<span style="color: green;">was it easy?</span>
Feel free to use CSS, images and all you are common to in HTML/CSS world.
</html-gl> As jQuery plugin $('.some div').htmlgl(); No DOM + WebGL rendering = highest FPS possible for Web platformDemos
How to use?Include HTMLGL.js into project. Use tag name Rasterization APIIn 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 and proposal draft. Fast way to animateThe most performant way to animate HTML-GL tags is to operate on tag's Animating HTML-GL tag childrenSince 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. Running demos from repositoryPlease run LicenseCopyright 2015 Denis Radin aka PixelsCommander |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论