এইচটিএমএল ক্যানভাস জাভাস্ক্রিপ্ট লাইব্রেরি এবং ফ্রেমওয়ার্কগুলিতে শিল্পের বর্তমান অবস্থা কী? [বন্ধ]


107

আমি বর্তমানে একটি নতুন এইচটিএমএল 5 অ্যাপ্লিকেশনে ক্যানভাসের সাথে কাজ করার বিকল্পগুলি অনুসন্ধান করছি এবং ভাবছিলাম যে এইচটিএমএল ক্যানভাস জাভাস্ক্রিপ্ট লাইব্রেরি এবং ফ্রেমওয়ার্কগুলিতে শিল্পের বর্তমান অবস্থা কী?

বিশেষত, এমন ফ্রেমওয়ার্কগুলি রয়েছে যা গেম বিকাশের জন্য প্রয়োজনীয় ধরণের জিনিসগুলিকে সমর্থন করে - জটিল অ্যানিমেশন, দৃশ্যের গ্রাফ পরিচালনা, ইভেন্ট পরিচালনা এবং ব্যবহারকারীর ইন্টারঅ্যাকশন?

বাণিজ্যিক এবং ওপেন সোর্স পণ্য উভয় বিবেচনা করতে ইচ্ছুক।


আপনি যদি দৃশ্যের গ্রাফ এবং হ্যান্ডলিং ইভেন্টগুলি ব্যবহার করছেন তবে এসভিজি আপনার প্রয়োজনের সাথে আরও উপযুক্ত নয়?
জোয়েরি সেব্রেচটস

ঠিক আছে, আমি জিজ্ঞাসা করার কারণ এটি। ক্যানভাসের স্পষ্টতই গতিময় এটিম রয়েছে, তাই কী কী সম্ভাব্য এবং কী কী তা নির্ধারণের চেষ্টা করছেন। জটিল অ্যানিমেশনগুলির ক্ষেত্রে এসভিজি বিশেষভাবে স্কেল করে না।
টবি হেড

আপনি কি বিশেষত 3 ডি গ্রাফিক্স, বা 2 ডি, বা একটির সন্ধান করছেন?
LarsH

এখানে আর একটি সুন্দর ডেমো: kevs3d.co.uk/dev/asteroids । নিশ্চিত নয় যে তাদের তৈরি করা লাইব্রেরি সকলের ব্যবহারের জন্য উপলব্ধ কিনা। যদিও ক্যানভাসের একটি দুর্দান্ত উদাহরণ।
কাস্ট্রোহেঞ্জ

উত্তর:


96

Fabric.js স্ক্রিনশট

ইভেন্ট এবং ব্যবহারকারীর ইন্টারঅ্যাকশন পরিচালনা করে ক্যানভাসে অবজেক্টগুলি ম্যানিপুলেট করে - আমি ঠিক এটির সাথে সহায়তা করার জন্য একটি ক্যানভাস লাইব্রেরিতে ফ্যাব্রিক.জেজে কাজ করছি । এটি এখনও প্রকাশ করা হয়নি, তবে একটি সাধারণ পূর্বরূপ ডেমো দেখুন

আপনি এটি এই নকশা সম্পাদকটিতে ক্রিয়াকলাপে দেখতেও পারেন , এটি মূলত এর জন্য তৈরি হয়েছিল।

সম্পাদনা করুন: প্রকল্পটি এখন গিথুবে উপলভ্য (এমআইটি লাইসেন্সের অধীনে খোলামেলা)

শুরু করতে, পরীক্ষা করে দেখুন:

অন্যান্য জাভাস্ক্রিপ্ট ক্যানভাস লাইব্রেরির সাথে ফ্যাব্রিক কীভাবে তুলনা করতে পারে? এখানে একটি তুলনা টেবিল


এটি IE এ কী করে? ExplorerCanvas?
সাশা চেদিগোভ

14
এটি একটি অভূতপূর্ব ডেমো, অত্যন্ত চিত্তাকর্ষক প্রকল্প
আনমাউন্ট করা হয়েছে

3
@ মিউজিকফ্রেইক হ্যাঁ, এক্সপ্লোরারক্যানভাস। বিটিডব্লিউ, এটি আইটি 9 (4 র্থ প্রাকদর্শন) এর নেটিভ ক্যানভাস সমর্থন ব্যবহার করে সমস্ত 900 ডলার পরীক্ষা পাস করে।

4
ফ্যাব্রিক.জেসের জন্য কোথাও কোনও প্রকল্প পৃষ্ঠা রয়েছে? আমি এটি সম্পর্কে আরও জানতে আগ্রহী।
আর্ন রুমান-কুরিক

ওহ, ঠিক আমার যা দরকার ... আমি আসলে হতাশ হয়েছি এই লাইব্রেরিটির কাজগুলি পরিচালনা করতে এতটা অসুবিধা হয়েছিল যে কোনও নির্বিঘ্নে পরিচালনা করে!
শৌভিক

17

আমি আশ্চর্য হয়েছি যে কেউ ওয়েবজিএল , এবং এর উপর নির্মিত ফ্রেমওয়ার্কগুলি উল্লেখ করেনি । আমি এটিকে 3 ডি জিপিইউ-এক্সিলারেটেড গ্রাফিক্সের জন্য অত্যাধুনিক শিল্পের জন্য এবং এইচটিএমএল ক্যানভাস / জাভাস্ক্রিপ্টে জটিল অ্যানিমেশনের তালিকায় এটি উচ্চ বিবেচনা করব।

ওয়েবজিএল একটি ক্রস-প্ল্যাটফর্ম, ওপেনগেল ইএস ২.০ ভিত্তিক নিম্ন-স্তরের 3D গ্রাফিক্স এপিআইয়ের জন্য রয়্যালটি-মুক্ত ওয়েব স্ট্যান্ডার্ড, ডকুমেন্ট অবজেক্ট মডেল ইন্টারফেস হিসাবে HTML5 ক্যানভাস উপাদানটির মাধ্যমে উন্মুক্ত। ...

WebGL ব্রাউজারে বাস্তবায়িত ওয়েবে প্লাগইন মুক্ত 3D এনেছে। প্রধান ব্রাউজার বিক্রেতারা অ্যাপল (সাফারি), গুগল (ক্রোম), মজিলা (ফায়ারফক্স), এবং অপেরা (অপেরা) ওয়েবজিএল ওয়ার্কিং গ্রুপের সদস্য are

ওয়েবজিএল জিপিইউ-এক্সেল্রেটেড গ্রাফিক্সের জন্য এর সমর্থনে খুব শক্ত। এই জিএলএসএল শেডার ডেমোগুলি দেখুন । :-) এবং চেমডুডলটিকে ব্যবহারকারীর মিথস্ক্রিয়াটির উদাহরণ হিসাবে দেখুন ।

আমি গুগলের ও 3 ডি ফ্রেমওয়ার্ক ব্যবহার করে একটি অ্যাপে কাজ করছি যা দৃশ্য গ্রাফ পরিচালনা করে এবং রেন্ডারিংয়ের জন্য ওয়েবজিএল ব্যবহার করে (এটি নিজস্ব প্লাগ-ইন ব্যবহার করার জন্য ব্যবহৃত হয়)। O3D একটি কাজ চলছে, এবং এর ডকুমেন্টেশনগুলি সম্পূর্ণরূপে আপ টু ডেট নয়, তবে এটি সক্রিয় বিকাশের অধীনে রয়েছে এবং সেখানে কিছু ভাল ডেমো রয়েছে3 ডি পুল আপনার এলে সবচেয়ে বেশি হতে পারে। গুগল বিকাশকারীরা আলোচনার গোষ্ঠীর প্রশ্নের জন্য খুব প্রতিক্রিয়াশীল।

ওয়েবজিএলে নির্মিত আরও বেশ কয়েকটি ফ্রেমওয়ার্ক রয়েছে; এখানে দেখুন । গেম ডেভলপমেন্ট এবং দৃশ্যের গ্রাফগুলিতে উল্লিখিত ব্যক্তিদের মধ্যে কপারলিচ্ট, সিনজেজেস, এক্স 3 ডিওএম অন্তর্ভুক্ত রয়েছে।

ওয়েবজিএল সাম্প্রতিক বিকাশে বেশ কয়েকটি ব্রাউজার তৈরি করে , তবে আইই নয়। আমি ফায়ারফক্স ("মাইনফিল্ড") এবং ভাল ফলাফল সহ ক্রোমিয়াম ব্যবহার করছি। উপরের ডেমোগুলি চালনার জন্য আপনার এর একটির প্রয়োজন হবে।

তবে আপনার প্রয়োজনীয়তা যদি এটি হয় যে এটি অবশ্যই HTML 5 ক্যানভাস / জেএসের বাইরে কোনও নির্ভরতা না রাখে, ওয়েবজিএল সঠিক পছন্দ নাও হতে পারে। দেখে মনে হচ্ছে না যে এটি যে কোনও সময় শীঘ্রই সমর্থন করবে

আপডেট: প্রচুর প্রতিরোধের পরে, এমএস IE 11 তে ওয়েবজিএল সমর্থন করার সিদ্ধান্ত নিয়েছে


থ্রি.জেস ওয়েবগেলে চালানো হয়
জ্যাকোরিটোআড্ডন

@ ইউনিউব: ভাল পয়েন্ট থ্রি.জেগুলি ওয়েবজিএল, এসভিজি বা প্লেইন (2 ডি) ক্যানভাসে রেন্ডার করতে পারে।
লার্শ

15

Three.js দ্বারা জনাব। ডাব , জাভাস্ক্রিপ্টের জন্য একটি দুর্দান্ত 3 ডি ইঞ্জিন যাতে দৃশ্যের চিত্র (সফ্টওয়্যার এবং ওয়েবজিএল / হার্ডওয়্যার ত্বরণ উভয় সংস্করণ), শেডিং, কণা, চর্মযুক্ত অ্যানিমেশন (আমার মনে হয়) এবং আলো প্রভাব অন্তর্ভুক্ত রয়েছে। এটি পরীক্ষা করে দেখুন, তিনি একজন অতি প্রতিভাবান ফেলো।

আমার যুক্ত করা উচিত যে আপনার বেশিরভাগ নতুন গুগল ক্রোম বা বেশিরভাগ ডেমো দেখতে সমতুল্য প্রয়োজন, আমার পছন্দের একটি হ'ল: http://mrdoob.github.com/three.js/example/webgl_matorys_cars.html


1
এই ডেমোটি আসলে আরও উন্নত: carvisualizer.plus360degrees.com/threejs
পিয়ের হেনরি

13

কাইনেটিকজেএস একটি উচ্চ-আসন্ন গ্রন্থাগার যা উচ্চ কার্যকারিতার জন্য ক্যানভাসে স্বতন্ত্র "স্তরগুলি" তৈরি এবং অ্যানিমেটেড করে bo

http://www.kineticjs.com/


github.com/ericdrowell/ KineticJS/# মথবালেলেড বলেছেন " আমি আর এই রেপো বা অফিসিয়াল কিনেটিকজেএস ওয়েবসাইটটি বজায় রাখব না কারণ আমি অন্যান্য উদ্যোগ ও প্রকল্পগুলিতে চলে এসেছি " এবং গিটহাব 147 উন্মুক্ত ইস্যু প্রকাশ করেছে
xmojmr

8

CAKE.js আর রক্ষণাবেক্ষণ করা হচ্ছে না তবে এটি মোটামুটি শক্তিশালী কাঠামো - http://code.google.com/p/cakejs/

এখানে ডেমোস - http://glimr.rubyforge.org/cake/canvas.html , http://glimr.rubyforge.org/cake/missile_fleet.html


2
অসাধারণ. দেখতে বেশ পরিশীলিত লাগছে। এবং ওএসের জগতে, আপনি সক্রিয়ভাবে রক্ষণাবেক্ষণ থেকে শুধুমাত্র 1 জন উত্সাহী :)
টবি হেড

6

কটাক্ষপাত processingjs ফ্রেমওয়ার্ক। এছাড়াও আসন্ন মটুলস সংস্করণ 2.0 তে ক্যানভাসের সাথে কাজ করার জন্য আর্ট প্রজেক্ট রয়েছে


3
প্রসেসিংজেএস সমস্যাটির একটি আকর্ষণীয় পন্থা, তবে এটি মূলত জাভাস্ক্রিপ্টে প্রয়োগ করা একটি প্রক্রিয়াগত ডিএসএল, এটি নিশ্চিত নয় যে এটি অ-তুচ্ছ অ্যাপ্লিকেশনগুলিতে স্কেল করতে পারে not MooTools বিকল্পটি চেক করবে।
টবি হেড

হ্যাঁ, প্রসেসিং একটি ডেটা যেমন প্রোটোটাইপিং ভাষা। একটি জাভাস্ক্রিপ্ট পোর্ট রয়েছে তা সত্য ঝরঝরে, তবে এটি খুব কমই এটি একটি এইচটিএমএল 5 ফ্রেমওয়ার্ক করে তোলে।
পিটার বেইলি

প্রশ্নটি এইচটিএমএল 5 নয়, একটি ক্যানভাস ফ্রেমওয়ার্ক সম্পর্কে ছিল এবং এটি প্রসেসিং জেএস কী।
Andreas Köberle

আমার শব্দার্থক ত্রুটি ক্ষমা করুন। ক্যানভাস ফ্রেমওয়ার্ক আমি যা পেয়েছিলাম তা হ'ল।
পিটার বেইলি

6

রাফেল মনে হচ্ছে বেশ ভাল ক্যানভাস লাইব্রেরি; এটি এসভিজি-ভিত্তিক (বা ইন্টারনেট এক্সপ্লোরারে ভিএমএল-ভিত্তিক), এবং এর ফলে প্রচুর ব্যবহারকারীর ইনপুট ইভেন্টগুলিকে সমর্থন করে। এটি মোটামুটি ছোট (60 কিলো জিবিপিড), তাই নির্ভরতা খুব বড় নয়।
এটি দেখতে খুব সুন্দর একটি টিউনার রয়েছে বলে মনে হয়: http://raphaeljs.com/references.html#animate ( উদাহরণগুলির জন্য এখানে এবং এখানে দেখুন )।

এটি কী করতে পারে তার উদাহরণের জন্য এই চালাক ছোট্ট ডেমোটি দেখুন

আশাকরি এটা সাহায্য করবে!


10
এসভিজি যদিও ক্যানভাসের মতো একই জিনিস নয়
টবি হেড

4

আমি দুটি লাইব্রেরি অত্যন্ত প্রতিযোগিতামূলক এবং ফ্যাব্রিক থেকে অনেক বেশি ভাল পেয়েছি

কিনেটিক.জেএস এবং ইজিল.জেএস উভয়েরই ইভেন্টের হ্যান্ডলিং, গোষ্ঠীকরণ এবং সাধারণ আকারের বিমূর্ততা রয়েছে। আপনি উভয় প্রেমের অনেক খুঁজে পাবেন; ইজিলে মনে হয় আরও চিত্র ওরিয়েন্টেড এবং ফিল্টারিং রয়েছে।

ফ্যাব্রিকের ইভেন্টের হ্যান্ডলিনগুলি এর যেকোনটির চেয়েও খারাপ - এটি পৃথক আকার বা আকারের গোষ্ঠীর সাথে ইভেন্টগুলি সংযুক্ত করে না।


2
এফডব্লিউআইডাব্লু, ফ্যাব্রিক এখন আপনাকে সরাসরি ইভেন্টগুলিতে ইভেন্টগুলি সংযুক্ত করার অনুমতি দেয় এবং জেনেরিক গ্রুপ কার্যকারিতা রয়েছে।
কঙ্গাক্স

3

একটি আকর্ষণীয় গ্রন্থাগার রয়েছে যার লক্ষ্য জাভাস্ক্রিপ্টের লেখক : ডেভিড ফ্লানাগান লিখেছেন ক্যানভাস এপিআইয়ের সাথে কাজ করার কিছু মৌলিক উন্নতি করা , যা জাভাস্ক্রিপ্টের লেখক : সংজ্ঞায়িত গাইড


উচ্চতর স্তরের স্টাফ পরিচালনা করে এমন কাঠামোর জন্য একটি কার্যকর ভিত্তি হতে পারে।
টবি হেড

3

এছাড়াও, তরুণ, তবে খারাপ নয়, জাভাস্ক্রিপ্ট কাঠামো এবং এটি (জটিল অ্যানিমেশন, দৃশ্যের গ্রাফ পরিচালনা করা, ইভেন্টগুলি পরিচালনা করা এবং ব্যবহারকারীর ইন্টারঅ্যাকশনগুলি) - এটি সম্পর্কে জ্যাকানভাস্ক্রিপ্ট । 'দৃশ্য গ্রাফ পরিচালনা' বাদে হতে পারে।


3

গ্রাহক এবং চলমান সাইট শিরোনাম তৈরি করতে bHive এর সাথে কাজ করা অন্যদের মতো বিকাশমান বলে মনে হচ্ছে, চিত্তাকর্ষক এবং শক্তিশালী বলে মনে হচ্ছে। কানাভাস কঠোরভাবে না হলেও অ্যাডোব এজ একটি গেন্ডার মূল্য।

http://www.bhivecanvas.com

এবং

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


2

অ্যাভেস ইঞ্জিন সত্যই দুর্দান্ত: http://www.dextrose.com/en/projects/aves-engine

এছাড়াও, আকিহাবারা ভাল বলে মনে হচ্ছে: http://www.kesiev.com/akihabara/


আভেসগুলি অপ্রকাশিত এবং দৃশ্যত ক্যানভাস ব্যবহার করে না। যদিও বেশ চিত্তাকর্ষক ডেমো।
টবি হেড

এভিস এ সব ক্যানভাস ব্যবহার করে না, এই কটাক্ষপাত করা: paulbakaus.com/2010/07/19/...
alcuadrado

2

আপনি যদি জাভাস্ক্রিপ্টটি ব্যবহার করতে চান তবে দোজো যাওয়ার দুর্দান্ত উপায়। এটিতে একটি কমপ্যাক্ট, ক্রস-প্ল্যাটফর্ম (এসভিজি, ভিএমএল, ক্যানভাস, সিলভারলাইট) ভেক্টর গ্রাফিক্স এপিআই রয়েছে যা খুব শক্তিশালী। আপনি এটি dojo.gfx এবং dojox.gfx এ খুঁজে পেতে পারেন।

আমরা এটি একটি ইন্টারেক্টিভ ফিজিক্স টিউটর তৈরি করতে ব্যবহার করেছি যা শিক্ষার্থীদের ভেক্টর, উপবৃত্তাকারী ইত্যাদি আঁকতে (এমনকি চিত্রগুলি সংযোজন) করতে এবং তাদের উপর সব ধরণের রূপান্তর সম্পাদন করতে দেয়। Http://gideon.eas.asu.edu/web-UI/login.html - এ আমরা যা করেছি তা আপনি দেখতে পারেন - যে কোনও ব্যবহারকারীর সাথে লগইন সামঞ্জস্য করুন।

আমি ফ্যাব্রিক.জে এবং ডোজক্স.ড্রাইংগুলিতে একবার দেখেছি। একই জিনিসগুলি অনেকগুলি করে। আপনি যদি টুলকিটের পরীক্ষাগুলি লক্ষ্য করেন (একবার আপনি এটির ডোজক্স / অঙ্কন / পরীক্ষা / পেয়েছেন) আপনি ভেক্টর গ্রাফিক্স থেকে শুরু করে চিত্রগুলি প্রোগ্রামাক্রমে তৈরি শ্যাডো পর্যন্ত সমস্ত কিছুর উদাহরণ খুঁজে পান।


1

আমি গেম ইঞ্জিন হিসাবে আকিহাবারা মুগ্ধ। টিউটোরিয়াল এবং একটি এপিআই আকারে এটি দুর্দান্ত ডকুমেন্টেশন রয়েছে। এমনকি আমি কিছু মেসেজ বোর্ডে দেখেছি একটি আখিবার 2 মুক্তির কথা বলা হয়েছে। দুর্ভাগ্যক্রমে, সমস্ত কথা প্রায় এক বছর বা তারও বেশি পুরানো। আমি সত্যিই আশা করি এই ইঞ্জিনটি এখনও বিকশিত হচ্ছে।


1

আমি সবেমাত্র একটি এএস 3 / ফ্ল্যাশ বিকাশ ব্যাকগ্রাউন্ড সহ লোকের দিকে এগিয়ে থাকা লাইভ লাইব্রেরির নতুন অঙ্কন এবং পুনরাবৃত্তিটি প্রকাশ করেছি। যদিও আমার লিব এখনও জটিল অঙ্কনের পথগুলি বা গ্রাফগুলি সমর্থন করে না বলে আমি আশা করছি যে এটি লোকেরা দ্রুত একটি আঁকতে এবং মৌলিক আদিমকে একটি পরিচিত উপায়ে সঞ্জীবিত করতে সহায়তা করবে ing

মতামত এবং মন্তব্য স্বাগত। http://www.quietless.com/kitchen/introducing-js3/

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.