Технология webgl что это
Знакомство с WebGL
Введение
Статья создана с целью показать основные действия, необходимые для отображения 3d в современном браузере, используя технологию WebGL. Для достижения цели рассмотрим задачу построения нескольких линий в трехмерном пространстве.
1. WebGL-контекст
WebGL контекст возможно получить из DOM-элемента canvas, вызвав метод getContext(“experimental-webgl”). Следует заметить, что Khronos Group рекомендует (https://www.khronos.org/webgl/wiki/FAQ) для получения контекста WebGL использовать следующий способ:
При успешном получении контекста объект gl имеет методы, названия которых очень похожи на функции OpenGL ES. Например, функция clear(COLOR_BUFFER_BIT) для WebGL будет gl.clear(gl.COLOR_BUFFER_BIT), что очень удобно. Но следует помнить, что не все функции WebGL имеют такой же синтаксис, как и функции OpenGL ES 2.0.
2. Шейдеры
Шейдерная программа является неотъемлемой частью построения изображений с помощью WebGL. Именно через нее задается положение и цвет каждой вершины наших линий. В нашей задаче используется два шейдера: вершинный и фрагментный. При построении линий в трехмерном пространстве вершинный шейдер отвечает за положение вершин в пространстве, основываясь на значениях видовой матрицы и матрицы перспективной проекции. Фрагментный шейдер используется для вычисления цвета наших линий.
Вершинный шейдер
Фрагментный шейдер
То, что определено после «uniform» является общим для всех вершин. Здесь это матрицы преобразования: видовая и перспективная. То, что определено после «attribute» используется при вычислении каждой вершины. Здесь это положение вершины и ее цвет. После «varying» определяем переменную, которая будет передана из вершинного во фрагментный шейдер. Результат вычисления положения присваиваем переменной gl_Position, цвета — gl_FragColor.
3. Модельно-видовая матрица и матрица перспективной проекции
Обе матрицы имеют размер 4х4 и используются для расчета отображения трехмерных объектов на двумерную плоскость. Их различие в том, что видовая матрица определяет, как объекты будут выглядеть для наблюдателя, например, при изменении его положения, а матрица проекции изначально задает способ проецирования.
В нашей программе значения матрицы проекции задаются при вызове функции gluPerspective на этапе инициализации, в дальнейшем эта матрица не меняет своих значений. Функция gluPerspective не является стандартной, ее мы определили сами. Ее аргументы: fovy, aspect, zNear, zFar. fovy — область угла просмотра по вертикали в градусах; aspect — отношение ширины области просмотра к высоте; zNear — расстояние до ближней плоскости отсечения (всё что ближе — не рисуется); zFar — расстояние до дальней плоскости отсечения (всё что дальше — не рисуется).
Для задания значений модельно-видовой матрицы можно использовать несколько подходов. Например, создать и использовать функцию gluLookAt ( camX, camY, camZ, tarX, tarY, tarZ, upX, upY, upZ) – аналог функции для OpenGL, которая принимает в качестве аргументов координаты положение камеры, координаты цели камеры и up-вектор камеры. Другой способ, это создание и использование функций glTranslate, glRotate, glScale, которые производят сдвиг, вращение, масштабирование относительно наблюдателя (камеры). Для первичного определения положения камеры можно использовать gluLookAt, а для последующих преобразований использовать glTranslate, glRotate, glScale. Так или иначе, эти функции лишь изменяют значения одной и той же модельно-видовой матрицы. Для удобства вычисления матриц можно использовать библиотеку sylvester.js, что мы и будем делать.
Теперь, когда нашли способ изменять значения обеих матриц, рассмотрим их передачу программе шейдеров. В нашем вершинном шейдере для модельно-видовой матрицы мы используем переменную «mvMatrix». Чтобы передать этой переменной значения матрицы, нам нужно сначала получить ее индекс в программе. Для этого используем функцию loc=gl.getUniformLocation ( shaderProgram, name ), которая является стандартной. Как несложно догадаться, первый аргумент – переменная, указывающая на программу шейдеров, которая получена на втором этапе, а аргумент «name» — имя переменной, которой мы хотим передать значение, в нашем случае name= «mvMatrix». Теперь, получив индекс, используем функцию gl.uniformMatrix4fv ( loc, false, new Float32Array(mat.flatten())) для передачи значения матрицы mat. Аналогично, получаем индекс и устанавливаем значение для матрицы проекции. Следует помнить, что видовую матрицу в шейдерной программе нужно обновлять всякий раз при изменении ее значений, чтобы они вступили в силу.
4. Буферы данных
Использование буферов в WebGL обязательно. Положение каждой точки и ее цвет будем хранить в двух буферах. Рассмотрим фрагмент кода, выполняющий всю работу для буфера, хранящего координаты точек, между которыми будем рисовать прямые.
Здесь verticies – массив координат точек линий. Координаты идут по 6 штук, первые 3 из которых – x-, y-, z-координата начала линии, следующие, соответственно, конца. vPosLoc – это индекс атрибута «aVertexPosition» в шейдерной программе. Т.к. в нашей программе были явно заданы индексы с помощью gl.bindAttribLocation (shaderProgram, loc, shadersAttrib) на этапе сборки шейдерной программы, то получать их еще раз не нужно. Если бы такого не было, то следует получить индекс, используя команду «vPosLoc = getAttribLocation(shaderProgram, «aVertexPosition»)». Аналогичные действия проводятся и со вторым буфером, отличаться будет данными (вместо verticies массив цветов) и индексом в шейдерной программе (вместо vPosLoc).
5. Рисуем
Очистка буфера цвета или, проще говоря, задание фона произведем стандартными командами
Теперь выполним рисование
Первый аргумент этой функции говорит, что будем рисовать именно линии, второй – индекс в буфере, с которого начнем рисование, drawArrayLength – количество элементов для рисования. Т.к. мы в буфер передаем координаты вершин из массива verticies, то
Если у нас изменились прямые, то выполняем шаги 4, 5 для перерисовки. Если у нас изменилось положение камеры, то выполняем шаг 3 и шаг 5.
Заключение
Задача построения прямых линий взята не с потолка. Есть программа, которая решает систему дифференциальных уравнений и строит результат в 3d, используя OpenGL. Было решено перенести программу на php и отображать результат, используя WebGL. Для решения задачи об отображении в трехмерном пространстве прямых были изучены современные engine из списка (http://ru.wikipedia.org/wiki/WebGL): WebGLU, GLGE, C3DL, Copperlicht, SpiderGL и SceneJS. Для этого был создан интерфейс, позволяющий универсализировать общение основной программы со сторонними движками. Результатов удалось добиться с WebGLU, C3DL. В других либо отсутствует простой способ построения линии, либо он неоптимальный. В одном из них функция линии задокументирована, но на форуме проекта дали понять, что использовать ее не удастся, и предложили, рисовать ее многоугольниками.
К сожалению, при использовании C3DL еще не удалось оптимизировать процесс, что привело к низкому значению fps. При работе с WebGLU была допущена ошибка, которая так же повлияла на значение fps. Это заставило написать свой движок, который сейчас и используется. Я ни в коем случае не хочу упрекнуть сторонние движки, они созданы для более широкого круга задач, чем простое рисование линий.
Пару слов о браузерах. Тестировалось на Firefox 4 beta 8, Chrome 8 с –enable-webgl. На данной задаче Firefox показывал значение fps выше Chrome в 1,5-2 раза. При обновлении Chrome до beta 9 показатели не изменились. Показатели fps не изменились и при обновлении Firefox beta 8 до beta 9, разве что в консоли стало больше непонятных ошибок и стало некорректно отображаться сцена с использованием WebGLU.
Знакомство фронтендера с WebGL: почему WebGL? (часть 1)
Мне и моему коллеге дизайнеру была поставлена задача разработать новую версию сайта-визитки компании. Коллега полгода учился работать с 3D-редакторами (в нерабочее время на Maxon Cinema 4D), поэтому он хотел использовать свои новые навыки при создании новой версии сайта. Его идея заключалась в том, что на каждой странице на первом экране будет крутиться какая-нибудь непонятная фигура с каким-нибудь красивым текстом. Выглядеть это должно было примерно так:
Реальных моделей пока не было, поэтому на первое время мне предоставили модель яблока.
Основная проблема заключалась в том, что у меня не было опыта работы с 3D, я очень плохо знал математику и геометрию, а также у меня никогда не было опыта работы с WebGL. В общем, в свои силы я верил слабо. По итогу с задачей я справился, и я хочу рассказать об этом опыте в небольшом цикле статей.
Знакомство фронтендера с WebGL: почему WebGL? (часть 1)
Почему вообще WebGL?
Слово WebGL у меня ассоциируется с 3D. Я считаю, что больше нет нормальных способов отрендерить что-то в 3D без WebGL. Помимо того, что слово WebGL само по себе звучит очень круто, нашлись и другие причины выбрать эту технологию:
Мы хотели интерактивности. Например, чтобы моделька реагировала на движение курсора мыши по двум осям. С помощью видео такое сделать невозможно.
Адаптивность. Мы могли рисовать одну модельку под любые экраны и устройства (поддержка WebGL была подавляющей). Нам не нужно рендерить заранее кучу видюх под разные экраны и переживать о том, что на каком-то экране появится пикселизация.
Проблемы с iOS. На каждой версии были свои приколы с фоновыми видео на телефоне. На одной из версий видео вообще могло не запуститься из-за политик Apple, а иногда нужно было проводить специальный обряд, чтобы фоновое видео заработало. Таких проблем с WebGL пока нет и, надеюсь, не будет.
IE11 тоже поддерживает WebGL. Да, есть нюанс, но он даже не стоит внимания.
В SVG невозможно сделать полноценный 3D, только псевдо. Также браузеры плохо себя чувствуют, когда SVG элементов в DOM больше 10 000. Это показали мои попытки отрендерить модельку в SVG.
Я думаю, первого пункта хватит, чтоб принять решение в пользу webGL.
Модель яблока была в формате OBJ, другие форматы я решил не рассматривать. Это текстовый формат и это придавало мне какой-то уверенности в том, что решений в интернете для него должно быть много.
Я гуглил «webgl obj model render» и находил только онлайн-просмотрщики или какие-то узко специфичные решения, которые запустить не смог.
Также искал демки на CodePen, но я не нашел ничего подходящего. А если что-то находил, не мог понять, что вообще происходит и что мне делать.
Понял, что нужно начать с основ, без базовых знаний webGL задачу не выполнить.
Погружение в WebGL
Не знаю как так получилось, но в интернете на глаза ресурсы по WebGL мне не попадались, поэтому я пошел Телеграм-чат @webgl_ru (найти его было просто) и спросил:
— как начать в WebGL фронту?
Похоже, что в чат постоянно заходили подобные мне ребята с аналогичными вопросами, поэтому у ребят из чата уже был заготовлен список ресурсов, который они мне и скинули. Впоследствии участники данного чата мне еще не раз помогли, за что им огромное спасибо.
Из списка, который мне скинули, я выбрал ресурс WebGL Fundamentals, у которого было довольно говорящее название, а также перевод на русский. Обычно я не вижу ничего ужасного в английской документации, но WebGL казался мне чем-то инородным и страшным, а также состоящим из подходов, которые доселе не были мне знакомы. То, что WebGL рендерит это всё через Canvas — это было единственное, что я знал об этой технологии.
Что вообще такое WebGL
Первое, что бросается в глаза, — это необычный API. Привычное нам браузерное API — это просто вызов методов у каких-то встроенных объектов/классов, тогда как апи WebGL это как будто вы программно настраиваете repl node.js, а потом прокидываете в этот repl строки javascript кода и получаете какой-то результат из этого.В случаи webgl вы настраиваете внутри браузера обрезанную версию OpenGL(библиотека которая заставляет наши видеокарты что-то рисовать) и прокидываете в нее код на языке GLSL. GLSL обрезанный C подобный язык, погрузится несложно. Как будто пишешь на es3 javascript.
Если обобщить, то работа на webgl выглядит так:
Получаете доступ к webgl (по сути к openGL, но версия обрезанная и потому этому называется webgl).
Выставляете какие-нить специальные флаги, которые могут менять работу рендера.
Пишите программу на GLSL. Сама программа это просто функции которые принимает данные и выплевывает какой-то результат. Данные это точки в координатной системе, а также цвет этой точки. Тип как указать положение div 1х1 через absolute и поставить его центр на высоте 300 пикселей, покрасив в красный.
В случае 3D нужно еще указать глубину точки, ну это пока не важно.
Пропускаете через апи координаты, цвета и другие параметры.
PROFIT! Мы получаем 2D/3D картинку.
Шейдеры
Выше я говорил про программы на GLSL, программа всегда состоит из 2 шейдеров. Шейдер есть функция.Каждая программа состоит из вершинного шейдера (Vertex Shader) и фрагментного шейдера (Fragment Shader).
Сначала им нужно выставить точки в пространстве, потом соединить эти точки невидимыми линиями, а потом закрасить каждый пиксель внутри получившийся фигуры.
Если приводить пример из жизни, у вас есть стенка 1м х 1м и есть художник по имени Видеокарта. Вот вы и ему говорите:
— Поставь мне точку на 30 сантиметров от верха и 50 см слева, потом точку в 50х50, потом в 70х80, соедини мне это линиями и закрась получившееся пространство красным.
Сами шейдеры выглядит так:
Вершинный шейдер (Vertex Shader)
Фрагментный шейдер (Fragment Shader)
Атрибуты определяют, каким образом данные из ваших буферов передаются в вершинный шейдер. Например, вы можете поместить положения вершин в буфер как три 32-битных числа с плавающей точкой на одно положение. Вы указываете конкретному атрибуту, откуда брать положения вершин, какой тип данных используется (три 32-битных числа с плавающей точкой), начиная с какого индекса в буфере начинаются положения вершин и какое количество байтов нужно получить от одного положения до следующего.
Доступ к буферам не произвольный. Вместо этого вершинный шейдер выполняется заданное количество раз и каждый раз, когда он выполняется, выбирается следующее значение каждого из указанных буферов и назначается атрибуту.
Вершинный шейдер выполняется на каждую порцию x,y,z (z может не указываться, если рисуем в 2D) координат. Каждые такие координаты создают вершину. А дальше уже эти вершины объединяются в треугольники (полигоны) и потом фрагментным шейдером эти треугольники закрашиваются.
Вы спросите, почему именно треугольники?
В процессе обучения я на это не обращал внимания, но когда начал предпринимать попытки нарисовать модельку тоже удивился, но оказывается любую фигуру можно нарисовать через ТРЕУГОЛЬНИКИ (ПОЛИГОНЫ) и потому, добавлять другие фигуры бессмысленно.
Треугольник есть абсолют.
В webgl можно рисовать только треугольниками, линиями и точками.
Если рисовать через линии, то будут только отрисовываться грани между вершинами, но все что внутри фигуры не будет закрашиваться.
Если рисовать через точки, то будут отрисовываться только точки! Удивительно!
Матрицы
Также я узнал про матрицы. Это пришло из математики и для js разраба это выглядит как массив из 9 или 12 чисел (12 для 3D).Матрицы решают вопросы того как трансформировать модель (а точней вершины), чтоб поставить модельку в нужное место в пространстве, увеличить или покрутить.Матрицы еще позволяют создавать камеры, то есть менять вид обзора и другое. Вы могли с ними встречаться, если работали transform: matrix(. n) в css.
Матрицы один из фундаментов 2D/3D графики. Наверно одна из немногих вещей которой можно пользоваться не разбираясь как она работает.
Достаточно запомнить, что чтоб применить несколько трансформаций нужно просто матрицы друг на друга перемножить и результат передать в шейдер. Матрица 3х3 для 2D трансформаций, а 4х4 для 3D трансформаций.
Хорошие люди уже все за нас написали gl-matrix. Нам нужно вызывать только знакомые на слух название методов и получать нужный результат. Более подробно про матрицы можно узнать на webgl fundumentals.
Hello world на webgl
Так как все же выглядит hello world код на webgl? Что вообще требуется для того, чтоб это запустить и нарисовать треугольник?
Нужно получить ссылку на canvas элемент.
Получить из него webgl контекст, то есть то что нам позволит общаться с webgl и рисовать через него.
Создать программу из вершинного шейдера и фрагментного шейдера.
Получить ссылки на переменные из шейдеров.
Запустить функцию drawArrays у webgl.
Вуаля, мы получили наш треугольник.
И после такого количества кода (по ссылке), мы получаем треугольник.
Честно говоря, это безумное количества кода ради одного треугольника немного остудило желание, но автор учебника объяснил, что все это можно убрать под хелперы. Посмотрев на этот пример, можно понять безумные размеры 3D либ.
«WebGL Beginner’s Guide» Глава 1: Начиная работать с WebGL
Хочу начать вольный перевод отличной книги «WebGL Beginner’s Guide», которая, на мой взгляд, будет интересна не только новичкам, но и более продвинутым разработчикам.
Системные требования
Что представляет собой WebGL
Структура WebGL приложения
Создание HTML5 canvas
Что только что произошло?
Мы только что создали простую веб-страницу с содержащимся в ней холстом. Этот холст будет содержать наши 3D-приложения. Давайте разберем некоторые важные элементы, представленные в этом примере.
Определение CSS-стиля для границы
Это кусок кода, который определяет стиль холста:
Доступ к контексту WebGL
Что же только что произошло?
Используя переменную JavaScript (gl), мы получили ссылку на контекст WebGL. Давайте вернемся и проверим код, который позволяет получить доступ к WebGL:
Метод холста getContext дает нам доступ к WebGL. Все, что нам нужно, это указать имя контекста, которое может быть разным у разных производителей. Поэтому мы сгруппировали все возможные имена контекста в массив names. Крайне важно проверить спецификацию WebGL (вы можете найти ее в интернете) на любые изменения, касающиеся соглашения об именовании.
getContext так же может обеспечить доступ к 2D-графике HTML5 при использовании 2D –библиотеки, в зависимости от имени контекста. В отличие от WebGL это соглашение об именах является стандартным. API 2D-графики HTML5 является полностью независимым от WebGL и выходит за рамки этой книги.
Машина состояний WebGL
Загружаем 3D-сцену
До сих пор мы видели как можно получить и настроить контекст WebGL; следующим шагом является обсуждение объектов, освещения и камеры. Однако, почему мы должны ждать, чтобы посмотреть на возможности WebGL? В этом разделе мы посмотрим как выглядит WebGL-сцена.
Виртуальный автосалон
Резюме
В этой главе мы рассмотрели четыре основных элемента, которые всегда присутствуют в любом WebGL-приложении: холст, объект, свет и камера.
Мы узнали, как добавить на веб-страницу HTML5 canvas, как установить его ID, ширину и высоту. После этого мы написали код, который создавал контекст WebGL. Мы увидели, что WebGL работает как машина состояний, как таковая, мы можем запросить любую из своих переменных, использую функцию getParameter.
В следующей главе мы узнаем, как определить, загрузить и отрисовать 3D-модель в WebGL-сцене.
Ресурсы к этой статье вы можете скачать по ссылке
ТОП 10 примеров WebGL технологий
Технологии дополненной и виртуальной реальности постоянно развиваются, но мало, кто знает про такую возможность как Web VR, которая позволяет при помощи различных адаптивных блоков размещать на своем сайте как целый 3D мир, так и отдельные 3D объекты. Использование Web VR увеличивает время нахождения пользователей на сайте и тем самым повышает сайт в поисковой выдаче благодаря поведенческому фактору, что делает эту технологию отличным инструментом для SEO специалиста.
Согласно википедии, WebGL (Web-based Graphics Library) — кроссплатформенный API для 3D-графики в браузере, разрабатываемый некоммерческой организацией-консорциумом Khronos Group, куда, кстати, входят такие ведущие разработчики браузеров как Google (Chrome), Mozilla (Firefox), и Apple (Safari).
Мы давно занимаемся разработкой дополненной и виртуальной реальности и решили подготовить ТОП 10 примеров с применением WebGl технологии.
Невероятные возможности по запеканию света и текстур от фреймворка Baylon.js. В этом примере вы увидите часть дворца Спонца в Хорватии, воссозданного в браузере без необходимости скачивать какие-либо приложения или утилиты. Окунитесь в мир виртуальной реальности без специального оборудования.
Наглядный пример того, какими возможностями обладает фреймворк Babylon.js. Здесь вы обнаружите потрясающую реалистичную графику, причем она будет корректно отображаться во всех демоверсиях WebVR.
2. 3D Web модель с возможностью кастомизации
В этом примере представлена 3D модель обуви, которую можно видоизменять согласно собственным предпочтения, реализуя свои скрытые дизайнерские таланты. Отличное решение для демонстрации 3D моделей, которых просто еще не существует. Написано при помощи Babylon.js.
3. Игра бластер от Mozilla VR
Небольшая мини-игра шутер от небезызвестного браузера. Уклоняйтесь от летающих врагов, стреляйте по ним в ответ(используйте пробел) и сохраняйте свою жизнь как можно дольше. Несмотря на простоту разработки, игра увлекает своей механикой и артом.
4. Konterball WebGl
настольный теннис прямо у Вас в барузере. Выбирайте режим(одиночный или многопользовательский) и начинайте свое путешествие в мир большого спорта. Играйте, учитесь и побеждайте. Используемые библиотеки deepstream.io и three.js, cannon.js.
5. Галерея VR у Вас в браузере
Сейчас, в условиях карантина, посещение мест скопления людей крайне нежелательно, но стремление к великому никто не отменял. В этом примере вы окажетесь в картинной галерее и сможете изучить творения еще не самых известных художников в окне своего браузера. Материалы и текстуры 3D галереи настроены очень качественно, создавая эффект виртуальной реальности. Использован Unity WebGl.
Как прорекламировать театральное представление, не раскрывая спойлеров и создав ощущение таинственности? Яркое решение с использованием библиотеки thee.js окунет Вас в волшебный мир остросюжетного триллера в виртуальной реальности.
Еще один пример с использованием библиотеки three.js, в котором вы сможете управлять гоночными машинами в дневном и ночном режиме. У Вас будет на выбор две 3D модели машин Gallardo и Veyron, выполненные с высокой степенью детализации. Меняйте камеры обзора и создавайте свои гоночные трейлеры.
Этот проект сложно описать словами. Просто переходите по ссылке и Вы все поймете.
9. Веб-игра Учимся летать
Квадратные здания, ночь, Вы играете за пингвина, который учится летать. Управляйте стрелками, избегайте столкновений и пролетите как можно дольше. Игра не отличается качественной 3D графикой, но захватывает своей простой механикой. Очередная мини-игра на технологии WebGl.
10. 3D Вода в WebGL
Развитие технологий дополненной и виртуальной реальности создает новые течения в научной среде, запуская разработку экспериментальных решений по расширению возможностей не только приложений, но и браузеров.
Если Вас заинтересовало это направление и вы думаете, как можно применить данную технологию к своему бизнесу, оставьте заявку на нашем сайте и мы обязательно подскажем лучшее решение по использованию WebGl для ваших проектов.
Прогноз погоды с эффектом дополненной реальности
Рисование в VR
AR vs VR
*дополненная реальность vs виртуальная реальность
Французы испытали комнату смешанной реальности
Французская компания THÉORIZ Studio представила помещение, позволяющее взаимодействовать с дополненной и виртуальной реальностью без VR-шлема.
Большинство существующих технологий смешанной реальности предполагают использование специальных шлема и нередко — контроллеров для имитации присутствия в определенном пространстве. Несмотря на совершенствование таких устройств, в частности разработки беспроводных решений, они остаются сравнительно громоздкими и могут вызывать у пользователя дискомфорт. В качестве альтернативы рассматривается отображение виртуальных объектов с помощью проекторов. Такой подход позволяет интегрировать дополненную реальность с настоящими объектами, например зданиями, и часто задействуется в световых шоу, но, в отличие от шлемов, не предусматривает интерактивности.
В рамках нового проекта THÉORIZ Studio представила систему, которая объединяет эти технологии. Разработчики создали комнату, на стены и пол которой с помощью проекторов выводятся виртуальные объекты. Взаимодействовать с последними пользователь может без специальных устройств. Адаптация среды к поведению человека происходит благодаря отслеживанию его действий посредством маяков системы позиционирования HTC Vive. В результате проекции кажутся не только трехмерными, но и интерактивными. Как сообщают инженеры, на видеозаписи показаны вторые испытания комнаты, которая реагировала на движения в режиме реального времени. Ролик не подвергался последующей обработке.
Следует отметить, что ощущение трехмерного пространства в подобной системе должно возникать только у непосредственного пользователя, тогда как сторонний наблюдатель будет воспринимать виртуальные объекты как искаженные. На видеозаписи, однако, иллюзия смешанной комнаты поддерживается также в кадре. По всей видимости, в целях демонстрации система была настроена таким образом, чтобы проецировать объекты без деформаций только для оператора. При этом датчики позиционирования параллельно отслеживали движения человека в комнате. Похожую технологию в 2016 году продемонстрировала Microsoft: в этом случае проектор выводил изображение собеседника в полный рост на мебель.