Текст 3D-перспективы на веб-странице

Question

Как достичь 3D-преобразования текста в перспективе с помощью Javascript/CSS.

Решения с использованием внешних библиотек JavaScript/CSS также возможны

Answer 1

CSS преобразования с точки зрения возможны только с Safari в этой точке. Увы, Chrome, в то время как на основе Webkit, и, по-видимому, поддерживая надлежащие атрибуты CSS, will not apply perspective transformations. Они будут поддерживаться в какой-то момент в Firefox, никаких подсказок об IE.

Ваш единственный другой вариант действительно <canvas>. Однако, как и в случае с CSS-преобразованиями, API-интерфейс canvas предоставляет только функции «2D» аффинных преобразований (масштабирование, поворот, перекос). При этом лучшее, что вы можете получить, - изометрическая перспектива, поскольку это может быть достигнуто только при перекос.

Однако, поскольку холст дает вам контроль уровня изображения над изображением, вы можете подделать перспективу, хотя это сложно. Очевидным способом является использование функции putImageData и вычисление каждого пикселя с использованием матрицы трехмерного преобразования перспективы. Очевидно, вам нужно знать некоторые вещи о линейной алгебре и тригонометрии. Независимо от ваших математических навыков, выполнение 3d-преобразований на таком низком уровне чрезвычайно дорогостоящее исполнение, и очень сильно варьируется между разными браузерами (Chrome - самый быстрый, Firefox будет перекликаться с довольно низкими кадрами, а Safari находится где-то посередине).

Лучшее решение, разумное, но сложное и математическое, состоит в использовании drawImage, чтобы нарисовать изображение/текст/все, что угодно, на холсте по одной строке за раз, и между каждым изменением значения масштабирования изображения холста. Это именно тот метод, который использовался для получения перспективы в SNES с режимом 7, который изначально поддерживал только двумерные преобразования.

Another method is detailed here.

Как вы можете себе представить, все это тривиально, а производительность пятнистой в лучшем случае. Поэтому, если вы не хотите вникать в массивы линейной алгебры, тригонометрии и документации по API холста, я бы сказал, что вам очень не повезло. Любая библиотека JS, которая работает по вашему запросу, подчиняется всем этим ограничениям. Я знаю о нескольких демонстрациях там, но никто из них действительно не может быть назван библиотекой (хотя, если кто-то знает о чем-то, я был бы счастлив, если бы его исправили).

Если кто-то интересуется ореховыми деталями любого из подходов, о которых я упоминал, я был бы счастлив попытаться рассказать их более подробно. В то же время вы можете играть со своей собственной демонстрацией, которая использует комбинацию первых двух техник, которые я указал.

http://bigmooworld.com/pwings/pilotwings/pilotwings.html

Некоторые из вас могли бы признать его ...

Используйте WASD для перемещения вверх/вниз, чтобы изменить масштаб изображения, вправо/влево для поворота, и Q/E, чтобы изменить перспективу. Не стесняйтесь читать код, но предупреждайте, что он не хорошо организован или прокомментирован, и большая часть его отбрасывается нежелательным кодом.

Так или иначе, мой ответ ... Да, это возможно, легко в Safari или с большим трудом и дрянной производительностью в других браузерах (и, вероятно, есть способ в IE, но я не знаю, как).