2 |
3 | 60 FPS and amazing effects by rendering HTML/CSS in WebGL, framework agnostic
4 | =======================================================================================
5 |
6 | [](https://gitter.im/PixelsCommander/HTML-GL)
7 |
8 | HTML 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.
9 |
10 | - [Demo](http://pixelscommander.com/polygon/htmlgl/demo/filters.html)
11 | - [Project page](http://htmlgl.com)
12 | - [Theory behind HTML GL](http://pixelscommander.com/en/web-applications-performance/render-html-css-in-webgl-to-get-highest-performance-possibl/)
13 |
14 | 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.
15 |
16 | Install
17 | -------
18 | npm:
19 | ```bash
20 | npm install --save html-gl
21 | ```
22 | Bower:
23 | ```bash
24 | bower install --save htmlgl
25 | ```
26 |
27 | Usage
28 | -----
29 |
30 | As Web Component
31 |
32 | ```html
33 | 
50 |
51 | Demos
52 | -----
53 |
54 | - [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
55 | - [Mobile effects](http://pixelscommander.com/polygon/htmlgl/demo/ripples.html) use attribute `effects` on `
14 | 
16 |
17 | HTML GL
15 |
16 |
10 |
37 |
39 |
40 |
41 | 
42 |
43 |
52 |
53 |
54 | 
55 |
56 |
65 |
66 |
67 | 
68 |
69 |
78 |
79 |
80 | 
81 |
82 |
91 |
92 |
93 |
94 |
95 |
104 |
105 |
106 |
107 |
108 |
117 |
118 |
119 |
120 |
121 |
130 |
131 |
132 |
133 |
134 |
143 |
144 |
145 |
146 |
147 |
156 |
157 |
158 |
159 |
160 |
169 |
173 |
174 |
175 |
176 |
177 |
184 |
185 |
--------------------------------------------------------------------------------
/demo/advanced-content-webgl.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | MENU RENDERED IN DOM
11 | 36 |DOM SLIDER SINCE HTML GL IS DISABLED FOR THIS DEMO
38 |
42 |
43 | 44 | Select me with DevTools 45 |
46 | 47 |
48 | 
49 | 7.8/10
50 |
55 |
56 | 57 | Change me in DevTools 58 |
59 | 60 |
61 |
62 | 8.0/10
63 |
68 |
69 | 70 | Breaking bad 71 |
72 | 73 |
74 |
75 | 9.6/10
76 |
81 |
82 | 83 | Quantum of solace 84 |
85 | 86 |
87 |
88 | 6.7/10
89 |
94 |
95 | 96 | Quantum of solace 97 |
98 | 99 |
100 |
101 | 7.4/10
102 |
107 |
108 | 109 | Quantum of solace 110 |
111 | 112 |
113 |
114 | 7.4/10
115 |
120 |
121 | 122 | Quantum of solace 123 |
124 | 125 |
126 |
127 | 7.4/10
128 |
133 |
134 | 135 | Quantum of solace 136 |
137 | 138 |
139 |
140 | 7.4/10
141 |
146 |
147 | 148 | Quantum of solace 149 |
150 | 151 |
152 |
153 | 7.4/10
154 |
159 |
160 | 161 | Quantum of solace 162 |
163 | 164 |
165 |
166 | 7.4/10
167 |
170 |
171 |
172 |
10 |
37 |
39 |
40 |
41 |
42 |
43 |
52 |
53 |
54 |
55 |
56 |
65 |
66 |
67 |
68 |
69 |
78 |
79 |
80 |
81 |
82 |
91 |
92 |
93 |
94 |
95 |
104 |
105 |
106 |
107 |
108 |
117 |
118 |
119 |
120 |
121 |
130 |
131 |
132 |
133 |
134 |
143 |
144 |
145 |
146 |
147 |
156 |
157 |
158 |
159 |
160 |
169 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
197 |
198 |
--------------------------------------------------------------------------------
/demo/assets/css/appstyle.css:
--------------------------------------------------------------------------------
1 | /** Generated by FG **/
2 | @font-face {
3 | font-family: 'Conv_InterstatePro-Bold';
4 | src: url('../fonts/InterstatePro-Bold.eot');
5 | src: local('☺'), url('../fonts/InterstatePro-Bold.woff') format('woff'), url('../fonts/InterstatePro-Bold.ttf') format('truetype'), url('../fonts/InterstatePro-Bold.svg') format('svg');
6 | font-weight: normal;
7 | font-style: normal;
8 | }
9 | /** Generated by FG **/
10 | @font-face {
11 | font-family: 'Conv_InterstatePro-Light';
12 | src: url('../fonts/InterstatePro-Light.eot');
13 | src: local('☺'), url('../fonts/InterstatePro-Light.woff') format('woff'), url('../fonts/InterstatePro-Light.ttf') format('truetype'), url('../fonts/InterstatePro-Light.svg') format('svg');
14 | font-weight: normal;
15 | font-style: normal;
16 | }
17 | /** Generated by FG **/
18 | @font-face {
19 | font-family: 'Conv_InterstatePro-ExtraLight';
20 | src: url('../fonts/InterstatePro-ExtraLight.eot');
21 | src: local('☺'), url('../fonts/InterstatePro-ExtraLight.woff') format('woff'), url('../fonts/InterstatePro-ExtraLight.ttf') format('truetype'), url('../fonts/InterstatePro-ExtraLight.svg') format('svg');
22 | font-weight: normal;
23 | font-style: normal;
24 | }
25 | /** Generated by FG **/
26 | @font-face {
27 | font-family: 'Conv_InterstatePro-Regular';
28 | src: url('../fonts/InterstatePro-Regular.eot');
29 | src: local('☺'), url('../fonts/InterstatePro-Regular.woff') format('woff'), url('../fonts/InterstatePro-Regular.ttf') format('truetype'), url('../fonts/InterstatePro-Regular.svg') format('svg');
30 | font-weight: normal;
31 | font-style: normal;
32 | }
33 | @font-face {
34 | font-family: "UPCDigital";
35 | src: url(../fonts/DAWN-UPCDiRg.ttf) format("truetype");
36 | font-weight: 400;
37 | }
38 | @font-face {
39 | font-family: 'UPCDigital-bold';
40 | src: url(../fonts/DAWN-UPCDiBd.ttf) format('truetype');
41 | }
42 |
43 | body {
44 | box-sizing: border-box;
45 | /* padding: 20px 43px 0 43px; */
46 | margin: 0;
47 | font-family: Conv_InterstatePro-Regular;
48 | font-weight: normal;
49 | font-size: 24px;
50 | color: #2c3e50;
51 | width: 100%;
52 | height: 100%;
53 | background-color: #ecf0f1;
54 | overflow-x: hidden;
55 | }
56 |
57 | ul {
58 | list-style: none;
59 | }
60 |
61 | li {
62 | text-align: center;
63 | display: inline-block;
64 | vertical-align:top;
65 | padding: 20px;
66 | }
67 |
68 | p {
69 | width: 128px;
70 | margin-top: 15px;
71 | }
--------------------------------------------------------------------------------
/demo/assets/css/style.css:
--------------------------------------------------------------------------------
1 | /** Generated by FG **/
2 | @font-face {
3 | font-family: 'Conv_InterstatePro-Bold';
4 | src: url('../fonts/InterstatePro-Bold.eot');
5 | src: local('☺'), url('../fonts/InterstatePro-Bold.woff') format('woff'), url('../fonts/InterstatePro-Bold.ttf') format('truetype'), url('../fonts/InterstatePro-Bold.svg') format('svg');
6 | font-weight: normal;
7 | font-style: normal;
8 | }
9 | /** Generated by FG **/
10 | @font-face {
11 | font-family: 'Conv_InterstatePro-Light';
12 | src: url('../fonts/InterstatePro-Light.eot');
13 | src: local('☺'), url('../fonts/InterstatePro-Light.woff') format('woff'), url('../fonts/InterstatePro-Light.ttf') format('truetype'), url('../fonts/InterstatePro-Light.svg') format('svg');
14 | font-weight: normal;
15 | font-style: normal;
16 | }
17 | /** Generated by FG **/
18 | @font-face {
19 | font-family: 'Conv_InterstatePro-ExtraLight';
20 | src: url('../fonts/InterstatePro-ExtraLight.eot');
21 | src: local('☺'), url('../fonts/InterstatePro-ExtraLight.woff') format('woff'), url('../fonts/InterstatePro-ExtraLight.ttf') format('truetype'), url('../fonts/InterstatePro-ExtraLight.svg') format('svg');
22 | font-weight: normal;
23 | font-style: normal;
24 | }
25 | /** Generated by FG **/
26 | @font-face {
27 | font-family: 'Conv_InterstatePro-Regular';
28 | src: url('../fonts/InterstatePro-Regular.eot');
29 | src: local('☺'), url('../fonts/InterstatePro-Regular.woff') format('woff'), url('../fonts/InterstatePro-Regular.ttf') format('truetype'), url('../fonts/InterstatePro-Regular.svg') format('svg');
30 | font-weight: normal;
31 | font-style: normal;
32 | }
33 | @font-face {
34 | font-family: "UPCDigital";
35 | src: url(../fonts/DAWN-UPCDiRg.ttf) format("truetype");
36 | font-weight: 400;
37 | }
38 | @font-face {
39 | font-family: 'UPCDigital-bold';
40 | src: url(../fonts/DAWN-UPCDiBd.ttf) format('truetype');
41 | }
42 |
43 | html {
44 | overflow-x: hidden;
45 | }
46 | body {
47 | box-sizing: border-box;
48 | padding: 30px 93px 0 93px;
49 | margin: 0;
50 | font-family: Conv_InterstatePro-Regular;
51 | font-weight: normal;
52 | color: #ffffff;
53 | width: 100%;
54 | height: 100%;
55 | background: url("../../pic/bgs/Descendants.png") no-repeat #000000;
56 | overflow-x: hidden;
57 | }
58 | html-gl {
59 | display: block;
60 | }
61 |
62 | h1 {
63 | font-family: verdana, sans-serif;
64 | font-size: 16px;
65 | margin: 0 0 30px 0;
66 | font-weight: 300;
67 | color: #858382;
68 | }
69 | .menu {
70 | font-size: 30px;
71 | }
72 | .menu.expanded {
73 | border-bottom: 1px solid #858382;
74 | }
75 | a {
76 | font-family: verdana, sans-serif;
77 | margin: 0 0 30px 0;
78 | font-weight: 300;
79 | color: #ffffff;
80 | text-decoration: none;
81 | }
82 | a:hover {
83 | text-decoration: underline;
84 | }
85 | ul.menu,
86 | ul.submenu {
87 | list-style: none;
88 | margin: 0;
89 | padding: 0;
90 | line-height: 1em;
91 | padding: 0 0 6px 0;
92 | }
93 | ul.submenu {
94 | padding: 6px 0 0 0;
95 | }
96 | .menu li {
97 | display: inline;
98 | padding-right: 30px;
99 | }
100 | .submenu {
101 | font-size: 26px;
102 | }
103 | .submenu li {
104 | overflow: hidden;
105 | height: 24px;
106 | display: inline-block;
107 | padding-right: 30px;
108 | }
109 | .broadcasts_list {
110 | margin: 36px 0 0 0;
111 | padding: 0 0 36px 0;
112 | /* TODO Implement overflow masks in WebGL
113 | overflow-x: hidden;*/
114 | }
115 | .broadcasts_list h1 {
116 | font-family: Conv_InterstatePro-Light;
117 | font-size: 22px;
118 | font-weight: 300;
119 | margin: 0 0 5px 0;
120 | line-height: 1em;
121 | }
122 | .broadcasts_list ul {
123 | list-style: none;
124 | padding: 0;
125 | margin: 0;
126 | white-space: nowrap;
127 | }
128 | .broadcasts_list li {
129 | display: inline-block;
130 | width: 186px;
131 | margin-right: 15px;
132 | }
133 | .broadcast {
134 | position: relative;
135 | font-family: "UPCDigital";
136 | font-size: 16px;
137 | line-height: 24px;
138 | }
139 | .image_overlay,
140 | .image_background,
141 | .broadcast > img {
142 | width: 186px;
143 | height: 270px;
144 | }
145 | .image_background {
146 | position: absolute;
147 | left: 0;
148 | top: 0;
149 | background-color: #000000;
150 | }
151 | .broadcast > img {
152 | width: 186px;
153 | height: 270px;
154 | border: 1px solid #858382;
155 | box-sizing: border-box;
156 | opacity: 0.8;
157 | }
158 | .image_overlay {
159 | position: absolute;
160 | left: 0;
161 | top: 0;
162 | background-color: #000000;
163 | opacity: 0.2;
164 | }
165 | .broadcast p {
166 | line-height: 20px;
167 | margin: 0 0 3px 0;
168 | padding: 0;
169 | color: #D2D2D2;
170 | }
171 | .broadcast p img {
172 | width: 52px;
173 | height: 24px;
174 | display: inline-block;
175 | }
176 | .broadcast p > span {
177 | font-family: UPCDigital-bold;
178 | display: inline-block;
179 | color: #ffffff;
180 | vertical-align: top;
181 | font-size: 16px;
182 | margin-left: 3px;
183 | }
184 | .broadcast p > span span {
185 | color: #808080;
186 | display: inline-block;
187 | vertical-align: baseline;
188 | font-size: 12px;
189 | }
190 |
--------------------------------------------------------------------------------
/demo/assets/fonts/DAWN-InterstatePro-Bold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/fonts/DAWN-InterstatePro-Bold.ttf
--------------------------------------------------------------------------------
/demo/assets/fonts/DAWN-InterstatePro-ExtraLight.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/fonts/DAWN-InterstatePro-ExtraLight.ttf
--------------------------------------------------------------------------------
/demo/assets/fonts/DAWN-InterstatePro-Light.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/fonts/DAWN-InterstatePro-Light.ttf
--------------------------------------------------------------------------------
/demo/assets/fonts/DAWN-InterstatePro-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/fonts/DAWN-InterstatePro-Regular.ttf
--------------------------------------------------------------------------------
/demo/assets/fonts/DAWN-InterstatePro-Thin.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/fonts/DAWN-InterstatePro-Thin.ttf
--------------------------------------------------------------------------------
/demo/assets/fonts/DAWN-UPCDiBd.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/fonts/DAWN-UPCDiBd.ttf
--------------------------------------------------------------------------------
/demo/assets/fonts/DAWN-UPCDiRg.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/fonts/DAWN-UPCDiRg.ttf
--------------------------------------------------------------------------------
/demo/assets/fonts/InterstatePro-Bold.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/fonts/InterstatePro-Bold.eot
--------------------------------------------------------------------------------
/demo/assets/fonts/InterstatePro-Bold.svg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/fonts/InterstatePro-Bold.svg
--------------------------------------------------------------------------------
/demo/assets/fonts/InterstatePro-Bold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/fonts/InterstatePro-Bold.ttf
--------------------------------------------------------------------------------
/demo/assets/fonts/InterstatePro-Bold.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/fonts/InterstatePro-Bold.woff
--------------------------------------------------------------------------------
/demo/assets/fonts/InterstatePro-ExtraLight.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/fonts/InterstatePro-ExtraLight.eot
--------------------------------------------------------------------------------
/demo/assets/fonts/InterstatePro-ExtraLight.svg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/fonts/InterstatePro-ExtraLight.svg
--------------------------------------------------------------------------------
/demo/assets/fonts/InterstatePro-ExtraLight.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/fonts/InterstatePro-ExtraLight.ttf
--------------------------------------------------------------------------------
/demo/assets/fonts/InterstatePro-ExtraLight.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/fonts/InterstatePro-ExtraLight.woff
--------------------------------------------------------------------------------
/demo/assets/fonts/InterstatePro-Light.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/fonts/InterstatePro-Light.eot
--------------------------------------------------------------------------------
/demo/assets/fonts/InterstatePro-Light.svg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/fonts/InterstatePro-Light.svg
--------------------------------------------------------------------------------
/demo/assets/fonts/InterstatePro-Light.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/fonts/InterstatePro-Light.ttf
--------------------------------------------------------------------------------
/demo/assets/fonts/InterstatePro-Light.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/fonts/InterstatePro-Light.woff
--------------------------------------------------------------------------------
/demo/assets/fonts/InterstatePro-Regular.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/fonts/InterstatePro-Regular.eot
--------------------------------------------------------------------------------
/demo/assets/fonts/InterstatePro-Regular.svg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/fonts/InterstatePro-Regular.svg
--------------------------------------------------------------------------------
/demo/assets/fonts/InterstatePro-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/fonts/InterstatePro-Regular.ttf
--------------------------------------------------------------------------------
/demo/assets/fonts/InterstatePro-Regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/fonts/InterstatePro-Regular.woff
--------------------------------------------------------------------------------
/demo/assets/fonts/InterstatePro-Thin.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/fonts/InterstatePro-Thin.ttf
--------------------------------------------------------------------------------
/demo/assets/fonts/README-FONTS.txt:
--------------------------------------------------------------------------------
1 | we experienced that web apps could reference their own versions of fonts our app uses
2 |
3 | in some cases this broke DAWN for example, special characters began to display incorrectly
4 |
5 | in order to avoid this situation, we're namespacing our fonts with the 'DAWN-' prefix
6 |
7 | the rename function of the Typelite application (http://www.cr8software.net/typex.html) was used
8 | to accomplish this initially
9 |
--------------------------------------------------------------------------------
/demo/assets/fonts/UPCDiBd.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/fonts/UPCDiBd.ttf
--------------------------------------------------------------------------------
/demo/assets/fonts/UPCDiRg.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/fonts/UPCDiRg.ttf
--------------------------------------------------------------------------------
/demo/assets/img/displacement_fish1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/displacement_fish1.png
--------------------------------------------------------------------------------
/demo/assets/img/displacement_fish2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/displacement_fish2.png
--------------------------------------------------------------------------------
/demo/assets/img/displacement_fish3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/displacement_fish3.png
--------------------------------------------------------------------------------
/demo/assets/img/displacement_fish4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/displacement_fish4.png
--------------------------------------------------------------------------------
/demo/assets/img/displacement_map.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/displacement_map.jpg
--------------------------------------------------------------------------------
/demo/assets/img/icons/2checkout.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/icons/2checkout.png
--------------------------------------------------------------------------------
/demo/assets/img/icons/amex.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/icons/amex.png
--------------------------------------------------------------------------------
/demo/assets/img/icons/basket.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/icons/basket.png
--------------------------------------------------------------------------------
/demo/assets/img/icons/bitcoin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/icons/bitcoin.png
--------------------------------------------------------------------------------
/demo/assets/img/icons/box.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/icons/box.png
--------------------------------------------------------------------------------
/demo/assets/img/icons/calculator.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/icons/calculator.png
--------------------------------------------------------------------------------
/demo/assets/img/icons/calendar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/icons/calendar.png
--------------------------------------------------------------------------------
/demo/assets/img/icons/chart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/icons/chart.png
--------------------------------------------------------------------------------
/demo/assets/img/icons/cirrus.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/icons/cirrus.png
--------------------------------------------------------------------------------
/demo/assets/img/icons/clipboard.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/icons/clipboard.png
--------------------------------------------------------------------------------
/demo/assets/img/icons/clock.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/icons/clock.png
--------------------------------------------------------------------------------
/demo/assets/img/icons/credit-card.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/icons/credit-card.png
--------------------------------------------------------------------------------
/demo/assets/img/icons/cvv2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/icons/cvv2.png
--------------------------------------------------------------------------------
/demo/assets/img/icons/discover.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/icons/discover.png
--------------------------------------------------------------------------------
/demo/assets/img/icons/ebay.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/icons/ebay.png
--------------------------------------------------------------------------------
/demo/assets/img/icons/google-wallet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/icons/google-wallet.png
--------------------------------------------------------------------------------
/demo/assets/img/icons/locker.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/icons/locker.png
--------------------------------------------------------------------------------
/demo/assets/img/icons/maestro.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/icons/maestro.png
--------------------------------------------------------------------------------
/demo/assets/img/icons/mastercard.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/icons/mastercard.png
--------------------------------------------------------------------------------
/demo/assets/img/icons/money.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/icons/money.png
--------------------------------------------------------------------------------
/demo/assets/img/icons/paypal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/icons/paypal.png
--------------------------------------------------------------------------------
/demo/assets/img/icons/shipping-truck.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/icons/shipping-truck.png
--------------------------------------------------------------------------------
/demo/assets/img/icons/shop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/icons/shop.png
--------------------------------------------------------------------------------
/demo/assets/img/icons/shopping-bag.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/icons/shopping-bag.png
--------------------------------------------------------------------------------
/demo/assets/img/icons/skrill.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/icons/skrill.png
--------------------------------------------------------------------------------
/demo/assets/img/icons/solo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/icons/solo.png
--------------------------------------------------------------------------------
/demo/assets/img/icons/square-up.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/icons/square-up.png
--------------------------------------------------------------------------------
/demo/assets/img/icons/tag.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/icons/tag.png
--------------------------------------------------------------------------------
/demo/assets/img/icons/visa.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/icons/visa.png
--------------------------------------------------------------------------------
/demo/assets/img/icons/wallet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/icons/wallet.png
--------------------------------------------------------------------------------
/demo/assets/img/icons/wire-transfer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/icons/wire-transfer.png
--------------------------------------------------------------------------------
/demo/assets/img/icons/wu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/icons/wu.png
--------------------------------------------------------------------------------
/demo/assets/img/icons/zoom.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/icons/zoom.png
--------------------------------------------------------------------------------
/demo/assets/img/imdb.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/imdb.png
--------------------------------------------------------------------------------
/demo/assets/img/imdb_focus.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/imdb_focus.png
--------------------------------------------------------------------------------
/demo/assets/img/ripple_displacement.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/ripple_displacement.png
--------------------------------------------------------------------------------
/demo/assets/img/zeldaWaves.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/assets/img/zeldaWaves.png
--------------------------------------------------------------------------------
/demo/basic-dom.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | MENU RENDERED IN DOM
11 | 36 |SLIDER BELOW IS RENDERED IN WEBGL, DRAG IT
38 |
42 |
43 | 44 | Select me with DevTools 45 |
46 | 47 |
48 |
49 | 7.8/10
50 |
55 |
56 | 57 | Change me in DevTools 58 |
59 | 60 |
61 |
62 | 8.0/10
63 |
68 |
69 | 70 | Breaking bad 71 |
72 | 73 |
74 |
75 | 9.6/10
76 |
81 |
82 | 83 | Quantum of solace 84 |
85 | 86 |
87 |
88 | 6.7/10
89 |
94 |
95 | 96 | Quantum of solace 97 |
98 | 99 |
100 |
101 | 7.4/10
102 |
107 |
108 | 109 | Quantum of solace 110 |
111 | 112 |
113 |
114 | 7.4/10
115 |
120 |
121 | 122 | Quantum of solace 123 |
124 | 125 |
126 |
127 | 7.4/10
128 |
133 |
134 | 135 | Quantum of solace 136 |
137 | 138 |
139 |
140 | 7.4/10
141 |
146 |
147 | 148 | Quantum of solace 149 |
150 | 151 |
152 |
153 | 7.4/10
154 |
159 |
160 | 161 | Quantum of solace 162 |
163 | 164 |
165 |
166 | 7.4/10
167 |
170 |
171 |
172 | HTML GL demo
15 |DOM
because HTML GL is disabled 17 |22 | TODO 23 |
24 |-
25 |
- Switch to WebGL for more performant animations 26 |
HTML GL demo
26 | 27 |
28 | This layer is rendered in
30 |
31 |
32 |
33 | WebGL
because it have tag name html-gl 29 |34 | TODO 35 |
36 |-
37 |
- Add retina support in order to avoid blurry content 38 |
HTML GL demo
9 |WebGL
because it have tag name html-gl 11 |16 | TODO 17 |
18 |-
19 |
- Add more effects presets 20 |
10 |
34 |
36 |
37 |
38 |
39 |
40 |
49 |
50 |
51 |
52 |
53 |
62 |
63 |
64 |
65 |
66 |
75 |
76 |
77 |
78 |
79 |
88 |
89 |
90 |
91 |
92 |
101 |
102 |
103 |
104 |
105 |
114 |
115 |
116 |
117 |
118 |
127 |
128 |
129 |
130 |
131 |
140 |
141 |
142 |
143 |
144 |
153 |
154 |
155 |
156 |
157 |
166 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
361 |
362 |
--------------------------------------------------------------------------------
/demo/js/slider.js:
--------------------------------------------------------------------------------
1 | //Slider logic, written in HTML / JS.
2 | //The only difference between HTML GL and basic HTML is that you should use element.styleGL.transform instead of element.style.transform
3 |
4 | var images = document.getElementsByTagName('img'),
5 | dragStart = false,
6 | slider = document.getElementsByTagName('html-gl')[0],
7 | startX = 0,
8 | startLeft = 0,
9 | transformPropertyName = document.body.style.transform !== undefined ? 'transform' : 'WebkitTransform';
10 |
11 | for (var i = 0; i < images.length; i++) {
12 | images[i].ondragstart = function () {
13 | return false;
14 | };
15 | }
16 |
17 | function setSliderX(x) {
18 | (slider.styleGL || slider.style)[transformPropertyName] = 'translateZ(0) translateX(' + (startLeft - (startX - (x || 0))) + 'px)';
19 | }
20 |
21 | function getSliderX() {
22 | return parseInt(parseCSSTransform((slider.styleGL || slider.style)[transformPropertyName]).translateX) || 0
23 | }
24 |
25 | function onDragStart(event) {
26 | dragStart = true;
27 | startX = (event.pageX || event.x) || event.touches[0].pageX;
28 | startLeft = getSliderX();
29 | }
30 |
31 | function onDragEnd() {
32 | dragStart = false;
33 | }
34 |
35 | function onMove(event) {
36 | if (dragStart) {
37 | var pageX = (event.pageX || event.x) || event.touches[0].pageX,
38 | moveTime = new Date();
39 |
40 | setSliderX(pageX);
41 | }
42 | }
43 |
44 | slider.addEventListener('mousedown', onDragStart);
45 | slider.addEventListener('mouseup', onDragEnd);
46 | slider.addEventListener('mousemove', onMove);
47 | slider.addEventListener('touchstart', onDragStart);
48 | slider.addEventListener('touchend', onDragEnd);
49 | slider.addEventListener('touchmove', onMove);
50 |
51 | parseCSSTransform = function (transformString) {
52 | return (transformString.match(/([\w]+)\(([^\)]+)\)/g) || [])
53 | //make pairs of prop and value
54 | .map(function (it) {
55 | return it.replace(/\)$/, "").split(/\(/)
56 | })
57 | //convert to key-value map/object
58 | .reduce(function (m, it) {
59 | return m[it[0]] = it[1], m
60 | }, {});
61 | }
--------------------------------------------------------------------------------
/demo/nested-content-webgl.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | MENU RENDERED IN DOM
11 | 33 |SLIDER BELOW IS RENDERED IN WEBGL, DRAG IT
35 |
39 |
40 | 41 | Select me with DevTools 42 |
43 | 44 |
45 |
46 | 7.8/10
47 |
52 |
53 | 54 | Change me in DevTools 55 |
56 | 57 |
58 |
59 | 8.0/10
60 |
65 |
66 | 67 | Breaking bad 68 |
69 | 70 |
71 |
72 | 9.6/10
73 |
78 |
79 | 80 | Quantum of solace 81 |
82 | 83 |
84 |
85 | 6.7/10
86 |
91 |
92 | 93 | Quantum of solace 94 |
95 | 96 |
97 |
98 | 7.4/10
99 |
104 |
105 | 106 | Quantum of solace 107 |
108 | 109 |
110 |
111 | 7.4/10
112 |
117 |
118 | 119 | Quantum of solace 120 |
121 | 122 |
123 |
124 | 7.4/10
125 |
130 |
131 | 132 | Quantum of solace 133 |
134 | 135 |
136 |
137 | 7.4/10
138 |
143 |
144 | 145 | Quantum of solace 146 |
147 | 148 |
149 |
150 | 7.4/10
151 |
156 |
157 | 158 | Quantum of solace 159 |
160 | 161 |
162 |
163 | 7.4/10
164 |
167 |
168 |
169 |
10 |
37 |
39 |
40 |
41 |
42 |
43 |
44 |
53 |
54 |
55 |
56 |
57 |
58 |
67 |
68 |
69 |
70 |
71 |
80 |
81 |
82 |
83 |
84 |
93 |
94 |
95 |
96 |
97 |
106 |
107 |
108 |
109 |
110 |
119 |
120 |
121 |
122 |
123 |
132 |
133 |
134 |
135 |
136 |
145 |
146 |
147 |
148 |
149 |
158 |
159 |
160 |
161 |
162 |
171 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
200 |
201 |
--------------------------------------------------------------------------------
/demo/pic/MV5BMTU2MTgzMzQxNV5BMl5BanBnXkFtZTcwODg4NTQ3OQ@@._V1_SX214_.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/pic/MV5BMTU2MTgzMzQxNV5BMl5BanBnXkFtZTcwODg4NTQ3OQ@@._V1_SX214_.jpg
--------------------------------------------------------------------------------
/demo/pic/MV5BMTY0MjI4MDI5MF5BMl5BanBnXkFtZTcwODkwNjk3MQ@@._V1_SY317_CR0,0,214,317_.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/pic/MV5BMTY0MjI4MDI5MF5BMl5BanBnXkFtZTcwODkwNjk3MQ@@._V1_SY317_CR0,0,214,317_.jpg
--------------------------------------------------------------------------------
/demo/pic/MV5BMTYwOTEwNjAzMl5BMl5BanBnXkFtZTcwODc5MTUwMw@@._V1_SY317_CR0,0,214,317_.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/pic/MV5BMTYwOTEwNjAzMl5BMl5BanBnXkFtZTcwODc5MTUwMw@@._V1_SY317_CR0,0,214,317_.png
--------------------------------------------------------------------------------
/demo/pic/MV5BMTc3MjI0MjM0NF5BMl5BanBnXkFtZTcwMTYxMTQ1OA@@._V1_SY317_CR0,0,214,317_.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/pic/MV5BMTc3MjI0MjM0NF5BMl5BanBnXkFtZTcwMTYxMTQ1OA@@._V1_SY317_CR0,0,214,317_.jpg
--------------------------------------------------------------------------------
/demo/pic/bgs/Descendants.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/pic/bgs/Descendants.png
--------------------------------------------------------------------------------
/demo/pic/boxes/box_argo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/pic/boxes/box_argo.png
--------------------------------------------------------------------------------
/demo/pic/boxes/box_avatar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/pic/boxes/box_avatar.png
--------------------------------------------------------------------------------
/demo/pic/boxes/box_breaking_bad.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/pic/boxes/box_breaking_bad.png
--------------------------------------------------------------------------------
/demo/pic/boxes/box_quantum_of_solace.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/pic/boxes/box_quantum_of_solace.png
--------------------------------------------------------------------------------
/demo/pic/imdb.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/pic/imdb.png
--------------------------------------------------------------------------------
/demo/pic/imdb_focus.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PixelsCommander/HTML-GL/6e58d6adc4d31c17ce9802955e84d90f39512be3/demo/pic/imdb_focus.png
--------------------------------------------------------------------------------
/demo/ripples.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | MENU RENDERED IN DOM
11 | 36 |SLIDER BELOW IS RENDERED IN WEBGL, DRAG IT
38 |
43 |
44 | 45 | Select me with DevTools 46 |
47 | 48 |
49 |
50 | 7.8/10
51 |
57 |
58 | 59 | Change me in DevTools 60 |
61 | 62 |
63 |
64 | 8.0/10
65 |
70 |
71 | 72 | Breaking bad 73 |
74 | 75 |
76 |
77 | 9.6/10
78 |
83 |
84 | 85 | Quantum of solace 86 |
87 | 88 |
89 |
90 | 6.7/10
91 |
96 |
97 | 98 | Quantum of solace 99 |
100 | 101 |
102 |
103 | 7.4/10
104 |
109 |
110 | 111 | Quantum of solace 112 |
113 | 114 |
115 |
116 | 7.4/10
117 |
122 |
123 | 124 | Quantum of solace 125 |
126 | 127 |
128 |
129 | 7.4/10
130 |
135 |
136 | 137 | Quantum of solace 138 |
139 | 140 |
141 |
142 | 7.4/10
143 |
148 |
149 | 150 | Quantum of solace 151 |
152 | 153 |
154 |
155 | 7.4/10
156 |
161 |
162 | 163 | Quantum of solace 164 |
165 | 166 |
167 |
168 | 7.4/10
169 |
172 |
173 |
174 | -
12 |
-
13 |
14 | Bitcoin
15 |
16 | -
17 |
18 | 2checkout
19 |
20 | -
21 |
22 | Calendar
23 |
24 | -
25 |
26 | Calculator
27 |
28 | -
29 |
30 | Clock
31 |
32 | -
33 |
34 | Discover
35 |
36 | -
37 |
38 | Ebay
39 |
40 | -
41 |
42 | Google wallet
43 |
44 | -
45 |
46 | Maestro
47 |
48 | -
49 |
50 | MasterCard
51 |
52 | -
53 |
54 | PayPal
55 |
56 | -
57 |
58 | Locker
59 |
60 | -
61 |
62 | Visa
63 |
64 | -
65 |
66 | Wire transfer
67 |
68 | -
69 |
70 | Western Union
71 |
72 |
63 |
129 |
130 |
131 |
132 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
--------------------------------------------------------------------------------
/page/js/basics.js:
--------------------------------------------------------------------------------
1 | window.changeNodeContent = function () {
2 | document.getElementsByTagName('html-gl')[0].innerHTML = '
64 |
128 | INTERACTIVITY AND EFFECTS
65 | 66 |YOU MAY DRAG OR CLICK SLIDER TO ENSURE THAT DOM EVENTS ARE RESPECTED 67 | DESPITE IT IS A WEB GL RENDERED CONTENT WITH FILTERS APPLIED
68 | 69 |
70 |
71 | 
72 |
73 |
81 |
104 |
105 |
106 |
107 |
127 |
72 |
73 | Select me with devtools
74 | 75 |
76 | 
77 | 7.8
78 | / 10
79 |
82 | 
83 |
84 |
92 |
83 |
84 | Change me in devtools
85 | 86 |
87 |
88 | 9.4
89 | / 10
90 |
93 | 
94 |
95 |
103 |
94 |
95 | BREAKING BAD
96 | 97 |
98 |
99 | 8.5
100 | / 10
101 |
WOW!
innerHTML changed and element was rerendered automaticaly. Sorry, retina is not supported yet, so a bit blurry.
'; 3 | } 4 | 5 | window.changeNodeTransform = function () { 6 | var element = document.getElementsByTagName('html-gl')[0]; 7 | element.style.webkitTransform = 'translateX(400px) translateY(100px)'; 8 | element.style.transform = 'translateX(400px) translateY(100px)'; 9 | } 10 | 11 | window.animateBasic = function () { 12 | var element = document.getElementsByTagName('html-gl')[0]; 13 | 14 | var v = Velocity(element, { 15 | translateX: 100, 16 | translateY: 100, 17 | scaleX: 4, 18 | scaleY: 4, 19 | rotateZ: "360deg" 20 | }, {duration: 1000}).then(function () { 21 | Velocity(element, { 22 | translateX: 0, 23 | translateY: 0, 24 | scaleX: 1, 25 | scaleY: 1, 26 | rotateZ: "0" 27 | }, {duration: 1000}); 28 | }); 29 | } -------------------------------------------------------------------------------- /page/js/effects.js: -------------------------------------------------------------------------------- 1 | window.addEventListener('DOMContentLoaded', function(){ 2 | 3 | var slider = document.getElementsByTagName('html-gl')[1]; 4 | 5 | var renderer = window.HTMLGL.renderer; 6 | 7 | var filtersSwitchs = [true, false, false, false, false, false, false, false, false, false, false]; 8 | 9 | var gui = new dat.GUI({}); 10 | 11 | var displacementSprite = new PIXI.TilingSprite.fromImage("assets/img/displacement_map.jpg"); 12 | window.HTMLGL.stage.addChild(displacementSprite); 13 | var displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite); 14 | 15 | var displacementFolder = gui.addFolder('Displacement'); 16 | displacementFolder.add(filtersSwitchs, '0').name("apply"); 17 | displacementFolder.add(displacementFilter.scale, 'x', 1, 200).name("scaleX"); 18 | displacementFolder.add(displacementFilter.scale, 'y', 1, 200).name("scaleY"); 19 | displacementFolder.open(); 20 | 21 | var blurFilter = new PIXI.filters.BlurFilter(); 22 | 23 | var blurFolder = gui.addFolder('Blur'); 24 | blurFolder.add(filtersSwitchs, '1').name("apply"); 25 | blurFolder.add(blurFilter, 'blurX', 0, 32).name("blurX"); 26 | blurFolder.add(blurFilter, 'blurY', 0, 32).name("blurY"); 27 | 28 | //// 29 | 30 | var invertFilter = new PIXI.filters.InvertFilter(); 31 | 32 | var invertFolder = gui.addFolder('Invert'); 33 | invertFolder.add(filtersSwitchs, '2').name("apply"); 34 | invertFolder.add(invertFilter, 'invert', 0, 1).name("Invert"); 35 | 36 | //// 37 | 38 | var pixelateFilter = new PIXI.filters.PixelateFilter(); 39 | 40 | var pixelateFolder = gui.addFolder('Pixelate'); 41 | pixelateFolder.add(filtersSwitchs, '3').name("apply"); 42 | pixelateFolder.add(pixelateFilter.size, 'x', 1, 32).name("PixelSizeX"); 43 | pixelateFolder.add(pixelateFilter.size, 'y', 1, 32).name("PixelSizeY"); 44 | 45 | //// 46 | 47 | var grayFilter = new PIXI.filters.GrayFilter(); 48 | 49 | var grayFolder = gui.addFolder('Gray'); 50 | grayFolder.add(filtersSwitchs, '4').name("apply"); 51 | grayFolder.add(grayFilter, 'gray', 0, 1).name("Gray"); 52 | 53 | //// 54 | 55 | var sepiaFilter = new PIXI.filters.SepiaFilter(); 56 | 57 | var sepiaFolder = gui.addFolder('Sepia'); 58 | sepiaFolder.add(filtersSwitchs, '5').name("apply"); 59 | sepiaFolder.add(sepiaFilter, 'sepia', 0, 1).name("Sepia"); 60 | 61 | //// 62 | 63 | var twistFilter = new PIXI.filters.TwistFilter(); 64 | 65 | var twistFolder = gui.addFolder('Twist'); 66 | twistFolder.add(filtersSwitchs, '6').name("apply"); 67 | twistFolder.add(twistFilter, 'angle', 0, 10).name("Angle"); 68 | twistFolder.add(twistFilter, 'radius', 0, 1).name("Radius"); 69 | 70 | twistFolder.add(twistFilter.offset, 'x', 0, 1).name("offset.x");; 71 | twistFolder.add(twistFilter.offset, 'y', 0, 1).name("offset.y");; 72 | 73 | //// 74 | 75 | var dotScreenFilter = new PIXI.filters.DotScreenFilter(); 76 | 77 | var dotScreenFolder = gui.addFolder('DotScreen'); 78 | dotScreenFolder.add(filtersSwitchs, '7').name("apply"); 79 | dotScreenFolder.add(dotScreenFilter, 'angle', 0, 10); 80 | dotScreenFolder.add(dotScreenFilter, 'scale', 0, 1); 81 | 82 | //// 83 | 84 | var colorStepFilter = new PIXI.filters.ColorStepFilter(); 85 | 86 | var colorStepFolder = gui.addFolder('ColorStep'); 87 | colorStepFolder.add(filtersSwitchs, '8').name("apply"); 88 | 89 | colorStepFolder.add(colorStepFilter, 'step', 1, 100); 90 | colorStepFolder.add(colorStepFilter, 'step', 1, 100); 91 | 92 | //// 93 | 94 | var crossHatchFilter = new PIXI.filters.CrossHatchFilter(); 95 | 96 | var crossHatchFolder = gui.addFolder('CrossHatch'); 97 | crossHatchFolder.add(filtersSwitchs, '9').name("apply"); 98 | 99 | var rgbSplitterFilter = new PIXI.filters.RGBSplitFilter(); 100 | 101 | rgbSplitterFilter.blue = new PIXI.Point(10, 10); 102 | rgbSplitterFilter.green = new PIXI.Point(-10, 10); 103 | rgbSplitterFilter.red = new PIXI.Point(10, -10); 104 | 105 | var rgbSplitFolder = gui.addFolder('RGB Splitter'); 106 | rgbSplitFolder.add(filtersSwitchs, '10').name("apply"); 107 | 108 | 109 | var filterCollection = [displacementFilter, blurFilter, invertFilter, pixelateFilter, grayFilter, sepiaFilter, twistFilter, dotScreenFilter, colorStepFilter, crossHatchFilter, rgbSplitterFilter]; 110 | 111 | // create an new instance of a pixi stage 112 | var stage = window.HTMLGL.stage; 113 | 114 | var pondContainer = slider.sprite; 115 | 116 | stage.interactive = true; 117 | 118 | var padding = 100; 119 | var bounds = new PIXI.Rectangle(-padding, -padding, window.HTMLGL.renderer.width + padding * 2, window.HTMLGL.renderer.height + padding * 2) 120 | 121 | //var overlay = new PIXI.TilingSprite(PIXI.Texture.fromImage("assets/img/zeldaWaves.png"), window.HTMLGL.renderer.width, window.HTMLGL.renderer.height); 122 | //overlay.alpha = 0.1//0.2 123 | //pondContainer.addChild(overlay); 124 | 125 | displacementFilter.scale.x = 25; 126 | displacementFilter.scale.y = 25; 127 | 128 | var count = 0; 129 | var switchy = false; 130 | 131 | function animate() { 132 | 133 | if (window.HTMLGL.scrollY > 1000) { 134 | count += 0.1; 135 | 136 | var blurAmount = Math.cos(count); 137 | var blurAmount2 = Math.sin(count * 0.8); 138 | 139 | var filtersToApply = []; 140 | 141 | for (var i = 0; i < filterCollection.length; i++) { 142 | if (filtersSwitchs[i])filtersToApply.push(filterCollection[i]); 143 | } 144 | 145 | var rgbFilterIndex = filtersToApply.indexOf(rgbSplitterFilter); 146 | 147 | if (rgbFilterIndex !== -1) { 148 | slider.sprite.filters = [rgbSplitterFilter]; 149 | filtersToApply.splice(rgbFilterIndex, 1); 150 | } else { 151 | if (slider.sprite.filters) { 152 | var rgbFilterIndexOnSlider = slider.sprite.filters.indexOf(rgbSplitterFilter); 153 | if (rgbFilterIndexOnSlider !== -1) { 154 | slider.sprite.filters = null; 155 | } 156 | } 157 | } 158 | 159 | pondContainer.filters = filtersToApply.length > 0 ? filtersToApply : null; 160 | 161 | displacementSprite.x = count * 10; 162 | displacementSprite.y = count * 10; 163 | 164 | renderer.render(stage); 165 | } 166 | 167 | requestAnimationFrame(animate); 168 | } 169 | 170 | renderer.render(stage); 171 | requestAnimationFrame( animate ); 172 | }); -------------------------------------------------------------------------------- /page/js/slider.js: -------------------------------------------------------------------------------- 1 | //Slider logic, written in HTML / JS. 2 | //The only difference between HTML GL and basic HTML is that you should use element.styleGL.transform instead of element.style.transform 3 | 4 | var images = document.getElementsByTagName('img'), 5 | dragStart = false, 6 | slider = document.getElementsByTagName('html-gl')[1], 7 | startX = 0, 8 | startLeft = 0, 9 | transformPropertyName = document.body.style.transform !== undefined ? 'transform' : 'WebkitTransform'; 10 | 11 | for (var i = 0; i < images.length; i++) { 12 | images[i].ondragstart = function () { 13 | return false; 14 | }; 15 | } 16 | 17 | function setSliderX(x) { 18 | (slider.styleGL || slider.style)[transformPropertyName] = 'translateZ(0) translateX(' + (startLeft - (startX - (x || 0))) + 'px)'; 19 | } 20 | 21 | function getSliderX() { 22 | return parseInt(parseCSSTransform((slider.styleGL || slider.style)[transformPropertyName]).translateX) || 0 23 | } 24 | 25 | function onDragStart(event) { 26 | dragStart = true; 27 | startX = (event.pageX || event.x) || event.touches[0].pageX; 28 | startLeft = getSliderX(); 29 | } 30 | 31 | function onDragEnd() { 32 | dragStart = false; 33 | } 34 | 35 | function onMove(event) { 36 | if (dragStart) { 37 | var pageX = (event.pageX || event.x) || event.touches[0].pageX, 38 | moveTime = new Date(); 39 | 40 | setSliderX(pageX); 41 | } 42 | } 43 | 44 | slider.addEventListener('mousedown', onDragStart); 45 | slider.addEventListener('mouseup', onDragEnd); 46 | slider.addEventListener('mousemove', onMove); 47 | slider.addEventListener('touchstart', onDragStart); 48 | slider.addEventListener('touchend', onDragEnd); 49 | slider.addEventListener('touchmove', onMove); 50 | 51 | parseCSSTransform = function (transformString) { 52 | return (transformString.match(/([\w]+)\(([^\)]+)\)/g) || []) 53 | //make pairs of prop and value 54 | .map(function (it) { 55 | return it.replace(/\)$/, "").split(/\(/) 56 | }) 57 | //convert to key-value map/object 58 | .reduce(function (m, it) { 59 | return m[it[0]] = it[1], m 60 | }, {}); 61 | } -------------------------------------------------------------------------------- /src/effects/ascii.js: -------------------------------------------------------------------------------- 1 | (function (w) { 2 | 3 | var Ascii = function (element) { 4 | this.element = element; 5 | this.filter = new PIXI.filters.AsciiFilter(); 6 | this.element.sprite.filters = (this.element.sprite.filters || []).concat(this.filter); 7 | } 8 | 9 | var p = Ascii.prototype; 10 | 11 | p.destroy = function () { 12 | var filterIndex = this.element.sprite.filters.indexOf(this.filter); 13 | this.element.sprite.filters = this.element.sprite.filters.splice(filterIndex, 1); 14 | } 15 | 16 | w.HTMLGL.effects = w.HTMLGL.effects || {}; 17 | w.HTMLGL.effects.ascii = Ascii; 18 | })(window); -------------------------------------------------------------------------------- /src/effects/bloom.js: -------------------------------------------------------------------------------- 1 | (function (w) { 2 | 3 | var Bloom = function (element) { 4 | this.element = element; 5 | this.filter = new PIXI.filters.BloomFilter(); 6 | this.element.sprite.filters = (this.element.sprite.filters || []).concat(this.filter); 7 | } 8 | 9 | var p = Bloom.prototype; 10 | 11 | p.destroy = function () { 12 | var filterIndex = this.element.sprite.filters.indexOf(this.filter); 13 | this.element.sprite.filters = this.element.sprite.filters.splice(filterIndex, 1); 14 | } 15 | 16 | w.HTMLGL.effects = w.HTMLGL.effects || {}; 17 | w.HTMLGL.effects.bloom = Bloom; 18 | })(window); -------------------------------------------------------------------------------- /src/effects/diagonal-blur.js: -------------------------------------------------------------------------------- 1 | (function (w) { 2 | 3 | var DiagonalBlur = function (element) { 4 | this.element = element; 5 | this.filter = new PIXI.filters.BlurDirFilter(2, 2); 6 | this.filter.passes = 2; 7 | this.filter.blur = 3; 8 | this.element.sprite.filters = (this.element.sprite.filters || []).concat(this.filter); 9 | } 10 | 11 | var p = DiagonalBlur.prototype; 12 | 13 | p.destroy = function () { 14 | var filterIndex = this.element.sprite.filters.indexOf(this.filter); 15 | this.element.sprite.filters = this.element.sprite.filters.splice(filterIndex, 1); 16 | } 17 | 18 | w.HTMLGL.effects = w.HTMLGL.effects || {}; 19 | w.HTMLGL.effects.diagonalblur = DiagonalBlur; 20 | })(window); -------------------------------------------------------------------------------- /src/effects/dotscreen.js: -------------------------------------------------------------------------------- 1 | (function (w) { 2 | 3 | var DotScreen = function (element) { 4 | this.element = element; 5 | this.filter = new PIXI.filters.DotScreenFilter(); 6 | this.filter.scale = parseInt(this.element.getAttribute('dotScreenScale')) || 1; 7 | this.filter.angle = parseInt(this.element.getAttribute('dotScreenAngle')) || 1; 8 | this.element.sprite.filters = (this.element.sprite.filters || []).concat(this.filter); 9 | } 10 | 11 | var p = DotScreen.prototype; 12 | 13 | p.destroy = function () { 14 | var filterIndex = this.element.sprite.filters.indexOf(this.filter); 15 | this.element.sprite.filters = this.element.sprite.filters.splice(filterIndex, 1); 16 | } 17 | 18 | w.HTMLGL.effects = w.HTMLGL.effects || {}; 19 | w.HTMLGL.effects.dotscreen = DotScreen; 20 | })(window); -------------------------------------------------------------------------------- /src/effects/invert.js: -------------------------------------------------------------------------------- 1 | (function (w) { 2 | 3 | var Invert = function (element) { 4 | this.element = element; 5 | this.filter = new PIXI.filters.InvertFilter(); 6 | this.element.sprite.filters = (this.element.sprite.filters || []).concat(this.filter); 7 | } 8 | 9 | var p = Invert.prototype; 10 | 11 | p.destroy = function () { 12 | var filterIndex = this.element.sprite.filters.indexOf(this.filter); 13 | this.element.sprite.filters = this.element.sprite.filters.splice(filterIndex, 1); 14 | } 15 | 16 | w.HTMLGL.effects = w.HTMLGL.effects || {}; 17 | w.HTMLGL.effects.invert = Invert; 18 | })(window); -------------------------------------------------------------------------------- /src/effects/noise.js: -------------------------------------------------------------------------------- 1 | (function (w) { 2 | 3 | var Noise = function (element) { 4 | this.element = element; 5 | this.filter = new PIXI.filters.NoiseFilter(); 6 | this.element.sprite.filters = (this.element.sprite.filters || []).concat(this.filter); 7 | } 8 | 9 | var p = Noise.prototype; 10 | 11 | p.destroy = function () { 12 | var filterIndex = this.element.sprite.filters.indexOf(this.filter); 13 | this.element.sprite.filters = this.element.sprite.filters.splice(filterIndex, 1); 14 | } 15 | 16 | w.HTMLGL.effects = w.HTMLGL.effects || {}; 17 | w.HTMLGL.effects.noise = Noise; 18 | })(window); -------------------------------------------------------------------------------- /src/effects/pixelate.js: -------------------------------------------------------------------------------- 1 | (function (w) { 2 | 3 | var Pixelate = function (element) { 4 | this.element = element; 5 | this.filter = new PIXI.filters.PixelateFilter(); 6 | this.filter.size.x = parseInt(this.element.getAttribute('pixelSizeX')) || 2; 7 | this.filter.size.y = parseInt(this.element.getAttribute('pixelSizeY')) || 2; 8 | this.element.sprite.filters = (this.element.sprite.filters || []).concat(this.filter); 9 | } 10 | 11 | var p = Pixelate.prototype; 12 | 13 | p.destroy = function () { 14 | var filterIndex = this.element.sprite.filters.indexOf(this.filter); 15 | this.element.sprite.filters = this.element.sprite.filters.splice(filterIndex, 1); 16 | } 17 | 18 | w.HTMLGL.effects = w.HTMLGL.effects || {}; 19 | w.HTMLGL.effects.pixelate = Pixelate; 20 | })(window); -------------------------------------------------------------------------------- /src/effects/rgbsplit.js: -------------------------------------------------------------------------------- 1 | (function (w) { 2 | 3 | var RGBSplit = function (element) { 4 | this.element = element; 5 | this.filter = new PIXI.filters.RGBSplitFilter(); 6 | this.element.sprite.filters = (this.element.sprite.filters || []).concat(this.filter); 7 | } 8 | 9 | var p = RGBSplit.prototype; 10 | 11 | p.destroy = function () { 12 | var filterIndex = this.element.sprite.filters.indexOf(this.filter); 13 | this.element.sprite.filters = this.element.sprite.filters.splice(filterIndex, 1); 14 | } 15 | 16 | w.HTMLGL.effects = w.HTMLGL.effects || {}; 17 | w.HTMLGL.effects.rgbsplit = RGBSplit; 18 | })(window); -------------------------------------------------------------------------------- /src/effects/twist.js: -------------------------------------------------------------------------------- 1 | (function (w) { 2 | 3 | var Twist = function (element) { 4 | this.element = element; 5 | this.filter = new PIXI.filters.TwistFilter(); 6 | this.filter.radius = parseInt(this.element.getAttribute('twistRadius')) || 0.5; 7 | this.filter.angle = parseInt(this.element.getAttribute('twistAngle')) || 5; 8 | this.element.sprite.filters = (this.element.sprite.filters || []).concat(this.filter); 9 | } 10 | 11 | var p = Twist.prototype; 12 | 13 | p.destroy = function () { 14 | var filterIndex = this.element.sprite.filters.indexOf(this.filter); 15 | this.element.sprite.filters = this.element.sprite.filters.splice(filterIndex, 1); 16 | } 17 | 18 | w.HTMLGL.effects = w.HTMLGL.effects || {}; 19 | w.HTMLGL.effects.twist = Twist; 20 | })(window); -------------------------------------------------------------------------------- /src/gl-context.js: -------------------------------------------------------------------------------- 1 | /* 2 | * GLContext is a part of HTML GL library describing rendering context 3 | * Copyright (c) 2015 pixelscommander.com 4 | * Distributed under MIT license 5 | * http://htmlgl.com 6 | * */ 7 | 8 | (function (w) { 9 | //Defining global namespace with respect if exists 10 | HTMLGL = w.HTMLGL = w.HTMLGL || {}; 11 | 12 | //Defining it`s properties 13 | HTMLGL.JQ_PLUGIN_NAME = 'htmlgl'; 14 | HTMLGL.CUSTOM_ELEMENT_TAG_NAME = 'html-gl'; 15 | HTMLGL.READY_EVENT = 'htmlglReady'; 16 | HTMLGL.context = undefined; 17 | HTMLGL.stage = undefined; 18 | HTMLGL.renderer = undefined; 19 | HTMLGL.elements = []; 20 | HTMLGL.pixelRatio = null; 21 | HTMLGL.oldPixelRatio = null; 22 | HTMLGL.enabled = true; 23 | 24 | //Cache for window`s scroll position, filled in by updateScrollPosition 25 | HTMLGL.scrollX = 0; 26 | HTMLGL.scrollY = 0; 27 | 28 | var GLContext = function () { 29 | w.HTMLGL.context = this; 30 | 31 | this.createStage(); //Creating stage before showing it 32 | this.updateScrollPosition(); //Initialize scroll position for first time 33 | this.initListeners(); 34 | this.elementResolver = new w.HTMLGL.GLElementResolver(this); 35 | 36 | //Wait for DOMContentLoaded and initialize viewer then 37 | if (!document.body) { 38 | document.addEventListener("DOMContentLoaded", this.initViewer.bind(this)); 39 | } else { 40 | this.initViewer(); 41 | } 42 | } 43 | 44 | var p = GLContext.prototype; 45 | 46 | p.initViewer = function () { 47 | this.createViewer(); 48 | this.resizeViewer(); 49 | this.appendViewer(); 50 | } 51 | 52 | p.createViewer = function () { 53 | w.HTMLGL.renderer = this.renderer = PIXI.autoDetectRenderer(0, 0, {transparent: true}); 54 | this.renderer.view.style.position = 'fixed'; 55 | this.renderer.view.style.top = '0px'; 56 | this.renderer.view.style.left = '0px'; 57 | this.renderer.view.style['pointer-events'] = 'none'; 58 | this.renderer.view.style['pointerEvents'] = 'none'; 59 | } 60 | 61 | p.appendViewer = function () { 62 | document.body.appendChild(this.renderer.view); 63 | requestAnimationFrame(this.redrawStage.bind(this)); 64 | } 65 | 66 | p.resizeViewer = function () { 67 | var self = this, 68 | width = w.innerWidth, 69 | height = w.innerHeight; 70 | 71 | //Update pixelRatio since could be resized on different screen with different ratio 72 | HTMLGL.pixelRatio = w.HTMLGL.getPixelRatio(); 73 | 74 | console.log(HTMLGL.pixelRatio); 75 | 76 | width = width * HTMLGL.pixelRatio; 77 | height = height * HTMLGL.pixelRatio; 78 | 79 | if (HTMLGL.pixelRatio !== HTMLGL.oldPixelRatio) { 80 | this.disable(); 81 | this.updateTextures().then(function(){ 82 | self.updateScrollPosition(); 83 | self.updateElementsPositions(); 84 | 85 | var rendererScale = 1 / HTMLGL.pixelRatio; 86 | self.renderer.view.style.transformOrigin = '0 0'; 87 | self.renderer.view.style.webkitTransformOrigin = '0 0'; 88 | self.renderer.view.style.transform = 'scaleX(' + rendererScale + ') scaleY(' + rendererScale + ')'; 89 | self.renderer.view.style.webkitTransform = 'scaleX(' + rendererScale + ') scaleY(' + rendererScale + ')'; 90 | self.renderer.resize(width, height); 91 | 92 | w.HTMLGL.renderer.render(w.HTMLGL.stage); 93 | }); 94 | } else { 95 | if (this.renderer.view.parentNode) { //No need to update textures when is not mounted yet 96 | this.updateTextures(); 97 | } 98 | this.updateElementsPositions(); 99 | this.markStageAsChanged(); 100 | } 101 | 102 | HTMLGL.oldPixelRatio = HTMLGL.pixelRatio; 103 | } 104 | 105 | p.initListeners = function () { 106 | //window listeners 107 | w.addEventListener('scroll', this.updateScrollPosition.bind(this)); 108 | w.addEventListener('resize', w.HTMLGL.util.debounce(this.resizeViewer, 500).bind(this)); 109 | w.addEventListener('resize', this.updateElementsPositions.bind(this)); 110 | 111 | //document listeners - mouse and touch events 112 | document.addEventListener('click', this.onMouseEvent.bind(this), true); 113 | document.addEventListener('mousemove', this.onMouseEvent.bind(this), true); 114 | document.addEventListener('mouseup', this.onMouseEvent.bind(this), true); 115 | document.addEventListener('mousedown', this.onMouseEvent.bind(this), true); 116 | document.addEventListener('touchstart', this.onMouseEvent.bind(this)); 117 | document.addEventListener('touchend', this.onMouseEvent.bind(this)); 118 | } 119 | 120 | p.updateScrollPosition = function () { 121 | var scrollOffset = {}; 122 | 123 | if (window.pageYOffset != undefined) { 124 | scrollOffset = { 125 | left: pageXOffset, 126 | top: pageYOffset 127 | }; 128 | } else { 129 | var sx, sy, d = document, r = d.documentElement, b = d.body; 130 | sx = r.scrollLeft || b.scrollLeft || 0; 131 | sy = r.scrollTop || b.scrollTop || 0; 132 | scrollOffset = { 133 | left: sx, 134 | top: sy 135 | }; 136 | } 137 | 138 | this.document.x = -scrollOffset.left * HTMLGL.pixelRatio; 139 | this.document.y = -scrollOffset.top * HTMLGL.pixelRatio; 140 | 141 | w.HTMLGL.scrollX = scrollOffset.left; 142 | w.HTMLGL.scrollY = scrollOffset.top; 143 | 144 | this.markStageAsChanged(); 145 | } 146 | 147 | p.createStage = function () { 148 | w.HTMLGL.stage = this.stage = new PIXI.Stage(0xFFFFFF); 149 | w.HTMLGL.document = this.document = new PIXI.DisplayObjectContainer(); 150 | this.stage.addChild(w.HTMLGL.document); 151 | } 152 | 153 | //Avoiding function.bind() for performance and memory consuming reasons 154 | p.redrawStage = function () { 155 | if (w.HTMLGL.stage.changed && w.HTMLGL.renderer && w.HTMLGL.enabled) { 156 | w.HTMLGL.renderer.render(w.HTMLGL.stage); 157 | w.HTMLGL.stage.changed = false; 158 | } 159 | } 160 | 161 | p.updateTextures = function () { 162 | var updatePromises = []; 163 | 164 | w.HTMLGL.elements.forEach(function (element) { 165 | updatePromises.push(element.updateTexture()); 166 | }); 167 | 168 | return Promise.all(updatePromises); 169 | } 170 | 171 | p.initElements = function () { 172 | w.HTMLGL.elements.forEach(function (element) { 173 | element.init(); 174 | }); 175 | } 176 | 177 | p.updateElementsPositions = function () { 178 | w.HTMLGL.elements.forEach(function (element) { 179 | element.updateBoundingRect(); 180 | element.updatePivot(); 181 | element.updateSpriteTransform(); 182 | }); 183 | } 184 | 185 | p.onMouseEvent = function (event) { 186 | var x = event.x || event.pageX, 187 | y = event.y || event.pageY, 188 | //Finding element under mouse position 189 | element = event.dispatcher !== 'html-gl' ? this.elementResolver.getElementByCoordinates(x, y) : null; 190 | 191 | //Emit event if there is an element under mouse position 192 | element ? w.HTMLGL.util.emitEvent(element, event) : null; 193 | } 194 | 195 | //We would like to rerender if something changed, otherwise stand by 196 | p.markStageAsChanged = function () { 197 | if (w.HTMLGL.stage && !w.HTMLGL.stage.changed) { 198 | requestAnimationFrame(this.redrawStage); 199 | w.HTMLGL.stage.changed = true; 200 | } 201 | } 202 | 203 | p.disable = function () { 204 | w.HTMLGL.enabled = true; 205 | } 206 | 207 | p.enable = function () { 208 | w.HTMLGL.enabled = false; 209 | } 210 | 211 | w.HTMLGL.getPixelRatio = function() { 212 | return window.devicePixelRatio || 1; 213 | } 214 | 215 | w.HTMLGL.pixelRatio = w.HTMLGL.getPixelRatio(); 216 | 217 | w.HTMLGL.GLContext = GLContext; 218 | new GLContext(); 219 | })(window); -------------------------------------------------------------------------------- /src/gl-effects-manager.js: -------------------------------------------------------------------------------- 1 | /* 2 | * GLEffectsManager is a part of HTML GL library for applying effects based on tag attributes 3 | * Copyright (c) 2015 pixelscommander.com 4 | * Distributed under MIT license 5 | * http://htmlgl.com 6 | * */ 7 | 8 | (function (w) { 9 | var GLEffectsManager = function (element) { 10 | this.element = element; 11 | this.filters = {}; 12 | this.initObserver(); 13 | this.updateFilters(); 14 | } 15 | 16 | var p = GLEffectsManager.prototype; 17 | 18 | p.initObserver = function () { 19 | var self = this, 20 | config = { 21 | attributes: true, 22 | attributeFilter: ['effects'] 23 | }; 24 | 25 | this.observer = this.observer || new MutationObserver(self.updateFilters.bind(this)); 26 | 27 | this.observer.observe(this.element, config); 28 | } 29 | 30 | p.updateFilters = function () { 31 | var attributeValue = this.element.getAttribute('effects') || '', 32 | effectsNamesArray = attributeValue.split(' '); 33 | 34 | this.addFiltersFromAttributes(effectsNamesArray); 35 | this.cleanFiltersFromAttributes(effectsNamesArray); 36 | } 37 | 38 | p.addFiltersFromAttributes = function (effectsNamesArray) { 39 | var self = this; 40 | effectsNamesArray.forEach(function (effectName) { 41 | if (HTMLGL.effects[effectName]) { 42 | self.filters[effectName] = self.filters[effectName] || new HTMLGL.effects[effectName](self.element); 43 | } 44 | }); 45 | } 46 | 47 | p.cleanFiltersFromAttributes = function (effectsNamesArray) { 48 | var self = this; 49 | Object.keys(this.filters).forEach(function (effectName) { 50 | if (effectsNamesArray.indexOf(effectName) === -1 && self.filters[effectName]) { 51 | self.filters[effectName].destroy(); 52 | self.filters[effectName] = null; 53 | } 54 | }); 55 | } 56 | 57 | w.HTMLGL.GLEffectsManager = GLEffectsManager; 58 | 59 | //Reinitialize effects on elements 60 | w.HTMLGL.elements.forEach(function (element) { 61 | element.initEffects(); 62 | }); 63 | })(window); -------------------------------------------------------------------------------- /src/gl-element-resolver.js: -------------------------------------------------------------------------------- 1 | /* 2 | * GLElementResolver is a part of HTML GL library for resolving elements by coordinates given 3 | * Copyright (c) 2015 pixelscommander.com 4 | * Distributed under MIT license 5 | * http://htmlgl.com 6 | * */ 7 | 8 | (function (w) { 9 | var GLElementResolver = function (context) { 10 | } 11 | 12 | var p = GLElementResolver.prototype; 13 | 14 | p.getElementByCoordinates = function (x, y) { 15 | var element, 16 | self = this, 17 | result; 18 | 19 | w.HTMLGL.elements.forEach(function (glelement) { 20 | element = document.elementFromPoint(x - parseInt(glelement.transformObject.translateX || 0), y - parseInt(glelement.transformObject.translateY || 0)) 21 | if (self.isChildOf(element, glelement)) { 22 | result = element; 23 | } 24 | }); 25 | 26 | return result; 27 | } 28 | 29 | p.isChildOf = function (child, parent) { 30 | var current = child; 31 | while (current) { 32 | if (current === parent) return true; 33 | current = current.parentNode; 34 | } 35 | return false; 36 | } 37 | 38 | w.HTMLGL.GLElementResolver = GLElementResolver; 39 | })(window); -------------------------------------------------------------------------------- /src/gl-element.js: -------------------------------------------------------------------------------- 1 | /* 2 | * GLElement is a part of HTML GL library describing single HTML-GL element 3 | * Copyright (c) 2015 pixelscommander.com 4 | * Distributed under MIT license 5 | * http://htmlgl.com 6 | * 7 | * Please, take into account: 8 | * - updateTexture is expensive 9 | * - updateSpriteTransform is cheap 10 | * */ 11 | 12 | (function (w) { 13 | var p = Object.create(HTMLElement.prototype), 14 | style = document.createElement('style'); 15 | 16 | //Default styling for html-gl elements 17 | style.innerHTML = HTMLGL.CUSTOM_ELEMENT_TAG_NAME + ' { display: inline-block; transform: translateZ(0);}'; 18 | document.head.appendChild(style); 19 | 20 | p.createdCallback = function () { 21 | //Checking is node created inside of html2canvas virtual window or not. We do not need WebGL there 22 | var currentNode = this, 23 | isMounted = false; 24 | 25 | while (currentNode = currentNode.parentNode) { 26 | if (currentNode.tagName === 'BODY') { 27 | isMounted = true; 28 | } 29 | } 30 | 31 | var isInsideHtml2Canvas = !isMounted || (this.baseURI === undefined || this.baseURI === '' || this.baseURI === null); 32 | 33 | if (!isInsideHtml2Canvas) { 34 | HTMLGL.elements.push(this); 35 | //Needed to determine is element WebGL rendered or not relying on tag name 36 | this.setAttribute('renderer', 'webgl'); 37 | this.renderer = 'webgl'; 38 | 39 | this.transformObject = {}; 40 | this.boundingRect = {}; 41 | this.image = {}; 42 | this.sprite = new PIXI.Sprite(); 43 | this.texture = {}; 44 | 45 | this.halfWidth = 0; 46 | this.halfHeight = 0; 47 | 48 | this.observer = undefined; 49 | 50 | this.glChilds = []; 51 | this.glChildsReady = 0; 52 | this.glParent = this.getGlParent(); 53 | 54 | this.initEffects(); 55 | this.bindCallbacks(); 56 | this.transformProperty = this.style.transform !== undefined ? 'transform' : 'WebkitTransform'; 57 | this.init(); 58 | } 59 | } 60 | 61 | p.init = function () { 62 | this.notifyGlParent(); 63 | this.updateTexture(); 64 | this.initObservers(); 65 | this.patchStyleGLTransform(); 66 | } 67 | 68 | p.getGlParent = function () { 69 | var parent = this, 70 | tagName = HTMLGL.CUSTOM_ELEMENT_TAG_NAME.toUpperCase(); 71 | 72 | while (parent) { 73 | parent = parent.parentNode; 74 | 75 | if (parent && parent.tagName === tagName) { 76 | return parent; 77 | } else if (parent === w.document) { 78 | return null; 79 | } 80 | } 81 | } 82 | 83 | //Notify GL parent about one more HTML GL child in the tree 84 | p.notifyGlParent = function () { 85 | if (this.glParent) { 86 | this.glParent.addGlChild(this); 87 | } 88 | } 89 | 90 | p.addGlChild = function (child) { 91 | this.glChilds.push(child); 92 | } 93 | 94 | p.glChildReady = function () { 95 | this.glChildsReady++; 96 | this.dispatchReady(); 97 | } 98 | 99 | //If all my childs ready notify parent that I am 100 | p.dispatchReady = function () { 101 | if (this.isReady()) { 102 | var event = new Event(HTMLGL.READY_EVENT); 103 | this.dispatchEvent(event); 104 | 105 | if (this.glParent) { 106 | //Inform parent 107 | this.glParent.glChildReady(); 108 | } 109 | } 110 | } 111 | 112 | p.isReady = function () { 113 | return (this.glChilds.length - this.glChildsReady === 0) && this.haveSprite(); 114 | } 115 | 116 | //Updating bounds, waiting for all images to load and calling rasterization then 117 | p.updateTexture = function () { 118 | var self = this; 119 | self.updateBoundingRect(); 120 | 121 | return new Promise(function(resolve, reject){ 122 | self.image = html2canvas(self, { 123 | width: self.boundingRect.width * HTMLGL.pixelRatio, 124 | height: self.boundingRect.height * HTMLGL.pixelRatio 125 | }).then(function(textureCanvas){ 126 | self.applyNewTexture(textureCanvas); 127 | resolve(); 128 | }); 129 | }); 130 | } 131 | 132 | //Recreating texture from canvas given after calling updateTexture 133 | p.applyNewTexture = function (textureCanvas) { 134 | this.image = textureCanvas; 135 | this.texture = PIXI.Texture.fromCanvas(this.image); 136 | 137 | if (!this.haveSprite()) { 138 | this.initSprite(this.texture); 139 | } else { 140 | this.sprite.texture.destroy(); 141 | this.sprite.texture = this.texture; 142 | } 143 | 144 | this.updatePivot(); 145 | this.updateSpriteTransform(); 146 | 147 | HTMLGL.context.markStageAsChanged(); 148 | } 149 | 150 | //Just updates WebGL representation coordinates and transformation 151 | p.updateSpriteTransform = function () { 152 | 153 | //TODO add 3d rotation support 154 | var translateX = parseFloat(this.transformObject.translateX) || 0, 155 | translateY = parseFloat(this.transformObject.translateY) || 0, 156 | scaleX = parseFloat(this.transformObject.scaleX) || 1, 157 | scaleY = parseFloat(this.transformObject.scaleY) || 1, 158 | rotate = (parseFloat(this.transformObject.rotateZ) / 180) * Math.PI || 0; 159 | 160 | if (this.sprite && this.sprite.position) { 161 | this.sprite.position.x = (this.boundingRect.left + translateX) * HTMLGL.pixelRatio + this.halfWidth; 162 | this.sprite.position.y = (this.boundingRect.top + translateY) * HTMLGL.pixelRatio + this.halfHeight; 163 | this.sprite.scale.x = scaleX; 164 | this.sprite.scale.y = scaleY; 165 | this.sprite.rotation = rotate; 166 | } 167 | 168 | HTMLGL.context.markStageAsChanged(); 169 | } 170 | 171 | //Getting bounding rect with respect to current scroll position 172 | p.updateBoundingRect = function () { 173 | var boundingRect = this.getBoundingClientRect(); 174 | 175 | this.boundingRect = { 176 | left: boundingRect.left, 177 | right: boundingRect.right, 178 | top: boundingRect.top, 179 | bottom: boundingRect.bottom, 180 | width: boundingRect.width, 181 | height: boundingRect.height, 182 | }; 183 | 184 | if (this.glParent && this.glParent.boundingRect) { 185 | this.boundingRect.left -= this.glParent.boundingRect.left; 186 | this.boundingRect.top -= this.glParent.boundingRect.top; 187 | } 188 | 189 | this.boundingRect.left = HTMLGL.scrollX + parseFloat(this.boundingRect.left); 190 | this.boundingRect.top = HTMLGL.scrollY + parseFloat(this.boundingRect.top); 191 | } 192 | 193 | //Correct pivot needed to rotate element around it`s center 194 | p.updatePivot = function () { 195 | this.halfWidth = this.sprite.width / 2; 196 | this.halfHeight = this.sprite.height / 2; 197 | this.sprite.pivot.x = this.halfWidth; 198 | this.sprite.pivot.y = this.halfHeight; 199 | } 200 | 201 | p.initSprite = function (texture) { 202 | var self = this, 203 | parentSprite = this.glParent && this.glParent.sprite || w.HTMLGL.document; 204 | 205 | this.sprite.texture = texture; 206 | parentSprite.addChild(this.sprite); 207 | 208 | setTimeout(function () { 209 | self.hideDOM(); 210 | //Notify parents that I am initialized 211 | self.dispatchReady(); 212 | }, 0); 213 | } 214 | 215 | p.initObservers = function () { 216 | //TODO Better heuristics for rerendering condition #2 217 | var self = this, 218 | config = { 219 | childList: true, 220 | characterData: true, 221 | subtree: true, 222 | attributes: true, 223 | attributeFilter: ['style'] 224 | }; 225 | 226 | this.observer = this.observer || new MutationObserver(function (mutations) { 227 | if (mutations[0].attributeName === 'style') { 228 | self.transformObject = self.getTransformObjectFromString(self.style[self.transformProperty]); 229 | self.updateSpriteTransform(); 230 | } else { 231 | self.updateTexture(); 232 | } 233 | }); 234 | 235 | this.observer.observe(this, config); 236 | } 237 | 238 | p.patchStyleGLTransform = function () { 239 | var self = this; 240 | self.styleGL = {}; 241 | 242 | HTMLGL.util.getterSetter(this.styleGL, this.transformProperty, function () { 243 | var result = ''; 244 | 245 | for (var transformPropertyName in self.transformObject) { 246 | var transformPropertyValue = '(' + self.transformObject[transformPropertyName] + ') '; 247 | result += transformPropertyName + transformPropertyValue; 248 | } 249 | 250 | return result; 251 | }, 252 | function (value) { 253 | self.transformObject = self.getTransformObjectFromString(value); 254 | self.updateSpriteTransform(); 255 | } 256 | ) 257 | } 258 | 259 | p.getTransformObjectFromString = function (transformString) { 260 | return (transformString.match(/([\w]+)\(([^\)]+)\)/g) || []) 261 | .map(function (it) { 262 | return it.replace(/\)$/, "").split(/\(/) 263 | }) 264 | .reduce(function (m, it) { 265 | return m[it[0]] = it[1], m 266 | }, {}); 267 | } 268 | 269 | p.hideDOM = function () { 270 | this.style.opacity = 0; 271 | } 272 | 273 | p.bindCallbacks = function () { 274 | this.applyNewTexture = this.applyNewTexture.bind(this); 275 | } 276 | 277 | p.haveSprite = function () { 278 | return this.sprite.stage; 279 | } 280 | 281 | p.initEffects = function () { 282 | if (HTMLGL.GLEffectsManager) { 283 | this.effectsManager = new HTMLGL.GLEffectsManager(this); 284 | } 285 | } 286 | 287 | HTMLGL.GLElement = document.registerElement(HTMLGL.CUSTOM_ELEMENT_TAG_NAME, { 288 | prototype: p 289 | }) 290 | 291 | HTMLGL.GLElement.createFromNode = function (node) { 292 | //Extending node with GLElement methods 293 | for (var i in p) { 294 | if (p.hasOwnProperty(i)) { 295 | node[i] = p[i]; 296 | } 297 | } 298 | 299 | p.createdCallback.apply(node); 300 | return node; 301 | } 302 | 303 | //Wrap to jQuery plugin 304 | if (w.jQuery !== undefined) { 305 | jQuery[HTMLGL.JQ_PLUGIN_NAME] = {}; 306 | jQuery[HTMLGL.JQ_PLUGIN_NAME].elements = []; 307 | 308 | jQuery.fn[HTMLGL.JQ_PLUGIN_NAME] = function () { 309 | return this.each(function () { 310 | if (!jQuery.data(this, 'plugin_' + HTMLGL.JQ_PLUGIN_NAME)) { 311 | var htmlGLobj = HTMLGL.GLElement.createFromNode(this); 312 | jQuery.data(this, 'plugin_' + HTMLGL.JQ_PLUGIN_NAME, htmlGLobj); 313 | jQuery[HTMLGL.JQ_PLUGIN_NAME].elements.push(htmlGLobj); 314 | } 315 | }); 316 | }; 317 | } 318 | })(window); -------------------------------------------------------------------------------- /src/images-loaded.js: -------------------------------------------------------------------------------- 1 | /* 2 | * ImagesLoaded is a part of HTML GL library which is a robust solution for determining "are images loaded or not?" 3 | * Copyright (c) 2015 pixelscommander.com 4 | * Distributed under MIT license 5 | * http://htmlgl.com 6 | * */ 7 | 8 | (function (w) { 9 | var ImagesLoaded = function (element, callback) { 10 | this.element = element; 11 | this.images = this.element.querySelectorAll('img'); 12 | this.callback = callback; 13 | this.imagesLoaded = this.getImagesLoaded(); 14 | 15 | if (this.images.length === this.imagesLoaded) { 16 | this.onImageLoaded(); 17 | } else { 18 | this.addListeners(); 19 | } 20 | } 21 | 22 | var p = ImagesLoaded.prototype; 23 | 24 | p.getImagesLoaded = function () { 25 | var result = 0; 26 | for (var i = 0; i < this.images.length; i++) { 27 | if (this.images[i].complete === true) { 28 | result++; 29 | } 30 | } 31 | return result; 32 | } 33 | 34 | p.addListeners = function () { 35 | var result = 0; 36 | for (var i = 0; i < this.images.length; i++) { 37 | if (this.images[i].complete !== true) { 38 | this.images[i].addEventListener('load', this.onImageLoaded.bind(this)); 39 | this.images[i].addEventListener('error', this.onImageLoaded.bind(this)); 40 | } 41 | } 42 | return result; 43 | } 44 | 45 | p.onImageLoaded = function () { 46 | this.imagesLoaded++; 47 | if (this.images.length - this.imagesLoaded <= 0) { 48 | setTimeout(this.callback, 0); 49 | } 50 | } 51 | 52 | w.HTMLGL.ImagesLoaded = ImagesLoaded; 53 | })(window); -------------------------------------------------------------------------------- /src/util.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Util is a part of HTML GL library 3 | * Copyright (c) 2015 pixelscommander.com 4 | * Distributed under MIT license 5 | * http://htmlgl.com 6 | * */ 7 | 8 | (function(w){ 9 | w.HTMLGL = w.HTMLGL || {}; 10 | w.HTMLGL.util = { 11 | getterSetter: function (variableParent, variableName, getterFunction, setterFunction) { 12 | if (Object.defineProperty) { 13 | Object.defineProperty(variableParent, variableName, { 14 | get: getterFunction, 15 | set: setterFunction 16 | }); 17 | } 18 | else if (document.__defineGetter__) { 19 | variableParent.__defineGetter__(variableName, getterFunction); 20 | variableParent.__defineSetter__(variableName, setterFunction); 21 | } 22 | 23 | variableParent["get" + variableName] = getterFunction; 24 | variableParent["set" + variableName] = setterFunction; 25 | }, 26 | emitEvent: function (element, event) { 27 | var newEvent = new MouseEvent(event.type, event); 28 | newEvent.dispatcher = 'html-gl'; 29 | event.stopPropagation(); 30 | element.dispatchEvent(newEvent); 31 | }, 32 | debounce: function(func, wait, immediate) { 33 | var timeout; 34 | return function() { 35 | var context = this, args = arguments; 36 | var later = function() { 37 | timeout = null; 38 | if (!immediate) func.apply(context, args); 39 | }; 40 | var callNow = immediate && !timeout; 41 | clearTimeout(timeout); 42 | timeout = setTimeout(later, wait); 43 | if (callNow) func.apply(context, args); 44 | }; 45 | } 46 | } 47 | })(window); --------------------------------------------------------------------------------