Объедините векторные преимущества с Bitmap в элементе HTML canvas - как?

Question

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

То, что я хотел бы сделать, это программно создать изображение первого кадра игрового «спрайта» ... это было бы векторное изображение. Хотя после первого кадра я не хочу тратить впустую циклы ЦП на рисование изображения, хотя ... я хотел бы кэшировать его как растровое / высокопроизводительное изображение для этого уровня масштабирования.

После этого, если пользователь увеличивает масштаб на> 20%, я затем перерисовываю изображение с более высоким уровнем детализации векторного изображения. Как и выше, это векторное изображение будет затем кэшироваться и оптимизироваться.

Как вы можете видеть здесь, это был бы довольно простой космический корабль. Сначала я сделал бы его программным способом как вектор, а затем ... я думаю, растровым? Цель состоит в том, чтобы не тратить процессор.

Если пользователь увеличивает ...

Будет нарисовано новое векторное изображение той же формы, хотя и с гораздо более высоким уровнем детализации. Это в основном система уровня детализации. В этом случае и после первоначальной программной прорисовки я бы "растрировал" изображение для максимальной производительности.

У кого-нибудь есть идеи о том, какие инструменты мне понадобятся, чтобы сделать это реальностью внутри HTML-холста? (Остальная часть игры будет запущена внутри элемента canvas ..)

Большое спасибо за ваши мысли.

** Редактировать: я хотел добавить ... возможно, путь рендеринга изображения через SVG (программно), а затем вставка этого png-файла в холст с помощью drawimage (), может обеспечить некоторый успех? Что-то похожее? Хм ... * * 1023

Answer 1

Мне удалось ответить на свой вопрос.

Способ сделать это - сначала создать файл SVG, а затем преобразовать его в файл PNG на клиенте с помощью команды «canvg». PNG может быть создан на разных уровнях детализации в зависимости от того, что вы хотите, и таким образом вы можете создать динамическую систему LOD.

Flash делает нечто подобное автоматически, обнажая растровое изображение файла SVG ... это называется «предварительный рендеринг». Если SVG не масштабируется или альфа не изменяется, Flash просто использует вместо этого растровое изображение (гораздо быстрее, чем непрерывный повторный рендеринг файла SVG, в сложных случаях). Размер (и, следовательно, детализация) выходного сигнала PNG может быть изменен по вашему усмотрению, поэтому предварительный рендеринг может быть выполнен также на основе событий.

Исходя из этой информации, я решил реализовать систему LOD так, чтобы SVG использовался, пока пользователь активно изменяет масштаб (масштабирует целевой «спрайт»), а затем, когда масштабирование замедляется, вычисляет предварительный рендеринг PNG. Кроме того, при чрезвычайно высоком уровне масштабирования я просто использую SVG, поскольку процессору гораздо проще вычислять SVG с высоким разрешением, чем растровые изображения, которые покрывают большую часть экрана. (просто взгляните на некоторые тесты значков HTML5, на которых много значков на экране ... чем больше значки, тем медленнее они работают).

Большое спасибо всем за комментарии здесь, и я надеюсь, что мой вопрос / ответ кому-то помог.

Answer 2

Ознакомьтесь с этой статьей, но, похоже, не существует стандартного способа сделать то, что вы хотите, и он может потерпеть неудачу в IE.

http://svgopen.org/2010/papers/62-From_SVG_to_Canvas_and_Back/#svg_to_canvas

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

Возможно, есть фреймворк, который может перевести SVG в "последовательность рисования холста", но я бы не стал ставить на высокие показатели в этом случае.