Как создавать сайты на canvas?

Question

[Jun ior]

Доброе время суток господа.
Недавно нашёл несколько очень красивых сайтов, и я заметил что все элементы на сайте отрисовываются с помощью canvas( webgl ), с использованием js библиотеки pixi.js. Так эе все эти сайты хорошо адаптированы под мобильные устройства.
Вот эти 2 сайта:
curvy.dk/beagle/site
и
https://vintage.com.ua
Может кто знает где можно найти туториалы на эту тему( создание сайтов на чистом canvas( webgl ) ), также меня интересует адаптивное расположение текста в canvas.

Comments

[prrrrrrr]

Хотите тоже сайты по цене Панамеры делать, как Vintage?

[dollar]

Просто читаете документацию, вот и всё.
https://developer.mozilla.org/en-US/docs/Web/API/C...

Но я бы не стал увлекаться на вашем месте. Там действительно много свистелок-перделок, красивые эффекты при наведении на каждую букву, но это всё мешает читать контент. В начале 2000х была мода на всякие выезжающие меню и прочие эффекты, от которых тащились в основном сами разработчики. Мода прошла. А вы хотите к ней вернуться. Посмотрите на серьезные сайты, там нет всей этой отвлекающей фигни. Возьмите какой-нибудь интернет-магазин, у него цель провести пользователя к покупке и оплате, и чтобы ему было комфортно и заняло мало времени и усилий мозга.

[Jun ior]

prrrrrrr, Хотелось бы научиться)))

[sim3x]

dollar, <blink>hellou</blink>

[geektimer]

Советую изучить Blend4Web, есть много туториалов по нему + связка из коробки с блендером.
Можешь еще пробежаться по остальным фреймворкам

[geektimer]

dollar, а при чем тут 2000е и 3д? Все же зависит от дизайна и идеи. Одно дело, если заказчик хочет единорога с радугой в 3д на главную страницу интернет-магазина по продаже арматуры и никак иначе, а другое дело - это воплощение интересных идей с помощью 3д графики с хорошим и продуманным дизайном. И это никак нельзя сравнивать.
Есть достаточно хороших и красивых сайтов с элементами 3д, например https://2050.earth
P.S. сам не любитель адовых свистелок-перделок и поэтому винтаж в пример не ставлю, но этого и без 3д навалом сейчас.

[dollar]

geektimer, обычно контент - это гипертекст. Да, вы правы, бывают моменты, когда можно повысить удобство. То же 3д превью товара. Но это надо понимать, прежде чем лепить. Хотя дешевле дать несколько фото. Даже та ссылка, что вы дали, рассчитана на вау-эффект, а по сути ни о чем. Переведите в привычный формат гипертекста, и это будет просто сайт с предсказаниями. И в 3д вы тратите дополнительное время на то, чтобы понять, что там вообще есть полезного, как осуществляется навигация, какая структура информации. Так что основной вариант применения - это игрушки. И ваш пример - игрушка. Первый раз зашли - круто выглядит. А если постоянно пользуетесь - лишняя трава вашего внимания, ресурсов компьютера, батарейки телефона, и я молчу о совместимости. Это моё мнение.

Answer 1

[Григорий К.]

WebGL -- это компьютерная графика. Для начала я бы рекомендовал прочитать собственно основы по нему.
Вот тут есть отличный туториал: https://webglfundamentals.org/webgl/lessons/ru/

Затем можно смотреть на фреймворки, которые упрощают работу с графикой. Это собственно pixijs для 2D графики, threejs для 3D графики. По ним достаточно смотреть их документации. Можно также глянуть https://threejsfundamentals.org/

Больше список разных фреймворков есть, например, тут.

А чего-то совсем готового именно для создания сразу таких сайтов, а не работы с графикой вообще -- я не видел. Совсем полуготового конструктора / библиотеки нет. Берётся библиотека для работы с графикой (pixi, three), и создаётся сайт)