在您列出的技术中,Canvas 是迄今为止支持最好的,但 Canvas 不是 3D 技术;它是一种 3D 技术。它是一个 2D 画布,如果你想在里面有 3D 效果,你需要自己编写它们,并且它们不会被硬件加速。
我想您问题的真正答案取决于该功能对您网站的重要性。如果它只是养眼,而不受支持的浏览器的用户可以接受,那么请务必使用一些 3D CSS 来实现。但如果您需要使其在所有当前浏览器中保持一致,请使用 Canvas 来实现。
我倾向于建议不要在您的情况下使用 WebGL,因为这听起来对于您正在做的事情来说有点过分了。
3D CSS 可能是正确的答案,但现在请使用 Canvas,直到其他浏览器添加对 3D CSS 的支持。
The reason there are so many different options for 3D is because the whole thing is still in a state of flux -- 3D in the browser isn't a finished standard, and of the options you listed, the only one that works in all currently available browsers is Canvas.
IE in particular is unlikely to give you much joy -- as you say, 3D isn't even slated for IE10 at this point. Having said that, SVG was added to IE9 quite late in the day, so there's always hope. But the reason it's unlikely is that Microsoft have made a point of only supporting features which have been formally ratified as standards.
Of the technologies you listed, Canvas is by far the best supported, but Canvas isn't a 3D technology; it's a 2D canvas, and if you want to have 3D effects in it, you need to write them yourself, and they won't be hardware accelerated.
I guess the real answer to your question depends on how important the feature is for your site. If it's just eye candy, which users of unsupported browsers could live without, then by all means do it with some 3D CSS. But if you need to make it consistent in all current browsers, then do it with Canvas.
I'd tend to recommend not using WebGL for your case, because it sounds like it would be overkill for what you're doing.
3D CSS is probably the right answer, but use Canvas for now, until the rest of the browsers add support for 3D CSS.
I know this is 2 years old but I figure I'd post this here for future readers.
What to choose depends on what you need.
Do you need a simple 3d shape with no or little animations? Try if you can do it with CSS3, that's the easiest by far. For IE you can probably get a library that offers support.
Do you need some sweet 3d models with nice graphics and that can do all kinds of stuff? Go WebGL, you can't ask for more control AND performance for 3d in browsers.
Do you need 3d shapes that can do all kinds of stuff, but don't need textures and will work everywhere and won't require much performance? Go Canvas.
CSS3 is just for the eye-candy. You can make it rather easily, style it any way you want and is very easily maintainable. Once you want to do more than just eye-candy, put on your gloves because that is gonna reuire some work.
With 2d Canvas you can make 3d stuff. If you're new to it, it will be very annoying and complicated (to name one example; you need to know of matrices), You can pretty much do anything with 2d canvas that you can do with WebGL but some thing will be easier in WebGL (seriously, if going 2d Canvas, don't try to use textures, it's a nightmare). WebGL uses OpenGL which, in a nutshell, means it will always outperform 2d Canvas.
However, WebGL requires the user to have a compatible video card.
I really depends on what you are trying to do. How simple is simple?
3D CSS is far from usable. It's only just made it into firefox. It's buggy in both firefox and chrome. It's not working in FF9 beta on OSX. It's also got issues in Chrome up through at least 16. See http://greggman.com/downloads/examples/intersecting-elements-3d-css.html and compare Safari on OSX to pretty much any other browser.
WebGL - 2D 和 3D 的最佳选择,但由于它在浏览器和设备上的支持不够好,因此您必须在必要时提供画布或 DOM 的回退。
Canvas - 与 WebGL 相比不太适合 3D,但更适合兼容性、社区、工具等
DOM - 比大多数人想象的要快,如果使用得当,支持最高,但你不能太花哨的动画/游戏。
希望这有帮助
Everyone is probably tired of hearing 'it depends', but...it depends!
There's a little "war" going on as to whether it's better to use Canvas or HTML/CSS3, and namely because Canvas is slower than DOM on older machines/devices. Yeap, DOM is way faster in some cases, while canvas is faster on most modern browsers/devices.
WebGL - Best option for both 2D and 3D, but since it is not well enough supported across browsers and devices, you'll have to offer fallback to canvas or DOM whenever necessary.
Canvas - Less suitable for 3D comparing to WebGL, but more suitable for compatibility, community, tools etc
DOM - Faster than most think, if used right, highest support around, but you cannot go too fancy animation/gaming-wise.
发布评论
评论(4)
3D 之所以有如此多不同的选项,是因为整个事情仍然处于不断变化的状态——浏览器中的 3D 并不是一个最终的标准,并且在您列出的选项中,唯一一个当前适用于所有版本可用的浏览器是Canvas。
尤其是 IE 不太可能给您带来太多乐趣 - 正如您所说,目前 IE10 甚至还没有 3D 功能。话虽如此,SVG 很晚才被添加到 IE9 中,所以总有希望。但这不太可能的原因是微软已经明确表示只支持已正式批准为标准的功能。
在您列出的技术中,Canvas 是迄今为止支持最好的,但 Canvas 不是 3D 技术;它是一种 3D 技术。它是一个 2D 画布,如果你想在里面有 3D 效果,你需要自己编写它们,并且它们不会被硬件加速。
我想您问题的真正答案取决于该功能对您网站的重要性。如果它只是养眼,而不受支持的浏览器的用户可以接受,那么请务必使用一些 3D CSS 来实现。但如果您需要使其在所有当前浏览器中保持一致,请使用 Canvas 来实现。
我倾向于建议不要在您的情况下使用 WebGL,因为这听起来对于您正在做的事情来说有点过分了。
3D CSS 可能是正确的答案,但现在请使用 Canvas,直到其他浏览器添加对 3D CSS 的支持。
The reason there are so many different options for 3D is because the whole thing is still in a state of flux -- 3D in the browser isn't a finished standard, and of the options you listed, the only one that works in all currently available browsers is Canvas.
IE in particular is unlikely to give you much joy -- as you say, 3D isn't even slated for IE10 at this point. Having said that, SVG was added to IE9 quite late in the day, so there's always hope. But the reason it's unlikely is that Microsoft have made a point of only supporting features which have been formally ratified as standards.
Of the technologies you listed, Canvas is by far the best supported, but Canvas isn't a 3D technology; it's a 2D canvas, and if you want to have 3D effects in it, you need to write them yourself, and they won't be hardware accelerated.
I guess the real answer to your question depends on how important the feature is for your site. If it's just eye candy, which users of unsupported browsers could live without, then by all means do it with some 3D CSS. But if you need to make it consistent in all current browsers, then do it with Canvas.
I'd tend to recommend not using WebGL for your case, because it sounds like it would be overkill for what you're doing.
3D CSS is probably the right answer, but use Canvas for now, until the rest of the browsers add support for 3D CSS.
我知道这已经是两年前的事了,但我想我应该把它贴在这里供未来的读者参考。
选择什么取决于您的需要。
您是否需要一个没有动画或很少有动画的简单 3D 形状?尝试一下是否可以使用 CSS3 来实现,这是迄今为止最简单的。对于 IE,您可能可以获得提供支持的库。
您是否需要一些具有精美图形且可以做各种事情的精美 3D 模型?使用 WebGL,您无法在浏览器中要求更多的 3D 控制和性能。
您是否需要可以做各种事情的 3D 形状,但不需要纹理并且可以在任何地方工作并且不需要太多性能?去画布。
CSS3 只是为了美观。您可以相当轻松地制作它,以任何您想要的方式设计它,并且非常容易维护。一旦你想做的不仅仅是养眼,那就戴上手套,因为这需要一些工作。
使用 2d Canvas,您可以制作 3d 东西。如果你是新手,它会非常烦人和复杂(举一个例子;你需要了解矩阵),你几乎可以用 2d 画布做任何你可以用 WebGL 做的事情,但有些事情会更容易在 WebGL 中(说真的,如果使用 2d Canvas,不要尝试使用纹理,那是一场噩梦)。 WebGL 使用 OpenGL,简而言之,这意味着它将始终优于 2d Canvas。
然而,WebGL 要求用户拥有兼容的显卡。
I know this is 2 years old but I figure I'd post this here for future readers.
What to choose depends on what you need.
Do you need a simple 3d shape with no or little animations? Try if you can do it with CSS3, that's the easiest by far. For IE you can probably get a library that offers support.
Do you need some sweet 3d models with nice graphics and that can do all kinds of stuff? Go WebGL, you can't ask for more control AND performance for 3d in browsers.
Do you need 3d shapes that can do all kinds of stuff, but don't need textures and will work everywhere and won't require much performance? Go Canvas.
CSS3 is just for the eye-candy. You can make it rather easily, style it any way you want and is very easily maintainable. Once you want to do more than just eye-candy, put on your gloves because that is gonna reuire some work.
With 2d Canvas you can make 3d stuff. If you're new to it, it will be very annoying and complicated (to name one example; you need to know of matrices), You can pretty much do anything with 2d canvas that you can do with WebGL but some thing will be easier in WebGL (seriously, if going 2d Canvas, don't try to use textures, it's a nightmare). WebGL uses OpenGL which, in a nutshell, means it will always outperform 2d Canvas.
However, WebGL requires the user to have a compatible video card.
我真的取决于你想做什么。简单到什么程度才算简单呢?
3D CSS 还远未可用。它才刚刚进入 Firefox。它在 Firefox 和 Chrome 中都有问题。它在 OSX 上的 FF9 beta 中不起作用。 Chrome 中也存在至少 16 个问题。请参阅 http:// greggman.com/downloads/examples/intersecting-elements-3d-css.html 并将 OSX 上的 Safari 与几乎任何其他浏览器进行比较。
使用 Three.js (https://github.com/mrdoob/ Three.js/) (也许仍然)使用画布提供一些简单的 3D。
否则,如果你想要任何有趣的东西,请使用 WebGL 并选择一个库(三.js、SceneJS 等),
你必须做出选择。使用WebGL并放弃IE,使用Flash 11,使用Unity3D,使用Canvas并获得非常有限的3d,或者不做3d。
WebGL 已被各大网站使用。 CNN 现在使用 WebGL http://www.sinkdigital.com/en/work/ecosphere
I really depends on what you are trying to do. How simple is simple?
3D CSS is far from usable. It's only just made it into firefox. It's buggy in both firefox and chrome. It's not working in FF9 beta on OSX. It's also got issues in Chrome up through at least 16. See http://greggman.com/downloads/examples/intersecting-elements-3d-css.html and compare Safari on OSX to pretty much any other browser.
three.js (https://github.com/mrdoob/three.js/) used to (and maybe still does) provide some simple 3d using canvas.
Otherwise if you want anything interesting go WebGL and pick a library (three.js, SceneJS, etc..)
You've got to make a choice. Use WebGL and give up IE, Use Flash 11, Use Unity3D, use Canvas and get very limited 3d, or don't do 3d.
WebGL is already being used by major sites. CNN is now using WebGL http://www.stinkdigital.com/en/work/ecosphere
每个人可能都厌倦了听到“这取决于”,但是……这取决于!
关于使用 Canvas 还是 HTML/CSS3 哪个更好,存在一些“战争”,即因为 Canvas 在旧机器/设备上比 DOM 慢。是的,DOM 在某些情况下更快,而 canvas 在大多数现代浏览器/设备上更快。
WebGL - 2D 和 3D 的最佳选择,但由于它在浏览器和设备上的支持不够好,因此您必须在必要时提供画布或 DOM 的回退。
Canvas - 与 WebGL 相比不太适合 3D,但更适合兼容性、社区、工具等
DOM - 比大多数人想象的要快,如果使用得当,支持最高,但你不能太花哨的动画/游戏。
希望这有帮助
Everyone is probably tired of hearing 'it depends', but...it depends!
There's a little "war" going on as to whether it's better to use Canvas or HTML/CSS3, and namely because Canvas is slower than DOM on older machines/devices. Yeap, DOM is way faster in some cases, while canvas is faster on most modern browsers/devices.
WebGL - Best option for both 2D and 3D, but since it is not well enough supported across browsers and devices, you'll have to offer fallback to canvas or DOM whenever necessary.
Canvas - Less suitable for 3D comparing to WebGL, but more suitable for compatibility, community, tools etc
DOM - Faster than most think, if used right, highest support around, but you cannot go too fancy animation/gaming-wise.
Hope this helps