WebGL тур по Солнечной системе: Марс, часть 3

WebGL тур по солнечной системе: Марс, часть 3

От автора: мы закончили с позиционированием 3D пространства и освещением, но теперь я хочу вернуться в конец предыдущего урока к отрендеренному изображению. В этом уроке я немного отступлю от темы и расскажу вам более подробно про threeJS объекты и материалы, после чего мы вернемся к рендерингу.

Детали

В конце предыдущего урока я создал сферу:

let marsGeo = new THREE.SphereGeometry (500, 32, 32),

Радиус сферы составляет 500 единиц, в ней 32 вертикальных и горизонтальных сегмента. По умолчанию все объекты создаются в точке отсчета координат сцены (0 0 0), т.е. нам не нужно двигать их.

Фреймворк threeJS поддерживает множество 3D форм. В следующих статьях я расскажу про них. Сфера – самая простая форма, с которой можно начать.

Что будет, если уменьшить количество сегментов до 4 в каждом направлении сферы?

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

WebGL тур по Солнечной системе: Марс

Визуальный эффект увеличения сегментов сферы: 4, 8, 16 и 32 (по горизонтали и вертикали) для объекта сферы

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

Главное правило – чем больше сегментов у объекта, тем плавнее он выглядит. Однако бесплатный сыр только в мышеловке: большее количество сегментов увеличивает время на вычисления и рендеринг сцены, а также увеличивает использование ОЗУ.

Лучший баланс – нужно определить, сколько деталей нужно объекту. Если сфера очень маленькая и расположена далеко, ей не нужно много сегментов, чтобы выглядеть круглой. Однако если сделать близкий облет планеты, нам понадобится побольше сегментов, чтобы сфера постоянно была гладкой.

Бутерброд из материалов

В последнем примере я применил к сфере материал Phong:

marsMaterial = new THREE.MeshPhongMaterial( { color: 0xff6600 } ),

Phong – это шейдерный алгоритм, написанный вьетнамским исследователем компьютерной графики Bùi Tường Phong. Шейдер определяет, как свет будет взаимодействовать с 3D поверхностью: алгоритм Phong быстрый и эффективный, идеально подходит для рендеринга гладких поверхностей. В threeJS материал сливается с существующим 3D объектом, образуя меш:

marsMesh = new THREE.Mesh(marsGeo, marsMaterial);

Отрендеренный результат из предыдущего примера слегка упрощен: нам нужна планета, а не блестящая оранжевая сфера. Для этого нам необходимо задействовать дополнительные материальные аспекты. И тут нам понадобится Texture Loader.

let loader = new THREE.TextureLoader();

У большинства объектов очень много материальных аспектов. У Марса самый очевидный – это цвет. Это не должен быть какой-то один оттенок, поверхность Марса имеет сильные различия. Для создания вида планеты можно взять одну из множества бесшовных визуальных карт планеты, сделанных последними спутниками. Я возьму карту с Celestia и оберну ее по поверхности, тем самым получится материальная карта:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
marsMaterial.map = loader.load(imgLoc+"mars-map.jpg");

(Вспомните из нашего первого урока, imgLoc был задан заранее в коде, это путь к файлу наших текстур. Законченные текстуры можете скачать из этого урока).

Размер текстур WebGL

Как и с сегментами на объекте, всегда хочется использовать текстурные карты более высокого разрешения, так как тогда отрендеренный объект будет более детальным. Однако это приводит к тем же самым проблемам: увеличение использования ОЗУ и уменьшение производительности.

WebGL балансирует в некоторой степени с помощью двух ограничений на растровых текстурах:

Растровые текстуры должны иметь ширину и высоту со степенью двойки: 1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, 4096 или 8192 пикселя по горизонтали или в высоту. (Числа могут быть разными, например, 1024 пикселя в ширину на 512 в высоту).

Обычно, у мобильных браузеров ограничения на размер текстур намного больше, хотя в последнее время текстуры подросли (iOS 10 поддерживает 4096х4096, например. На сайте webglreport.com можно протестировать различные устройства и платформы).

В нашем примере я изменил размер растрового изображения до 4096 х 2048 пикселей.

WebGL тур по Солнечной системе: Марс

Материальная карта Марса

Важно, чтобы текстура была бесшовной: при изгибе вокруг объекта ее края должны состыковаться так, чтобы этого не было заметно.

Рендеринг

Чтобы что-то отобразить на экране, наша работа должна быть отрендерена. В нашем скрипте это делается пятью строками кода, три из которых в функции:

let renderer = new THREE.WebGLRenderer({antialiasing : true});
marsloc.appendChild(renderer.domElement);

function render(){
 renderer.setSize(window.innerWidth, window.innerHeight);
 renderer.clear();
 renderer.render(scene, camera); 
}

render – «состояние захвата» текущей сцены. У этого состояния много опций, но я использовал antialiasing, чтобы сгладить отрендеренную сферу Марса на фоне.

marsLoc – контейнер из первой части. К нему добавляется renderer. В функции render размер состояния захвата приравнивается к размеру окна браузера. Затем область очищается, и рендерится сцена с помощью текущей камеры.

Прямо сейчас вы получите плоский и блестящий шарик, зафиксированный в пространстве, и совсем неадаптивный. В следующей статье мы исправим эти недоразумения.

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по JavaScript: основы

Изучите JavaScript с нуля до результата!

Смотреть курс

Метки:

Похожие статьи:

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree