pixelscommander / html-gl Goto Github PK
View Code? Open in Web Editor NEWGet as many FPS as you need and amazing effects by rendering HTML/CSS in WebGL
Get as many FPS as you need and amazing effects by rendering HTML/CSS in WebGL
Debounce resize event
Avoid visibility:hidden when not animating because it breaks DevTools inspector "click and select" feature.
Handle window resize
Does it support svg as well? Is there any demo with svg?
In addition to #37 I would love to see an explainer document on how does the library handles accessibility. Being able to replace the DOM visually doesn't really tell me if I can use the same accessibility tools and resources that I use in 2D
Render if stage changed only
Firefox do not have support for pointer-events and custom elements.
Safari do not have a support for custom elements also it miss native promises support
Nested HTML GL layers should be ignored when rendering HTML GL texture
Tried on Ubuntu 14.10, Chrome 41 and Firefox 36. Also on Mac OS X 10.9.5, Chrome 41.
htmlgl.com website demo fails in safari and ff
Create jQuery snippet
imagesLoaded fire twice when called on custom GLElement
I'm wondering if this is actually to be used in prod? Do you consider to work on accessibility for this? Replicating DOM inside of canvas
tag seems somewhat a good practice, better than nothing.
This is related to similar issue on react-canvas.
It'd just be rendering a 2x texture as well right?
Being a long-time web dev myself, I just wanted to try other browsers to see what happened.
I'm surprised and happy to say that some of the functionality works (background displacement), but the rest of the filters in your demo only applied to the background elements, so it looks like the original html elements are not hidden? or something like that.
For example, turning on Twist, Displacement, and RGB gives the following:
I'm using Internet Explorer 11.0.9600.17691 (latest) on Windows 7 x64.
Decomposite ObjectCoordinateResolver from GLContext
Hi,
I'm currently reviewing some Web-GL Frameworks regarding their performance, featureset etc.
HTML-GL looks very much like an awesome job done, great work!
But I'm having an Issue regarding some basic functionality on DOM-Manipulation. Consider this super simple page:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src='vendor/htmlgl/htmlgl.min.js'></script>
<script src='vendor/htmlgl/htmlgl-effects.min.js'></script>
</head>
<body>
<div><button onclick="window._start('_testGL');">Test HTML-GL</button></div>
<div><button onclick="window._start('_testPlain');">Test Plain HTML</button></div>
<html-gl id="test-gl"></html-gl>
<div id="test-plain"></div>
</body>
<script type="text/javascript">
window._testGL = document.getElementById('test-gl');
window._testPlain = document.getElementById('test-plain');
window._str = '';
for (var i = 0; i < 100; i++) {
window._str += '<div class="big"><div class="title"><div>hello world</div></div><div class="inner">the content</div></div>';
};
console.log('string prepared');
window._running = false;
window._start = function(element) {
if(window._running) {
return;
}
window._running = true;
window[element].innerHTML = window._str;
}
</script>
</html>
Try it and you will see, that HTML-GL takes some time, while plain HTML renders everything instantly. Increasing the loop-counter will eventually break the canvas.
This is just a List of 100 unstyled items simulating a title and content, so I assume I'm doing something wrong. Could you point me in the right direction, or are Item-Lists (i.e. a few more elements) something HTML-GL is not made for?
Thanks and keep up the awesome work!
This happens when dragging http://pixelscommander.com/polygon/htmlgl/demo/advanced-content-webgl.html in Firefox 36.0.4 Windows. It seems that the background is not cleaned (or rendered correctly) in the framebuffer when a DOM node is moved.
Other than that, great project.
Check for memory leaks on textures update
Resulting images appear pixelated on devices where window.devicePixelRatio > 1.
Get bounding rect exactly before rendering otherwise there is enough time for layout to change between html2canvas call and real rendering
Sorry if this seems like a silly question, but from reading the Repo Readme, I see how to use <html-gl>
to cause the library to render the elements with WebGL, but I'm trying to figure out how to apply filters. Could someone explain how that is done, for example if I wanted to apply a filter to a whole page the way you show in examples? I looked into those page's resources but wasnt able to figure it out.
Scrolling is a bit janky sometimes, could be more smooth. May be interpolation? Should be investigated.
Add all kinds of transformations
I included jquery in project and try to run but always get this error:
ReferenceError: propellerObj is not defined
So i tried to run you example: basic-webgl-jquery.html
I got the same error. Could you please tracking this problem?
What's browser support like with and without polyfills?
Fire htmlglReady event when everything is
Custom elements are much better in terms of handling new nodes creation. Should convert GLElement to a CustomElement
In gl-element.js
(lines 219-233):
//Wrap to jQuery plugin
if (w.$ !== undefined) {
$[HTMLGL.JQ_PLUGIN_NAME] = {};
$[HTMLGL.JQ_PLUGIN_NAME].elements = [];
$.fn[HTMLGL.JQ_PLUGIN_NAME] = function () {
return this.each(function () {
if (!$.data(this, 'plugin_' + HTMLGL.JQ_PLUGIN_NAME)) {
var propellerObj = HTMLGL.GLElement.createFromNode(this);
$.data(this, 'plugin_' + HTMLGL.JQ_PLUGIN_NAME, propellerObj);
$[HTMLGL.JQ_PLUGIN_NAME].elements.push(propellerObj);
}
});
};
}
$
is not always jQuery
and you shouldn't assume that it is. Assign properties to the jQuery
object.
At the moment there is no support on scrolling page.
To fix this we need:
1.Add page scroll displacements to GLNodes
2.Switch stage to position: fixed
Correct transform-origin for WebGL representation
would you please consider adding package.json so that we can add your lib on https://cdnjs.com.
thank you very much!
cdnjs/cdnjs#5884
Benchmark html to canvas libraries and choose best one
While the border of the respective iframe does render, the actual contents are invisible. Despite this, all the links inside the page are still actually clickable, as if it was there, but the page itself is never rendered.
Tested for both <html-gl>
and jQuery plugin, and on Firefox 40.0.3 and Chrome 44.0.
In order to support retina displays we need to render textures in twice higher resolution than their screen dimensions
When the <html-gl>
element or an element that has been activated via jQuery(element).htmlgl()
is removed from DOM the associated WebGL representation should also be torn down.
This can be done via MutationObserver, but the teardown routine should also be publicly available for manual triggering.
Add mouse / touch events emulation
We react on style changes via two approaches:
1.Listen to element.style.transform changes.
2.By setting element.styleGL.transform getter / setter
For first case we still move DOM element. Also DOM Mutation Observers are a bit slow;
Second case is not HTML compatible since it introduce styleGL property instead of style.
At the moment I do not know how to overload style.transform or style which is an instance of CSSStyleDeclaration host object in JavaScript
Add motion blur and ripples on click to filters demo
Clean demo from unused resources
Add possibility to set filters with attributes. This could look like <html-gl filter="blur"> and <html-gl filter="twist, rgb, displacement">
Before we converted element to WebGL it is being displayed in its natural way for a few milliseconds then it is being hidden and replaced by WebGL sprite. All this hidding / unhidding manipulations create flash of content which is definitely not acceptable.
Could be removed in a few different ways.
1.Switch to custom element, which will prevent initial rendering until element is initialized.
2.Programmaticaly add style which will hide DOM content of webgl tags by setting visibility to hidden.
Better heuristics on style changed event.
We need to know should we update sprite content or it is enough just to update transformations. Seems we need to listen to dom mutations in following way:
If changed something except style.transform rerender.
If only transformations applied - skip rendering and just apply new transformation to sprite.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.