Если я не играю и не смотрю фотографии знакомых девушек в контакте, то программирование — мое любимое занятие на компьютере.
Мне особенно нравится «быстрое» программирование.
Это программирование, когда проект небольшой и когда мы не проводим фундаментальных исследований, а планирование не требует документации.
Кстати, на работе не все проекты такие, и они тоже ориентированы на закрытую аудиторию.
В основном именно поэтому вы сейчас читаете мою статью, а еще я хочу попасть на Хабр.
Хочу поделиться с вами результатами моего проекта выходного дня.
Это чисто клиентское приложение javascript/html, которое состоит из редактора исходного кода на Javascript и ГЛСЛ -шейдеры, мини-линкер, окно с Three.JS/WebGL и небольшой интерфейс времени выполнения.
Все это склеивается с помощью jquery, а сверху прикручивается галерея с видео.
В галерее представлено несколько демонстраций.
Вы можете выбрать понравившуюся демо-версию и поиграть с ее кодом, а также экспортировать и импортировать целые проекты из нескольких файлов через JSON. Код каждой демо-версии может находиться в нескольких файлах.
Эти файлы загружаются ajax и сразу сохраняются в локальном хранилище, где их можно редактировать, добавлять и удалять новые.
Повторюсь, приложение чисто клиентское.
Файловый API используется для добавления файлов в локальное хранилище.
Вы можете добавлять только текстовые файлы, поскольку локальное хранилище ограничено при хранении представлений двоичных файлов в формате Base64. Ссылку на рабочее приложение давать не буду, так как своего нормального хостинга у меня нет. Остается только скачать исходники и разместить их на своем веб-сервере.
Веб-сервер по-прежнему необходим, поскольку с недавних пор WebGL запретили загружать текстуры из локальной файловой системы.
Все исходники доступны на Bitbucket в системе Mercurial: https://bitbucket.org/Bangybug/treejsplayground , также есть возможность скачать Zip-архив.
Также есть небольшое видео, которое вас заинтересует: Если вы заинтересовались и решили скачать исходники, то считаю своим долгом предупредить, что нормально работает только на Хроме (у меня 21.0.1180.60).
В Firefox (у меня 14.0.1) WebGL на данный момент отключен, и чтобы его включить, нужно в адресной строке набрать about:config, затем установить фильтр webgl, поставить принудительно включено = true И отключен = ложь .
Но на этом горести Firefox не заканчиваются — о Галерее читайте ниже.
Как все начиналось и чем закончилось
Сначала возникла необходимость написать шейдер.У меня не так много опыта в этом деле, поэтому я планировал попросить совета у своих виртуальных друзей.
Еще я хотел немного облегчить им работу, показав сразу свой прототип, без необходимости ничего устанавливать, но с возможностью вносить изменения на лету и наблюдать за результатом.
Задумано и сделано, выбор сразу пал на WebGL. Строить свой велосипед из вызовов функций самого WebGL мне не хотелось, благо библиотека Three.JS удачно подвернулась.
Тут мелькнула мысль, что неплохо было бы выбрать редактор с подсветкой вместо textarea. Выбор пал на ТУЗ .
Мне он показался достаточно качественным, работает с большими файлами, поддерживает код складывания , анализирует код и может сказать, где ошибка или как это лучше сделать.
Потом мне захотелось сделать что-то вроде менеджера проектов, который бы включал список файлов и мог удалять и добавлять файлы по усмотрению клиента.
По сути, я не хотел возиться с серверным кодом; единственным выходом стали нововведения Html5: Файловый API И Локальное хранилище , заодно посмотреть что и как.
Как только менеджер проекта со списком файлов был готов, автоматически возникла необходимость в компоновщике файлов исходного кода.
Был написан элементарный компоновщик, который с помощью функции оценивать проходит через все файлы.
Если один из источников требует функциональности другого, до которой компоновщик еще не дошел, то достаточно вызвать специальную функцию компоновщика.
Приложение.
требуется .
В этом случае компоновщик не будет просматривать ранее включенные файлы.
Не встретив проблем, я решил продолжить урок.
Интерес переключился на другие инновации Html5 в этой области.
CSS и визуальные эффекты.
Я хотел сделать видеогалерею, где каждое видео будет показано с некоторыми CSS -эффект. Здесь уже возникли трудности.
Они описаны ниже.
Последним шагом было выделение кода шейдера в отдельный тип исходного кода.
При редактировании шейдеров редактор переключился на грамматику языка.
С .
Это оказалось удобно, поскольку в противном случае нам пришлось бы хранить код шейдера либо внутри Javascript, либо внутри Html.
Компиляция файлов проекта и минимальный интерфейс времени выполнения.
Как уже отмечалось, имеется элементарный компоновщик.
Это в файле приложение/linker.js .
Он имеет функцию require, которая доступна из источника как Приложение.
требуется .
Эту функцию следует вызывать для того, чтобы обеспечить правильный порядок подключения скомпилированных исходников.
Практический пример – Демонстрация "Братья по оружию" (см.
галерею).
Существует также минимальный интерфейс времени выполнения, который состоит из следующих объектов:
- APP.page.webgl.renderer - объект готов к работе Рендерер из Three.JS;
- APP.page.webgl.viewport - объект со свойствами ширина И высота , устанавливается автоматически при инициализации окна WebGL, значения берутся из вебгл.
css ;
- APP.page.webgl.viewportMouse - объект с функциями получитьX() И получитьY() , которые возвращают последние видимые координаты указателя, когда он находился над окном WebGL;
- APP.shader(vertexShaderFileName, фрагментShaderFileName, униформы) - возвращает новый объект ТРИ.
ShaderMaterial , собранный из указанных подпрограмм и констант униформа .
В дальнейшем вы сможете изменить значения свойств объекта.
униформа , и шейдер автоматически подберет их перед рендерингом.
В свою очередь, функции должны быть определены в исходном коде клиента.
основной И Выход .
Эти функции отвечают за запуск и остановку демонстрации.
Рекомендуется очистить ресурсы внутри выхода.
Ээксперименты с видеогалереей
Здесь я столкнулся с трудностями.Во-первых, граница-радиус в Chrome не применяется к элементу видео .
Точнее, это касается только того изображения, которое используется в качестве постера.
Как только видео начинает воспроизводиться, скругления исчезают. Стиль коробчатое отражение работает только в вебките.
В Firefox всплыли проблемы с версткой и, что совсем печально, с самой идеей видеогалереи.
Вы не можете просто взять и вставить даже 4-5 видеоэлементов, даже если при наведении курсора будет воспроизводиться только один из них.
Firefox отправляет много запросов, зависает страница и даже мой локальный Apache httpd. Мне нужно закрыть браузер.
В Хроме проблем с зависанием нет, хотя все же есть над чем поразмышлять, глядя на потребление памяти.
В результате я просто добавил параметр в файл приложение/gallery.js/initialize — useImages .
Если вы установите значение true, вместо видео будут изображения.
Компиляция шейдеров
Для компиляции шейдеров я добавил функцию APP.шейдер , это описано выше.Сразу уточню, что здесь используется код из Three.JS. Этот код автоматически установит атрибут с именем "позиция" .
Имейте это в виду, не пытайтесь написать для этого атрибута шейдер с другим именем.
Есть альтернатива — это переписать функцию приложение/webgl.js/шейдер , но вы потеряете возможность использовать рендерер из Three.JS.
Сравнение с примером кода на «чистом» WebGL
Само собой, кода в Three.JS будет гораздо меньше.А если вы воспользуетесь моей игровой площадкой, код будет еще меньше.
Единственное препятствие — необходимость понимать, как определенные функции WebGL обертываются в библиотеку Three.JS. Например, режим отправки данных вершин TRIANGLE_STRIP в Three.JS соответствует объекту ТРИ.
Лента .
Для сравнения откройте каталоги с идентичным проектом: /по умолчанию/источники/вода И /default/sources/water_webgl .
Это даст вам представление о различиях между чистым WebGL и Three.JS.
Готовим новое демо и вставляем его в проект
Все демонстрации описаны в приложение/gallery.js/проекты .Типичное описание выглядит так: Теги: #webgl #threejs #детская площадка #разработка сайтов #webgl
-
На Pirate Bay Уже Миллион Торрентов
19 Oct, 24 -
Евросеть Продает Сим-Карты Чайникам
19 Oct, 24 -
Вы Храните Данные На Диске C:?
19 Oct, 24
