Так часто бывает, что техники оптимизации, хорошо работающие для обычной десктопной или мобильной графики, не всегда дают нужный эффект в случае WebGL. В этой статье я собрал (а точнее перевёл на русский язык и изложил в текстовом виде нашу презентацию с Verge3Day) те методы повышения производительности, которые хорошо себя зарекомендовали при создании интерактивных веб-приложений.
Рубрика «three.js» - 2
Оптимизируем ассеты для WebGL правильно
2019-06-18 в 8:36, admin, рубрики: 3d-моделирование, e-commerce, glTF, html, html5, three.js, verge3d, web-разработка, WebGL, веб-дизайн, оптимизация, Разработка веб-сайтов, Разработка под e-commerce
3D игра на three.js, nw.js
2019-05-07 в 20:13, admin, рубрики: canvas, javascript, nw.js, three.js, WebGL, игры, разработка игрЯ решил выпустить новую версию своей старой браузерной игры, которая на протяжении пары лет пользовалась успехом в качестве приложения в социальных сетях. На этот раз я задался целью оформить ее также и в виде приложения под Windows (7-8-10) и разместить в различных магазинах. Конечно, в дальнейшем можно сделать сборки и под MacOS и Linux.
Код игры написан полностью на чистом javascript. Для отображения 3D графики в качестве связующего звена между скриптом и WebGL используется библиотека three.js. Однако, так было и в старой, браузерной версии. Самым главным в этом проекте для меня стал повод параллельно с игрой дописать собственную библиотеку, призванную дополнить three.js средствами удобной работы с объектами сцены, их анимацией и многими другими возможностями. Я тогда забросил ее на длительное время. Пришла пора к ней вернуться.
Читать полностью »
Ускоряем WebGL-Three.js с помощью OffscreenCanvas и веб-воркеров
2019-04-04 в 5:27, admin, рубрики: canvas, javascript, JS, offscreencanvas, three.js, web workers, WebGL, Работа с 3D-графикой, Разработка веб-сайтов, разработка игр
В этом руководстве я расскажу как с помощью OffscreenCanvas мне удалось вынести весь код работы с WebGL и Three.js в отдельный поток веб-воркера. Это ускорило работу сайта и на слабых устройствах исчезли фризы во время загрузки страницы.
Статья основана на личном опыте, когда я добавил вращающуюся 3D-землю на свой сайт и это забрало 5 очков производительности в Google Lighthouse — слишком много для лёгких понтов.Читать полностью »
Продвинутый Three.js: шейдерные материалы и постобработка
2019-01-17 в 14:27, admin, рубрики: glsl, javascript, three.js, WebGL, Разработка веб-сайтов, шейдеры
В сети довольно много введений в основы работы с Three.js, но можно заметить нехватку материалов по более продвинутым темам. И одна из этих тем – это объединение шейдеров и сцены с трехмерными моделями. В глазах многих начинающих разработчиков это как будто несовместимые вещи из разных миров. Сегодня на простом примере “плазменной сферы” мы посмотрим, что такое ShaderMaterial и с чем его едят, а также что такое EffectComposer и как можно быстро сделать постобработку для отрендеренной сцены.
Трехмерные презентации товаров на THREE.js для самых маленьких
2018-12-21 в 11:39, admin, рубрики: javascript, three.js, WebGL, Разработка веб-сайтов
Всевозможные презентации товаров в 3D – не такая уж и редкость в наше время, но эти задачи вызывают массу вопросов у начинающих разработчиков. Сегодня мы посмотрим некоторые основы, которые помогут войти в эту тему и не спотыкаться о такую простую задачу, как отображение трехмерной модельки в браузере. В качестве подспорья будем использовать THREE.js как самый популярный инструмент в этой области.
Использование функций JavaScript для построения 3D-моделей
2018-07-24 в 12:19, admin, рубрики: canvas, javascript, three.js, WebGL, математика, Работа с 3D-графикойВ данной статье рассмотрено применение геометрической библиотеки функций WebGeometry для построения моделей сложных многогранников. Библиотека написана на языке Javascript. Ссылка на GitHub с примером, в котором приведен простейший пример использования библиотеки. Замечания и критика приветствуются.
Для отображения моделей, предварительно рассчитанных с помощью функций из библиотеки WebGeometry, применяется библиотека ThreeJS. Холст (canvas) HTML5 используется для показа отдельных плоских элементов моделей и вывода на экран вспомогательной информации.
Читать полностью »
Интерактивные 3D-карты своими руками
2018-05-07 в 12:14, admin, рубрики: 3d графика, blender 3d, three.js, WebGL, Блог компании Конференции Олега Бунина (Онтико), Работа с 3D-графикойЕсли 3D-графика не ваша основная специализация, все равно, возможно, вам придется или, как в случае автора этого доклада Александра Амосова (@s9k), захочется с ней работать. Порог входа не так высок, можно взять технологию WebGL доступную в браузере, популярный фрэймворк Three.js и небольшой компанией единомышленников сделать своими руками интересный проект. Именно на примере такого проекта, начатого в рамках хакатона Avito, и разберем основные этапы, обратим внимание на проблемные места, и, наконец, замотивируемся на создание чего-то такого же прикольного, как эта карта офиса.
Проект, кстати, интересен и сам по себе. В современных больших опенспейсах ориентироваться в пространстве, находить нужных людей или переговорки зачастую очень сложно. Конечно, можно сделать схему в Excel, но не всегда это супер хорошее решение. У Александра Амосова появилась идея сделать это более удобно, которой он поделился на Frontend Conf, а ниже расшифровка его доклада.
Как я браузерный 3D-футбол писала. Часть 2
2017-10-06 в 2:24, admin, рубрики: Gamedev, javascript, three.js, TypeScript, WebGL, разработка игрПривет!
Вот и подоспело продолжение моего рассказа о написании браузерного 3D-футбола. Прошу прощения за длительный перерыв, виною тому работа, производство борщей и прочего съестного для любимого мужа, тягости ремонта и всякое другое. Но статья сама себя не напишет и не прочитает. Поэтому всех интересующихся и ещё не забывших про первую часть — милости прошу под кат.
На всякий случай ссылка на первую часть — Как я браузерный 3D-футбол писала. Часть 1
Читать полностью »
Как я браузерный 3D-футбол писала. Часть 1
2017-09-08 в 14:52, admin, рубрики: Gamedev, javascript, three.js, TypeScript, WebGL, разработка игрПривет! Хочу поделиться историей о том, как я браузерный 3D-футбол писала. Началось всё с того, что мой муж любит футбол. Смотрит трансляции, ходит на игры, играет на телефоне. И вот, чтобы сделать ему сюрприз, а также, чтобы хоть ненадолго оторвать от девайса с игрой, решила написать свою игру.
Под катом я расскажу как дружила TypeScript и Three.js и что из этого получилось.
Читать полностью »
Трехмерная графика в вебе
2017-04-04 в 12:16, admin, рубрики: babylon.js, three.js, WebGL, webglu, трехмерная анимация, трёхмерная графика, метки: трехмерная анимация, трёхмерная графикаВеб-технологии прочно вошли в нашу повседневную жизнь. Мы проводим во всемирной паутине достаточно большое количество времени — смотрим новости, совершаем покупки, общаемся и работаем. Индустрия услуг и развлечений в сети Интернет стремительно развивается, ведущие разработчики программного обеспечения улучшают поддержку трехмерной графики в своих продуктах. Традиционно ее поддержка ограничивалась высокопроизводительными компьютерами или специализированными игровыми консолями, а программирование требовало применения сложных алгоритмов. Однако благодаря росту производительности персональных компьютеров и расширению возможностей браузеров стало возможным создание и отображение трехмерной графики с применением веб-технологий.
В отличие от других технологий для работы с трехмерной графикой (таких как OpenGL и Direct3D), WebGL предназначена для использования в веб-страницах и не требует установки специализированных расширений или библиотек. Одно из преимуществ WebGL — приложения конструируются как веб-страницы, то есть одна и та же программа будет успешно выполняться на самых разных устройствах (к примеру, на смартфонах, планшетных компьютерах и игровых консолях). Это означает, что WebGL будет оказывать все более усиливающееся влияние на сообщество разработчиков и станет одним из основных инструментов программирования графики.
