Скриншот canvas

26 июля 2017 08:29
Доброго дня всем. Есть задача - сделать скриншот всего канваса и наложить полученное изображение как текстуру на объект. Полагаю надо копать в сторону canvas_data_url но не понимаю, как эта функция работает..
26 июля 2017 12:37
Добрый день, в canvas_data_url можно передать callback, в который придет url blob-объекта, содержащего данные скриншота. Потом его можно отрисовать в canvas-текстуру, которую заранее подготовить на объекте в Блендере.

Вот как-то так, например:
function click_cb() {
    var cube = m_scenes.get_object_by_name("Cube");
    var img = new Image();

    var cb = function(url) {
        img.onload = function() {
            var ctx = m_tex.get_canvas_ctx(cube, "Texture");
            ctx.drawImage(img, 0, 0);
            m_tex.update_canvas_ctx(cube, "Texture");
        }
        img.src = url;
    }

    m_main.canvas_data_url(cb, "image/png", 1.0, true);
}
Команда Blend4Web
27 июля 2017 08:23
Вот как-то так, например:


Спасибо, получилось. Но скорость оставляет желать лучшего… Хотел данным способом реализовать эффект перелистывания страниц. Суть заключалась в том, что бы по нажатию на интерфейсную кнопку делался скриншот и накладывался на ранее невидимую плоскость, которая в свою очередь анимирована, как перелистывающаяся страница.
А какими еще способами можно сделать скриншот канваса? Я знаю, что есть целый метод SCREENSHOTER Он вроде работает быстро. Можно ли как то его переделать под себя? Как я понял кроме функции shot он больше ничего не умеет?
27 июля 2017 12:48
Но скорость оставляет желать лучшего…
А насколько сильно тормозит? Взятие скриншота вообщем-то не для реалтайма, как разовое действие может сойти, но, если нужна хорошая отзывчивость, например, перелистать несколько страниц подряд, то не очень подходит.
Вот, кстати, есть демка, где пишется видео в канвас текстуру: canvas_texture, если она у вас не тормозит, то проблемы - действительно именно со взятием скриншота.

А какими еще способами можно сделать скриншот канваса? Я знаю, что есть целый метод SCREENSHOTER Он вроде работает быстро. Можно ли как то его переделать под себя? Как я понял кроме функции shot он больше ничего не умеет?
Ну, по сути, мой пример - это и есть переписанный метод, который в итоге вызывается функцией shot , вот исходники: ссылка, только там просто формируется ссылка для скачивания через тот же параметр url. Других методов в API движка для взятия скриншота нет, если только самому что-то пробовать переписать.

Вообще ещё есть способ рендерить в текстуру - там вообще без скриншотов - возможно, вам подойдет.
Команда Blend4Web
27 июля 2017 21:13
Вообще ещё есть способ рендерить в текстуру - там вообще без скриншотов - возможно, вам подойдет.

Отличный вариант, но есть одно НО!) Как рендерить в текстуру из камеры в этой же сцены? Как это реализовали в приложении от nasa?
28 июля 2017 14:34
Отличный вариант, но есть одно НО!) Как рендерить в текстуру из камеры в этой же сцены? Как это реализовали в приложении от nasa?
Насчет nasa не знаю, но вообще для этого нужно несколько сцен. В sdk есть демка ./blender/dev_multi/4_cams.blend - там можно глянуть как это сделано.
Команда Blend4Web
28 июля 2017 15:46
Спасибо за ответы. Тогда такой вопрос. Могу ли я управлять второй сценой, пока запущена первая?
28 июля 2017 17:15
у вторичных сцен есть некоторые нюансы, но объектами можно управлять в одно и тоже время и там и там
Команда Blend4Web
 
Пожалуйста, зарегистрируйтесь или войдите под своей учетной записью , чтобы оставлять сообщения.