Краткий разбор присланных на конкурс работ

Конкурсные работы оценивались судьей @Hackerham, который и распределил призовые места между конкурсантами.

Ниже приведены комментарии судьи по присланным работам. Комментарии являются личным мнением судьи, приведены без правок, могут не отражать позицию организатора конкурса.

### Награды

1. Эффективно, минимум кода, куча ботов
@ex_gd
https://exponenta.games/games/duck/?fast=1&mobs=10&mode=blit&octs=0&spikes=0
исходник https://github.com/eXponenta/Duck-pinter

2. Красиво, хорошие анимации, UI
@AvinGrape
https://avin.github.io/duck-paint/
Исходник https://github.com/avin/duck-paint

3. WebGL начала нулевых
@putnik_serg
http://work3d.html-5.me
Исходники видны в devtools, sourcemap не нужны.

4. Прислана не вовремя, но отмечена почётом
@x_sib
http://atsimulations.com/test/

5. Прислана не вовремя, но отмечена почётом
@FFbarney
https://performance-test.000webhostapp.com/
Исходник https://github.com/FFBarney/model_painting_game

### Натягивание утки на глобус

Поскольку только три работы были присланы вовремя и соответствовали ТЗ, выбор победителей - вещь простая.
А вот распределение по местам - тут проблемы, я бы вообще поделил поровну или сделал минимальный разрыв в призах.
Ещё раз повторяю, всё субьективно потому что в конкурсе не были оговорены критерии и конечно можно подобрать так чтобы 2-я или 3-я работы победили :)

### Код

В скобках указываю кол-во строк.

@ex_gd код минимальный, своя базовая ECS. Основной класс - App (180) Макс длина файла - 420 строк, и это утилитарная Octree.
Выглядит понятным и расширяемым, можно приводить как хороший пример чистого ThreeJS приложения.

@AvinGrape всё намазано реактом, основной класс - MainScene (580), рисовалка выведена в Brush (490). Управляется из реактового DrawPage где описаны анимации UI.
Тем не менее код неплохой, нельзя сказать что у тех кто это возьмет за основу будут какие-то проблемы. Разделить это можно.

@putnik_serg
ХАРДКОР. Вот реально так писали в нулевых.
Вот она демка так демка. engine(1300) game(786) main(450). Вполне очевидная архитектура OpenGL демок.
Для объектов в JS прототипы не использованы, всё в локальных контекстах, и фиг ты через watch их посмотришь, надо внутрь лезть курсором.
Если вы думали что engine отгородит от WebGL - неее, вызов команд есть прямо в main, недалеко от обработчиков клавы и регистрирования ивентов на канвасе.

Я говорю что вижу, но опять же, стиль кода - это субьективно. Реально какой код брать зависит от тимлида проекта, от его времени и от того какую кодебазу изначально использовали для каких фич.

### Графика

@ex_gd стандартное ThreeJS.
Два режима заливки:

- Рендер-текстурой настраиваемого размера, стоит 2048, но я думаю и 4096 не будет тормозить.
К сожалению оно без smoothing-а из-за каких-то проблем с premultipliedAlpha (Костя, чтоб баг зарепортил обязательно!)

- Мешами-декалями. Там есть проблема с глубиной и тут придется воевать с ThreeJS очень жестко чтобы сделать этот режим
Абсолютно правильно что оно не сфокусировано и не доделано, потому что тут нужно ещё долго настраивать.

Тем не менее сам факт что направление обозначено - это круто.
Сама утка сделана стандартным MeshPhongMaterial, утка как утка.

@AvinGrape КРАСОТИЩА!!! BabylonJS
Поскольку это всё за-glow-ино и шейдера там весомые - вроде бы это PBR (я с ним мало знаком). Несколько пассов и постпроцесс обеспечивают
Покраска на canvas2d (!!!), каждый тик texImage2D, размер зависит от режима. 1024 смотрится хреново.
Есть партикли, приятные анимации и в графике и в UI.
Хорошо продумана камера и просмотр изнутри утки.
Если бы я больше ценил графику и user experience то эта работа бы выиграла.
Вообще интересно, что бы было если кто-то писал это на playcanvas.

@putnik_serg
У самописного чуда чудес в графике нет. В шейдере утки явный Lambert. Покраска рендер-текстуры размера 1024.

### Производительность

@ex_gd
Вот тут Константин отжёг. Запихнуть утку в Octree чтобы быстренько рейкастить и держать сотню ботов - это круто.
На случай тормозов и просто для плавности предусмотрено что текстура будет закрашиваться несколькими спрайтами а не одним.

@AvinGrape
Красота требует жертв. Абсолютно правильно предусмотрен режим для тостеров, и он работает.
Но если FPS у вас скачет - будет видно кружки вместо линии. Это прям непроработано.
И ещё texImage2D каждый кадр, в рилтайм-игре такое творить как-то стрёмно. Я не знаю как там с заливкой текстур в вавилоне, так что может это ограничение движка.
Ради рейкаста пришлось поделить утку на 128 частей и это видно по большому числу drawElements,
если запустить spectorJS то также видно что делится оно по порядку внутри модели, что конечно хуже чем octree,
но просто врубить одну строчку и получить результат это конечно удобно.

@putnik_serg
Тут написано всё так, что тормозить просто нечему. Плюс своего движка - чёткий контроль производительности,
99% знание что винить в тормозах если возникнут.

### Баги

Общий баг из-за модели утки - там такая развёртка что фиг ты через шов покрасишь текстуру. Шов делит утку пополам. Ничего с этим не сделать.

@ex_gd
Предупрежден - значит вооружен. Кончающийся пул сегментов меша можно увеличить, и кончается он если есть боты.
Можно вообще без него жить.

@AvinGrape
Те самые кружки при низком FPS с какой-то точки зрения можно считать багом

@putnik_serg
Я сменил табу на пару десятков секунд и телепортировал курсор в неизвестность

### Vision

@ex_gd
Сотни ботов, тест меша и пересечений мешей поверх утки - демка устремлена в будущее.

@AvinGrape
Да, видим, графику можно сделать ещё круче, UI можно сделать так чтобы выглядело ещё зашибенней. Приз за лучший веб-сайт игра получит.

@putnik_serg
Есть какая-то мини-карта. Это интересно конечно но я не понял :)

### оценка дополнительных участников

@x_sib
Самопис. Очень приятно что меш, еще и делится полоска пополам - повороты красивые. Код как будто с другого языка но читается отлично.
Вроде бы делается для реального проекта, но мы приз все равно дадим - отметить надо!

@FFbarney
ThreeJS. Узнал поздно, делал впопыхах, утка смотрит на нас задницей, курсор по-хаосистски перемещается на 8 сторон света.
Зато в рекордное время. Отмечаем.

### Вывод

Конкурс удался.

С этих демок есть что подчерпнуть.
Все участники осилили задачку с кватернионами.
У всех разные стили кода.
Разные граф движки.
Собеседование на WebGL прошли бы.

@ex_gd подтвердил что не зря принадлежит к PixiJS Core team, код можно давать людям как пример.

@AvinGrape показал опять что зря недалёкие люди хоронят вавилон.

В чат был выманен Сергей Путник.
Мы видим что Сергей точно знает WebGL, мы прям не сомневаемся и пусть его никогда не берёт синдром самозванца.
Напоминаем что HTML5 всё-таки социальная платформа, и шаринг кода между проектами это очень важно для сохранения времени и нервов.