Skip to content

Commit 20ae4dd

Browse files
Added filters demo
1 parent 7a8683b commit 20ae4dd

File tree

4 files changed

+6
-5
lines changed

4 files changed

+6
-5
lines changed

README.md

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
<img alt="HTML GL" src="http://pixelscommander.com/polygon/htmlgl/figures/logo-blue.png"/>
22

3-
60 FPS by rendering HTML/CSS in WebGL, framework agnostic
4-
=========================================================
3+
60 FPS rendering and amazing effects by rendering HTML/CSS in WebGL, framework agnostic
4+
=======================================================================================
55

66
[![Gitter chat](https://badges.gitter.im/gitterHQ/gitter.png)](https://gitter.im/PixelsCommander/HTML-GL)
77

88
Smooth animations and responsive interactions are top priority problems of cross-platform Web development. Since desktop browsers are mostly fine with handling animations, mobile and embedded devices still provide bad user experience.
99
The biggest reason for animations to be janky is that "DOM is slow". It is true since DOM is quite complex model and every DOM change create a ripple of events or chain reaction over whole document.
1010

1111
[Article about](http://pixelscommander.com/en/web-applications-performance/render-html-css-in-webgl-to-get-highest-performance-possibl/)
12+
[Demo with effects](http://pixelscommander.com/polygon/htmlgl/demo/filters.html)
1213

1314
HTML GL solves "the slow DOM problem" by creating WebGL representations of DOM elements and hiding actual DOM after. As a result you still work with HTML/CSS as you are common to, but DOM elements are just facades to their WebGL represenations. These GPU accelerated textures are very effective from resources consuming perspective and are very cheap to transform or animate.
1415

demo/advanced-content-dom.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<link rel="stylesheet" href="./assets/css/style.css">
5-
<title>X-Store</title>
5+
<title>DOM content</title>
66
<meta name="viewport" content="width=1024 maximum-scale=1.0 minimum-scale=1.0 initial-scale=1.0, user-scalable=no" />
77
</head>
88
<body>

demo/advanced-content-webgl.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<link rel="stylesheet" href="./assets/css/style.css">
5-
<title>X-Store</title>
5+
<title>HTML GL nested content</title>
66
<meta name="viewport" content="width=1024 maximum-scale=1.0 minimum-scale=1.0 initial-scale=1.0, user-scalable=no" />
77
</head>
88
<body>

demo/filters.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<link rel="stylesheet" href="./assets/css/style.css">
5-
<title>X-Store</title>
5+
<title>HTML GL filters demo</title>
66
<meta name="viewport" content="width=1024 maximum-scale=1.0 minimum-scale=1.0 initial-scale=1.0, user-scalable=no" />
77
</head>
88
<body>

0 commit comments

Comments
 (0)