HTML5 3D canvas (JavaScript)

[Aroused]

Кто-нибуть понимает как это работает?

http://deanm.github.com/pre3d/colorscube.html

Я так понимаю это достигается с помощью JS?

Хотелось бы собрать информацию в этой теме, по ходу буду дополнять, кто понимает как реализовать такую анимацию пишите =)

Edited July 26, 2011 by Aroused

[Great Rash]

Я понимаю общие принципы формирования подобных изображений, но сомневаюсь что вам это сильно поможет... В любом случае вот что вам надо почитать:

Евклидово пространство

Вектор

Матрица

Афинные преобразования

Это общие понятия, опираясь на которые можно соорудить нечто похожее на демку. Ну или можно качнуть какой-нить фреймворк который сделает все за вас...

[DrStrangeLove]

Three.js тебе в помощь! Там представлено много примеров для просмотра в правильном браузере..

[Aroused]

  On 7/26/2011 at 10:18 AM, DrStrangeLove said:

Three.js тебе в помощь! Там представлено много примеров для просмотра в правильном браузере..

Да, но если не использовать WebGL то работает даже на андроиде, а это уже интересно. Я не сомневаюсь что в будущем браузеры финальной сборки будут предусматривать аппаратное ускорение 3D.

Я видел тему что 3D обьект конвертится в asc потом каким - то образом в js.

Edited July 26, 2011 by Aroused

[Aroused]

А вот что можно сделать только с CSS3 http://jsfiddle.net/e3eHp/

Только для Safari и Apple Mobile..

Плоскость это Div а значить можно сделать кликабельным и тд и тп..

Было бы круто Если разобраться как сделать управление кубика мышью (рабираюсь).

Edited July 26, 2011 by Aroused

[DrStrangeLove]

  On 7/26/2011 at 10:33 AM, Aroused said:

  On 7/26/2011 at 10:18 AM, DrStrangeLove said:

Three.js тебе в помощь! Там представлено много примеров для просмотра в правильном браузере..

Да, но если не использовать WebGL то работает даже на андроиде, а это уже интересно. Я не сомневаюсь что в будущем браузеры финальной сборки будут предусматривать аппаратное ускорение 3D.

Я видел тему что 3D обьект конвертится в asc потом каким - то образом в js.

Можно и без WebGL. Там разные рендереры в папке src/renderers, например CanvasRenderer.

[Aroused]

  Quote

Можно и без WebGL. Там разные рендереры в папке src/renderers, например CanvasRenderer.

Да, спасибо. Хотел сделать кубик, вот что получилось

http://jsfiddle.net/6Zyrb/2/

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

[Shift-Web]

Ждите кейфрэймы для остальных браузеров, наверняка опера и фокс скоро подтянутся. Экстра-разметка не есть гуд

[Aroused]

  On 7/26/2011 at 6:02 PM, Shift-Web said:

Ждите кейфрэймы для остальных браузеров, наверняка опера и фокс скоро подтянутся. Экстра-разметка не есть гуд

Похоже лучше флеша еще ничего не придумали.. ппц

[Shift-Web]

  On 7/26/2011 at 6:24 PM, Aroused said:

  On 7/26/2011 at 6:02 PM, Shift-Web said:

Ждите кейфрэймы для остальных браузеров, наверняка опера и фокс скоро подтянутся. Экстра-разметка не есть гуд

Похоже лучше флеша еще ничего не придумали.. ппц

Ну да, но в принципе щас CSS рулит неплохо. Вот только поддержка ... ):

[Nekromancer]

  On 7/26/2011 at 6:24 PM, Aroused said:

  On 7/26/2011 at 6:02 PM, Shift-Web said:

Ждите кейфрэймы для остальных браузеров, наверняка опера и фокс скоро подтянутся. Экстра-разметка не есть гуд

Похоже лучше флеша еще ничего не придумали.. ппц

Вы ошибаетесь. Уже сейчас на WebGL можно делать полноценные 3d игры. Флэшовое зло уже своё изжило, наступает новая эра - эра HTML5. Canvas, SVG, HTML5 Video, WebGL это мощные современные инструменты, достаточно лишь попробовать их.

[Shift-Web]

  On 7/31/2011 at 5:11 PM, Nekromancer said:

  On 7/26/2011 at 6:24 PM, Aroused said:

  On 7/26/2011 at 6:02 PM, Shift-Web said:

Ждите кейфрэймы для остальных браузеров, наверняка опера и фокс скоро подтянутся. Экстра-разметка не есть гуд

Похоже лучше флеша еще ничего не придумали.. ппц

Вы ошибаетесь. Уже сейчас на WebGL можно делать полноценные 3d игры. Флэшовое зло уже своё изжило, наступает новая эра - эра HTML5. Canvas, SVG, HTML5 Video, WebGL это мощные современные инструменты, достаточно лишь попробовать их.

Попробовать да. использовать -- для развлекухи. Равновато, имхо. тормозит

[Great Rash]

  Quote

Вы ошибаетесь. Уже сейчас на WebGL можно делать полноценные 3d игры.

Пока рано:

1) скорость маловата - 20 fps на неслабом компе это много, особенно для мобильных устройств.

2) далеко не все браузеры поддерживают, не у всех браузеров одинаковая реализация некоторых методов.

3) флеш - единая платформа, в этом ее плюс.

[Shotgun]

подскажите как на canvas нарисовать две линии разного цвета

context.strokeStyle = "#000";
context.moveTo(50, 50);
context.lineTo(100, 100);
context.stroke();
context.strokeStyle = "#f00";
context.moveTo(10, 10);
context.lineTo(50, 50);
context.stroke();

в итоге все получается одного цвета

.beginPath() не помогает, а .closePath() лишь возвращает линию в начало

Edited August 2, 2011 by Shotgun

[sigma77]

Shotgun,

http://jsfiddle.net/xB7FE/

[Shotgun]

спасибо, работает

еще не получается сдлать прямую черную линию в 1px. мозила отрисовывает как 2px и полупрозрачными. прямо беда))

Edited August 2, 2011 by Shotgun

[Nekromancer]

  On 8/1/2011 at 7:03 AM, Great Rash said:

  Quote

Вы ошибаетесь. Уже сейчас на WebGL можно делать полноценные 3d игры.

1) скорость маловата - 20 fps на неслабом компе это много, особенно для мобильных устройств.

2) далеко не все браузеры поддерживают, не у всех браузеров одинаковая реализация некоторых методов.

3) флеш - единая платформа, в этом ее плюс.

20-30 fps вполне достаточно, большое количество игр так и работает. Тем более 3d игры рассчитываются не на слабые компьютеры и тем более не на мобильные телефоны.

Не все браузеры поддерживают ... Это же не повод не разрабатывать не чего? Некоторые профессиональные игры делаются не один год, за это время много изменится, а стартовать проекты нужно уже сейчас.

Флеш... Флеш не единая платформа, флеш это просто плагин которому долгое время не было почти никакой цивилизованной альтернативы и за это время он завоевал большинство компьютеров, но это не есть показатель, что флеш лучше.

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

[Great Rash]

3D-игры рассчитаны не на компьютеры, а на игроков. А сейчас все большую популярность набирают именно мобильные устройства (смартфоны, планшетники и т.п.). HTML5, с его канвасом, ориентирован, прежде всего, на мобильные устройства. Делать серьезные проекты на канвасе для PC по-моему немного странно. Для этого есть более серьезные среды - OpenGL, DirectX. Монетизация же так называемых инди-игр на PC стремится к нулю, зато владельцы айфонов тратят деньги на подобные вещи с удовольствием.

В любом случае к теме топика это не относится, по этому я заканчиваю этот треп. Подозреваю, что ваше мнение я все равно не изменю.

[Shift-Web]

  On 8/2/2011 at 12:14 PM, Nekromancer said:

  On 8/1/2011 at 7:03 AM, Great Rash said:

  Quote

Вы ошибаетесь. Уже сейчас на WebGL можно делать полноценные 3d игры.

1) скорость маловата - 20 fps на неслабом компе это много, особенно для мобильных устройств.

2) далеко не все браузеры поддерживают, не у всех браузеров одинаковая реализация некоторых методов.

3) флеш - единая платформа, в этом ее плюс.

20-30 fps вполне достаточно, большое количество игр так и работает. Тем более 3d игры рассчитываются не на слабые компьютеры и тем более не на мобильные телефоны.

Не все браузеры поддерживают ... Это же не повод не разрабатывать не чего? Некоторые профессиональные игры делаются не один год, за это время много изменится, а стартовать проекты нужно уже сейчас.

Флеш... Флеш не единая платформа, флеш это просто плагин которому долгое время не было почти никакой цивилизованной альтернативы и за это время он завоевал большинство компьютеров, но это не есть показатель, что флеш лучше.

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

даже флэш начинает сосать и выжигать процессор, когда речь идёт о каком то MMORPG мультиплеер месиве. Я просто знаю одну игрушку. Всё хорошо работало, флэш, свистелкит перделки, вид от третьего лица, мободрочь, ПвП и т.д. Но когда начинали меситься более 10 человек даже 4хядерники тупили. Что такое канвас? Это скорее всего ставка именно на что то вроде CUDA(когда нагрузка на вычисления берёт видеокарта преимущественно).

Пробовал, кстати, эспериментировать. Удаляем дрова из системы в пользу дефоолтных, запускаем примеры 3D canvas mr.Doob'a. собсно нет дров будет тормозящая шняга. Есть дрова - работает заметно лучше и интереснее. Собно, я думаю, что тут дело в большей степени сейчас именно за производителями железа и дров. Если они как то решат проблемы распределения графич. вычислений с браузера туда где им положено быть, то будет шоколад. Если нет, то ... канвас сдохнет и будет неинтересен.

Всё таки, нужно понимать, что браузерный JS, да и вообше JS не дорос до серьёзных задач. ИМхо