pixelscommander / html-gl Goto Github PK

Get as many FPS as you need and amazing effects by rendering HTML/CSS in WebGL

HTML 4.42% CSS 4.29% JavaScript 91.29%

html-gl's Introduction

60 FPS and amazing effects by rendering HTML/CSS in WebGL, framework agnostic

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.

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.

Install

npm:

npm install --save html-gl

Bower:

bower install --save htmlgl

Usage

As Web Component

<html-gl>
    This element`s content is rendered in <h1>WebGL</h1>
    <span style="color: green;">was it easy?</span>
    Feel free to use CSS, images and all you are common to in HTML/CSS world.
</html-gl>

As jQuery plugin

$('.some div').htmlgl();

No DOM + WebGL rendering = highest FPS possible for Web platform

Demos

Filters WebGL is not only about performance. It breaks any HTML/CSS limits in terms of animations and interactivity
Mobile effects use attribute effects on <html-gl> element to specify effects you use, this one is nice for mobile
Basic HTML GL demo shows how to use HTML GL and animate GL Elements. It also demonstrate that HTML GL handle content change events and repaints element`s WebGL representation
Basic DOM this is the same project as previous. The only difference is that htmlgl.js is not included
Advanced content HTML GL slider with nested content rendered via WebGL and animated, ability to drag with mouse horizontaly, click event listeners on boxes
Advanced content DOM

How to use?

Include HTMLGL.js into project. Use tag name <html-gl> or jQuery plugin $(myElement).htmlgl() for elements you are going to animate. These elements will be rendered in WebGL and their CSS Transform properties will be mapped to WebGL representation transformations. So DOM node itself will not be animated or displayed in order to avoid resources consuming. HTML GL is framework agnostic and is easy to inject into existing project which needs performance tweaking.

Rasterization API

In order to improve technology we are trying to promote standardized native Rasterization API for JavaScript. Help us to be better and to add this cool feature to browsers by spreading the article and proposal draft.

Fast way to animate

The most performant way to animate HTML-GL tags is to operate on tag's styleGL.transform in the same way you operate on style.transform. E.g. style.transform = 'translateX(100px) translateY(50px)'. Velocity.js copy from HTML-GL repository (https://github.com/PixelsCommander/HTML-GL/blob/master/demo/js/vendor/velocity.js) have this optimization built-in. Feel free to use it in the way described in official Velocity.js documentation.

Animating HTML-GL tag children

Since it is very efficient to make transformations (move, rotate, scale, change opacity) on HTML-GL tags it becomes very slow to animate it's children until they are HTML-GL tags too. This happens because of necessity to rasterize and send HTML-GL tag texture to GPU.

Running demos from repository

Please run bower install before running demos

License

MIT: http://mit-license.org/

html-gl's People

Contributors

Stargazers

Watchers

Forkers

kerbios honsys alaa-eddine jimbog kolodny gurobokum wmlabs bradparks urbie-mk2 cyhunter gopster85 hoardboard blighli bassochette kyasui nullnotfound lumiata artiya4u thomasflyvholm rengokantai arden killsos idrisjafer lattanas s1dd4rth lindatsght sangohan saumyakswain calendee naveen150 rydn sanbiv izestrea sarvex cartertsai flyingliang ottoh totalloser barseghyanartur idahoan burninggo tien-devspace carabina riyan8250 g00fy- kiscz andreaslangsays kuziwa joiann-ss mikestaub moetaz90 lucasfanning dangerdave007 runspired mcanthony luiseduardohdbackup laterdude vladimirparkhomenko tom-nguyen marcodemoja blamy xeronith feeloc nitinprakash96 linkedinyou frankie-666 arquivo1 sapioit zevnicsca wiltonlazary is00hcw kdallafior happy-ferret amilajack jdhakj webin thiagosolstafir cssxn solertis yursile modulexcite gbrian codeffekt fun-alex-alex2006hw xstog625 artf exebetche v-a-kernel nelsonvassalo flyingrothschild webvj emrul wellcomez jinjianfeng mridulmeh kuzmabg iced-tea fourks iefreer mastrobardo

html-gl's Issues

htmlgl.com website demo fails in safari and ff

Does it support svg?

Add motion blur and ripples on click/touch to filters demo

Add motion blur and ripples on click to filters demo

Integration with frameworks?

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?

Debounce resize event

[FEATURE] WebGL Teardown

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.

Decomposite ObjectCoordinateResolver from GLContext

Problem when include jquery

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?

Content blurry in demo on Firefox

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

Firefox compatibility

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

не ловит клики по верху картинки

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

Add all kinds of transformations

Check for memory leaks on textures update

DOM Manipulation Performance

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!

Rendering bug in firefox - htmlgl.com

There is this problem on Firefox in the home page.

Internet Explorer Compatibility

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.

Demo is broken

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

Avoid visibility:hidden when not animating

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

add package.json

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

z-index problem with menu settings and background film content while clicking

How do I apply filters to an HTML-GL element

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.

Get bounding rect exactly before rendering

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

Render if stage changed only

Scrolling is a bit janky sometimes

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

Respect window.devicePixelRatio

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

imagesLoaded fire twice when called on custom element

imagesLoaded fire twice when called on custom GLElement

Benchmark html to canvas libraries

Benchmark html to canvas libraries and choose best one

Nested HTML GL layers should be ignored when rendered to HTML GL texture

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

Retina support

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

Avoid flash of GL content

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.

Scrolling support

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

Fire htmlglReady event

Fire htmlglReady event when everything is

Technical limitations on retina support?

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

Handle window resize

Browser Support?

What's browser support like with and without polyfills?

SVG support

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

Mouse / touch events

Add mouse / touch events emulation

Clean demo from unused resources

Contents of inline frames (iframe) are not rendered

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.

Better heuristics for rerendering condition

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.

Don't assume jQuery is assigned to $

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.

Accessibility

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.

Create jQuery snippet

Safari compatibility

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

Framebuffer does not clean correctly in firefox, windows, video board Intel HD 4000

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.

Filters via attributes and jQuery plugin options

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

Request: Accessibility explainer

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

Correct transform-origin for WebGL representation

Redefine element.style.transform property

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

Move to custom elements

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