The OpenNET Project / Index page

[ новости /+++ | форум | теги | ]



Вариант для распечатки  
Пред. тема | След. тема 
Форум Разговоры, обсуждение новостей
Режим отображения отдельной подветви беседы [ Отслеживать ]

Оглавление

Релиз Firefox 22 с поддержкой Asm.js, opennews (ok), 25-Июн-13, (0) [смотреть все]

Сообщения [Сортировка по времени | RSS]


49. "Релиз Firefox 22 с поддержкой Asm.js"  +/
Сообщение от Ктоздесев (?), 26-Июн-13, 00:48 
Мне по какой-то причине больше всего нравится именно SVG. Может быть из любви к векторной графике, может что-то удобнее, чем canvas. Мне SVG кажется более естественным путём рисования в браузере. Ну и встраивание любых (!!!) XML-элементов бередит воображение. (можно, например, _без_флеша_ сделать 3D-интерфейс сайта или браузера или SpeedDial-а, и даже создать его в виде дополнения) Много чего возможно сделать. Главное дружить с математикой. Беда в том, что сколько бы ни делал пробных поделок - разные браузеры показывают по-разному, а некоторые не показывают то, что показывают другие. Писать под один браузер - бессмысленно, особенно учитывая что за чехарду затеяли разработчики общепризнанных сетевых обозревателей. canvas мне представляется неким аналогом точечного экрана обычной ПК-шки, куда переселяют системных программистов. Мне же - изначально веб-разработчику - желается творить на всей странице - беспредельно, буйно фантазируя, разрывая в клочья все шаблоны пользователей, но оставляя им и себе возможность включать сменный примитивный интерфейс, слегка меняя XML и скрипты. Разве я многого прошу? Нет, упёрлись в canvas и WebRTC... :) Хочут растровые картинки гонять, шкрябая архаизмами по каменному веку прямоугольных окон и плоских экранов.
Ответить | Правка | Наверх | Cообщить модератору

53. "Релиз Firefox 22 с поддержкой Asm.js"  +/
Сообщение от Lain_13email (ok), 26-Июн-13, 01:02 
> можно, например, _без_флеша_ сделать 3D-интерфейс сайта или…

Canvas это делает лучше. Значительно лучше.

> разные браузеры показывают по-разному, а некоторые не показывают то, что показывают другие.

Это нормально. Всё то же самое с CSS и всем прочим — есть фичи реализованные везде, а есть реализованные только где-то, а есть не реализованные нигде. А творим сейчас.

> canvas мне представляется неким аналогом точечного экрана обычной ПК-шки, куда переселяют системных программистов.

Неправильно представляется. Тем более, что тебе ничто не мешает влепить его во всю страницу.
http://h3manth.com/content/html5-canvas-full-screen-and-full...
Можешь даже влепить поверх контента с прозрачным фоном:
http://kevs3d.co.uk/dev/canvask3d/k3d_test.html
Да, чёрт побери, просто посмотри что на нём творят:
http://www.1stwebdesigner.com/freebies/html5-demos/

> Разве я многого прошу?

Нет, просто ты не хочешь учить что-то новое и значительно более годное.

Ответить | Правка | Наверх | Cообщить модератору

55. "Релиз Firefox 22 с поддержкой Asm.js"  +/
Сообщение от Ктоздесев (?), 26-Июн-13, 01:07 
Скажите, canvas держит все объекты в виде векторных частей? Я то думал, что это растровое поле. Тогда сравниваем XML-ный вектор и растр, что несопоставимо по факту.
> Нет, просто ты не хочешь учить что-то новое и значительно более годное.

Просто я хочу работать с вектором и XML, а с растром - не хочу. Новое приходится учить постоянно, так что в конечном итоге приходится просто выбирать согласно своим предпочтениям и устремлениям.

Ответить | Правка | Наверх | Cообщить модератору

58. "Релиз Firefox 22 с поддержкой Asm.js"  +/
Сообщение от Lain_13email (ok), 26-Июн-13, 01:28 
Нет и да. Canvas сам по-себе растровый, но это не значит, что ты ограничен растром. Возьми любую битблиотеку для рендера векторных картинок и вперёд.
http://stackoverflow.com/questions/4340040/html5-canvas-vect...
Ознакомься хоть с первыми двумя.

Захочешь 3D — возьми готовую либу для 3D и строй на её основе если не хочется лезть в тонкости работы canvas. А ведь 3D в принципе векторное. В нём растр это конечный результат, ну и текстуры, естественно.

Другое дело решить когда тебе нужен canvas, а когда SVG. SVG хорош в отображении огромных статичных картинок во много экранов, но нагрузка на систему растёт пропорционально числу объектов в нём, тогда как у canvas с этим проблем значительно меньше. Так что если тебе нужна сложная динамичная графика — тебе нужен canvas.

Ответить | Правка | Наверх | Cообщить модератору

68. "Релиз Firefox 22 с поддержкой Asm.js"  +/
Сообщение от Ктоздесев (?), 26-Июн-13, 02:03 
> Нет и да. Canvas сам по-себе растровый, но это не значит, что
> ты ограничен растром. Возьми любую битблиотеку для рендера

В моём представлении получается следующее:
Создаю холст, подгружаю библиотеку, создаю  объект, даю команду - он отправляется на холст и становится видимым у пользователя. При этом: а) параметры объекта мне нужно хранить в переменных - отдельно в памяти; б) если я захочу изменить объект, я обращусь к переменным, потом к библиотеке и потом это изменится на холсте. Если объект наслоился на что-то или частично перекрыт чем-то - там нужны дополнительные вычисления, чтобы перерисовать некий участок холста - это придётся вычислять мне, а не хотелось бы с этим возиться по факту; в) если пользователь захочет скопировать отрисованный текст (например, хотя бы, чтобы перевести автопереводчиком, а может и скопировать вовне - для цитирования или упоминания где-то), то он этого не сможет сделать; г) если пользователю нужно отключить "рюшечки" и ослабить нагрузку на систему - ему нужен будет отдельный HTML-интерфейс, который просто по факту будет выглядеть иначе, даже если сильно постараться с CSS-3. На canvas-странице он не сможет отключить картинки и оставить остальное. (в SVG это возможно).
Я нисколько ни умаляю возможности canvas, но если это растр - это не подходит под мои идеи.

> Ознакомься хоть с первыми двумя.

Непременно. Как минимум для общего развития.


> если тебе нужна сложная динамичная графика — тебе нужен canvas.

Мне нужны статические страницы, где можно чуток приукрасить (псевдотрёхмерными кнопками, панельками, скруглениями, текстами, уходящими в перспективу и в тень и выезжающими при наведении мыши и т.д.), дать немного интерактива, отойти от прямоугольников и сплошных цветов, но не убивать пользователя буйством красок и мельтешением пикселей. Нужно остаться в XML-е, но иметь возможность менять размеры и формы, вставлять картинки и другие страницы (SVG может), делать спецэффекты, но всё-равно оставлять страницу максимально близкой к XML-ю. Чтобы пользователь мог работать со страницей по-прежнему максимально эффективно - дополнениями обрезая куски (рекламу например, а она будет не у меня, так у других), дополнениями же меняя цвета, размеры и шрифты текстов, собирая ссылки, переводя тексты страницы, вставляя дополнительные узлы в DOM (чем только ни грешат нынче дополнения), автоматизируя сёрфинг макросами (а те ориентируются на DOM) и т.д. и т.п. Canvcas хорош, но он по-другому и для других целей хорош. Мне же SVG кажется более предпочтительным для моих идей.

Ответить | Правка | Наверх | Cообщить модератору

70. "Релиз Firefox 22 с поддержкой Asm.js"  +/
Сообщение от Lain_13email (ok), 26-Июн-13, 02:22 
> а) параметры объекта мне нужно хранить в переменных - отдельно в памяти;

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

> б) если я захочу изменить объект, я обращусь к переменным, потом к библиотеке и потом это изменится на холсте.

Если сам рисовал, то за пределы своего кода выходить не будешь — всё остальное само произойдёт. Если загрузил готовое, то придётся сначала ссылки на нужные объекты получить средствами либы, чтоб ими потом управлять.

> Если объект наслоился на что-то или частично перекрыт чем-то - там нужны дополнительные вычисления, чтобы перерисовать некий участок холста - это придётся вычислять мне, а не хотелось бы с этим возиться по факту;

Нет, если фон у канваса не рисовать, то всеми наслоениями будет заниматься браузер. В конце-концов canvas это такой же блок на странице, как и все остальные блоки со всеми вытекающими из этого следствиями. Если пользуешься либой, то проблемы изменения размеров канвы становятся проблемами либы и тебя тоже не касаются. Возможно придётся указать либе менять объекты под размеры канваса.

> в) если пользователь захочет скопировать отрисованный текст (например, хотя бы, чтобы перевести автопереводчиком, а может и скопировать вовне - для цитирования или упоминания где-то), то он этого не сможет сделать;

Увы да. Хотя есть способы это обойти, но они крайне кривые. Текст лучше вне канвы рисовать. Хотя если это пара коротких слов, то не велика беда. Смотря что ты с этой парой слов хочешь сотворить.

> На canvas-странице он не сможет отключить картинки и оставить остальное.

Ну, предположим, отключением одних только картинок ты большой разгрузки системы не получишь… если только у тебя картинки не по 20 Мб штука. А если убирать все рюшечки, то SVG убрать придётся тоже. И интерфейс будет другой. Впрочем, пользователь и ожидает другой интерфейс, более простой. Вон у гугломыла есть упрощённая версия и никто не ожидает, что она будет такой же.

> Мне нужны статические страницы, где можно чуток приукрасить

С этого и нужно было начинать. :)
Но тогда, как мне кажется, лучше больший упор делать на JS+CSS. В конце-концов эта парочка уже есть везде.


Ответить | Правка | Наверх | Cообщить модератору

73. "Релиз Firefox 22 с поддержкой Asm.js"  +/
Сообщение от Ктоздесев (?), 26-Июн-13, 02:49 
>> Мне нужны статические страницы, где можно чуток приукрасить
> С этого и нужно было начинать. :)

Да, но "чуток" можно понимать по-разному. :) С помощью SVG можно "чуток" сделать несколькими простыми операциями и повлиять на элементы в разных частях страницы. И при необходимости прямо в DOM-е взять старые значения и ориентироваться на них при изменении других. Да и менять значения просто - изменив значение параметра узла в DOM-е.
Да и несовсем статические, если что-то может шевелиться под мышкой или при тычке ею.

> Но тогда, как мне кажется, лучше больший упор делать на JS+CSS. В конце-концов эта парочка уже есть везде.

Да, разумеется, так и придётся пока что. Увы, CSS-3 сейчас больше "вылизывают", чем SVG.

И всё же человек может мечтать. :)
(о хорошо поддерживаемом SVG :) )

Ответить | Правка | Наверх | Cообщить модератору

76. "Релиз Firefox 22 с поддержкой Asm.js"  +/
Сообщение от Ктоздесев (?), 26-Июн-13, 03:33 
>> Если объект наслоился на что-то или частично перекрыт чем-то - там нужны дополнительные вычисления, чтобы перерисовать некий участок холста
> Нет, если фон у канваса не рисовать, то всеми наслоениями будет заниматься браузер.

Хотелось уточнить: браузер занимается наслоениями отдельного холста на что-то. А я про наслоениями разных объектов на холсте. В SVG это, грубо говоря, просто разные "z-index". Если мне нужно поднять один объект из под другого, то я просто меняю ему уровень. В растре наверняка требуется перерисовать оба объекта в другом порядке или что-то типа того. Если объектов несколько или они сложны сами по себе - всё становится ещё сложнее. В векторе же для меня это несущественно: сложные объекты будут для меня именованными группами, которые я просто поменяю местами либо изменю им положение парой команд.
Конечно многое из требуемого SVG в общепризнанных браузерах уже и так работает. Но когда начинаешь писать что-то сложнее, чем движение примитивов - упираешься в мелочи, разные в рвзных браузерах. Ну и обработка текстов в них разнится.
> Ну, предположим, отключением одних только картинок ты большой разгрузки системы не получишь…

Но я могу в движок заложить альтернативный облегчённый XML - с в разы меньшим количеством узлов. Но это уже вопрос реализации, это можно сделать и в HTML-5. Просто в HTML-5 для некоторых визуальных частей нужно задействовать более сложные "плагины" этого "языка разметки" :) , а в SVG можно вообще из JS убить тяжёлые узлы DOM и отключить фильтры, JS-активности и разнообразные ненужные шевелящиеся красоты - даже не перезагружая и не перерисовывая страницу. Даже можно обойтись одним набором исходников, вставив в загрузку проверку предпочтений и поведение при отрисовке сообразно им.

Ответить | Правка | К родителю #70 | Наверх | Cообщить модератору

78. "Релиз Firefox 22 с поддержкой Asm.js"  +/
Сообщение от Lain_13email (ok), 26-Июн-13, 04:04 
> Хотелось уточнить: браузер занимается наслоениями отдельного холста на что-то. А я про
> наслоениями разных объектов на холсте. В SVG это, грубо говоря, просто
> разные "z-index".

Хе-хе, да. Тебе придётся управлять порядком отрисовки.
Например: http://radikalfx.com/files/collage/demo.html
Но знаешь, всё ведь зависит от движка. Если его разумно сделать, то порядок меняется той же парой команд, а не внесением изменений в код на лету. zindex нужных объектов можно хранить, например, в форме списка объект/уровень, а движок будет сортировать список при его изменении и дальше рисовать всё в этом порядке.

Ну или можно сделать несколько канвасов и управлять их уровнями.

Ответить | Правка | Наверх | Cообщить модератору

82. "Релиз Firefox 22 с поддержкой Asm.js"  +1 +/
Сообщение от Ктоздесев (?), 26-Июн-13, 10:29 
Это хорошо, что можно сделать что-то разными способами. Вопрос в целях при разработке.
Мне нужно остаться в XML-е и работать с вектором и узлами DOM, оставить пользователям побольше уже имеющихся возможностей HTML и браузерных дополнений, выйти из плоскости, но остаться в DOM-ах и с возможностью тыкать, выделять, копировать и менять всё, что есть на странице, с помощью дополнений или других веб-инструментов.
Спонсорам растровых разработок, мне кажется, важно согнать пользователей с ПК на "тонкие клиенты" и сделать их рабами серверов, присылающих (и принимающих) видеопотоки. Там уже рекламу не удалишь, там опять придётся залеплять экран изолентой (как я в юности залеплял баннеры "Оперы", когда она была "шароварной"). А в случае с Гугло-очками - видимо мало-помалу становиться психом, ненавидящим вдалбливаемый тебе в мозг бренд.. :)
Ответить | Правка | Наверх | Cообщить модератору

63. "Релиз Firefox 22 с поддержкой Asm.js"  +/
Сообщение от Ктоздесев (?), 26-Июн-13, 01:41 
> что на нём творят

там всё вперемешку. Например заинтересовавшее меня "15. Google Gravity" на поверку оказалось работой с CSS-3.
Точечные эффекты наверное на Canvas написаны. А я хочу работать с векторными объектами, меняя им векторные параметры: масштабы, обводки, размеры отдельных частей, менять текст в объекте "текст по кривой" или менять разом несколько объектов, создавая эффект псевдотрёхмерности - векторной, той, где трёхмерные возможности типа WebGL ещё не нужны, но в плоскости уже тесновато. На страницах можно было бы делать псевдотрёхмерные объекты и чуть менять их глубину. Несильно, но меняя уже представление о рабочем пространстве страницы. Мне не нужно всё превращать в холст или отменять доступность всех узлов (ссылок, текстов) только потому, что мне нужно поверх пустить большой элемент. Мне хотелось бы и "тексту по кривой" оставить возможность быть выделенным и скопированным. А не превращать его в растровое изображение. Это другой подход. Спасибо за ссылки, конечно (и HTML5 прекрасен, не спорю!), но видимо я недостаточно точно передал что хотелось бы делать со страницами. Я хочу чтобы они оставались такими же "тыкабельными", "выделябельными" и лёгкими, но стали красивее (и я даже не мечтаю, чтобы работали все SVG-фильтры - это было бы наверное сбывшейся сказкой). У меня все примеры с того сайта мигом нагрузили процессор (2-ядерный Атлон) и система подняла обороты кулеров. А вот столь же несложные SVG-шки грузят процессор только при первоначальной отрисовке и изменениях (через JS), а в статике и красота на странице, и ЦП отдыхает.
Вообщем-то тут спорить не о чем. Растр и вектор - разные миры. Для меня растр - нечто, чем можно украсить вектор. Для кого-то растр - это весь мир, включающий все возможные векторы. :)

Ответить | Правка | К родителю #53 | Наверх | Cообщить модератору

67. "Релиз Firefox 22 с поддержкой Asm.js"  +/
Сообщение от Lain_13email (ok), 26-Июн-13, 01:55 
Ну примеры-то понятно почему нагрузили — они динамичные. Если отрендерить и не трогать, то и дополнительной нагрузки не создаст. Собственно, что мешает сочетать одно с другим?
Да и пускать текст по кривой можно и вот так, например:
http://tympanus.net/Development/Arctext/
И псевдотрёхмерность тоже:
http://davidwalsh.name/demo/3d-menu.php
Ответить | Правка | Наверх | Cообщить модератору

71. "Релиз Firefox 22 с поддержкой Asm.js"  +/
Сообщение от Ктоздесев (?), 26-Июн-13, 02:34 
> пускать текст по кривой можно и вот так, например:

Можно. Там CSS-3. Каждая буква там - отдельный тег SPAN, с отдельным CSS-правилом. Это больше байтов на код, чем потребуется в SVG. Кроме того, чтобы изменить кривую, нужно самому считать положение каждой точки. В SVG достаточно переместить ближайший ключевой узел - и все буквы сместятся, следуя изменению участка кривой.
Псевдотрёхмерность впечатлила. Не уверенн, что всё что мне нужно я этим CSS-3 воплощу, но спасибо за ссылку.
В любом случае это не canvas. И HTML-5 полностью не заменит SVG - это разные вариации XML. :) В HTML-5 понатыкали "плагинов". А SVG сам по себе представляет отдельный способ работы со страницей, в который тоже, конечно, можно что-то ещё добавлять, но он сам по себе способен отрисовывать многое и оставлять пользователей и программиста с XML-ем. Даже можно несколько SVG-файлов использовать на странице, и даже вставлять их в CSS-правила.
В конечном итоге применение этих технологий зависит от целей.
Моими целями не является задействовать HTML-5 любой ценой. Но цели я выше описал. Плюс есть цель задействовать SVG в качестве именно векторного формата (с варьированием разрешений приборов это актуально), предельно маленьких файлов, которые можно быстро кромсать на клиенте с помощью JS, разбрасывать по странице, менять буквально парой команд в любой миг любые параметры от формы до обводки и даже слоя отображения.
Я на прошлой неделе ковырял canvas-игру (выше упомянал сайт и примерное название), так там для разных разрешений подгружались четыре разных растровых набора картинок: под ОйПад, под Андроид, под ПК и под планшет. (я молчу про организацию каталогов, вероятно при трансляции кода так тупо всё расположила программа) И игра была организована через canvas и спрайтами. Для показа новогоднего шарика брался участок картинки с матрицей разноцветных шариков и кадрами с разными бликами на них. Просто чтобы отобразить сверкающий шарик! В SVG это был бы клон объекта с привязанным заданным "стилем" и изменённым цветом (копируем стиль с новым именем, подменяем цвет, можно даже после загрузки кода, уже на клиенте - ничтожные операции). Я недоковырял её, но когда будет время, намерен переписать это на SVG+JS хотя бы ради упражнения, если не для распространения.

Ответить | Правка | Наверх | Cообщить модератору

72. "Релиз Firefox 22 с поддержкой Asm.js"  +/
Сообщение от Lain_13email (ok), 26-Июн-13, 02:41 
>> пускать текст по кривой можно и вот так, например:
> Можно. Там CSS-3. Каждая буква там - отдельный тег SPAN, с отдельным
> CSS-правилом.

<h3 id="example1">I wanna be curved</h3>
Где ты видишь тут кучу спанов?!
Разве что либа их потом генерирует — я не смотрел как она работает.

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

Посмотри пример 4.

> Я на прошлой неделе ковырял canvas-игру (выше упомянал сайт и примерное название),
> так там для разных разрешений подгружались четыре разных растровых набора картинок:
> под ОйПад, под Андроид, под ПК и под планшет. (я молчу
> про организацию каталогов, вероятно при трансляции кода так тупо всё расположила
> программа) И игра была организована через canvas и спрайтами. Для показа
> новогоднего шарика брался участок картинки с матрицей разноцветных шариков и кадрами
> с разными бликами на них. Просто чтобы отобразить сверкающий шарик!

Почему-то я подозреваю, что они изначально рассчитывали работать чисто в растре. Вот и решения у них соответствующие. Спрайты и вот это всё.

Ответить | Правка | Наверх | Cообщить модератору

75. "Релиз Firefox 22 с поддержкой Asm.js"  +/
Сообщение от Ктоздесев (?), 26-Июн-13, 03:03 
> Где ты видишь тут кучу спанов?!

В Inspector-е.

> Посмотри пример 4.

а не могли бы своими словами кратко обрисовать?
В SVG мне, не задействуя никаких библиотек, потребуется лишь изменить одну координату - и изменится и кривая, и положение букв, и их наклоны, и отрисовка, согласно шрифтам (в идеале, на самом деле разные браузеры по-разному отрисоывают пока что). В том варианте вероятно всё это считает библиотечная функция, это вы хотели сказать? Тем не менее, CSS не переплюнет SVG по уйме других возможностей всё равно (сейчас ни к чему перечислять всё). Это разные миры. И в разных случаях их следует применять.

Мне тут же на Опеннете, примерно 10 месяцев назад сказали, что SVG не пошёл в массы потому, что веб-разработчикам лень возиться с математикой. А я ещё и желаю оперировать с разными участками и составными частями страниц, т.е. не с одной SVG, включающей всё, а с XML-страницей, включающей обычные элементы веб-страниц. Не потому что "не лень", а потому, что вижу в этом адский потенциал для воплощения разнообразных фантазий.

> Почему-то я подозреваю, что они изначально рассчитывали работать чисто в растре.

Я тоже, препарируя, решил, что исходник взяли из "системной" игрушки и с незначительными изменениями автоматом перегнали это в canvas+JS. Вот это "чудо": http://nickelspark.com/each/tpang/

Ответить | Правка | Наверх | Cообщить модератору

77. "Релиз Firefox 22 с поддержкой Asm.js"  +/
Сообщение от Lain_13email (ok), 26-Июн-13, 03:40 
> В Inspector-е.

Ох и точно. Нагенерировали по самое не хочу. Да, всё считает либа, а в исходном коде идёт нормальный текст. Вообще я полностью согласен, что SVG больше подходит для таких фокусов. По крайней мере с текстом. Но он действительно как-то не прижился, а от математики так и не сбежали.

Ответить | Правка | Наверх | Cообщить модератору

Архив | Удалить

Рекомендовать для помещения в FAQ | Индекс форумов | Темы | Пред. тема | След. тема




Партнёры:
PostgresPro
Inferno Solutions
Hosting by Hoster.ru
Хостинг:

Закладки на сайте
Проследить за страницей
Created 1996-2024 by Maxim Chirkov
Добавить, Поддержать, Вебмастеру