SlideShare a Scribd company logo
Render HTML/CSS in WebGL
@PixelsCommander
denis.radin@gmail.com
HTML GL - 60 FPS and amazing effects by rendering HTML/CSS in WebGL, framework agnostic
HTML GL - 60 FPS and amazing effects by rendering HTML/CSS in WebGL, framework agnostic
I do not do embedded JavaScript.
Why should I care?
HTML GL - 60 FPS and amazing effects by rendering HTML/CSS in WebGL, framework agnostic
Performance optimization is not
only about making your app
faster. It allows to implement
things you were not able to do
before.
DOM is slow
Since it is a quite complex model
Display image: DOM vs Canvas
DOM
● Create IMG tag
● Load file
● Append IMG tag
● Calc. styles
● Calc. position
● Display image
Canvas
● Load file
● ctx.drawImage
Even GPU DOM is slow
It changes the last step only
DOM is hardly predictable
HTML GL means No DOM
But only when animating
And is still inspectable when not
Also
Recoginze?
HTML GL - 60 FPS and amazing effects by rendering HTML/CSS in WebGL, framework agnostic
CPU GPU
HTML GL - 60 FPS and amazing effects by rendering HTML/CSS in WebGL, framework agnostic
Modern GPU can
handle 100 000 000
of textured surfaces
May treat this as
“100 000 000 of HTML elements”
Why so many?
For some things it is still not
enough of details
What OpenGL can do
Games are much
heavier and much
impressive
HTML GL - 60 FPS and amazing effects by rendering HTML/CSS in WebGL, framework agnostic
Because GPU is not involved and
DOM is complex (ok, ok, we
remember that)
And simple DOM
slider janks???
Let`s release bunnies!
OpenGL is also
available in Web
via WebGL
Why do not we use
WebGL for content?
Imperative, verbose, no layout
HTML
<img src=”back.png”>
WebGL: Bad parts
WebGL (three.js)
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.
innerHeight);
document.body.appendChild(renderer.domElement);
var camera = new THREE.PerspectiveCamera(45,
window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 500;
var scene = new THREE.Scene();
var material = new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('http://www.
html5canvastutorials.com/demos/assets/crate.
jpg')});
var plain = new THREE.Mesh(new THREE.Plain(200,
200), material);
scene.add(plain);
HTML GL - 60 FPS and amazing effects by rendering HTML/CSS in WebGL, framework agnostic
Renders HTML/CSS in WebGL
<img src=”back.png”>
HTML GL
<html-gl>
<img src=”back.png”>
</html-gl>
Easy to use
Just wrap content you want to
animate with <html-gl> tag or
execute $(myNode).htmlgl()
How it works?
The flow
Relies on:
DOM Mutation Observers,
html2canvas, PixiJS
Relies on:
DOM Mutation Observers,
html2canvas, PixiJS
pixelscommander.com
Native,fast,reliable
Rasterization API
HTML GL / DOM
Simple example
HTML GL / DOM
Nested content
and events
HTML GL / Sorry you can not do
this with DOM
Some GL
HTML GL / Sorry you can not do
this with DOM
Some goodies for
PhoneGap
No new conceptions
You do HTML/CSS
Just add <html-gl>
The best thing
Effect as a plugin, add your one
Framework agnostic,
but expecting React-GL
github.com/PixelsCommander/HTML-GL
Open source
ChallengingNative.com
Fast web applications development, profiling and optimization
Questions?
github.com/PixelsCommander/HTML-GL
@PixelsCommander

More Related Content

What's hot

Minko - Windows App Meetup Nov. 2013
Minko - Windows App Meetup Nov. 2013Minko - Windows App Meetup Nov. 2013
Minko - Windows App Meetup Nov. 2013
Minko3D
 
Stefanie Grewenig & Johannes Thönes - Internet ausdrucken mit JavaScript - c...
 Stefanie Grewenig & Johannes Thönes - Internet ausdrucken mit JavaScript - c... Stefanie Grewenig & Johannes Thönes - Internet ausdrucken mit JavaScript - c...
Stefanie Grewenig & Johannes Thönes - Internet ausdrucken mit JavaScript - c...
AboutYouGmbH
 
Html5 (games)
Html5 (games)Html5 (games)
Html5 (games)
chamsddine bouzaine
 
Introduction to software architecture
Introduction to software architectureIntroduction to software architecture
Introduction to software architecture
Marcus Ljungblad
 
Forge - DevCon 2016: Creating your next VR Walkthrough with Cloud Rendered St...
Forge - DevCon 2016: Creating your next VR Walkthrough with Cloud Rendered St...Forge - DevCon 2016: Creating your next VR Walkthrough with Cloud Rendered St...
Forge - DevCon 2016: Creating your next VR Walkthrough with Cloud Rendered St...
Autodesk
 
от Flash к html5. александр бацуев. зал 4
от Flash к html5. александр бацуев. зал 4от Flash к html5. александр бацуев. зал 4
от Flash к html5. александр бацуев. зал 4
rit2011
 
Website Speed :: Fox Valley Computing Professionals, September 2014
Website Speed :: Fox Valley Computing Professionals, September 2014Website Speed :: Fox Valley Computing Professionals, September 2014
Website Speed :: Fox Valley Computing Professionals, September 2014
Straight North
 
JavaScript UI Architecture: Be all that you can be
JavaScript UI Architecture: Be all that you can beJavaScript UI Architecture: Be all that you can be
JavaScript UI Architecture: Be all that you can be
Kyle Simpson
 
IBM and Node.js - Old Doge, New Tricks
IBM and Node.js - Old Doge, New TricksIBM and Node.js - Old Doge, New Tricks
IBM and Node.js - Old Doge, New Tricks
Dejan Glozic
 
By VISY - ""In the country of the blind, the one-eyed man is king""
By VISY - ""In the country of the blind, the one-eyed man is king""By VISY - ""In the country of the blind, the one-eyed man is king""
By VISY - ""In the country of the blind, the one-eyed man is king""
Tobias Leingruber
 
Experience With Aida Web
Experience With Aida WebExperience With Aida Web
Experience With Aida Web
ESUG
 
Kentico Cloud - Our First Impressions
Kentico Cloud - Our First Impressions Kentico Cloud - Our First Impressions
Kentico Cloud - Our First Impressions
Brian McKeiver
 
DevOne - How to not fail with Azure
DevOne - How to not fail with AzureDevOne - How to not fail with Azure
DevOne - How to not fail with Azure
Martin Gutenbrunner
 
SP2013 WCM Bootcamp - DSN Designing for SharePoint 2013
SP2013 WCM Bootcamp - DSN Designing for SharePoint 2013SP2013 WCM Bootcamp - DSN Designing for SharePoint 2013
SP2013 WCM Bootcamp - DSN Designing for SharePoint 2013
Mavention
 
Gatsby vs. Next.js
Gatsby vs. Next.jsGatsby vs. Next.js
Gatsby vs. Next.js
Borek Bernard
 
Academy PRO: HTML5 API graphics
Academy PRO: HTML5 API graphicsAcademy PRO: HTML5 API graphics
Academy PRO: HTML5 API graphics
Binary Studio
 
Interactive 3D graphics for web with three.js, Andrey Vedilin, DataArt
Interactive  3D graphics for web with three.js, Andrey Vedilin, DataArtInteractive  3D graphics for web with three.js, Andrey Vedilin, DataArt
Interactive 3D graphics for web with three.js, Andrey Vedilin, DataArt
Alina Vilk
 
Zoomcharts @ DevClub.lv
Zoomcharts @ DevClub.lvZoomcharts @ DevClub.lv
Zoomcharts @ DevClub.lv
Viesturs Zariņš
 
From Zero To Visibility
From Zero To VisibilityFrom Zero To Visibility
From Zero To Visibility
bridgetkromhout
 
Why you should consider a microframework for your next web project
Why you should consider a microframework for your next web projectWhy you should consider a microframework for your next web project
Why you should consider a microframework for your next web project
Joaquín Muñoz M.
 

What's hot (20)

Minko - Windows App Meetup Nov. 2013
Minko - Windows App Meetup Nov. 2013Minko - Windows App Meetup Nov. 2013
Minko - Windows App Meetup Nov. 2013
 
Stefanie Grewenig & Johannes Thönes - Internet ausdrucken mit JavaScript - c...
 Stefanie Grewenig & Johannes Thönes - Internet ausdrucken mit JavaScript - c... Stefanie Grewenig & Johannes Thönes - Internet ausdrucken mit JavaScript - c...
Stefanie Grewenig & Johannes Thönes - Internet ausdrucken mit JavaScript - c...
 
Html5 (games)
Html5 (games)Html5 (games)
Html5 (games)
 
Introduction to software architecture
Introduction to software architectureIntroduction to software architecture
Introduction to software architecture
 
Forge - DevCon 2016: Creating your next VR Walkthrough with Cloud Rendered St...
Forge - DevCon 2016: Creating your next VR Walkthrough with Cloud Rendered St...Forge - DevCon 2016: Creating your next VR Walkthrough with Cloud Rendered St...
Forge - DevCon 2016: Creating your next VR Walkthrough with Cloud Rendered St...
 
от Flash к html5. александр бацуев. зал 4
от Flash к html5. александр бацуев. зал 4от Flash к html5. александр бацуев. зал 4
от Flash к html5. александр бацуев. зал 4
 
Website Speed :: Fox Valley Computing Professionals, September 2014
Website Speed :: Fox Valley Computing Professionals, September 2014Website Speed :: Fox Valley Computing Professionals, September 2014
Website Speed :: Fox Valley Computing Professionals, September 2014
 
JavaScript UI Architecture: Be all that you can be
JavaScript UI Architecture: Be all that you can beJavaScript UI Architecture: Be all that you can be
JavaScript UI Architecture: Be all that you can be
 
IBM and Node.js - Old Doge, New Tricks
IBM and Node.js - Old Doge, New TricksIBM and Node.js - Old Doge, New Tricks
IBM and Node.js - Old Doge, New Tricks
 
By VISY - ""In the country of the blind, the one-eyed man is king""
By VISY - ""In the country of the blind, the one-eyed man is king""By VISY - ""In the country of the blind, the one-eyed man is king""
By VISY - ""In the country of the blind, the one-eyed man is king""
 
Experience With Aida Web
Experience With Aida WebExperience With Aida Web
Experience With Aida Web
 
Kentico Cloud - Our First Impressions
Kentico Cloud - Our First Impressions Kentico Cloud - Our First Impressions
Kentico Cloud - Our First Impressions
 
DevOne - How to not fail with Azure
DevOne - How to not fail with AzureDevOne - How to not fail with Azure
DevOne - How to not fail with Azure
 
SP2013 WCM Bootcamp - DSN Designing for SharePoint 2013
SP2013 WCM Bootcamp - DSN Designing for SharePoint 2013SP2013 WCM Bootcamp - DSN Designing for SharePoint 2013
SP2013 WCM Bootcamp - DSN Designing for SharePoint 2013
 
Gatsby vs. Next.js
Gatsby vs. Next.jsGatsby vs. Next.js
Gatsby vs. Next.js
 
Academy PRO: HTML5 API graphics
Academy PRO: HTML5 API graphicsAcademy PRO: HTML5 API graphics
Academy PRO: HTML5 API graphics
 
Interactive 3D graphics for web with three.js, Andrey Vedilin, DataArt
Interactive  3D graphics for web with three.js, Andrey Vedilin, DataArtInteractive  3D graphics for web with three.js, Andrey Vedilin, DataArt
Interactive 3D graphics for web with three.js, Andrey Vedilin, DataArt
 
Zoomcharts @ DevClub.lv
Zoomcharts @ DevClub.lvZoomcharts @ DevClub.lv
Zoomcharts @ DevClub.lv
 
From Zero To Visibility
From Zero To VisibilityFrom Zero To Visibility
From Zero To Visibility
 
Why you should consider a microframework for your next web project
Why you should consider a microframework for your next web projectWhy you should consider a microframework for your next web project
Why you should consider a microframework for your next web project
 

Similar to HTML GL - 60 FPS and amazing effects by rendering HTML/CSS in WebGL, framework agnostic

Портируем существующее Web-приложение в виртуальную реальность / Денис Радин ...
Портируем существующее Web-приложение в виртуальную реальность / Денис Радин ...Портируем существующее Web-приложение в виртуальную реальность / Денис Радин ...
Портируем существующее Web-приложение в виртуальную реальность / Денис Радин ...
Ontico
 
Solution to capture webpage screenshot with html2 canvas.js for backend devel...
Solution to capture webpage screenshot with html2 canvas.js for backend devel...Solution to capture webpage screenshot with html2 canvas.js for backend devel...
Solution to capture webpage screenshot with html2 canvas.js for backend devel...
eLuminous Technologies Pvt. Ltd.
 
3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]
3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]
3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]
JavaScript Meetup HCMC
 
Lazy load Website Assets
Lazy load Website AssetsLazy load Website Assets
Lazy load Website Assets
Chris Love
 
GTM container positions: a summary of best & worst
GTM container positions: a summary of best & worstGTM container positions: a summary of best & worst
GTM container positions: a summary of best & worst
Phil Pearce
 
Presentation Tier optimizations
Presentation Tier optimizationsPresentation Tier optimizations
Presentation Tier optimizations
Anup Hariharan Nair
 
Magento 2 Front-end performance tips & tricks - Nomadmage September 2017
Magento 2 Front-end performance tips & tricks - Nomadmage September 2017Magento 2 Front-end performance tips & tricks - Nomadmage September 2017
Magento 2 Front-end performance tips & tricks - Nomadmage September 2017
Bartek Igielski
 
The Future of the Web
The Future of the WebThe Future of the Web
The Future of the Web
Ray Nicholus
 
Front end optimization
Front end optimizationFront end optimization
Front end optimization
Abhishek Anand
 
[GREE Tech Talk #08] You Don't Know WebGL
[GREE Tech Talk #08] You Don't Know WebGL[GREE Tech Talk #08] You Don't Know WebGL
[GREE Tech Talk #08] You Don't Know WebGL
gree_tech
 
You Don't Know WebGL at GREE Tech Talk #08
You Don't Know WebGL at GREE Tech Talk #08You Don't Know WebGL at GREE Tech Talk #08
You Don't Know WebGL at GREE Tech Talk #08
Guangyao Liu
 
Qt and QML performance tips & tricks for Qt 4.7
Qt and QML performance tips & tricks for Qt 4.7Qt and QML performance tips & tricks for Qt 4.7
Qt and QML performance tips & tricks for Qt 4.7
Pasi Kellokoski
 
Building a fast web experience [beta]
Building a fast web experience [beta]Building a fast web experience [beta]
Building a fast web experience [beta]
Kirk Yamamoto
 
Artists Only
Artists OnlyArtists Only
Artists Only
Tony Parisi
 
WebGL Crash Course
WebGL Crash CourseWebGL Crash Course
WebGL Crash Course
Tony Parisi
 
JavascriptMVC: Another choice of web framework
JavascriptMVC: Another choice of web frameworkJavascriptMVC: Another choice of web framework
JavascriptMVC: Another choice of web framework
Alive Kuo
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...
Horacio Gonzalez
 
Web components api + Vuejs
Web components api + VuejsWeb components api + Vuejs
Web components api + Vuejs
Mikhail Kuznetcov
 
Intro to Three.js
Intro to Three.jsIntro to Three.js
Supercharge your app with Cloud Functions for Firebase
Supercharge your app with Cloud Functions for FirebaseSupercharge your app with Cloud Functions for Firebase
Supercharge your app with Cloud Functions for Firebase
Bret McGowen - NYC Google Developer Advocate
 

Similar to HTML GL - 60 FPS and amazing effects by rendering HTML/CSS in WebGL, framework agnostic (20)

Портируем существующее Web-приложение в виртуальную реальность / Денис Радин ...
Портируем существующее Web-приложение в виртуальную реальность / Денис Радин ...Портируем существующее Web-приложение в виртуальную реальность / Денис Радин ...
Портируем существующее Web-приложение в виртуальную реальность / Денис Радин ...
 
Solution to capture webpage screenshot with html2 canvas.js for backend devel...
Solution to capture webpage screenshot with html2 canvas.js for backend devel...Solution to capture webpage screenshot with html2 canvas.js for backend devel...
Solution to capture webpage screenshot with html2 canvas.js for backend devel...
 
3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]
3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]
3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]
 
Lazy load Website Assets
Lazy load Website AssetsLazy load Website Assets
Lazy load Website Assets
 
GTM container positions: a summary of best & worst
GTM container positions: a summary of best & worstGTM container positions: a summary of best & worst
GTM container positions: a summary of best & worst
 
Presentation Tier optimizations
Presentation Tier optimizationsPresentation Tier optimizations
Presentation Tier optimizations
 
Magento 2 Front-end performance tips & tricks - Nomadmage September 2017
Magento 2 Front-end performance tips & tricks - Nomadmage September 2017Magento 2 Front-end performance tips & tricks - Nomadmage September 2017
Magento 2 Front-end performance tips & tricks - Nomadmage September 2017
 
The Future of the Web
The Future of the WebThe Future of the Web
The Future of the Web
 
Front end optimization
Front end optimizationFront end optimization
Front end optimization
 
[GREE Tech Talk #08] You Don't Know WebGL
[GREE Tech Talk #08] You Don't Know WebGL[GREE Tech Talk #08] You Don't Know WebGL
[GREE Tech Talk #08] You Don't Know WebGL
 
You Don't Know WebGL at GREE Tech Talk #08
You Don't Know WebGL at GREE Tech Talk #08You Don't Know WebGL at GREE Tech Talk #08
You Don't Know WebGL at GREE Tech Talk #08
 
Qt and QML performance tips & tricks for Qt 4.7
Qt and QML performance tips & tricks for Qt 4.7Qt and QML performance tips & tricks for Qt 4.7
Qt and QML performance tips & tricks for Qt 4.7
 
Building a fast web experience [beta]
Building a fast web experience [beta]Building a fast web experience [beta]
Building a fast web experience [beta]
 
Artists Only
Artists OnlyArtists Only
Artists Only
 
WebGL Crash Course
WebGL Crash CourseWebGL Crash Course
WebGL Crash Course
 
JavascriptMVC: Another choice of web framework
JavascriptMVC: Another choice of web frameworkJavascriptMVC: Another choice of web framework
JavascriptMVC: Another choice of web framework
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...
 
Web components api + Vuejs
Web components api + VuejsWeb components api + Vuejs
Web components api + Vuejs
 
Intro to Three.js
Intro to Three.jsIntro to Three.js
Intro to Three.js
 
Supercharge your app with Cloud Functions for Firebase
Supercharge your app with Cloud Functions for FirebaseSupercharge your app with Cloud Functions for Firebase
Supercharge your app with Cloud Functions for Firebase
 

More from Denis Radin

Mining crypto in browser as a bleeding edge performance challenge for the Web...
Mining crypto in browser as a bleeding edge performance challenge for the Web...Mining crypto in browser as a bleeding edge performance challenge for the Web...
Mining crypto in browser as a bleeding edge performance challenge for the Web...
Denis Radin
 
Pixel shaders based UI components + writing your first pixel shader
Pixel shaders based UI components + writing your first pixel shaderPixel shaders based UI components + writing your first pixel shader
Pixel shaders based UI components + writing your first pixel shader
Denis Radin
 
Building native apps with web components
Building native apps with web componentsBuilding native apps with web components
Building native apps with web components
Denis Radin
 
Applying NASA coding guidelines to JavaScript or airspace is closer than you ...
Applying NASA coding guidelines to JavaScript or airspace is closer than you ...Applying NASA coding guidelines to JavaScript or airspace is closer than you ...
Applying NASA coding guidelines to JavaScript or airspace is closer than you ...
Denis Radin
 
1.Loading
1.Loading1.Loading
1.Loading
Denis Radin
 
Front-end tower of Babylon
Front-end tower of BabylonFront-end tower of Babylon
Front-end tower of Babylon
Denis Radin
 
JavaScript and HTML in shipbuilding and aircraft industries
JavaScript and HTML in shipbuilding and aircraft industriesJavaScript and HTML in shipbuilding and aircraft industries
JavaScript and HTML in shipbuilding and aircraft industries
Denis Radin
 
More native look and feel of mobile JS applications with HTML5 canvas
More native look and feel of mobile JS applications with HTML5 canvasMore native look and feel of mobile JS applications with HTML5 canvas
More native look and feel of mobile JS applications with HTML5 canvas
Denis Radin
 
FlAnalyzer
FlAnalyzerFlAnalyzer
FlAnalyzer
Denis Radin
 

More from Denis Radin (9)

Mining crypto in browser as a bleeding edge performance challenge for the Web...
Mining crypto in browser as a bleeding edge performance challenge for the Web...Mining crypto in browser as a bleeding edge performance challenge for the Web...
Mining crypto in browser as a bleeding edge performance challenge for the Web...
 
Pixel shaders based UI components + writing your first pixel shader
Pixel shaders based UI components + writing your first pixel shaderPixel shaders based UI components + writing your first pixel shader
Pixel shaders based UI components + writing your first pixel shader
 
Building native apps with web components
Building native apps with web componentsBuilding native apps with web components
Building native apps with web components
 
Applying NASA coding guidelines to JavaScript or airspace is closer than you ...
Applying NASA coding guidelines to JavaScript or airspace is closer than you ...Applying NASA coding guidelines to JavaScript or airspace is closer than you ...
Applying NASA coding guidelines to JavaScript or airspace is closer than you ...
 
1.Loading
1.Loading1.Loading
1.Loading
 
Front-end tower of Babylon
Front-end tower of BabylonFront-end tower of Babylon
Front-end tower of Babylon
 
JavaScript and HTML in shipbuilding and aircraft industries
JavaScript and HTML in shipbuilding and aircraft industriesJavaScript and HTML in shipbuilding and aircraft industries
JavaScript and HTML in shipbuilding and aircraft industries
 
More native look and feel of mobile JS applications with HTML5 canvas
More native look and feel of mobile JS applications with HTML5 canvasMore native look and feel of mobile JS applications with HTML5 canvas
More native look and feel of mobile JS applications with HTML5 canvas
 
FlAnalyzer
FlAnalyzerFlAnalyzer
FlAnalyzer
 

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