Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 29
Как-то не очень естественно получается тень. Если судить по отбрасываемой тени забора и кустиков, то источник света должен находиться раза в 2-3 выше человечка, который ростом с забор.
Полюбопытствую, а зачем вы это делаете? У вас изометрический 2д мир, в нем 3д тени в любом случае будут смотреться нереалистично. Если просто поковыряться вне проекта с шейдерами и тенями — то ок. Если повысить графоний, то, ИМХО, вы якобы хотите просто сделать тени, а на самом деле — чтобы тени вам делали «реалистичные объекты».
Посмотрите на тот же
Игра атмосферная до жути, скриншот тоже криповенький, но вот теней у предметов нету вообще.
Посмотрите на тот же
Don't Starve
Игра атмосферная до жути, скриншот тоже криповенький, но вот теней у предметов нету вообще.
Просто поковыряться. Но с прицелом на то, что когда-нибудь полученный опыт/знания помогут сделать графоний или хоть немного замаскировать неумение рисовать. Хотя бы для Ludum Dare, на что-то большее пока не замахиваюсь.
Тогда проспамлю свою статью: https://habrahabr.ru/post/272233/
Не знаю в чем причина, но все нормально работает на FF и Chrome
Посмотрите Normal Tanks
При чтении результатов надо учитывать, что Phaser.js не отображает FPS выше 60. Я честно попытался найти как это исправить, но не преуспел и решил забить.
Это ограничение не Phaser.js, а браузера. Функция обновления страницы вызывается 60 раз в секунду. WebGL в принципе не может работать с более высоким FPS.
не хватает видео, интересно как это в динамике работает.
Интересные подходы. Изначально, глядя на превью, подумал, что тени это искаженные в зависимости от положения источника света прямоугольники, на которые наложена черная размытая текстура обьекта, что-то вроде карты теней, а затененность самих обьектов достигалась за счет дополнительной текстуры с нормалями.
Не корректно же — тень от ворот дает расширяющуюся область геометрической тени, а елка — нет. Так же должна расширяться тень, если ширина елки больше размера источника света. Ну и сравнение canvas / webgl рендера в браузере с оптимизированным десктопным по количеству геометрии — не надо так.
Не корректно же — тень от ворот дает расширяющуюся область геометрической тени, а елка — нет.
Это потому что я схитрил для красоты — на скриншотах с деревьями источник света выше, чем на скриншотах с забором. Просто забор в таком виде красивее смотрелся. Если сделать скриншот с деревьями на такой же высоте, то получится так:
float checkBitF(float val, float bit) { float f = pow(2., floor(mod(bit, 16.))); return step(1., mod(floor(val/f),2.)); }
Если перевести на человеческий язык (ну или хотя бы js), то получится вот что:
function checkBitF(val, bit) { f = Math.pow(2, bit % 16); // Равносильно f = 1 << bit; f1 = Math.floor(val / f); // равносильно сдвигу вправо, f1 = val >> bit if (f1 % 2 < 1) return 0; else return 1; //если бит установлен, вернется 1. иначе 0. }
Простите, но это звучит как оскорбление C
Или даже это
можно записать как
или же, в стиле битовых операций
if (fl % 2 < 1) return 0; else return 1;
можно записать как
return (fl % 2);
или же, в стиле битовых операций
return (fl & 1) ?;
А операторreturn (fl & 1) ?;
? уже есть в JS? Кажется, я что-то пропустил.Безусловно, так можно и нужно писать. Но я привел js-код лишь в качестве пояснения для GLSL-кода, довольно неочевидному для непосвященного человека. Самостоятельной ценности он не имеет, только как иллюстрация как именно работают step и mod.
Полагаю, IGR2014 имел в виду, что лучше было б привести примерную реализацию функций step и mod на С
Нет, простите, я всего-лишь не согласен с формулировкой «перевести на человеческий язык или хотя-бы js».
А с вашими правками выше согласен. Всегда придерживался использования тернарных операторов где это возможно вместо if-ов. Да и правильность аргументов лучше проверять при передаче, а не при вычислении.
А с вашими правками выше согласен. Всегда придерживался использования тернарных операторов где это возможно вместо if-ов. Да и правильность аргументов лучше проверять при передаче, а не при вычислении.
Не, ну тут вы что-то такое увидели, чего я не имел ввиду.
Расшифрую свою мысль: на мой взгляд, для неподготовленного человека код на GLSL выглядит… странно. Мне хотелось пояснить как именно он работает, но т.к. расписывать словами (человеческим языком) неинтересно, я решил привести пример тоже на языке программирования. Почему на javascript — потому что контекст статьи вебовский, и я предполагаю что большинство читателей знакомо именно с js. Был бы другой контекст — перевел бы на C, или на любой другой язык имеющий в наличии побитовые операции. Вот и все что я имел ввиду.
Расшифрую свою мысль: на мой взгляд, для неподготовленного человека код на GLSL выглядит… странно. Мне хотелось пояснить как именно он работает, но т.к. расписывать словами (человеческим языком) неинтересно, я решил привести пример тоже на языке программирования. Почему на javascript — потому что контекст статьи вебовский, и я предполагаю что большинство читателей знакомо именно с js. Был бы другой контекст — перевел бы на C, или на любой другой язык имеющий в наличии побитовые операции. Вот и все что я имел ввиду.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Тень на плетень, или 25 елок для Адама Дженсена