141 |
147 |
148 |
149 |
153 |
154 |
155 |
156 |
157 |
174 |
175 |
176 |
--------------------------------------------------------------------------------
/examples/stress/index.css:
--------------------------------------------------------------------------------
1 | .tile {
2 | position: absolute;
3 | top: 50%;
4 | left: 50%;
5 | --x: calc((var(--j, 0) - 3)*5em);
6 | --y: calc((var(--i, 0) - 3)*5em);
7 | --x1: calc(1.41421*var(--x));
8 | --y1: calc(1.41421*var(--y));
9 | transform: translate(var(--x), var(--y));
10 | animation: s 1.5s cubic-bezier(0.35, 0, 0.8, 1) infinite alternate;
11 | }
12 | .tile:nth-child(n + 8) {
13 | --i: 1;
14 | }
15 | .tile:nth-child(7n + 2) {
16 | --j: 1;
17 | }
18 | .tile:nth-child(n + 15) {
19 | --i: 2;
20 | }
21 | .tile:nth-child(7n + 3) {
22 | --j: 2;
23 | }
24 | .tile:nth-child(n + 22) {
25 | --i: 3;
26 | }
27 | .tile:nth-child(7n + 4) {
28 | --j: 3;
29 | }
30 | .tile:nth-child(n + 29) {
31 | --i: 4;
32 | }
33 | .tile:nth-child(7n + 5) {
34 | --j: 4;
35 | }
36 | .tile:nth-child(n + 36) {
37 | --i: 5;
38 | }
39 | .tile:nth-child(7n + 6) {
40 | --j: 5;
41 | }
42 | .tile:nth-child(n + 43) {
43 | --i: 6;
44 | }
45 | .tile:nth-child(7n + 7) {
46 | --j: 6;
47 | }
48 | .tile:after {
49 | position: absolute;
50 | margin: -2.5em;
51 | width: 5em;
52 | height: 5em;
53 | box-shadow: inset 0 0 0 1px;
54 | background: dimgray;
55 | animation: r 3s ease-in-out infinite;
56 | content: "";
57 | }
58 | .tile:nth-child(2n):after {
59 | animation-direction: reverse;
60 | }
61 |
62 | @keyframes s {
63 | to {
64 | transform: translate(var(--x1), var(--y1));
65 | }
66 | }
67 | @keyframes r {
68 | to {
69 | transform: rotate(90deg);
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/examples/stress/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 〠
142 |
143 |
146 | HELLO★
144 | A 145 |
18 |
19 |
20 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | A-Frame HTML Shader
31 | Basic 32 | 33 |
34 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * A shader to render HTML DOM Element
3 | * Inspired by @scenevr's `htmltexture-component`
4 | * @see https://github.com/scenevr/htmltexture-component
5 | */
6 |
7 |
8 | import html2canvas from './lib/html2canvas/core'
9 |
10 | if (typeof AFRAME === 'undefined') {
11 | throw 'Component attempted to register before AFRAME was available.'
12 | }
13 |
14 | /* get util from AFRAME */
15 | const { debug } = AFRAME.utils
16 | // debug.enable('shader:html:*')
17 | debug.enable('shader:html:warn')
18 | const warn = debug('shader:html:warn')
19 | const log = debug('shader:html:debug')
20 |
21 | /* create error message */
22 | function createError (err, target) {
23 | return { status: 'error', target: target, message: err, timestamp: Date.now() }
24 | }
25 |
26 |
27 | AFRAME.registerShader('html', {
28 |
29 | /**
30 | * For material component:
31 | * @see https://github.com/aframevr/aframe/blob/60d198ef8e2bfbc57a13511ae5fca7b62e01691b/src/components/material.js
32 | * For example of `registerShader`:
33 | * @see https://github.com/aframevr/aframe/blob/41a50cd5ac65e462120ecc2e5091f5daefe3bd1e/src/shaders/flat.js
34 | * For MeshBasicMaterial
35 | * @see http://threejs.org/docs/#Reference/Materials/MeshBasicMaterial
36 | */
37 |
38 | schema: {
39 |
40 | /* For material */
41 | color: { type: 'color' },
42 | fog: { default: true },
43 |
44 | /* For texuture */
45 | target: { default: null },
46 | debug: { default: null },
47 | fps: { type: 'number', default: 0 },
48 | width: { default: null },
49 | height: { default: null },
50 | ratio: { default: null },
51 |
52 | },
53 |
54 | /**
55 | * Initialize material. Called once.
56 | * @protected
57 | */
58 | init (data) {
59 | log('init', data)
60 | this.__cnv = document.createElement('canvas')
61 | this.__cnv.width = 2
62 | this.__cnv.height = 2
63 | this.__ctx = this.__cnv.getContext('2d')
64 | this.__texture = new THREE.Texture(this.__cnv)
65 | this.__reset()
66 | this.material = new THREE.MeshBasicMaterial({ map: this.__texture })
67 | this.el.sceneEl.addBehavior(this)
68 | return this.material
69 | },
70 |
71 | /**
72 | * Update or create material.
73 | * @param {object|null} oldData
74 | */
75 | update (oldData) {
76 | log('update', oldData)
77 | this.__updateMaterial(oldData)
78 | this.__updateTexture(oldData)
79 | return this.material
80 | },
81 |
82 | /**
83 | * Called on each scene tick.
84 | * @protected
85 | */
86 | tick (t) {
87 |
88 | if (this.__paused || !this.__target || !this.__nextTime) { return }
89 |
90 | const now = Date.now()
91 | if (now > this.__nextTime) {
92 | this.__render()
93 | }
94 |
95 | },
96 |
97 | /*================================
98 | = material =
99 | ================================*/
100 |
101 | /**
102 | * Updating existing material.
103 | * @param {object} data - Material component data.
104 | */
105 | __updateMaterial (data) {
106 | const { material } = this
107 | const newData = this.__getMaterialData(data)
108 | Object.keys(newData).forEach(key => {
109 | material[key] = newData[key]
110 | })
111 | },
112 |
113 |
114 | /**
115 | * Builds and normalize material data, normalizing stuff along the way.
116 | * @param {Object} data - Material data.
117 | * @return {Object} data - Processed material data.
118 | */
119 | __getMaterialData (data) {
120 | return {
121 | fog: data.fog,
122 | color: new THREE.Color(data.color),
123 | }
124 | },
125 |
126 |
127 | /*==============================
128 | = texure =
129 | ==============================*/
130 |
131 | /**
132 | * set texure
133 | * @private
134 | * @param {Object} data
135 | * @property {string} status - success / error
136 | * @property {string} target - target url
137 | * @property {DOM Element} targetEl - target
138 | * @property {Date} timestamp - created at the texure
139 | */
140 |
141 | __setTexure (data) {
142 | log('__setTexure', data)
143 | if (data.status === 'error') {
144 | warn(`Error: ${data.message}\ntarget: ${data.target}`)
145 | this.__reset()
146 | }
147 | else if (data.status === 'success' && data.target !== this.__textureSrc) {
148 | /* Texture added or changed */
149 | this.__ready(data)
150 | }
151 | },
152 |
153 | /**
154 | * Update or create texure.
155 | * @param {Object} data - Material component data.
156 | */
157 | __updateTexture (data) {
158 |
159 | const { target, fps, width, height, ratio } = data
160 | this.__width = width || this.schema.width.default
161 | this.__height = height || this.schema.height.default
162 |
163 | /* debug */
164 | const resetDebug = () => {
165 | if (this.__debugEl) {
166 | this.__debugEl.innerHTML = ''
167 | this.__debugEl = this.schema.debug.default
168 | }
169 | }
170 | if (data.debug) {
171 | const el = this.__validateAndGetQuerySelector(data.debug)
172 | if (el && !el.error) { this.__debugEl = el }
173 | else resetDebug()
174 | }
175 | else resetDebug()
176 |
177 | /* ratio */
178 | if(ratio && ratio === 'width' || ratio === 'height') {
179 | this.__ratio = ratio
180 | }
181 | else {
182 | this.__ratio = this.schema.ratio.default
183 | }
184 |
185 | /* fps */
186 | if (fps) {
187 | if (this.__fps > 0) {
188 | this.__fps = fps
189 | }
190 | else if (fps === -1) {
191 | /* render only once */
192 | this.__fps = this.schema.fps.default
193 | if (this.__target) {
194 | this.__render()
195 | }
196 | /* set attribute */
197 | const material = Object.assign({}, this.el.getAttribute('material'))
198 | delete material.fps
199 | this.el.setAttribute('material', material)
200 | }
201 | else {
202 | this.__fps = fps
203 | if (this.__target) {
204 | this.play()
205 | this.__render()
206 | }
207 | }
208 | }
209 | else {
210 | if (this.__fps > 0) {
211 | this.pause()
212 | }
213 | else {
214 | this.__fps = this.schema.fps.default
215 | }
216 | }
217 |
218 | /* target */
219 | if (target) {
220 | if (target === this.__target) { return }
221 | this.__target = target
222 | // return
223 | this.__validateSrc(target, this.__setTexure.bind(this))
224 | } else {
225 | /* Texture removed */
226 | this.__reset()
227 | }
228 | },
229 |
230 | /*=============================================
231 | = varidation for texure =
232 | =============================================*/
233 |
234 | /**
235 | * varidate src
236 | * @private
237 | * @param {string} target - dom selector
238 | * @param {Function} cb - callback
239 | */
240 | __validateSrc (target, cb) {
241 |
242 | let message
243 |
244 | /* check if target is a query selector */
245 | const el = this.__validateAndGetQuerySelector(target)
246 | if (!el || typeof el !== 'object') { return }
247 | if (el.error) {
248 | message = el.error
249 | }
250 | else {
251 | const tagName = el.tagName.toLowerCase()
252 | if (tagName === 'img' || tagName === 'video') {
253 | message = `For <${tagName}> element, please use \`shader:flat\``
254 | }
255 | else {
256 | cb({ status: 'success', target: target, targetEl: el, timestamp: Date.now() })
257 | }
258 | }
259 |
260 | /* if there is message, create error data */
261 | if (message) {
262 | const err = createError(message, target)
263 | cb(err)
264 | }
265 |
266 | },
267 |
268 | /**
269 | * Query and validate a query selector,
270 | *
271 | * @param {string} selector - DOM selector.
272 | * @return {object} Selected DOM element | error message object.
273 | */
274 | __validateAndGetQuerySelector (selector) {
275 | try {
276 | var el = document.querySelector(selector)
277 | if (!el) {
278 | return { error: 'No element was found matching the selector' }
279 | }
280 | return el
281 | } catch (e) { // Capture exception if it's not a valid selector.
282 | return { error: 'no valid selector' }
283 | }
284 | },
285 |
286 |
287 | /*================================
288 | = playback =
289 | ================================*/
290 |
291 | /**
292 | * Pause video
293 | * @public
294 | */
295 | pause () {
296 | log('pause')
297 | this.__paused = true
298 | this.__nextTime = null
299 | },
300 |
301 | /**
302 | * Play video
303 | * @public
304 | */
305 | play () {
306 | log('play')
307 | this.__paused = false
308 | },
309 |
310 | /**
311 | * Toggle playback. play if paused and pause if played.
312 | * @public
313 | */
314 |
315 | togglePlayback () {
316 | if (this.paused()) { this.play() }
317 | else { this.pause() }
318 |
319 | },
320 |
321 | /**
322 | * Return if the playback is paused.
323 | * @public
324 | * @return {boolean}
325 | */
326 | paused () {
327 | return this.__paused
328 | },
329 |
330 | /*==============================
331 | = canvas =
332 | ==============================*/
333 |
334 | /**
335 | * clear canvas
336 | * @private
337 | */
338 | __clearCanvas () {
339 | if (!this.__ctx || !this.__texture) { return }
340 | this.__ctx.clearRect(0, 0, this.__width, this.__height)
341 | this.__texture.needsUpdate = true
342 | },
343 |
344 | /**
345 | * draw
346 | * @private
347 | */
348 | __draw (canvas) {
349 | log('__draw')
350 | if (!this.__ctx || !this.__texture) { return }
351 | const ratio = canvas.width / canvas.height
352 | const cnvW = this.__cnv.width = THREE.Math.nearestPowerOfTwo(canvas.width)
353 | const cnvH = this.__cnv.height = THREE.Math.nearestPowerOfTwo(canvas.height)
354 | this.__ctx.drawImage(canvas, 0, 0, cnvW, cnvH)
355 | this.__texture.needsUpdate = true
356 | if (this.__ratio) {
357 | /* change size */
358 | const { width, height } = this.el.getObject3D('mesh').geometry.metadata.parameters
359 | this.el.setAttribute('geometry', Object.assign({}, this.el.getAttribute('geometry'), {
360 | width: (this.__ratio === 'width')? width : height * ratio,
361 | height: (this.__ratio === 'width')? width / ratio : height
362 | }))
363 | }
364 |
365 | /* append if debug element exists */
366 | if (this.__debugEl) {
367 | this.__debugEl.innerHTML = ''
368 | this.__debugEl.appendChild(canvas)
369 | }
370 |
371 | /* setup next tick */
372 | this.__setNextTick()
373 |
374 | },
375 |
376 | /**
377 | * render
378 | * @private
379 | */
380 | __render () {
381 | this.__nextTime = null
382 | if (!this.__targetEl) { return }
383 | const { width, height } = this.__targetEl.getBoundingClientRect()
384 | html2canvas(this.__targetEl, {
385 | background: undefined,
386 | width: this.__width || width,
387 | height: this.__height || height,
388 | onrendered: this.__draw.bind(this)
389 | })
390 | },
391 |
392 | /**
393 | * get next time to draw
394 | * @private
395 | */
396 | __setNextTick () {
397 | if (this.__fps > 0) {
398 | this.__nextTime = Date.now() + (1000 / this.__fps)
399 | }
400 | },
401 |
402 |
403 | /*============================
404 | = ready =
405 | ============================*/
406 |
407 | /**
408 | * setup html animation and play if autoplay is true
409 | * @private
410 | * @property {string} target - target url
411 | * @property {DOM Element} targetEl - target
412 | */
413 | __ready ({ target, targetEl }) {
414 | log('__ready')
415 | this.__target = target
416 | this.__targetEl = targetEl
417 | this.play()
418 | this.__render()
419 | },
420 |
421 |
422 |
423 | /*=============================
424 | = reset =
425 | =============================*/
426 |
427 | /**
428 | * @private
429 | */
430 |
431 | __reset () {
432 | this.pause()
433 | this.__clearCanvas()
434 | this.__target = null
435 | this.__targetEl = null
436 | this.__debugEl = null
437 | },
438 |
439 |
440 |
441 | })
442 |
443 |
--------------------------------------------------------------------------------
/lib/html2canvas/clone.js:
--------------------------------------------------------------------------------
1 | var log = require('./log');
2 |
3 | function restoreOwnerScroll(ownerDocument, x, y) {
4 | if (ownerDocument.defaultView && (x !== ownerDocument.defaultView.pageXOffset || y !== ownerDocument.defaultView.pageYOffset)) {
5 | ownerDocument.defaultView.scrollTo(x, y);
6 | }
7 | }
8 |
9 | function cloneCanvasContents(canvas, clonedCanvas) {
10 | try {
11 | if (clonedCanvas) {
12 | clonedCanvas.width = canvas.width;
13 | clonedCanvas.height = canvas.height;
14 | clonedCanvas.getContext("2d").putImageData(canvas.getContext("2d").getImageData(0, 0, canvas.width, canvas.height), 0, 0);
15 | }
16 | } catch(e) {
17 | log("Unable to copy canvas content from", canvas, e);
18 | }
19 | }
20 |
21 | function cloneNode(node, javascriptEnabled) {
22 | var clone = node.nodeType === 3 ? document.createTextNode(node.nodeValue) : node.cloneNode(false);
23 |
24 | var child = node.firstChild;
25 | while(child) {
26 | if (javascriptEnabled === true || child.nodeType !== 1 || child.nodeName !== 'SCRIPT') {
27 | clone.appendChild(cloneNode(child, javascriptEnabled));
28 | }
29 | child = child.nextSibling;
30 | }
31 |
32 | if (node.nodeType === 1) {
33 | clone._scrollTop = node.scrollTop;
34 | clone._scrollLeft = node.scrollLeft;
35 | if (node.nodeName === "CANVAS") {
36 | cloneCanvasContents(node, clone);
37 | } else if (node.nodeName === "TEXTAREA" || node.nodeName === "SELECT") {
38 | clone.value = node.value;
39 | }
40 | }
41 |
42 | return clone;
43 | }
44 |
45 | function initNode(node) {
46 | if (node.nodeType === 1) {
47 | node.scrollTop = node._scrollTop;
48 | node.scrollLeft = node._scrollLeft;
49 |
50 | var child = node.firstChild;
51 | while(child) {
52 | initNode(child);
53 | child = child.nextSibling;
54 | }
55 | }
56 | }
57 |
58 | module.exports = function(ownerDocument, containerDocument, width, height, options, x ,y) {
59 | var documentElement = cloneNode(ownerDocument.documentElement, options.javascriptEnabled);
60 | var container = containerDocument.createElement("iframe");
61 |
62 | container.className = "html2canvas-container";
63 | container.style.visibility = "hidden";
64 | container.style.position = "fixed";
65 | container.style.left = "-10000px";
66 | container.style.top = "0px";
67 | container.style.border = "0";
68 | container.width = width;
69 | container.height = height;
70 | container.scrolling = "no"; // ios won't scroll without it
71 | containerDocument.body.appendChild(container);
72 |
73 | return new Promise(function(resolve) {
74 | var documentClone = container.contentWindow.document;
75 |
76 | /* Chrome doesn't detect relative background-images assigned in inline
35 | Fork me on GitHub
36 |
37 |