Документ обсуждает использование WebGL для рендеринга HTML/CSS, подчеркивая его преимущества по сравнению с традиционным DOM рендерингом, который является медленным из-за сложности модели. Приводятся примеры кода с использованием Three.js и описывается, как легко интегрировать HTML в WebGL с помощью контейнера <html-gl>. Также упоминается о возможностях развития и оптимизации веб-приложений с использованием этого подхода.

1. Рендеринг HTML/CSS в WebGL

2. @PixelsCommander
denis.radin@gmail.com

5. Я не пишу “встроенный JavaScript”.
На кой ляд мне оптимимзация?

7. Оптимизация производительности не
только делает ваше приложение
быстрее. Она позволяет вам делать
вещи недоступные ранее.

8. DOM - это медленно
Из-за сложной модели

9. Вывод изображения
DOM
● Создать тег
● Загрузить файл
● Добавить тег
● Вычисл. стили
● Вычисл. коорд.
● Вывести изобр.
Canvas
● Загрузить файл
● ctx.drawImage

10. И GPU DOM медленный
Ведь меняет только последний шаг

11. DOM предсказуем с трудом

12. А HTML GL бездомен
Но только на время анимации

13. Но инспектабелен вне анимаций

14. Так же

15. Узнаете?

17. CPU GPU

19. GPU справляется с
100 000 000
текстурированных
поверхностей
Можете читать, как
“100 000 000 HTML элементов”

20. Зачем так много?
Иногда это все еще недостаточный
уровень детализации

21. Что может OpenGL
Игры намного тяжелее
и требовательней к
ресурсам

23. Потому что GPU не задействован и
DOM сложен (ok, ok, мы помним
это!)
В то же время
простой HTML слайдер
подтормаживает???

24. Давайте выпустим кроликов!
OpenGL доступен в
Web через WebGL

25. Почему мы не
используем WebGL для
контента?
Императивен, многословен, не
поддерживает лэйауты

26. HTML
<img src=”back.png”>
WebGL: Плохой мальчик
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);

28. Рендеринг HTML/CSS через WebGL

29. <img src=”back.png”>
HTML GL
<html-gl>
<img src=”back.png”>
</html-gl>

30. Легче не придумать
Просто оберните ваш HTML тегом
<html-gl> или примените jQuery
плагин $(myNode).htmlgl()

31. Как это работает?

32. Диаграмма

33. Использует:
DOM Mutation Observers,
html2canvas, PixiJS

34. Использует:
DOM Mutation Observers,
html2canvas, PixiJS

35. pixelscommander.com/en/
Нативный,быстрый,
надежный
Rasterization API

36. HTML GL / DOM
Простой пример

37. HTML GL / DOM
Вложенный контент и
события

38. HTML GL / Извините, это
невозможно в DOM
Немного GL

39. HTML GL / Извините, это
невозможно в DOM
Ништяки для
мобильной разработки

40. Ничего не надо учить
Пишем HTML/CSS
Просто добавляем <html-gl>
И самое прекрасное!

41. Эффект как плагин, добавь свой

42. Независит от фреймворков,
но ожидается React-GL

43. github.com/PixelsCommander/HTML-GL
Open source

44. ChallengingNative.com
Разработка, профайлинг и оптимизация быстрых веб приложений

45. Вопросы?
github.com/PixelsCommander/HTML-GL
@PixelsCommander