gallery/gerb_rgpu_1
En
Ru

New Educational Strategies in Modern Information Space - 2020

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

Тетюев Е.В.,

Жук Ю.А.

СПбГЛТУ им. С.М. Кирова

г. Санкт-Петербург

zhuk_yua@mail.ru

 

Перспективы использования технологии WebGL в современном образовательном процессе

 

  В статье рассмотрена браузерная технология визуализации 3D объектов и возможности её использования в цифровой обучающей среде. Созданные с помощью технологии WebGL наглядные образовательные пособия помогают улучшить качество преподавания, а также повышают качество уже имеющихся материалов для обучения.

 

Tetiuev E.V., Zhuk Y.A.

SPbFTU

St.Petersburg, Russia

zhuk_yua@mail.ru

 

 

Components and opportunities for digital transformation of disciplines

 

  The article is about browser-based 3D object visualization technology and its possible use in a digital learning environment. Visual educational materials created with WebGL help to improve quality of existing teaching materials, as well as the quality of teaching itself.

 

  Динамика современной жизни, развитие информационных и коммуникационных технологий вносят существенный вклад в формирование современного общества. Неудивительно, что тенденции к цифровизации отражаются и на современном образовательном процессе [3].

 

  На протяжении долгого времени основу процесса обучения составляли лекции и практические занятия, в качестве основных средств хранения информации выступали учебники и конспекты. По мере развития прогресса учебные материалы дополнялись фотографиями, фильмами, в аудиториях появились проекторы. Огромный шаг в эволюции учебной среды был сделан с появлением первых компьютеров и обучающих программ, а создание сети Интернет и оцифровка печатных изданий без сомнения произвели революцию в способах получения информации. Сегодня под образовательный процесс создаются презентации, изображения, специальное программное обеспечение и даже целые операционные системы. Цифровая обучающая среда будет дополняться новыми технологиями, однако в этой статье речь пойдёт о технологии, которая существует уже почти 10 лет, но остаётся малоизвестной, будучи у всех на виду.

 

  С момента своего появления веб-браузер стал одной из самых часто используемых программ. В понимании большинства людей браузер нужен для отображения интернет страниц, общения и обмена файлами. Браузеры активно используются в образовательном процессе, преимущественно в дистанционном образовании. Однако мало кто догадывается о технологиях, спрятанных в таком привычном и простом браузере. Одна из них – WebGL.

 

  WebGL – это программный интерфейс для отображения интерактивной 2D и 3D графики с помощью браузера без использования дополнительных приложений или плагинов. С момента своего создания он использовался преимущественно для написания игр, визуализации интернет-библиотек трёхмерных моделей, в специализированных или инди-проектах. Действительно, существует множество статей для обучения работе с WebGL, однако количество статей про использование WebGL в обучении катастрофически мало. При этом, некоторые авторы предрекают грядущий успех использования технологии в определённых сферах, например, при обучении компьютерной графике [1].

Рисунок 1 – 3D модель бульдозера, открывается прямо в браузере и не требует установки каких-либо программ. Источник – проект Three.JS [5]

 

  Что же даёт эта технология, и какие у неё есть преимущества? Говоря простыми словами, WebGL позволяет визуализировать пространственные объекты в интерактивной среде, и это является её главным преимуществом перед классическими печатными и цифровыми материалами. В отличие от обычного изображения, трёхмерный объект можно повернуть и взглянуть на него под другим углом. Интерактивность обеспечивается использованием языка JavaScript, дающего широкий набор действий над объектами (моделями): их можно загружать из файла, создавать из геометрических примитивов, менять масштаб, положение и вращение в пространстве, задавать текстуру, цвет, прозрачность и т.д. При этом JS позволяет составлять зависимости и сценарии для управления объектами, от простого вращения камеры вокруг статического предмета до создания полноценной имитации работы станка с ЧПУ.

 

  Нередко использование каких-либо обучающих материалов упирается в необходимость установки специализированного ПО. Даже если сама установка не вызывает трудностей, могут возникнуть проблемы с получением учебной лицензии на программу, не говоря уже о том, что некоторые разработчики в принципе не предоставляют таких лицензий. В этом случае использование бесплатной и доступной технологии видится разумным, поскольку доступность является одним из ключевых преимуществ WebGL. Сегодня все современные браузеры поддерживают эту технологию, а любой домашний, рабочий или учебный компьютер имеет хотя бы один браузер, следовательно, на нём уже реализована технология WebGL. Это избавляет пользователей от необходимости устанавливать специальное программное обеспечение, а разработчика – от необходимости адаптировать это программное обеспечение под разные операционные системы и платформы. Фактически работоспособность технологии определяется аппаратным обеспечением компьютера или мобильного телефона, а также подключением к Интернету. При этом можно смело утверждать, что подавляющее большинство современных ПК и абсолютное большинство смартфонов отвечают этим требованиям.

 

  Следующим преимуществом является универсальность. Часто студенты сталкиваются с тем, что при изучении какой-либо дисциплины они тратят больше времени на изучение программы, нежели самого предмета [1], при этом используют минимум функционала самой программы. Решение этой проблемы – унификация программ, а также создание максимально простого и понятного интерфейса приложения. Учитывая упомянутые ранее преимущества, браузер и WebGL имеют отличный задел для того, чтобы стать основой таких приложений.

 

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

 

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

 

  Цифровая обучающая среда подразумевает конкретные направления деятельности, в связи с чем возникает вопрос, где именно может быть полезна технология WebGL? В первую очередь, следует рассматривать применение этой технологии там, где классические плоские и статические изображения не дают достаточной информации или слишком сложны для понимания, например, при изучении приборов, деталей машин и механизмов, а также химических формул и соединений. Использование JavaScript и интерактивные возможности позволяют создавать имитацию работы устройств, например, геодезического теодолита, станка с ЧПУ или даже целой химической лаборатории. Если же совместить технологию визуализации объектов с технологией их оцифровки, можно создавать их детальные 3D модели, чтобы в дальнейшем использовать их как наглядные пособия в классическом или дистанционном обучении. Также эта технология может быть полезна в музейном деле. Таким образом, фактический спектр решаемых задач ограничивается фантазией и ресурсами заказчика.

 

  На сегодняшний день мы можем продемонстрировать несколько разработок, пригодных для использования на очных и онлайн курсах. Одна из них – простейший практикум для базового курса информатики, рассматривающий сборку системного блока компьютера и расположение в нём компонентов (рис. 2).

Рисунок 2 – имитация сборки системного блока компьютера

 

  Следующий пример – наглядное пособие для курса начертательной геометрии (рис. 3), призванное помочь увидеть и понять материал студентам, у которых плохо развито пространственное мышление.

Рисунок 3 – пособие по начертательной геометрии. Классический бумажный чертёж (слева) и визуализация на базе WebGL (справа). В визуализации также можно включить ортографическое проецирование.

  Говоря о разработке приложений на WebGL, стоит отметить, что применять технологию в чистом виде практически не имеет смысла, поскольку на сегодняшний день для неё создано несколько библиотек, значительно упрощающих работу. Наиболее известной и популярной из них является библиотека Three.JS. Силами сообщества проект обзавёлся десятками полезных библиотек, облегчающих загрузку файлов и моделей, работу с текстурами, управление камерой, качественную анимацию объектов и т.д. При этом библиотеки проекта распространяются по свободной лицензии MIT [4], которая допускает не только использование и редактирование лицензируемого продукта, но также и возможность использования его в коммерческих целях. Также стоит отметить относительную простоту кода, доступную для понимания любому программисту (рис. 4), знакомому с Си-подобными языками программирования, а также большое количество обучающих материалов, ответов на вопросы и готовых решений, представленных на ресурсах типа GitHub или StackOverflow. Если же речь идёт о разработке самих моделей для уже готовых приложений, это вполне по силам студентам, работающим с трёхмерной графикой, и может быть использовано в качестве заданий для курсовых проектов и лабораторных работ.

gallery/tetiuev_01_bulldoser
gallery/tetiuev_02_pc
gallery/tetiuev_03_geometry
gallery/tetiuev_04

Рисунок 4 – пример кода для добавления сферы в сцену с использованием библиотеки Three.JS

 

  При сохранении тенденций к цифровизации процесса обучения [2], новые технологии в образовании – всего лишь вопрос времени. Однако не стоит недооценивать те инструменты, что доступны нам уже сегодня. Использование технологии WebGL может служить для улучшения качества образовательных материалов и программ, делая их более понятными, наглядными и доступными, а красочность и интерактивность повышают интерес к изучаемому предмету. Исходя из этого, можно смело утверждать, что использование WebGL полностью соответствует духу цифровой обучающей среды.

 

Литература:

  1. Angel, E: The case for teaching computer graphics with WebGL: a 25-year perspective. IEEE Comput. Graph. App. 37(2), (2017)
  2. Альтиментова Д. Ю., Рожко К. А. Информационные технологии в образовании // Научно-методический электронный журнал «Концепт». – 2016. – Т. 11. – С. 826–830. – URL: http://e-koncept.ru/2016/86179.htm
  3. Омарова С.К. Современные тенденции образования в эпоху цифровизации // Педагогика. Вопросы теории и практики. № 1 (9) 2018
  4. Лицензия ThreeJS на сайте GitHub. https://github.com/mrdoob/three.js/blob/dev/LICENSE
  5. Пример с официального сайта проекта Three.JS   URL: https://threejs.org/examples/#webgl_loader_3mf_materials

Комментарии:

Имя  
Эл. почта  
Текст комментария  
 

Оставить комментарий:

Смышляева Виктория Александровна:

 

Статья рассматривает новую технологию визуализации объектов WebGl. В ходе чтения возникли некоторые вопросы к авторам:

1. Может ли быть использовано приложение WebGl в гуманитарной сфере? Насколько это целесообразно?

2. Какие специализированные приложения могут создать конкуренцию WebGl?

3. Насколько трудно и трудозатратно обучение работе в приложении WebGl для педагога?

 

20.03.2020 15:33

Тетюев Евгений Викторович:

 

1. Может ли быть использовано приложение WebGl в гуманитарной сфере? Насколько это целесообразно?
Да, может, например, в истории или археологии. Поскольку 3D графика отображает объекты, её использование целесообразно для визуализации физических объектов: от предметов быта или схемы расположения археологических находок в культурном слое и до воссоздания исторического вида участка местности.

2. Какие специализированные приложения могут создать конкуренцию WebGl?
WebGL - это технология, а не конкретное приложение, и на данный момент конкурентов в сегменте браузерной 3D графики у неё нет. Если же сравнивать именно возможности, существует обширный список приложений для работы с 3D графикой, но все они нуждаются в предварительной установке на ПК или мобильный телефон пользователя. При этом редакторы слишком громоздки для просмотра, просмотровщики имеют минимум интерактивности, а обучающие приложения (например, Molecules для Android и IOS) отличаются слишком узкой специализацией.

3. Насколько трудно и трудозатратно обучение работе в приложении WebGl для педагога?
Для создания приложений на WebGL у разработчика должны быть базовые знания о HTML, CSS и JavaScript, а также понимание основ 3D графики. Помимо этого, разработчику понадобятся, собственно, 3D модели, которые можно сделать самостоятельно или силами специалистов. Таким образом, наименее трудозатратным будет обучение специалиста, уже знакомого хотя бы с одной из названных дисциплин.
Если же говорить о работе с уже готовыми приложениями, их интерфейс максимально прост и понятен, и его изучение занимает считанные минуты.

 

25.03.2020 00:07