canvas vs. webGL vs. CSS 3d -> which to choose?

 

=================================

=================================

=================================

 

 

canvas vs. webGL vs. CSS 3d -> which to choose?

 

출처: http://stackoverflow.com/questions/7792459/canvas-vs-webgl-vs-css-3d-which-to-choose

 

canvas vs. webGL vs. CSS 3d -> which to choose?

For basic 3d web application i.e. a few cubes, rotation and translation in 3d space - which is better to choose? CSS 3d seems the easiest, but is not supported on IE9 or on the roadmap for IE10, and offers less control than the other options. Canvas & WebGL seems way more complicated, but I don't know if they are future proof. Why are there so many different techniques for 3D? which is better? which is future proof? css html5 canvas 3d webgl

3 Answers

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 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. Seehttp://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://cnn-ecosphere.com/

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.

 

 

=================================

=================================

=================================

 

 

출처: http://stackoverflow.com/questions/6582804/what-are-the-limitations-of-webgl-and-canvas-for-html5

If I wanted to make a simulated boids experiment in either of the technologies, what limitations would I be under. For example I have a boids simulation working in canvas with 100,000 particles but I am unable to work with a million as the browser crashes. This may be possible in WebGL with hardware acceleration. So what limitations do these 2 technologies have with complex scenes?

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

The limitations of the graphics card apply to WebGL as well of course, there is little a browser can do to compensate those. For example, I noticed that WebGL samples with the texture size 4000x4000 don't work with my (on-board) graphics chip. Animating a large number of objects will likely overburden low-end graphics cards as well.

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

To add to your answer, when working with Windows remember that the underlying implementations are done with Direct3D, so you probably have to find out what limitations your direct3d drivers have. For the javascript side, there's a myriad of benchmarks on the net, just google "javascript benchmark" (SunSpider, V8 and Kraken come up as first for me) 

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

No, WebGL implementations typically use the OpenGL API exposed by the graphics drivers, even on Windows. Which can have limitations and bugs depending on the graphics drivers of course

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Not so pal, check Chromium and Firefox code and you'll see a very different panorama. Besides, i have factual evidence of that, here on my office i have an Intel graphics machine that hasn't shader support under OpenGL, and my WebGL game runs smoothly with all the bloom and phong shaders on. edit:code.google.com/p/angleproject check it –

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Nope, see mxr.mozilla.org/mozilla-central/source/gfx/thebes/GLContext.cpp - that's mostly a straight-forward mapping of OpenGL functions to WebGL methods. It might be different for Chrome however (news.softpedia.com/news/…).

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

There's a flag for that called webgl.prefer-native-gl as i've read from that bug filing. But yes, the abstraction levels are catastrophic because of the myriad of platforms Firefox supports. Chromium is much cleaner though IMHO.

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

 

=================================

=================================

=================================

 

 

 

 

반응형

 

 

728x90

 

 

출처: http://html5dev.tistory.com/553

기사원문: http://codeflow.org/entries/2013/feb/02/why-you-should-use-webgl/

 

WebGL은 무엇인가?

WebGL은 웹용 OpenGL ES 2.0으로 JavaScript로 프로그래밍합니다.

 

OpenGL 없이 실행됩니까?

네, WebGL은 OpenGL없이 동작합니다. Angle 라이브러리 가 아래와 같은 기술을 사용하여 WebGL을 실행해 줍니다.

• Desktop OpenGL(Linux와 Mac OS X)
• Mobile OpenGL ES 2.0 (Android와 블랙베리)
• Direct3D 9 (윈도우)

WebGL을 지원하는 브라우저는 아래와  같습니다.

• Chrome
• Firefox
• Safari
• Opera
• Firefox for Android
• Chrome for Android
• Opera for Android
• 블랙베리 브라우저

WebGL을 지원하지 않는 브라우저는 아래와 같습니다.

• Internet Explorer
• Safari (윈도우용)
• Mobile Safari (iOS)
• Opera for iOS
• 안드로이드 브라우저

나의 환경에서 실행이 되는가?

실행되는지 안되는지는 그래픽 드라이버 버전, 운영체제 버전 등으로 정해집니다. 이에 대해한것은 화이트리스트와 블랙리스트를 통해 알 수 있습니다.

 

그리고 하드웨어 기반에서 실행되지 않은 WebGL이 실행되지 않는 환경도 몇 가지더 있습니다.

• Windows on ARM (Surface 등)
• Windows Phones
• Windows 8 UI
• iOS

이는 마이크로소프트와 애플이 WebGL을 지원하지 않는 것은 이런 환경에서 기본 브라우저 이외의 경우를 배제하기 때문입니다.

앱스토어에서 기본 브라우저 이외를 다운로드할 수 있기 때문에 이렇게 글을 쓰면 혼란스러울 수 있지만, 앱스토어에서 다운로드받은 브라우저는 거의 내부적으로 Internet Explorer 및 모바일 Safari엔진을 그대로 사용해야 되는 제약이 있습니다. 다른 브라우저 제조사는 자신의 엔진을 추가할 수 없기 때문에 WebGL을 지원할 수 없는것입니다.

 

어느정도 사람들이 WebGL을 사용해볼 수 있는가?

쉽게 단언하기는 어렵지만, 이에 대한 대답으로 WebGL Statistics Platform 정보를 소개합니다.

2013년 4월 9일자 정보입니다. (원문은 2013년 2월 2일임)

 

WebGL 모든 환경에서

 

 

 

 

WebGL 데스크톱 환경에서

 

 

 

 

WebGL 모바일 환경에서

 

 

 

 

여기서 중요한 것은 모바일에서 WebGL 지원이 과거 4%에서 6%가 증가했다는 사실입니다. 이는 상당히 큰 변화로 대부분이 Chrome 베타(안드로이드용)이 WebGL 일부를 지원하기 때문입니다.

 

간단한 3D API

만약 독자가 3D 앱을 만든다면, 코드를 작성할 때, 설정방법과 모형을 작성하는 방법을 알아둬야 합니다. 그러나, WebGL은 그럴 필요가 없습니다.

 

Canvas 얻기

 

var canvas = document.createElement('canvas');  document.body.appendChild(canvas);

문맥 얻기

 

var gl = canvas.getContext('experimental-webgl');

 

이렇게 하면 끝납니다. 복잡하게 makefile이나 GLX/GLU등을 포함시킬 필요가 없습니다. 다만, 브라우저에서만 동작합니다. 이에 대한 API를 사용할 준비가 되어 있습니다.

 

정말된 테스트가 잘된 3D API

하드웨어 기반 임베디드 프로그래밍을 할 경우에는 항상 많은 문제를 가지고 있습니다. 그 중 하나는 다양하게 존재하는 그래픽 드라이버와의 비호환성입니다.

 

이런 모든 문제를 해결하기 위해 WebGL은 종합적인 적합성 테스트를 거쳐 몇 천번의 실행으로 동작하지 않는 부분이 있습니다. 누구라도 테스트할 수 있기 때문에 테스트를 통과하지 못한 문제점을 찾아서 브라우저 제조사로 해당 정보를 제공해도 좋습니다. 필자가 알기로는 이런 테스트는 WebGL이 유일합니다. 이는 WebGL만을 향상시키는 것이 아니라, WebGL이 Nvidia, AMD, Apple등의 그래픽 드라이버를 이용하기 위해 결과적으로 OpenGL, OpenGL ES, Direct3D도 향상시키는데 도움이 됩니다.

 

참고 문서가 제일많은 3D API
다른 3D API나 프레임웍과 다르게 WebGL은 상다잏 개방적인 표준입니다.

•Specification, tests and extensions on github
•performance regressions on github
•quick reference card from Khronos
•Khronos topic page
•Specification
•Public Mailing list
•extension registry

확장 기능

WebGL은 OpenGL로부터 확장 매키니즘을 상속받고 있기 때문에 웹의 3D기술로써는 유일하고 새로운 버전 릴리지를 기다리지 않고 기능을 추가할 수 있습니다. 또한 이전 버전의 API도 상위버전의 기능을 추가할 수 있게 되어 있습니다.

 현재 아래와 같은 기능이 포함되어 있습니다.

•Single and half floating point textures
•Standard derivatives functions in shaders
•Vertex Array Objects (VAOs)
•S3TC Compressed textures
•Depth Textures
•Anisotropic texture filtering

그외 확장기능으로 제안되고 있는 것은 Multi-Render Targets 및 instanced drawing초안이 나오고 최종적으로 포함될 시기를 기다리고 있습니다.

 

WebGL을 사용하지 않아도 될까?

WebGL의 존재감은 브라우저, 자바스크립트, 그래픽 드래이버를 잘 하는 것에 관련됩니다.

• 개발자는 자바스크립트의 속도를 높일 것을 요구하였습니다. 이에 브라우저 제조사는 자바스크립트 처리성능을 향상시키기고 있습니다.
• WebGL을 지원하여 브라우저의 가비지콜렉션이 약간 향상되었습니다.
• 웹기술을 위해 그래픽 하드웨어 제조사에 대해서 많은 사람들이 보다 좋은 그래픽 드라이버를 만들 수 있도록 푸쉬하였습니다.

클릭할 수 있는 링크가 사용자를 늘린다!

웹 이외의 기술은 앱을 사용할 수 있도록 하기 위해 얼마든지 순서를 반복하게 됩니다. 에로 데스크톱 환경이라면 다음과 같은 순서가 됩니다.

• 다운로드하기 위한 링크 발견
• 다운로드하여 저장함
• 다운로드한 폴더를 염
• 인스톨러 클릭
• 몇번의 [예]버튼이나 [다음]버튼을 클릭함
• 잠시 기다림
• 인스톨러 닫음
• 설치한 앱 찾음
• 앱 실행
• 자동 업데이트 완료를 기다림
• 이제 앱을 사용한다!

앱스토어에서는 앱이라면 좀더 단순한 순서로 사용할 수 있지만, WebGL 앱은 어떻게 될까요?

• 실행하기 위한 링크 찾음
• 링크 클릭
• 이제 앱을 즐김

근데 이게 돈벌이가 될까?

이 기사를 집필하는 시점에서는 WebGL Job board에 50개정도의 일자리가 올라와 있었습니다. (한국에서는 아직 보기 힘듬 ㅠㅠ) 또한 과거 2년동안 WebGL로 어느정도 수입을 얻었습니다. 이것이 웹은 돈이 되는 것인가?라는 질문과 같은 것으로 물론 됩니다.

 

다른 기술과 비교

다른 기술과 비교해 봅시다.

 

Unity 3D

이는 API라고 보기보다는 엔진이라고 보는게 좋습니다. 그리고 많은 사람들은 Unity3D 웹플레이어를 설치하고 있지 않고 모바일환경에서는 실행도 안됩니다. 웹이 아닌 환경에서 사용하려면 추천하지만, 필자의 경우 웹을 좋아하기 때문에 사용할 경우가 없습니다.

일단 Unity3D를 웹으로 사용할 수 있습니다.

- Google Chrome의 NaCL(Native Client)에서는 Unity3D를 컴파일해서 이용할수 있지만, 프레임웍이나 라이브러리등 여러가지가 웹과 조합이 제대로 이루어지기는 어렵습니다.  HTML/CSS/JS와 조합할 수 있는 것에 의미가 있기 때문에 그외 여러가지기술과 조합도 가능합니다.

- Unity3D는 모바일용으로 컴파일하여 앱스토어에서 배포할 수 있습니다. 그러나, 이는 클릭하지마자 사용할 수 있는 웹페이지와는 완전 별개입니다.

 

Flash Stage 3D

Flash에서는 비표준 API를 사용합니다. 그리고 해당 API에 대한 문서가 부족해 보입니다. 또한, Shader기술은 실질적으로 어셈블리 언어입니다. WebGL의 Shader는 C언어에 가까운 언어로 프로그래밍할 수 있습니다. Flash는 모바일 환경에서는 실행되지 않습니다. 웹개발자 관점에서는 Flash가 다른 웹 기술과 조합할 수 없는 것이 아쉽고 Flash는 컴파일이 끝난 Shader가 필요하게 됩니다. 온라인에서는 Shader를 컴파일할 수 없습니다.

Flash자체는 모바일에서는 실행되지 않지만, 네이티브 앱으로써 컴파일하여 앱스토어를 통해 배포할 수 있습니다. 다만, Unity3D와 비슷하게 클릭하지마자 사용할 수 있는 웹페이지와는 다릅니다.

 

Silverlight 3D

마이크로소프트는 실버라이트에 크게 집중하지 않고 있어 3D 기능도 크게 집중하지 않는것 같습니다.그리고 이를 개발하기 위해서는 Visual Studio와 .NET 프레임웍이 필요합니다.

그다지 유용하지 않습니다.

 

Direct3D

웹에서는 실행되지 않고 모바일 환경에서도 실행되지 않습니다. 표준화된 API도 아닙니다.

 

OpenGL

심각한 그래픽드라이버 문제가 있습니다. 웹에서 실행되지 않고 모바일에서도 실행되지 않습니다.

 

OpenGL ES

데스크톱 환경에서 실행되지 않지만 모바일 환경에서는 실행됩니다. 단 웹에서는 실행되지 않습니다.

 

앞으로의 미래...

WebGL이나 HTML5는 아직 완벽하다고 말하기 어렵습니다. 복잡한 기술이고 아직 많은 과제가 있습니다. 그러나, 필자는 WebGL이 최고의 3D기술이라고 믿고 있습니다. 웹표준인 것은 하나의 코드에 의해 여러 플랫폼에서 실행되는 것을 의미합니다. 필자는 지금까지 WebGL로 많이 사용하고 있고 여러분들도 WebGL을 즐기실 수 있다면 다행입니다.

 

 

=================================

=================================

=================================