Улучшаем 3d движок на js: Gouraud shading


    Пост babarun про 3d-движок на js вызвал творческий порыв добавить тонирование Гуро для пущей реалистичности. Вот, что получилось (а сейчас ещё и с зеркальностью). По сравнению с обычным (flat) тонированием нормали требуется иметь не для граней, а для вершин (то есть для треугольной грани три нормали). По готовым нормалям граней нормали вершин вычисляются просто усреднением нормалей всех граней, включающих данную вершину; это делается один раз перед рендерингом. Освещённость вершин высчитывается в начале каждого кадра с учётом изменения положения камеры.

    Основная сложность заключалась в том, как залить треугольник градиентом.

    Попиксельный доступ к буферу изображения отметаем, как медленный. В canvas есть линейный градиент, нам же необходимо заливать треугольник так, чтобы углы оказались заданных цветов. Вообще говоря, эта задача к линейному градиенту в общем виде не сводится. Простой пример: три вершины треугольника имеют цвета красный, зелёный и синий. Однако в том случае, если цветовые вектора вершин линейно зависимы, как в примере babarun, задачу можно свести к линейному градиенту. Вопрос только в том, как его задать.

    Итак, у нас есть три вершины (x1,y1), (x2,y2), (x3,y3) с цветами c1, c2, c3. Для задания линейного градиента в canvas надо указать начальную точку, конечную точку и их цвета. Отсортируем вершины так, чтобы цвета шли по возрастанию и совместим начальную точку линейного градиента с самой тёмной вершиной (x1, y1). Теперь нам надо выбрать такое направление линейного градиента, чтобы длины проекций векторов (x2,y2)-(x1,y1) и (x3,y3)-(x1,y1) на это направление были пропорциональны разностям цветов (c2-c1) и (c3-c1). Мы можем зафиксировать цвет конечной точки линейного градиента в самый яркий из нужных (c3), то есть проекция (x3,y3) должна точно попадать в конечную точку. Это условие и условие пропорциональности проекций разностям цветов дают два уравнения на координаты конечной точки линейного градиента. Уравнения легко решаются в вашем любимом солвере (я использовал Maple), скрипт babarun модифицируется и выкладывается на сервер.

    Весь исходный текст в html-файле. Вот новые функции:
    calcGradientPos — вычисляет позицию конца вектора линейного градиента с началом в (0,0) (собственно, решение системы уравнений)
    calcFullGradientPos — вызывает calcGradientPos, смещая первую вершину в (0,0), а затем возвращая назад.
    getGradient — создаёт объект CanvasGradient для заданного треугольника.
    paintGradientTriangle — рисует треугольник в canvas. Вершины заданы двойным массивом [3][3], первый индекс — номер вершины, второй индекс задаёт координаты x, y и цвет (от 0 до 1); в конце цвет умножается на параметры (r,g,b) — общий цвет фигуры.
    calcVerticesNormals — вычисляет нормали вершин по нормалям граней.
    Ещё ряд изменений в функции draw_mesh, в частности, в самом начале цикл, в котором освещаются вершины.

    FPS упал вдвое, но возможности для оптимизаций не исчерпаны (они и в исходной версии были). Кто хочет, может попытаться улучшить результат. Я сделал только версию с 1920 полигонов, желающие могут легко добавить остальные.

    Upd: была ошибка с нормировкой нормалей, поэтому не получалось сделать зеркальность. Сейчас зеркальность добавлена (спасибо lsdima за то, что подтолкнул разобраться с этим).
    Поделиться публикацией
    Похожие публикации
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 108
    • +1
      Здорово! Скоро будем играть в браузере 3D-игры — при этом не используя удаленные ресурсы.
      • +2
        Не поверите, уже вовсю играют =)
        tankionline.com
        • +1
          Дык то флеш, а не JS.
          • –4
            А для вас, как для игрока, есть разница?
            Ну кроме того, конечно, что Flash значительно меньше тормозит.
            • +1
              Господа, не стесняемся, аргументируем!
              • 0
                Разница появляется тогда, когда игрок хочет поиграть например со своего мобильного. А на мобильных платформах с флешем беда.

                Кстати, все работаетна iPhone, но тормозит просто дичайшим образом, фпс примерно 0.3. Но надеюсь производительность не за горами.
                • 0
                  Вы действительно думаете, что игрок с мобильного беспрепятственно поиграет в игру, предназначенную для PC?

                  >Кстати, все работаетна iPhone, но тормозит просто дичайшим образом, фпс примерно 0.3. Но надеюсь производительность не за горами.

                  За счёт чего вы хотите увеличения производительности?
                  • 0
                    не совсем, я просо хочу взять и со своего айфона играть в браузере в нормальную игру.

                    С производительностью не знаю сам что и как. Надо посмотреть, почему так медленно работает.
                    • 0
                      Вам же не приходит в голову запускать Call Of Duty Modern Warfare 2 на вашем iPhone!?
                      Тогда зачем же вы запускаете flash-приложения, предназначенные для PC? Другое дело, что приложений, ориентированных на iPhone я как-то не встречал, но это по-моему и есть суть борьбы Adobe и Apple.

                      Да, посмотрите пожалуйста, почему разработчики браузеров не сделают нормальной поддержки Javascript, его работы с DOM и Canvas. Думаю, многие вам будут признательны.
                      • 0
                        Ну я бы кстати был бы не против его там запустить xD

                        Да, посмотрите пожалуйста, почему разработчики браузеров не сделают нормальной поддержки Javascript, его работы с DOM и Canvas. Думаю, многие вам будут признательны.


                        Сколько иронии ) А вообще было интересно написать в тот же гугл и спросить это у них.
            • +1
              Вы украли у меня сутки этим комментом (
            • +1
              Мм… я уже год как частенько играю quakelive.com/. Пройдя через это меня уже мало что может удевить в интернете :) Но бурное развитие всегда радует.
              • 0
                Об этих сервисах наслышан, но буду очень рад когда с браузера буду запускать Call Of Duty Modern Warfare 2.
                • +2
                  Дак там специальный плюгин в браузер надо ставить.
                  Так можно и полноценный движок запихнуть. А тут исползование только браузерных средств.
                  • 0
                    Ну речь шла о играх в браузере в целом. Где quakelive является хорошим примером. И кстате для WebGL или O3D тоже нужны плагины.
                    • 0
                      Пока нужны, но я так понимаю, что для этих технологий планируется полноценная поддержка самим бразуером. А иначе можно и на флеше сделать.
                      • 0
                        Уже пару лет планируется полная поддержка HTML 5 в каждом браузере. И это всего-то какой-то HTML, а представьте себе 3D движок… Лично для меня это ассоциируется пока с дополнительными рабочими часами над кроссбраузерностью. :)
                        • 0
                          Я считаю, с HTML5 та же самая проблема, что с закругленными уголками.
                          Поддержки закруглений не было (да и сейчас она не идеальна), чтобы это обойти люди придумали массу методик. В итоге: есть масса способов, поэтому делать нормальную поддержку в браузере вроде бы и не надо — потому что все и так это умеют. Ну а раз в браузер не добавляется, то и ладно — будем по-старинке хаками обходиться. Замкнутный круг.

                          Думаю, иная ситуация должна быть с новым функционалом — там есть стимул добавлять.
                          • 0
                            я уже давным давно использую border-radius
                            • 0
                              Ну это сейчас ситуация получше стала.
                              Однако все равно есть масса ньансов и «особенностей».
                              НА РИТ Алекс Могилевский демонстрировал разные баги анимации бордер-радиуса.
                    • 0
                      Плюгин… жуть какая :)
                      • 0
                        :)
                        Я в курсе как он пишется, так написал, чтобы акцентировать внимание. В качестве таких плагинов ведь можно засунуть все, что угодно — и где тогда граница «браузерного» приложения от «обычного»?
                        • 0
                          Согласен, тогда браузер и не нужен по идее.
                • +36
                  вспомнились времена, когда яваскриптом только бегущую строку в title умели делать…
                  • +1
                    Меня больше раздражало, когда что-то невероятно оригинальное вешали на правый клик )
                    • +2
                      А заменять курсор на какую-нибудь лапку или что-то ещё.
                      • +15
                        это не так часто. Самое поганое — перед новым годом 90% сайтов обвешивались падающим снегом…
                        • +7
                          падающий снег, по сравнению с нынешними баннерами сказка=)
                          • НЛО прилетело и опубликовало эту надпись здесь
                          • +2
                            до сих пор обвешиваются, полгода назад наблюдал вполне приличные сайты со снегом.
                            • НЛО прилетело и опубликовало эту надпись здесь
                            • 0
                              Сайт нашего универа этой зимой обвешивался :)
                      • +3
                        Тормозит жутко у меня :(
                        Но выглядит действительно безумно!
                        • +15
                          Круто! Такое же тормозило на 386SLC25 процессоре, написанное на Паскале.
                          А тут намного приятнее — тормозит точно также, но уже на 2х ядерном 2.2Ггц процессоре, да еще и на огромном экране!
                          Прорыв технологий!
                          • 0
                            Только тогда, чтобы вбить исходные координаты такой спирали не хватало 3D MAX, да что там говорить, мышь была за счастье) Поэтому чаще ограничивались простыми фигурами с программно просчитываемыми координатами.
                            • 0
                              Мышь была просто не так необходима, в ДОСе-то :)
                              А эта спираль какраз и выглядит программно просчитаной, впрочем наверняка утверждать не берусь, ибо координаты вершин и полигонов в коде вбиты константами.
                              • 0
                                Мышь была просто не так необходима, в ДОСе-то :)
                                А эта спираль какраз и выглядит программно просчитаной, впрочем наверняка утверждать не берусь, ибо координаты вершин и полигонов в коде вбиты константами.
                            • 0
                              Opera — 17 fps
                              FF — 7
                              Chrome — 10
                            • НЛО прилетело и опубликовало эту надпись здесь
                              • 0
                                demo.design просто библия низкоуровневых графических алгоритмов! Ещё была прога DemoGuide; 32 эффекта с описанием и возможностью импорта кода)
                              • +3
                                This is madness!
                                Я думал я немного понимаю в Javascript…
                                • 0
                                  в хроме проблемы с кодировкой:
                                  Текущий fps: 9.5
                                  Средний fps: 8.9
                                  Полигонов: 1920

                                  правый верхний угол с параметрами
                                  • 0
                                    Добавил meta http-equiv, спасибо.
                                    • 0
                                      У меня в FF 3.6.3 на Mac такая же проблема.
                                  • 0
                                    для пущей красоты осталось текстуру натянуть, сделать блики и тень от фигуры
                                    • 0
                                      Блики очень легко, я даже сделал было полную локальную модель освещённости по Фонгу, но потом убрал, потому что с такой сеткой блики получаются некрасивыми. Тут нужно тонирование Фонга, либо увеличивать количество треугольников. Тонирование Фонга придётся делать попиксельно, всё просто встанет :-)

                                      Расчёт тени — более сложная штука, оставим на потом :-) С текстурой тоже придётся попиксельно возиться.
                                      • 0
                                        А можно все-таки глянуть с Фонговской моделью?
                                        • 0
                                          Моя ошибка была, оказывается. Добавил зеркальную компоненту.
                                    • –1
                                      «Когда программисту не чего делать — он настраивает цвета» (с) Библия программиста
                                      • +9
                                        Js — самый недооцененный язык.
                                        • +6
                                          о, целых 2 фпса :)
                                          • 0
                                            у меня 10. без тонировки с максимальным количеством полигонов 26 выдавал.
                                            • 0
                                              около 16ти. браузер, как ни странно, Maxthon3 beta
                                              • 0
                                                >20fps постоянно в Опере
                                                • 0
                                                  Да, тут опера рулит однозначно :)
                                            • 0
                                              5.5 фпс на голом фреймбуфере без всякого ускорения. Думал будет меньше одного :)
                                            • –1
                                              и кто там говорил, что флеш тормозит и html5 рулит??? На проце 2.2 Core2Duo (браузер — ФФ) у меня 4 fps! В хроме 5 stable — 14.
                                              • 0
                                                Хм… У меня FF3.6 даёт ненамного меньше хрома (где-то 11 против 15).

                                                Похоже, основные тормоза в фактическом коде отрисовки. Если оставить все вычисления, закомментировав вывод в канвас, fps взлетает раз в пять.

                                                Сделал пару улучшений, но помогли несильно.
                                                • –2
                                                  ну не знаю:
                                                  Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.2.5pre) Gecko/20100514 Ubuntu/9.10 (karmic) Namoroka/3.6.5pre
                                                  Сейчас выдает 5 fps.
                                                • +3
                                                  Мужчина, вы всё неправильно поняли.
                                                  Web GL — это будет сила.
                                                  • 0
                                                    ок, ждём пример ан webgl. А к чему тогда эти эксперименты на чистом canvas? Разве что for fun.
                                                    • +2
                                                      Название блога намекает =)
                                              • 0
                                                Средний fps на Opera 10.53 — 26, на Chrome 5 stable — 23,1.
                                                Core i7 — 950, Win7 x64
                                                • +1
                                                  Nokia 5800, opera mini: Infinity, картинка мигает, вроде даже меняется %)
                                                  Дефолтный браузер сильно обижается и перестаёт реагировать на меня)
                                                  iPhone 3G Safari: 0,3 fps, всё корректно работает
                                                  • 0
                                                    эмм… как это вы на opera mini смогли запустить? В ней же java script не работает. В opera mobile другое дело…
                                                    • 0
                                                      Opera mini 5.0.19693
                                                      JS отлично работает, AJAX тоже
                                                • 0
                                                  Ребята, welcome to Opera — 25.7 fps (Core2Duo 3.0 GHz, E8400).
                                                  • 0
                                                    медленновато у тебя что-то
                                                    такой же проц — стабильно 29fps (Win XP SP3)
                                                    • 0
                                                      Беда! Срочно убивать фоновые процессы!
                                                  • –4
                                                    Я восхищен! Даешь браузерный Doom 2 :)
                                                    • НЛО прилетело и опубликовало эту надпись здесь
                                                      • НЛО прилетело и опубликовало эту надпись здесь
                                                      • 0
                                                        Гуро значительно лучше :-)
                                                        Так держать!
                                                        • 0
                                                          Текущий fps: 8.4
                                                          Средний fps: 7.7
                                                          Полигонов: 1920
                                                          SrWare Iron 4.0.280
                                                          • 0
                                                            Chrome 5.0: 25 FPS.
                                                            • 0
                                                              Gouraud shading
                                                              Текущий fps: 8.4
                                                              Средний fps: 7.7
                                                              Полигонов: 1920
                                                              js + canvas
                                                              Текущий fps: 16.5
                                                              Средний fps: 14.9
                                                              Полигонов: 1920
                                                              Вершин: 960
                                                              SrWare Iron 4.0.280 win xp pentium m 730 1600Mhz
                                                              • 0
                                                                Текущий fps: 11.2
                                                                Средний fps: 11.2
                                                                Полигонов: 1920
                                                                Core 2 Duo T7300 2.4GHz Safari 4.0.5 MacOS X 10.6.3
                                                                • 0
                                                                  Текущий fps: 28.4
                                                                  Средний fps: 27.3
                                                                  Полигонов: 1920
                                                                  Core 2 Duo E8400 3.0GHz win7-64 Opera 9.53
                                                                  • +5
                                                                    Отличный бенчмарк для процессоров и браузеров :)
                                                                    • 0
                                                                      Текущий fps: 14.8
                                                                      Средний fps: 13.9
                                                                      Chrome 5.0

                                                                      Текущий fps: 7.2
                                                                      Средний fps: 7.9
                                                                      Firefox 3.6

                                                                      Текущий fps: 13
                                                                      Средний fps: 12.8
                                                                      Safari 4.05

                                                                      Текущий fps: 9.1
                                                                      Средний fps: 8.9
                                                                      Opera 10.10

                                                                      Текущий fps: 5.5
                                                                      Средний fps: 5.8
                                                                      Camino 2.0.1

                                                                      Core 2 Duo 2.5Ghz MacOS X 10.6.3

                                                                      • 0
                                                                        обновите уж оперу то ) оно того стоит.
                                                                        • 0
                                                                          редко пользуюсь, в основном для тестов )
                                                                          • 0
                                                                            вот для тестов то и надо обновить, 10.5 нагибает хром в этом тесте, причем весьма существенно
                                                                      • +2
                                                                        2 FPS
                                                                        Chrome mobile (Android 2.2 on Nexus ONE)
                                                                        • +1
                                                                          lany, ну рас случился апдейт надо бы скриншот обновить, а то как небо и земля :)

                                                                          То что увидел очень порадовало.

                                                                          Opera 10.53

                                                                          Текущий fps: 36,4
                                                                          Средний fps: 35,8

                                                                          AMD Phenom II X4 965 Black Edition
                                                                        • 0
                                                                          Круто! Что сказать.
                                                                          • +1
                                                                            Вы также скопировали ошибки предыдущего автора.
                                                                            • 0
                                                                              Ага, исправил.
                                                                            • +3
                                                                              А вот IE 8 под Win7 отказывается показывать сию красоту…
                                                                              • +1
                                                                                Специально заблокировали, чтоб не позориться…
                                                                                • 0
                                                                                  Ага, я убрал excanvas вообще. Хотя, возможно, он бы заработал.
                                                                              • 0
                                                                                Opera Mobile на телефоне с WM6.5.3 ( самсунг i780, проц кажется 620 МГц), рисует нормально — 0.2 fps. Что интересно — тормозит только непосредственно отрисовка нового кадра, между кадрами можно скролинг по странице очень плавный
                                                                                Opera Mini на том же телефоне нарисовала статичную картинку и сказала, что fps бесконечны (:

                                                                                На компе( Athlon II x2 245, на частоте 3.5 ГГц):
                                                                                примерно 15 в FF 3.6.3
                                                                                31 в хроме последнем 6.0.408.1.
                                                                                • 0
                                                                                  Opera Mobile на телефоне с WM6.5.3 ( самсунг i780, проц кажется 620 МГц), рисует нормально — 0.2 fps. Что интересно — тормозит только непосредственно отрисовка нового кадра, между кадрами можно скролинг по странице очень плавный
                                                                                  Opera Mini на том же телефоне нарисовала статичную картинку и сказала, что fps бесконечны (:

                                                                                  На компе( Athlon II x2 245, на частоте 3.5 ГГц):
                                                                                  примерно 15 в FF 3.6.3
                                                                                  31 в хроме последнем 6.0.408.1.
                                                                                  • 0
                                                                                    Athlon X2 245 @ 3.7 (всего +2~3 fps по сравнению со штатной частотой ЦП),
                                                                                    без видеокарты (AMD785G); полигонов: 1920;
                                                                                    загрзка ЦП ~28%
                                                                                    17 FPS — Firefox 3.6
                                                                                    30 FPS — Opera 10.50
                                                                                    32.7 FPS — Google Chrome 5.0
                                                                                    • +3
                                                                                      Пост плавно перешел в мерение частями тела
                                                                                      • 0
                                                                                        олдскул, бублики, ностальгия =)
                                                                                        • 0
                                                                                          А подскажите пожалуйста, куда можно копнуть чтобы примерно набраться знаний в этой сфере? Я про алгоритмы, про рендеринг…
                                                                                          • 0
                                                                                            В википедии на английском приличные статьи, обычно студентов туда отсылаю. А хороших книжек что-то даже не знаю к своему стыду. Не потому что их нет, а просто не знаю. Я лекции читаю в универе по графике, так что мне положено знать такие вещи.
                                                                                          • 0
                                                                                            Даешь 3dstudio max на html5!
                                                                                            • 0
                                                                                              Дали бы возможность отключать anti-aliasing при рисовании — было бы гораздо быстрее.
                                                                                              • 0
                                                                                                Глядя на это невольно вспоминаются демки 10 летней давности, тогда в 20килов exe вставляли и звук, и подобный 3d обьект, а часто делали чуть ли ни мультики и все на теже 20-50килов, при этом оно не тормозило на 386 с 40 частоты :))

                                                                                                глянул алгоритм сортировки… мрак, пришло новое поколение и оно задается теми же вопросами которые тревожили головы 15 лет назад — «а можно ли быстро отрисовать и отсортировать грани полигонов», жесть… Кстате, кто хочет игры делать на жабоскрипте, они делают и молчат, пока ниша свободна. А это просто игра на публику, посмотрите что получилось между лекциями сделать, имхо.
                                                                                                • 0
                                                                                                  Какой алгоритм сортировки? В коде есть алгоритм сортировки? :-)

                                                                                                  Делать и молчать — плохо. Гораздо лучше сделать и объяснить другим, как это сделать, именно так люди и учатся чему-то.

                                                                                                  А ссылочки на крутые игры на джаваскрипте можно? :-)
                                                                                                  • 0
                                                                                                    1. Сам канвас жутко тормозной, а жабой надо уметь пользоваться и понимать что приводит к тормозам и что может «убить» браузер. За алгоритмами в код. Прикалывает конструкция «mesh_buf.sort( sort_by_Z ); » проняло меня это, ох как проняло
                                                                                                    2. Молчать надо, пока конкуренция маленькая и школота не набилась, можно заработать немного на пиво
                                                                                                    3. На коммерческие не буду ссылаться, зачем им реклама и хабраэффект. погугли, игр уже много
                                                                                                    Freeciv.net

                                                                                                    4. nocanvas.blogspot.com/2010/02/wolf-3d.html
                                                                                                    настоятельно рекомендую почитать, автор явно псих, но он Гениальный псих ))
                                                                                                    • 0
                                                                                                      В коде нет реализации алгоритма сортировки. Чем вас так задевает вызов стандартной (наверняка быстрой) реализации этого алгоритма, я не понимаю. Или просто потроллить охота? Выше я отметил, что основные тормоза именно в выводе в канвас, поэтому оптимизация остального кода не решит проблему с быстродействием кардинально. И, если уж на то пошло, это не самое медленное место даже помимо вывода в канвас. Я бы начал с перевода преобразований на матричные и кэширования преобразованных вершин, чтобы не делать лишнюю работу. babarun вообще в каждом кадре вычислял кучу одинаковых синусов и косинусов, и ничего, это не было самым узким местом, хотя по факту тригонометрия не нужна вообще. На фоне этого прикалываться от сортировки просто странно.

                                                                                                      Пока вы зарабатываете на пиво, другие люди зарабатывают на недвижимость, а в свободное от работы время выкладывают бесплатные поделки в интернет, объясняя окружающим, как они это сделали. Нормальная практика.

                                                                                                      Freeciv потыкался, но им там нечасто нужны полнокадровые обновления с большим fps. Думаю, там логика игры больше отнимает, чем вывод. Wolf-3D видал, неплохо, ага. Хабраэффекта уже не будет, топик давно уехал.
                                                                                                • 0
                                                                                                  Автор, расскажи, пожауйста, какими знаниями нужно обладать, чтоб такое делать? Интересно.
                                                                                                  Прикладная математика, JS, canvas? + наверно, опыт в создании 3d-движков?
                                                                                                  • 0
                                                                                                    Надо обладать мозгом, умением программировать, гуглить и читать по-английски. Всё остальное приложится в процессе. Да, я знаю JS и немало написал кода с использованием canvas. Этот опыт сократил затраченное время максимум на час. Если бы не знал canvas, то почитал бы спецификацию, там всё просто. Да, я знал, что такое тонирование Гуро и добавил соответствующий код, никуда не подглядывая. Но если бы я не знал, я мог бы точно так же освоить это, прочитав статью в википедии не больше, чем за полчаса. А математика потребовалась вообще на школьном уровне — вектора на плоскости, проекции, скалярное произведение, система из двух несложных уравнений. Ничего запредельного.

                                                                                                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.