Pull to refresh

Comments 29

Как-то не очень естественно получается тень. Если судить по отбрасываемой тени забора и кустиков, то источник света должен находиться раза в 2-3 выше человечка, который ростом с забор.
На самом деле так и есть — источник света расположен на высоте 20-40 пикселей над землей (на разных скриншотах по разному). Я так изначально выставил и так уже привык к этому факту, что забыл упомянуть или визуально подчеркнуть…
Полюбопытствую, а зачем вы это делаете? У вас изометрический 2д мир, в нем 3д тени в любом случае будут смотреться нереалистично. Если просто поковыряться вне проекта с шейдерами и тенями — то ок. Если повысить графоний, то, ИМХО, вы якобы хотите просто сделать тени, а на самом деле — чтобы тени вам делали «реалистичные объекты».

Посмотрите на тот же
Don't Starve
image


Игра атмосферная до жути, скриншот тоже криповенький, но вот теней у предметов нету вообще.
Просто поковыряться. Но с прицелом на то, что когда-нибудь полученный опыт/знания помогут сделать графоний или хоть немного замаскировать неумение рисовать. Хотя бы для Ludum Dare, на что-то большее пока не замахиваюсь.
Я ее читал ) И даже сослался в первом абзаце. Хорошая статья, но не подходила для конкретного случая.
При чтении результатов надо учитывать, что Phaser.js не отображает FPS выше 60. Я честно попытался найти как это исправить, но не преуспел и решил забить.


Это ограничение не Phaser.js, а браузера. Функция обновления страницы вызывается 60 раз в секунду. WebGL в принципе не может работать с более высоким FPS.
А, так это
requestAnimationFrame
вызывает callback не чаще чем 60 раз в секунду. И даже в документации написано. Спасибо за наводку!
не хватает видео, интересно как это в динамике работает.
Вроде ж, по ссылкам в посте даже интерактив есть.
действительно, проглядел.
Интересные подходы. Изначально, глядя на превью, подумал, что тени это искаженные в зависимости от положения источника света прямоугольники, на которые наложена черная размытая текстура обьекта, что-то вроде карты теней, а затененность самих обьектов достигалась за счет дополнительной текстуры с нормалями.
искаженные в зависимости от положения источника света прямоугольники, на которые наложена черная размытая текстура обьекта,


Вот, кстати, тоже вариант который можно попробовать ) Но при таком варианте я не вижу как сделать затенение самих объектов другими объектами.
Всё уже украдено придумано до нас: https://en.wikipedia.org/wiki/Normal_mapping
Спасибо, почитаю. Когда не знаешь терминологию, вечно пропускаешь что-нибудь полезное…
Не корректно же — тень от ворот дает расширяющуюся область геометрической тени, а елка — нет. Так же должна расширяться тень, если ширина елки больше размера источника света. Ну и сравнение 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. Optionals и прочих прелестей на уровне языка пока не замечал. Ну а в моем случае — это просто опечатка =)
Да, я как раз про опечатку.
Правильный код (чтобы не удивлялись, что ничего не работает)
return (fl & 1) ? 1 : 0;

Все еще не вижу смысла в тернарном операторе здесь.


Int & Int -> Int. Если уж хочется сделать защиту от всяких Inf, NaN и прочих — лучше сделать это до всей математики, при входе в функцию.

Безусловно, так можно и нужно писать. Но я привел js-код лишь в качестве пояснения для GLSL-кода, довольно неочевидному для непосвященного человека. Самостоятельной ценности он не имеет, только как иллюстрация как именно работают step и mod.

Полагаю, IGR2014 имел в виду, что лучше было б привести примерную реализацию функций step и mod на С

Нет, простите, я всего-лишь не согласен с формулировкой «перевести на человеческий язык или хотя-бы js».
А с вашими правками выше согласен. Всегда придерживался использования тернарных операторов где это возможно вместо if-ов. Да и правильность аргументов лучше проверять при передаче, а не при вычислении.
Не, ну тут вы что-то такое увидели, чего я не имел ввиду.
Расшифрую свою мысль: на мой взгляд, для неподготовленного человека код на GLSL выглядит… странно. Мне хотелось пояснить как именно он работает, но т.к. расписывать словами (человеческим языком) неинтересно, я решил привести пример тоже на языке программирования. Почему на javascript — потому что контекст статьи вебовский, и я предполагаю что большинство читателей знакомо именно с js. Был бы другой контекст — перевел бы на C, или на любой другой язык имеющий в наличии побитовые операции. Вот и все что я имел ввиду.
Тогда прошу прощения.
Да и для человека, не привыкшего к С++, код GLSL действительно может показаться непонятным. Так что js-вариант тут действительно выигрывает по удобочитаемости.
Sign up to leave a comment.

Articles