Sign up
September 6, 2010 at 04:19 PM

Десять вещей, которые вы не ожидали от HTML/Javascript

Original author: Zef Hemel
  • Translation
Пятнадцать лет назад трудно было представить, что когда-нибудь HTTP, HTML, CSS и Javascript станут основными технологиями для доступа к информации и заменят целые классы десктопных приложений. Например, вот десять примеров того, что сложно было ожидать от веб-технологий в 2010 году, но они это делают.

1. Интерактивный рендеринг физики ткани


2. Распознавание объектов на видео в реальном времени



3. Просмотр видео YouTube без флэша



4. Совместное редактирование исходного кода в среде разработки через браузер



5. Странные интерактивные штуки вроде этих



6. Анимация 3D-ландшафтов



7. Читать книги в мобильном браузере, даже отключившись от интернета



8. Играть в Wolfenstein 3D



9. Играть в MarioKart



10. Рендеринг флэш-файлов средствами Javascript/SVG

Tags:
Hubs:
Ads
AdBlock has stolen the banner, but banners are not teeth — they will be back

More

Similar posts

Ads
AdBlock has stolen the banner, but banners are not teeth — they will be back

More

Comments 41

    –1
    То есть теперь его не стоит называть СНЯП? (http://habrahabr.ru/blogs/javascript/31481/)
      +17
      Вполне ожидали! Если появился объект в котором можно работать с векторной и растровой графикой (canvas), то в нём теперь можно делать всё что угодно. Физика ткани была придумана >10 лет назад. Перенести существующий алгоритм на новую платформу раз плюнуть.

      Я не могу понять почему люди удивляются абсолютно банальным вещам? Единственное, что не банальное это сам объект canvas в браузере, всё остальное было придумано десятки лет назад.

      Простите.
        +5
        Вот-вот.
        К сожалению, не все понимают, что если что-то можно реализовать на данной платформе, это совсем не означает, что это нужно делать. Да, в наши дни js обладает значительными возможностями, да на нем можно рисовать любую графику и вычислять что вздумается, да это полноценный язык — но это все придумано не для того, чтобы писать на этом 3д-игры с навороченной физикой. Он в этом плане чрезвычайно, чудовищно неэффективен. Это как бриться топором — в принципе можно, может быть это кого-то пару раз удивит, но бритвой все равно удобнее и безопаснее.
          –3
          и как же называется эта чудесная встроенная во все браузеры бритва?

          Он в этом плане чрезвычайно, чудовищно неэффективен.


          неэффективен он у тех, кто не стремится сделать его эффективным.
            +2
            Абсолютно верно, +1.

            При этом, как обычно, есть малочисленная (но воинствующая) армия умельцев, которая не только этим топором бреется, но и с пеной у рта агитирует других поступать так же — 'cause it can!

            Впрочем, как и везде.
            +7
            Тем не менее, пример с тканью я считаю замечательным. Тут, (как в демосцене) кажно не то, что это можно сделать, а то, что это выполняется в реальном времени прямо на вашем компьютере. Судите сами:
            ткань 15 на 10, итого 14**2+9**2==277 связей. В каждом кадре нужно считать длину связи для расчета сил, а это у нас 

            ((point.x-point2.x)**2 + (point.y-point2.y)**2)**0.5

            Имеем 277 вычислений квадратного корня в каждом кадре. Вы правда думаете, что такая скорость отрисовки возможна при подобном подходе?
            Явно используется одна из формул для примерного расчета квадратного корня, ну и несколько других оптимизаций, благодаря чему кадры рисуются не по полсекунды. Вот в этом смысл данной демонстрации, а не в том что «нифига себе, такого еще никогда не было».
              0
              На всякий случай: x**y — оператор возведения числа x в степень y в языке Python.
              FIXED: Тут, (как в демосцене) важно не то, что…
                0
                Что-то у меня сегодня с арифметикой проблемы. Связей, конечно же, не 277, а всего-лишь 275 (14*10+9*15).
                  +4
                  Она оторвалась! :,(

                    +1
                    Там можно снова прицепить, удерживая любую клавишу перед кликом.
                    +1
                    Я не понимаю чему вы удивляетесь, но 300 квадратных корней в кадре даже если учесть, что это JS, для современных процессоров, практически мгновенная задача.
                    Современному процессору на вычисление корня нужно, скорее всего, не больше 20 тактов. Пусть будет 30 тактов Т.о. 30*300 = 9 000 тактов. Умножим на 30 кадров: 270 000 тактов. 1 GHz = 1 000 000 000 тактов. Это без учета накладных расходов, но и без учета суперскалярности процессора.

                    Так с каких это пор 300 связей стали тормозить в реалтайме? Скорее отрисовка с приемлемым числом кадров займет больше ресурсов процессора, нежели математика расчетов в данном примере.
                      0
                      Между JS и процессором такое количество слоёв абстракции, что прикидывая количество тактов легко ошибиться на порядок-другой. По-моему, такты считать имеют право только ассемблерщики, — и то с оговорками.
                        +2
                        С вероятностью 99.9% в самом низу Javascript SQRT лежит SQRT либо на FPU, либо на SSE.

                        Между JS и процессором такое количество слоёв абстракции, что прикидывая количество тактов легко ошибиться на порядок-другой.

                        Согласен, что далеко от JS до процессора, но в нормальных JS должен быть JIT или какой-нибудь AOT, который нивелирует эту «абстракцию». И даже, если разница на порядок (в 10 раз), то всеравно процессору от этого не поплохеет. В принципе и два-три порядка будут нормально «переварены», вы на цифры-то посмотрите.

                        По-моему, такты считать имеют право только ассемблерщики

                        Вас обманули. Впрочем, если вас это успокоит — я раньше писал на ассемблере, потому и считаю такты.
                          +1
                          А еще можно так ускорить: en.wikipedia.org/wiki/Fast_inverse_square_root
                            0
                            Не спорю — можно. Можно и еще быстрее посчитать приближенный квадратный корень (с большей ошибкой, конечно). Я не JS-рограммер, поэтому у меня вопрос — можно ли к Float переменной обращаться как к int? Т.е. не преобразовать, а именно поменять тип? На сколько я знаю — нет. Поэтому данный метод неприменим для JS.
                        0
                        Со страницы с тряпкой:
                        The most computationally expensive part is trying to satisfy the constraints. To do this requires the calculation of distance between two points. This is easy to do with a little math, but that often involves an expensive square root. This is something that cannot simply be thrown out either, so what do you do? You approximate it. There are lots of mathematical tools for approximating functions, in this case I chose the first couple terms of a taylor expansion.

                        Так что считается всё же приблизительно.
                          0
                          Я с этим и не спорю, но это тот случай, когда оптимизация сделана там, где не надо, по крайней мере для данной демки. Вот если они планируют увеличивать кол-во связей, тогда это имеет смысл.
                      0
                      Если появился объект в котором можно работать с векторной и растровой графикой
                      Внезапно появился в 1998 году :)
                      –2
                      >4. Совместное редактирование исходного кода в среде разработки через браузер

                      Google wave без html5 поддерживает совместное редактирование в реальном времени, правда, не html код и без такой красивой подсветки, но сама идея не нова и реализуется, как мы видим, классическими средствами.
                        +1
                        А bespin на html5 что ли?
                          0
                          > The Bespin project is building a web-based code editor using the emerging HTML5 standard. The editor is easily extensible with Javascript and can be used in your own applications.

                          они сами это пишут
                          +1
                          разве без хтмл5? а чего они от ИЕ отказались?
                          +18
                          Просмотр видео YouTube без флэша

                          Вот уж действительно — у кого пятнадцать лет назад вообще такая мысль могла возникнуть? ;)
                            +3
                            Убрать из заголовка HTML и добавить в статью Node.JS :) Вот уж чего точно не ожидали до недавнего времени…
                              +1
                              Для меня было круто увидеть Raytracing на Javascript
                              labs.flog.co.nz/raytracer/
                              www.chromeexperiments.com/detail/javascript-canvas-raytracer/
                              и другие
                                0
                                gyu.que.jp/jscloth/ ткань, но в 3D и с текстурой
                                  0
                                  www.nihilogic.dk/labs/chess/ 3D шахматы
                                    0
                                    gyu.que.jp/jscloth/touch.html
                                    3D — iPhone со сферической Environment Map (крутые отражения на задней стенке телефона)
                                      0
                                      Тоже мне, «играть» в Wolf3D… :(
                                        0
                                        Рендеринг флеша при помощи js и svg? Это… интересно.
                                          0
                                          Этот бред распространяют те, кто не знает, что такое флэш.
                                          Это всеравно, что хвастаться тем, что Ока ездит быстрее и дальше самолета братьев Райт.
                                          Полноценный флэш никакой JS не потянет, здесь речь шла лишь о флэш ранних версий без Actionscript (иногда это называют AS0 ).
                                          +1
                                          «Распознавание объектов на видео в реальном времени»

                                          Ubuntu.
                                          В Chrome ничего вообще там не происходит, кроме воспроизведения видео.
                                          В Firefox показывается первые полсекунды видео, потом тишина, видео висит, меняется только надпись FPS и какая-то кардиограмма красно-зеленая ползет справа вверху.

                                          Что там вообще хоть происходить-то должно?..
                                            0
                                            интересно было проверить «2. распознование объектов на видео в реальном времени». Ожидал большего.
                                              +1
                                              Пункт «Странные штуки» — это действительно то, чего нельзя ожидать от чего бы то ни было вообще.
                                                –1
                                                В Марио Карт графика лучше, чем на псп, инфа 100%!

                                                Вообще, очень хочу хорошие браузерные гонки, пусть флешовые, всё равно пока и таких не могу найти. Почему браузерные? Потому что в браузере, когда проигрываешь, кричишь «АААААА!» и захлопываешь вкладку. А в полноценной игре — пока выйдешь в главное меню, там опять перед тобой красиво вертящиеся тачечки и трассочки — так и успокоишься… и пролетает ещё три часа.
                                                  0
                                                  Забыли еще про игру в шахматы :-)

                                                  habrahabr.ru/blogs/webdev/103677/
                                                    0
                                                    Девушка красивая на видео по второй ссылке :)
                                                      +1
                                                      Есть 11-я неожиданная вещь: убить всю процессорную мощность во время банального инет-серфинга. Интересно, сколько человек из пишущих все эти красивости задумываются, что у пользователя будет открыта не одна вкладка, а несколько, и в каждой сайтописатели прилепили скрипты, и каждый скрипт хочет выполняться постоянно… Впрочем, претензия тут скорее не к сайтописателям. Проблема в том, что скрипты потихоньку дошли до функционала приложений, потребление ими ресурсов дошло до состояния приложений, а вот операции со скриптами всё ещё идут на уровне «мы тут загрузили файлик и выполнили». Браузер пора делать полноценной операционной системой — с приоритетами для каждого скрипта, возможностью их убивать, видеть загрузку ими системы, возможностью ставить их на паузу…
                                                        0
                                                        ChromeOS видимо движется в эту сторону.
                                                          0
                                                          Мм… Кажется, нет. По-крайней мере, в текущем виде. ChromeOS всё-таки больше обёртка вокруг браузера, дисковая операционная система для единственного реального приложения. Хотя фишка самого Chrome, «запесочивание» отдельных вкладок и отдельных «особо опасных» плагинов в отдельные процессы не может не радовать.
                                                          Но я имею в виду, что кроме дисковой операционной системы, отвечающей за работу с файлами и так далее, надо что-то типа web операционной системы (не путать с WebOS), отвечающей за работу с интернетом. Одновременно на одном компьютере. Чтобы с точки зрения дисковой системы, веб система была обычным приложением — возможно даже, однопроцессным. А скрипты, рендеринг вкладок и так далее реализовывались в виде потоков. И уже веб система предоставляла управление этими потоками. То есть, мне не нужна замена Windows/Linux/MacOS для работы в интернете — нужен браузер с функциями операционной системы. Так что тут ближе всё-таки чистый Chrome. Будущее покажет, во что он разовьётся…
                                                        0
                                                        интересно, а кто-нибудь пользуется bespin'ом в реальной жизни?

                                                        Only users with full accounts can post comments. Log in, please.

                                                        Top discussions

                                                        There's nothing here

                                                        Top posts

                                                        Your account

                                                        Sections

                                                        Info

                                                        Services

                                                        © 2006 – 2021 «Habr»
                                                        Language settings
                                                        About
                                                        Support
                                                        Mobile version