สถานะปัจจุบันของไลบรารี JavaScript และเฟรมเวิร์กของผ้าใบ HTML เป็นอย่างไร [ปิด]

ฉันกำลังตรวจสอบตัวเลือกสำหรับการทำงานกับแคนวาสในแอปพลิเคชัน HTML 5 ใหม่และสงสัยว่าสถานะปัจจุบันของไลบรารี JavaScript และเฟรมเวิร์กของผ้าใบ HTML เป็นอย่างไร

โดยเฉพาะอย่างยิ่งมีเฟรมเวิร์กที่รองรับประเภทของสิ่งที่จำเป็นสำหรับการพัฒนาเกมเช่นแอนิเมชั่นที่ซับซ้อนการจัดการกราฟฉากการจัดการเหตุการณ์และการโต้ตอบของผู้ใช้หรือไม่?

นอกจากนี้ยังยินดีที่จะพิจารณาผลิตภัณฑ์ทั้งเชิงพาณิชย์และโอเพ่นซอร์ส

ฉันทำงานกับfabric.jsซึ่งเป็นไลบรารีผืนผ้าใบเพื่อช่วยในเรื่องนั้น - จัดการกับวัตถุบนผืนผ้าใบโดยจัดการเหตุการณ์และการโต้ตอบของผู้ใช้ มันยังไม่ออก แต่จะดูที่ง่ายสาธิตการแสดงตัวอย่าง

นอกจากนี้คุณยังสามารถดูการใช้งานจริงได้ในตัวแก้ไขการออกแบบนี้ซึ่งเดิมสร้างขึ้นสำหรับ

แก้ไข: ตอนนี้โครงการพร้อมใช้งานบน github แล้ว (โอเพ่นซอร์สภายใต้ใบอนุญาต MIT)

ในการเริ่มต้นโปรดดู:

• การสาธิต (เรียบง่ายและซับซ้อนพร้อมรหัสเพื่อแสดงว่าเสร็จแล้ว)
• การนำเสนอ Fabric.js ที่ FalsyValues (และอีกรายการที่ BK.js )
• Wiki บน github (รวมถึงFAQ )
• เอกสารประกอบ
• Google Group (ถามคำถามที่นั่น)
• Fabric.js บน twitter (หรือคำถามสั้น ๆ ผ่าน twitter)
• บทนำสู่ Fabric.js: ตอนที่ 1 (บทความเกี่ยวกับ ScriptJunkie)
• บทนำสู่ Fabric.js: ตอนที่ 2 (บทความเกี่ยวกับ ScriptJunkie)

Fabric เปรียบเทียบกับไลบรารีผ้าใบ Javascript อื่น ๆ อย่างไร นี่คือตารางเปรียบเทียบ

ฉันแปลกใจที่ไม่มีใครพูดถึงWebGLและเฟรมเวิร์กที่สร้างขึ้น ฉันคิดว่ามันอยู่ในรายการที่ล้ำสมัยสำหรับกราฟิก 3D GPU ที่เร่งความเร็วและภาพเคลื่อนไหวที่ซับซ้อนบนผ้าใบ HTML / จาวาสคริปต์

WebGL เป็นมาตรฐานเว็บข้ามแพลตฟอร์มที่ไม่มีค่าลิขสิทธิ์สำหรับ API กราฟิก 3 มิติระดับต่ำที่ใช้ OpenGL ES 2.0 ซึ่งเปิดเผยผ่านองค์ประกอบผ้าใบ HTML5 เป็นอินเทอร์เฟซ Document Object Model ...

WebGL นำ 3D แบบไม่ต้องใช้ปลั๊กอินมาสู่เว็บโดยนำไปใช้ในเบราว์เซอร์ได้ทันที ผู้จำหน่ายเบราว์เซอร์รายใหญ่ Apple (Safari), Google (Chrome), Mozilla (Firefox) และ Opera (Opera) เป็นสมาชิกของ WebGL Working Group

WebGL นั้นแข็งแกร่งมากในการรองรับกราฟิกที่เร่งด้วย GPU ตรวจสอบเหล่านี้ GLSL Shader สาธิต :-) และดูChemDoodleเป็นตัวอย่างการโต้ตอบกับผู้ใช้

ฉันทำงานกับแอปโดยใช้กรอบO3Dของ Google ซึ่งจัดการกราฟฉากและใช้ WebGL สำหรับการแสดงผล (เคยใช้ปลั๊กอินของตัวเอง) O3D เป็นงานในความคืบหน้าและเอกสารที่ไม่สมบูรณ์ถึงวัน แต่ก็อยู่ภายใต้การพัฒนางานและมีบางสาธิตดีออกมี 3D Poolอาจอยู่ในซอยของคุณมากที่สุด นักพัฒนาของ Google ตอบคำถามในกลุ่มสนทนาได้ดีมาก

มีกรอบงานอื่น ๆ อีกมากมายที่สร้างขึ้นบน WebGL ดูที่นี่ . คนที่กล่าวถึงการพัฒนาเกมและกราฟฉาก ได้แก่ Copperlicht, SceneJS, X3DOM

WebGL ทำงานในการพัฒนาล่าสุดของเบราว์เซอร์หลายตัวแต่ไม่ใช่ IE ฉันใช้ Firefox ("Minefield") และ Chromium ได้ผลดี คุณจะต้องใช้อย่างใดอย่างหนึ่งในการสาธิตข้างต้น

อย่างไรก็ตามหากความต้องการของคุณคือต้องไม่มีการอ้างอิงเกินกว่า HTML 5 canvas / js WebGL อาจไม่ใช่ตัวเลือกที่เหมาะสม มันดูไม่เหมือน IE จะสนับสนุนมันในเร็ว ๆ นี้

ปรับปรุง:หลังจากวางมากขึ้นของความต้านทาน, MS ตัดสินใจที่จะสนับสนุน WebGL ใน IE 11

three.jsโดย mr. doob เป็นเอนจิ้น 3 มิติที่ยอดเยี่ยมสำหรับจาวาสคริปต์ที่มีกราฟฉาก (ทั้งซอฟต์แวร์และเวอร์ชันเร่งความเร็วของ WebGL / ฮาร์ดแวร์) การแรเงาอนุภาคภาพเคลื่อนไหวแบบสกิน (ฉันคิดว่า) และเอฟเฟกต์แสง ลองดูสิเขาเป็นเพื่อนที่มีความสามารถพิเศษ

ฉันควรเพิ่มว่าคุณจะต้องใช้ Google Chrome รุ่นใหม่ล่าสุดหรือเทียบเท่าเพื่อดูการสาธิตส่วนใหญ่หนึ่งในรายการโปรดของฉันคือ: 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

ลองดูที่กรอบการประมวลผล js นอกจากนี้ mootools เวอร์ชัน 2.0 ที่กำลังจะมาถึงยังมีงานศิลปะที่สามารถทำงานร่วมกับแคนวาสได้

ราฟาเอลดูเหมือนห้องสมุดผ้าใบที่ดีทีเดียว เป็นแบบ SVG (หรือใช้ VML ใน Internet Explorer) และรองรับเหตุการณ์การป้อนข้อมูลของผู้ใช้จำนวนมาก มันค่อนข้างเล็ก (60kb gzipped) ดังนั้นการพึ่งพาไม่มากเกินไป
ดูเหมือนว่าจะมีทวีนเนอร์ที่ดีเช่นกัน: http://raphaeljs.com/reference.html#animate (ดูตัวอย่างที่นี่และที่นี่ )

ตัวอย่างสิ่งที่สามารถทำได้ดูการสาธิตเล็ก ๆ น้อย ๆ ที่ชาญฉลาดนี้

หวังว่านี่จะช่วยได้!

ฉันพบว่าห้องสมุดสองแห่งมีความสามารถในการแข่งขันสูงและดีกว่ามาก

Kinetic.js และ Easel.js ทั้งสองมีการจัดการเหตุการณ์ที่ดีมากการจัดกลุ่มและนามธรรมรูปร่างทั่วไป คุณจะพบกับความรักมากมายในทั้งสองสิ่งนี้ ขาตั้งดูเหมือนจะเน้นภาพและการกรองมากกว่า

Handlins เหตุการณ์ของ Fabric นั้นแย่กว่าอย่างใดอย่างหนึ่งโดยทั่วไปแล้วจะถือว่าผืนผ้าใบทั้งผืนเป็นตัวจัดการเหตุการณ์ขนาดใหญ่และจะบอกคุณเมื่อมีการคลิก "Something" ไม่แนบเหตุการณ์กับรูปร่างแต่ละรูปร่างหรือกลุ่มของรูปร่าง

มีความเป็นห้องสมุดที่น่าสนใจที่มีวัตถุประสงค์เพื่อปรับปรุงบางส่วนของปัจจัยพื้นฐานของการทำงานกับผืนผ้าใบ API เรียกว่าcanto.jsโดยเดวิดฟลานาแกน, ผู้เขียนJavascript: คู่มือการแตกหัก

นอกจากนี้หนุ่ม แต่ไม่ได้เลวร้ายกรอบ Javascript และมัน (ภาพเคลื่อนไหวที่ซับซ้อนการจัดการกราฟฉาก, การจัดการเหตุการณ์และการมีปฏิสัมพันธ์ของผู้ใช้) ทั้งหมดเกี่ยวกับมัน - jCanvaScript อาจยกเว้น "การจัดการกราฟฉาก"

การทำงานร่วมกับ bHive เพื่อสร้างกราฟและส่วนหัวของไซต์ที่เคลื่อนไหวดูเหมือนจะน่าประทับใจและมีประสิทธิภาพซึ่งไม่เหมือนกับที่อื่น ๆ กำลังได้รับการพัฒนา Adobe Edge ยังคุ้มค่ากับการมองข้ามแม้ว่าจะไม่ใช่ Canvas ก็ตาม

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 เป็นวิธีที่ยอดเยี่ยม มี API กราฟิกแบบเวกเตอร์ข้ามแพลตฟอร์ม (SVG, VML, Canvas, Silverlight) ขนาดกะทัดรัดที่มีประสิทธิภาพมาก คุณสามารถค้นหาได้ใน dojo.gfx และ dojox.gfx

เราได้ใช้สิ่งนี้เพื่อสร้างครูสอนพิเศษฟิสิกส์เชิงโต้ตอบที่ให้นักเรียนวาดเวกเตอร์จุดไข่ปลาและอื่น ๆ (แม้กระทั่งต่อท้ายรูปภาพ) และทำการเปลี่ยนแปลงทุกประเภท คุณสามารถดูสิ่งที่เราทำได้ที่http://gideon.eas.asu.edu/web-UI/login.html -เพียงลงชื่อเข้าใช้ด้วยชื่อผู้ใช้ใดก็ได้

ฉันได้ดู fabric.js และ dojox.drawing ทำหลายอย่างเหมือนกัน หากคุณดูการทดสอบในชุดเครื่องมือ (เมื่อคุณได้รับ dojox / การวาดภาพ / การทดสอบ / แล้ว) คุณจะพบตัวอย่างของทุกอย่างตั้งแต่กราฟิกแบบเวกเตอร์ไปจนถึงภาพไปจนถึงเงาที่สร้างโดยโปรแกรม

ฉันประทับใจอากิฮาบาระในฐานะเกมเอนจิน มีเอกสารที่ยอดเยี่ยมในรูปแบบของบทเรียนและ API ฉันเคยเห็นในกระดานข้อความบางแห่งพูดถึงการเปิดตัว akihabara 2 น่าเสียดายที่การพูดคุยทั้งหมดนั้นมีอายุประมาณหนึ่งปีขึ้นไป ฉันหวังเป็นอย่างยิ่งว่าเครื่องยนต์นี้ยังคงได้รับการพัฒนา

ฉันเพิ่งเปิดตัวการทำซ้ำครั้งแรกของไลบรารีการวาดและการทวีตใหม่ที่มุ่งเน้นไปที่ผู้คนที่มีพื้นหลังการพัฒนา AS3 / Flash แม้ว่า lib ของฉันยังไม่รองรับเส้นทางการวาดหรือกราฟที่ซับซ้อนต่อคำพูดฉันหวังว่ามันจะช่วยให้ผู้คนวาดและเคลื่อนไหวแบบดั้งเดิมได้อย่างรวดเร็วด้วยวิธีที่คุ้นเคย

ข้อเสนอแนะและความคิดเห็นยินดีต้อนรับ http://www.quietless.com/kitchen/introducing-js3/