Сегодня будет довольно весёлая и интересная тема - 3D в вебе. Тема довольно популярная, но сложная. Начнём с того, что такое OpenGL, GLSL, THREE.js, и закончим тем, как писать 3D в React и вообще зачем 3D в браузере.
OpenGL - это спецификация frontend-а API для создания 2D и 3D графики. У этой спеки есть несколько реализаций - например Mesa (для Intel в Linux). Роль бекенда здесь играет драйвер GPU, с помощью которого видеокарта вычисляет графику.
CPU отсылает данные по которым должен происходить рендеринг графики (Rendering data), и затем GPU производит рендеринг (через Rendering pipeline). Я тут могу ошибаться, поэтому ниже будет ссылка на статью.
Вот детальная статья с разбором того как графика отрисовывается на компьютере, начиная с OpenGL, заканчивая рендером на видеокарте: haroldserrano.com/blog/how-to-de…
WebGL - это тоже особый стандарт, основанный на WebGL ES (Embedded Systems) 2, который предназачен специально для браузеров, и использующий JavaScript. Для написания программ на WebGL, существует язык GLSL (OpenGL ES Shading Language), который по синтаксису похож на C/C++.
Управление памятью происходит в JavaScript. GLSL выполняется на GPU, используя драйвер видеокарты, как и OpenGL ES 2 реализация (с небольшими различиями). Более подробный разбор того как работает WebGL: webglfundamentals.org/webgl/lessons/…
Если подытожить, то чтобы делать 3D в вебе, нужно писать программы на GLSL и JavaScript. Писать шейдеры не зная того как работает OpenGL, Clang (близкий к GLSL), и не понимая того как работает графика довольно тяжело. Поэтому появились либы для упрощения 3D в браузере.
Самая популярная библиотека - THREE.js. В ней всё разбито на классы, текстуры, объекты, геометрии, освещение и т.д. На ней очень легко и весело писать 3D. Я сам начал погружение в 3D с этой либы: threejs.org
Помимо THREE.js существуют другие менее популярные абстракции над WebGL - Babylon.js (github.com/BabylonJS/Baby…) - JS фреймворк, основанный на WebGL, который включает в себя рендерер и игровой движок, и OGL (github.com/oframe/ogl) - минималистичная WebGL либа, похожая на THREE.
Несмотря на то, что THREE.js сильно упрощает работу с WebGL, всё ещё получается очень много кода. К тому же, его довольно тяжело внедрить в сайты, которые используют UI фреймворки по типу React.
Для решения этих проблем появился react-three-fiber, React рендерер для THREE.js. С помощью react-three-fiber можно создавать декларативные (благодаря React) THREE.js сцены, легко внедрять их в React приложения, и интегрировать состояние (например React Context) с ними.
react-three-fiber ничего не заменяет и не добавляет в THREE.js, а трансформиует JSX в THREE.js код. Любой код на THREE.js можно перенести в react-three-fiber
ссылка на библиотеку: github.com/react-spring/r…, там в ридми есть довольно впечатляющие демо
С r3f код выглядит гораздо чище, и на нём ещё проще писать 3D, которое легко потом внедрить в React и смешать с DOM.
На основе react-three-fiber появилось несколько библиотек, которые оборачивают библиотеки для THREE.js. Среди них use-cannon, react-postprocessing и react-xr.
use-cannon - это r3f либа с хуками и компонентами для добавления физики в 3D, с помощью библиотеки Cannon.js. Работает в отдельном воркере, поэтому очень производительна, и очень проста в использовании, по сравнению с чистым THREE.js + Cannon.js. Ссылка - github.com/react-spring/u…
react-postprocessing - ещё одна r3f библиотека, которая оборачивает эффекты из либы postprocessing (vanruesc.github.io/postprocessing/) в React компоненты. Как и в случае с use-cannon, сильно упрощает код, и прячет сложные аспекты под капот, оставляя только компоненты, например <Glitch />.
Сейчас демки обновляются, и проводятся работы над оптимизацией, но библиотеку можно использовать уже сейчас. Уже есть довольно впечатляющие демо (делал их не я, но они используют компоненты которые написал я): 3r6l2.csb.app
Ну и напоследок react-xr - ещё один набор хуков и компонентов для создания VR/AR приложений в вебе, при помощи r3f и WebXR. Демки получится посмотреть только с VR шлемом, но если у кого-то есть, то вот одна: v4uet.csb.app
Для чего всё это? 3D имеет несколько юзкейсов по визуализации, например CAD редакторы (SketchUp), презентация товаров или движки для онлайн игр (Unity3D). Но в большинстве случаев 3D используется для искусства. Много дизайн студий используют 3D для лендингов.
Сейчас ещё разрабатывается react-three-flex - <Flex /> компонент для THREE.js
будет ещё проще смешивать с DOM, и делать адаптивные сайты в 3D (сейчас с этим туго)
либа в разработке, так что пока ловите демо от @giuliozausa:
