rebuilder Jul 25 2019 at 19:55

Калейдоскоп как в детстве

5 min

6.5K

WebGL*Graphic design*Working with 3D-graphics*

+17

Comments 16

YuryZakharov Jul 25 2019 at 20:34

Дети сейчас модерновые, им обычные игрушки малоинтересны, им компьютер подавай или планшет.

Дети не сами по себе модерновые, мы их такими делаем:

Поэтому мне захотелось воссоздать цифровой прототип варианта калейдоскопа

А ведь у калейдоскопа всё очарование именно в том, что он аналоговый…

rebuilder Jul 25 2019 at 21:24

На счёт детей, возможно они в первую очередь перенимают ценности родителей.
А по поводу аналоговости, не соглашусь, думаю тут очарование всё же в геометрии.

teecat Jul 26 2019 at 12:34

Недавно вытащил калейдоскоп, дал детям. Комментарий старшего — ничего же там цветопередача, как достигли?

Bhudh Jul 26 2019 at 03:07

Отдельное спасибо за то, что на XP программа тоже работает :)
Немного непонятно, зачем при изменении размера окна картинка масштабируется.
Мне кажется, было бы наоборот интереснее отсекать часть картинки и дать возможность оставить маленькое окошко в виде «глазка» в классический калейдоскоп.

rebuilder Jul 26 2019 at 08:54

Не проверял, но возможно программа будет работать и на более старых версиях Виндовс, главное наличие видеокарты и драйверов.
Собирал и под linux, но к сожалению не разобрался с настройками видеокарты, так что программа падала.
Друзья предложили портировать проект на WebGl+JavaScript в окно браузера. Если общественность заинтересует, то это не так уж и сложно сделать.

Что не так с масштабом, если я правильно понял нужна простая функция зуммирования картинки?

Bhudh Jul 27 2019 at 09:33

Зуммирование, наоборот, есть по умолчанию, масштаб меняется вместе с окном.
А хотелось бы неизменения масштаба при изменении границ окна.

Atminatana Jul 26 2019 at 12:38

Рассматривался ли вариант использовать Ray tracing только для создания треугольного изображения (например для случайно расположенных полупрозрачных многогранниках) с последующим копированием? Для аутентичности можно было бы добавить затенение/размывание у крайних треугольников.

rebuilder Jul 26 2019 at 12:42

Тогда от рейтресинга смысла мало, вычислительно дешевле заранее рендерить фигуры в текстуру и двигать уже их с использованием альфа смешивания.

Vitter Jul 26 2019 at 16:47

конечно мутит — с такой скоростью калейдоскоп не вращают )))
Если в общем — получилось красиво. Ещё бы помедленнее менять картинку и вращать — было бы значительно лучше!

rebuilder Jul 26 2019 at 16:57

Делал на свой вкус. Однако вы правы, стоило бы немного сбавить обороты.
Или лучше задавать опционально настройками, учту на будущее.

Evir Jul 26 2019 at 19:05

С самого начала статьи вылезла мысль, что для калейдоскопа главное – всё же набор битых стекляшек и возможность их покрутить.
Я думаю, что если развивать эту мысль – нужно сделать генерацию выпуклых полупрозрачных осколков и ёмкость, в которой они будут крутиться. И затем рендерить в текстуру, брать оттуда треугольник, а уже дальше шейдером выводить на экран то, что получилось. На том же Unity должно быть несложно реализовать, включая всю необходимую для калейдоскопа функциональность – вращение в обе стороны и несколько видов встряски. А дальше уже как фантазия пойдёт.
Соотвественно, собрать можно будет для windows, linux, mac, ios, android – как минимум. На телефонах должно быть несложно привязаться к сенсорам, чтобы вращать ёмкость с виртуальным стеклом при вращении телефона. Ну и на webgl должно собраться, тогда и в браузере можно будет покрутить.

rebuilder Jul 26 2019 at 20:30

Вы знаете, а мне Ваша идея нравиться! Трассировать выпуклые объекты с прозрачностью в мини-текстуру во вне экранный буфер, а затем размножать треугольниками.

Evir Jul 26 2019 at 22:25

Зачем трассировать? Не обязательно. Конечно, трассировка может дать более реалистичное и красивое изображение, но в реальном времени тот же 1920×1080 с хотя бы 30 fps вряд ли даст. Тем более на мобильных устройствах. Достаточно просто использовать рендер Unity, прозрачные объекты он вроде сам рассортирует по расстоянию от камеры, так что «осколки» отрисуются в нужном порядке. Можно поставить две камеры – первая рисует в render texture осколки, вторая растягивает на весь экран простой прямоугольник, применяя аналог Вашего шейдера из статьи (только переписать с glsl на hlsl).
Ну и прелесть использования Unity ещё и в том, что физикой движения «осколков» он будет заниматься сам. Не нужно привязывать какой-нибудь Bullet, и связывать физику с отрисовкой. Можно прямо в runtime генерировать Mesh, и его использовать и с MeshFilter+MeshRenderer для отрисовки, и с MeshCollider+Rigidbody для физики.

Evir Jul 26 2019 at 22:35

Кстати, если всё же тянет на realtime трассировку, то в свежих версиях Unity можно более-менее просто организовать многопоточную трассировку с помощью ECS. Сначала в буфер забивать треугольники, затем W×H (если подходить к задаче «в лоб») подзаданий трассировки, причём выполняться будут параллельно, если не ошибаюсь, в N-2 потока (где N – количество логических ядер на текущем устройстве). Ну и затем переносить из буфера результат в текстуру.

rebuilder Jul 26 2019 at 23:22

Тут всё проще не нужно весь экран трассировать, достаточно небольшого изображения для окна в программе выше использовалось 64х64 пикселя, можно и меньше. Да и реальная физика осколков не нужна, достаточно правдоподобной эмуляции гравитации и вращения. Самое сложное на мой взгляд, создать сложные выпуклые многогранники не симметричной формы, так будет красивее.

Evir Jul 28 2019 at 13:02

Тут всё проще не нужно весь экран трассировать, достаточно небольшого изображения

О, и правда, чего это я.

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

А вот тут, наоборот, имхо всё не так сложно. Думаю, если генерировать настолько небольшую картинку, то форма осколков не имеет прямо очень большую важность, ведь там вряд ли будет много чего видно. Но я бы генерировал итеративно по принципу сборки модели гео-сферы из треугольников. Начинаем с четырёх вершин – правильного тетраэдра, затем на каждом шаге каждый треугольник разбиваем на три, добавляя новую вершину в центре треугольника. Новые вершины «нормализуем», отодвигая их от центра фигуры так, чтобы они лежали на радиусе сферы. Чем больше шагов, тем более ровный шар получится.
Вот только в данном случае нужен не шар, и чтобы фигура была не ровная и не симметричная. Для этого можно вносить правки в алгоритм, например:

каждую сторону с вероятностью в 30% не преобразовывать;
новую вершину создавать не в центре разбиваемого треугольника, а с случайной поправкой;
начинать не только с тетраэдра, но и с куба, параллелепипеда;
«добавлять шум», смещая каждую вершину в случайном направлении на небольшое расстояние, как до первой итерации, так и после последней (или даже перед каждой);
с какой-то вероятностью после очередной итерации «складывать» одно из рёбер, заменяя две смежные вершины одной (в центре ребра, не забывая удалить вырожденные треугольники после этого).

В конце остаётся только проверить на выпуклость. «Забракованные» фигуры можно попробовать исправить, сдвигая самые дальние от центра точки ближе к центру, а самые ближние – наоборот, отодвигая. Ну или просто отбрасывать и начинать генерацию с начала.
Естественно, в вариациях с кубом и параллелепипедом нужно или работать с полигонами вместо треугольников, или первым делом заменять каждую плоскость на четыре треугольника, добавляя новую вершину в центре грани.
На мобильных устройствах можно делать меньше итераций, ну или сделать маленькую менюшку с настройками. Назвать «детализация» с пояснением, что чем она меньше – тем быстрее генерируется и отрисовывается, и наоборот.