Подтвердить что ты не робот

Canvas vs. webGL vs. CSS 3d → что выбрать?

Для базового 3d-приложения, т.е. нескольких кубов, вращения и перевода в 3d-пространстве - что лучше выбрать?

CSS 3d кажется самым простым, но не поддерживается IE9 или дорожной картой для IE10 и предлагает меньше контроля, чем другие параметры. Canvas и WebGL кажутся более сложными, но я не знаю, являются ли они будущими доказательствами.

Почему существует так много разных технологий для 3D? что лучше? который является будущим доказательством?

4b9b3361

Ответ 1

Причина, по которой существует так много разных вариантов 3D, состоит в том, что все это все еще находится в состоянии потока: 3D в браузере не является готовым стандартом, а из перечисленных вами опций - единственной, которая работает во всех доступных в настоящее время браузерах есть Canvas.

IE, в частности, вряд ли принесет вам много радости - как вы говорите, 3D еще не запланирован для IE10 на данный момент. Сказав это, SVG был добавлен в IE9 довольно поздно, так что всегда есть надежда. Но причина, по которой это маловероятно, заключается в том, что Microsoft поставила точку только на поддержку функций, которые были официально ратифицированы как стандарты.

Из перечисленных технологий, Canvas, безусловно, лучше всего поддерживается, но Canvas не является 3D-технологией; это 2D-холст, и если вы хотите иметь 3D-эффекты в нем, вам нужно написать их самостоятельно, и они не будут аппаратно ускорены.

Я думаю, что реальный ответ на ваш вопрос зависит от того, насколько важна функция для вашего сайта. Если это просто глазная конфета, которую пользователи без поддержки браузеров могут жить без нее, то непременно сделайте это с помощью некоторого 3D CSS. Но если вам нужно сделать его согласованным во всех существующих браузерах, сделайте это с помощью Canvas.

Я бы рекомендовал не использовать WebGL для вашего дела, потому что это звучит так, как будто это будет излишним для того, что вы делаете.

3D CSS, вероятно, правильный ответ, но использовать Canvas пока, пока остальные браузеры не поддерживают поддержку 3D CSS.

Ответ 2

Я действительно зависим от того, что вы пытаетесь сделать. Насколько проста простая?

3D CSS далека от использования. Он только что превратил его в firefox. Это багги как в Firefox, так и в Chrome. Он не работает в бета-версии FF9 на OSX. Он также получил проблемы в Chrome до 16 лет. См. http://greggman.com/downloads/examples/intersecting-elements-3d-css.html и сравните Safari в OSX практически с любым другим браузером.

three.js(https://github.com/mrdoob/three.js/), используемый (и, возможно, еще), предоставляет простой 3D-холст.

В противном случае, если вам нужно что-нибудь интересное, зайдите в WebGL и выберите библиотеку (three.js, SceneJS и т.д.)

Вы должны сделать выбор. Используйте WebGL и откажитесь от IE, используйте Flash 11, используйте Unity3D, используйте Canvas и получите очень ограниченный 3d или не делайте 3d.

WebGL уже используется основными сайтами. CNN теперь использует WebGL http://www.stinkdigital.com/en/work/ecosphere

Ответ 3

Я знаю, что это 2 года, но я полагаю, что опубликую это здесь для будущих читателей.

Что выбрать, зависит от того, что вам нужно.

Вам нужна простая трехмерная форма без анимации? Попробуйте, если вы можете сделать это с помощью CSS3, что проще всего. Для IE вы можете получить библиотеку, которая предлагает поддержку.

Вам нужны милые 3d модели с красивой графикой, которые могут делать всевозможные вещи? Go WebGL, вы не можете запрашивать больше контроля и производительности для 3d в браузерах.

Вам нужны 3D-фигуры, которые могут делать всевозможные вещи, но не нуждаются в текстурах и будут работать повсюду и не потребуют большой производительности? Go Canvas.

CSS3 предназначен только для глазных конфет. Вы можете сделать это довольно легко, стилизовать его так, как вы хотите, и его легко обслуживать. Как только вы захотите сделать больше, чем просто глазные конфеты, наденьте перчатки, потому что это еще раз заработает.

С 2d Canvas вы можете создавать 3D-материалы. Если вы новичок в этом, это будет очень неприятно и сложно (назовите один пример, вам нужно знать о матрицах). Вы можете в значительной степени сделать что-нибудь с 2-мерным холстом, что вы можете сделать с WebGL, но что-то будет проще в WebGL (серьезно, если вы идете на 2d Canvas, не пытайтесь использовать текстуры, это кошмар). WebGL использует OpenGL, который в двух словах означает, что он всегда будет превосходить 2d Canvas.

Однако WebGL требует, чтобы у пользователя была совместимая видеокарта.

Ответ 4

Каждый, вероятно, устал слышать "это зависит", но... это зависит!

Происходит небольшая "война" о том, лучше ли использовать Canvas или HTML/CSS3, а именно потому, что Canvas медленнее, чем DOM на старых машинах/устройствах. Yeap, DOM в некоторых случаях быстрее, в то время как холст работает быстрее в большинстве современных браузеров/устройств.

WebGL - лучший вариант как для 2D, так и для 3D, но поскольку он недостаточно хорошо поддерживается в браузерах и устройствах, вам придётся предлагать резервное копирование на холст или DOM.

Canvas - менее подходит для 3D по сравнению с WebGL, но более подходит для совместимости, сообщества, инструментов и т.д.

DOM - Быстрее, чем большинство думает, если используется правильно, самая высокая поддержка вокруг, но вы не можете слишком замаскировать анимацию/игры.

Надеюсь, что это поможет