pixelscommander / html-gl Goto Github PK

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.

The content is blurry (open to 100% image) on Firefox but not in Chrome

Safari do not have a support for custom elements also it miss native promises support

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.

It'd just be rendering a 2x texture as well right?

Hello. I'm using React and looks like HTML-GL aren't working fine with it.

My application with React only:

And with React + HTML-GL:

• styles broken
• missing the scrollbar
• onClick handlers aren't working correctly

Does HTML-GL integrated with frameworks such as React?

What's browser support like with and without polyfills?

Custom elements are much better in terms of handling new nodes creation. Should convert GLElement to a CustomElement

Decomposite ObjectCoordinateResolver from GLContext

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.

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.

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

Create jQuery snippet

htmlgl.com website demo fails in safari and ff

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

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.

Avoid visibility:hidden when not animating because it breaks DevTools inspector "click and select" feature.

Add possibility to set filters with attributes. This could look like <html-gl filter="blur"> and <html-gl filter="twist, rgb, displacement">

Correct transform-origin for WebGL representation

Scrolling is a bit janky sometimes, could be more smooth. May be interpolation? Should be investigated.

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.

Add motion blur and ripples on click to filters demo

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

Fire htmlglReady event when everything is

Clean demo from unused resources

Add all kinds of transformations

Get bounding rect exactly before rendering otherwise there is enough time for layout to change between html2canvas call and real rendering

Benchmark html to canvas libraries and choose best one

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

Does it support svg as well? Is there any demo with svg?

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.

на http://pixelscommander.com/polygon/htmlgl/demo/filters.html#.VQa1CrdZWvA

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.

Nested HTML GL layers should be ignored when rendering HTML GL texture

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.

In order to support retina displays we need to render textures in twice higher resolution than their screen dimensions

imagesLoaded fire twice when called on custom GLElement

Tried on Ubuntu 14.10, Chrome 41 and Firefox 36. Also on Mac OS X 10.9.5, Chrome 41.

Firefox do not have support for pointer-events and custom elements.

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?

Debounce resize event

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!

Resulting images appear pixelated on devices where window.devicePixelRatio > 1.

Check for memory leaks on textures update

There is this problem on Firefox in the home page.

Handle window resize