HTML 캔버스 JavaScript 라이브러리 및 프레임 워크의 최신 기술은 무엇입니까? [닫은]

현재 새 HTML 5 응용 프로그램에서 캔버스 작업을위한 옵션을 조사하고 있으며 HTML 캔버스 JavaScript 라이브러리 및 프레임 워크의 현재 기술 상태가 무엇인지 궁금합니다.

특히 복잡한 애니메이션, 장면 그래프 관리, 이벤트 처리 및 사용자 상호 작용과 같은 게임 개발에 필요한 종류를 지원하는 프레임 워크가 있습니까?

또한 상업용 및 오픈 소스 제품을 모두 고려합니다.

저는 fabric.js ( 정확히이를 지원하는 캔버스 라이브러리)에서 이벤트와 사용자 상호 작용을 처리하여 캔버스에서 개체를 조작하고 있습니다. 아직 출시되지는 않았지만 간단한 미리보기 데모를 살펴보세요 .

원래 제작 된 이 디자인 편집기 에서 실제로 작동하는 모습을 볼 수도 있습니다 .

편집 : 이 프로젝트는 이제 github에서 사용할 수 있습니다 (MIT 라이선스에 따라 오픈 소스).

시작하려면 다음을 확인하세요.

• 데모 (간단하고 복잡하며, 수행 방법을 보여주는 코드 포함)
• FalsyValues의 Fabric.js 프레젠테이션 (및 BK.js의 다른 프레젠테이션 )
• github의 Wiki ( FAQ 포함 )
• 선적 서류 비치
• Google 그룹 (여기에서 질문)
• Twitter의 Fabric.js (또는 Twitter를 통한 간단한 질문)
• Fabric.js 소개 : 1 부 (ScriptJunkie 기사)
• Fabric.js 소개 : 2 부 (ScriptJunkie 기사)

Fabric은 다른 Javascript 캔버스 라이브러리와 어떻게 비교됩니까? 다음은 비교표 입니다.

아무도 WebGL 을 언급하지 않았고 그 위에 구축 된 프레임 워크에 놀랐 습니다. 3D GPU 가속 그래픽 및 HTML 캔버스 / 자바 스크립트의 복잡한 애니메이션에 대한 최신 목록에있는 것으로 간주합니다.

WebGL은 HTML5 Canvas 요소를 통해 Document Object Model 인터페이스로 노출되는 OpenGL ES 2.0 기반의 저수준 3D 그래픽 API를위한 크로스 플랫폼, 로열티가없는 웹 표준입니다. ...

WebGL은 브라우저에 바로 구현 된 플러그인없는 3D를 웹에 제공합니다. 주요 브라우저 공급 업체 인 Apple (Safari), Google (Chrome), Mozilla (Firefox) 및 Opera (Opera)는 WebGL 워킹 그룹의 구성원입니다.

WebGL은 GPU 가속 그래픽에 대한 지원이 매우 견고합니다. 이 GLSL 셰이더 데모를 확인하십시오 . :-) 그리고 ChemDoodle 을 사용자 상호 작용의 예로 참조하십시오 .

저는 장면 그래프를 관리하고 렌더링을 위해 WebGL을 사용하는 Google의 O3D 프레임 워크를 사용하여 앱을 작업 해 왔습니다 (자체 플러그인을 사용 했었습니다 ). O3D는 진행중인 작업이며 문서가 완전히 최신 상태는 아니지만 활발하게 개발 중이며 좋은 데모가 있습니다 . 3D 풀 은 가장 큰 골목 일 수 있습니다. Google 개발자는 토론 그룹의 질문에 매우 반응합니다.

WebGL에 구축 된 다른 프레임 워크가 많이 있습니다. 여기를 참조하십시오 . 게임 개발 및 장면 그래프를 언급하는 것에는 Copperlicht, SceneJS, X3DOM이 포함됩니다.

WebGL은 IE가 아닌 여러 브라우저 의 최근 개발 빌드에서 실행됩니다 . 저는 Firefox ( "Minefield")와 Chromium을 사용하여 좋은 결과를 얻었습니다. 위의 데모를 실행하려면이 중 하나가 필요합니다.

그러나 요구 사항이 HTML 5 canvas / js 이상의 종속성이 없어야한다는 것이라면 WebGL이 올바른 선택이 아닐 수 있습니다. 그것은 그것을 지원하는 IE처럼 보이지 않는 곧.

업데이트 : 많은 저항을 한 후 MS 는 IE 11에서 WebGL을 지원하기로 결정했습니다 .

three.js , by mr. doob 은 장면 그래프 (소프트웨어 및 WebGL / 하드웨어 가속 버전 모두), 음영, 입자, 스킨 애니메이션 (제 생각에) 및 조명 효과를 포함하는 환상적인 자바 스크립트 용 3D 엔진입니다. 확인해보세요. 그는 뛰어난 재능을 가진 친구입니다.

대부분의 데모를 보려면 최신 Google 크롬 또는 이와 동등한 기능이 필요하다는 점을 추가해야합니다. 제가 가장 좋아하는 것 중 하나는 다음과 같습니다. http://mrdoob.github.com/three.js/examples/webgl_materials_cars.html

KineticJS는 고성능을 위해 캔버스에 개별 "레이어"를 만들고 애니메이션하는 것을 자랑하는 최신 라이브러리입니다.

http://www.kineticjs.com/

CAKE.js는 더 이상 유지되지 않지만 상당히 강력한 프레임 워크입니다-http: //code.google.com/p/cakejs/

데모-http: //glimr.rubyforge.org/cake/canvas.html , http://glimr.rubyforge.org/cake/missile_fleet.html

processingjs 프레임 워크를 살펴보세요 . 또한 다가오는 mootools 버전 2.0에는 캔버스와 함께 작동 하는 예술 프로젝트 가 있습니다.

Raphael 은 꽤 좋은 캔버스 라이브러리처럼 보입니다. SVG 기반 (또는 Internet Explorer의 VML 기반)이므로 많은 사용자 입력 이벤트를 지원합니다. 상당히 작기 때문에 (60kb gzip으로 압축 됨) 종속성이 너무 크지 않습니다.
멋진 트위너도있는 것 같습니다 : http://raphaeljs.com/reference.html#animate ( 여기 와 여기 에서 예제를 참조 하세요 ).

그것이 무엇을 할 수 있는지에 대한 예를 들어, 이 영리한 작은 데모를보십시오 .

도움이 되었기를 바랍니다!

두 개의 라이브러리가 경쟁이 치열하고 패브릭보다 훨씬 우수하다는 것을 알게되었습니다.

Kinetic.js와 easel.js는 모두 매우 우수한 이벤트 처리, 그룹화 및 일반적인 모양 추상화를 가지고 있습니다. 두 가지 모두에서 많은 사랑을받을 수 있습니다. 이젤은 이미지 지향적이고 필터링이 더 많은 것 같습니다.

Fabric의 이벤트 핸드 린은 이들 중 하나보다 훨씬 나쁩니다. 기본적으로 전체 캔버스를 하나의 큰 이벤트 래퍼로 취급하고 "Something"이 클릭되면 알려줍니다. 개별 셰이프 또는 셰이프 그룹에 이벤트를 첨부하지 않습니다.

Javascript : The Definitive Guide의 저자 인 David Flanagan의 canto.js 라는 캔버스 API 작업의 기본 사항 중 일부를 개선하는 것을 목표로 하는 흥미로운 라이브러리 가 있습니다.

또한 젊지 만 나쁘지는 않은 자바 스크립트 프레임 워크와 그것 (복잡한 애니메이션, 장면 그래프 관리, 이벤트 및 사용자 상호 작용 처리)에 관한 모든 것 -jCanvaScript . '장면 그래프 관리'를 제외하고있을 수 있습니다.

bHive를 사용하여 그래프를 생성하고 사이트 헤더를 이동하면서 다른 제품과는 달리 인상적이고 강력 해 보입니다. Adobe Edge는 캔버스는 아니지만 살펴볼 가치가 있습니다.

http://www.bhivecanvas.com

과

http://labs.adobe.com/technologies/edge/

Aves Engine은 정말 훌륭합니다 : http://www.dextrose.com/en/projects/aves-engine

또한 아키하바라는 좋은 것 같습니다 : http://www.kesiev.com/akihabara/

Javascript를 사용하려는 경우 Dojo가 좋은 방법입니다. 매우 강력한 소형 크로스 플랫폼 (SVG, VML, Canvas, Silverlight) 벡터 그래픽 API가 있습니다. dojo.gfx 및 dojox.gfx에서 찾을 수 있습니다.

우리는 이것을 사용하여 학생들이 벡터, 타원 등 (심지어 이미지 추가)을 그리고 모든 종류의 변형을 수행 할 수있는 대화 형 물리학 교사를 구축했습니다. http://gideon.eas.asu.edu/web-UI/login.html 에서 우리가 한 일을 볼 수 있습니다. . 사용자 이름으로 로그인하면됩니다.

fabric.js를 살펴 보았고 dojox.drawing은 많은 동일한 작업을 수행합니다. 툴킷의 테스트를 살펴보면 (dojox / drawing / tests /를 얻은 후에) 벡터 그래픽에서 이미지, 프로그래밍 방식으로 생성 된 그림자에 이르기까지 모든 것의 예를 찾을 수 있습니다.

게임 엔진으로서 아키하바라에 감명 받았습니다. 튜토리얼과 API의 형태로 환상적인 문서가 있습니다. 아키하바라 2 릴리스에 대한 일부 메시지 보드에서 이야기하는 것을 보았습니다. 불행히도 그 모든 이야기는 1 년 이상 된 것입니다. 이 엔진이 아직 개발되고 있기를 정말로 바랍니다.

저는 AS3 / Flash 개발 배경을 가진 사람들을 대상으로하는 새로운 드로잉 및 트위닝 라이브러리의 첫 번째 반복을 출시했습니다. 내 라이브러리는 아직 복잡한 드로잉 경로 또는 그래프를 지원하지 않지만 사람들이 익숙한 방식으로 기본 프리미티브를 빠르게 그리고 애니메이션화하는 데 도움이되기를 바랍니다.

피드백과 의견을 환영합니다. http://www.quietless.com/kitchen/introducing-js3/