2012-03-14 20 views
9

मैं आईपैड 2 पर लक्षित एचटीएमएल 5 वेबसाइट/ऐप के लिए ट्रेल्स के साथ चलती रोशनी बनाने की कोशिश कर रहा हूं। मुझे आश्चर्य है कि ऐसा करने का सबसे अच्छा तरीका क्या है और HTML5 का उपयोग करना है या नहीं बिल्कुल व्यवहार्य है। मैंने एचटीएमएल 5 चुना क्योंकि उद्देश्य सी के साथ मूल आईओएस ऐप्स की तुलना में इसे विकसित और तैनाती करना आसान और सस्ता है। बेशक अगर यह पता चला कि एचटीएमएल 5 पर्याप्त प्रदर्शन की पेशकश नहीं करता है तो मुझे कड़वी गोली निगलनी पड़ सकती है।आईपैड 2 पर एचटीएमएल 5 में कण खींचने का सबसे प्रभावी तरीका

वैसे भी आप एक धारणा है कि मैं क्या बारे में बात कर रहा हूँ देने के लिए है, यह मैं अब तक क्या मिला है:

screenshot http://devdali.no-ip.org/mathias/test-lights/screenshots/1.jpg

या आप कार्रवाई here में देख सकते हैं (केवल वेबकिट आधारित ब्राउज़रों में काम करता है) ।

पहले मैंने एचटीएमएल 5 कैनवास का उपयोग करने की कोशिश की और रेडियल ग्रेडिएंट को कणों के रूप में ऊपर जैसा देखा है। यह काम करता है लेकिन मेरे डेस्कटॉप कंप्यूटर पर भी framerate भयानक था!

तो कुछ पढ़ने के बाद मुझे पता चला कि CSS3 ट्रांसफॉर्म हार्डवेयर तेज हो सकते हैं, इसलिए मैं ऊपर देखे गए संस्करण का निर्माण करता हूं। प्रत्येक "कण" एक 64x64 पीएनजी छवि है। प्रत्येक प्रकाश के लिए "सिर" प्रकाश (एक आईएमजी) होता है जिसके बाद 115 आईएमजी तत्व होते हैं। प्रत्येक img तत्व "translate3d" (साथ ही स्केल और रोटेशन) का उपयोग करके परिवर्तित किया जाता है। इसके अलावा प्रत्येक तत्व की अस्पष्टता गतिशील रूप से समायोजित की जाती है।

इस तरह से ऐसा करने से मेरे कंप्यूटर पर बहुत बेहतर फ़्रेमेट प्रदान किया जाता है, लेकिन मुझे संदेह है कि आईपैड 2 इसे संभालेगा।

मैं आभारी हूं यदि कोई मुझे सामान्य रूप से प्रदर्शन को बेहतर बनाने और लक्ष्य प्लेटफॉर्म पर विचार करने के बारे में कुछ संकेत दे सकता है।

अग्रिम में किसी भी मदद के लिए धन्यवाद!

+2

प्रदर्शन पर संदेह करने के बजाए, वास्तव में इसका प्रयास क्यों नहीं करें? आप आश्चर्यचकित हो सकते हैं ... – Alnitak

+2

ya के लिए iPad2 पर परीक्षण किया गया। यह झटकेदार और धीमी है। साथ ही, आपने व्यूपोर्ट स्केलिंग को ठीक से सेट नहीं किया है क्योंकि यह एक अजीब ज़ूम चीज हो रही है। – Armstrongest

+0

बहुत बहुत धन्यवाद! यह मेरी चिंताओं की पुष्टि करता है, मुझे लगता है। @Alnitak मुझे अभी केवल आईपैड 1 मिला है, जो अभी परीक्षण के लिए है ... – Bunkerbewohner

उत्तर

0

यह कैनवास में बनाया जाना चाहिए। EaselJS और यह डेमो देखें।

http://easeljs.com/ http://easeljs.com/demos/MusicVisualizer/index.html

0

आप प्रदर्शन WebGL का उपयोग करके एक बहुत का अनुकूलन कर सकता है (है, जो iPad2 पर समर्थित है।) ... जो आईओएस सफारी पर मूल HTML पृष्ठों के लिए समर्थित नहीं है जैसा कि कहा गया है Nison Maël ...

उस समय के लिए आपके पास केवल समाधान के रूप में कैनवास है। जो अभी भी आप बेहतर प्रदर्शन दे देंगे ...

(आप अधिक जानकारी के लिए इस ब्लॉग की जाँच कर सकते: एक छोटे से विश्वास और बार जब आप हैरान हो जाएगा के साथ http://learningwebgl.com/blog/

)

+0

मैंने पढ़ा है कि विज्ञापनों के अलावा आईओएस में वेबजीएल नहीं है। हालांकि, अगर आप वेबजीएल का उपयोग कर सकते हैं, तो यह निश्चित रूप से जाने का तरीका है। मैंने एक कण पुस्तकालय लिखा है: http://arcanis.github.com/js.spark/test/ –

1

आप स्वीकार करते हैं सिर्फ एक कैनवास तत्व में उनके वर्तमान पदों में रोशनी आकर्षित इसके बजाय कई कणों के माध्यम से प्रकाश की ट्रेल्स ड्राइंग का

  • ,: प्रभाव के लिए छोटे परिवर्तन, कुछ अन्य प्रक्रिया तेजी से काम कर सकते हैं।

  • फिर आप शीर्ष पर बहुत कम अस्पष्टता के साथ एक काला आयत भरकर एक फ्रेम की शुरुआत में पूरी छवि को अंधेरा कर सकते हैं। इस तरह ट्रेल्स अंधेरे में फीका है, लेकिन अब वे अपने रंग को बदल नहीं पाएंगे।

  • हालांकि ड्राइंग ऑपरेशन की मात्रा काफी कम हो जाएगी। सबसे महंगा ऑपरेशन प्रत्येक फ्रेम के लिए लुप्तप्राय आयताकार भर जाएगा।