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

[YuryZakharov]

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

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

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

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

[rebuilder]

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

[teecat]

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

[Bhudh]

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

[rebuilder]

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

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

[Bhudh]

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

[Atminatana]

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

[rebuilder]

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

[Vitter]

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

[rebuilder]

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

[Evir]

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

[rebuilder]

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

[Evir]

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

[Evir]

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

[rebuilder]

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

[Evir]

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

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

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

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

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

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