, प्रदर्शन को बढ़ाने के लिए requestAnimationFrame Three.js में फ़्रेमरेट सीमित?

Question

मैं सोच रहा था कि कुछ परियोजनाओं के लिए मैं 60fps करने के लिए पूरी तरह से आवश्यक नहीं है। मैंने सोचा कि मुझे और अधिक ऑब्जेक्ट्स और चीजें मिल सकती हैं जो 30fps पर दौड़ती हैं अगर मैं इसे उस फ्रेमरेट पर आसानी से चलाने के लिए प्राप्त कर सकता हूं। मैंने सोचा कि अगर मैंने अनुरोध संपादित किया है तो एनीमेशन फ़्रेम शिम तीन.जेएस के अंदर मैं इसे 30 तक सीमित कर सकता हूं। लेकिन मैं सोच रहा था कि क्या उपलब्ध कराए गए तीन.जेएस का उपयोग करके ऐसा करने का बेहतर तरीका था। साथ ही, क्या यह मुझे उस तरह की प्रदर्शन वृद्धि प्रदान करेगा जो मैं सोच रहा हूं। क्या मैं 30fps पर कई वस्तुओं को दो बार प्रस्तुत करने में सक्षम हूं क्योंकि मैं 60 वर्ष का होगा? मुझे 30 और 60 पर चलने वाली चीज़ों के बीच का अंतर पता है, लेकिन क्या मैं इसे चिकनी स्थिर 30fps पर चलाने में सक्षम हूं?

मैं आम तौर पर WebGLRenderer उपयोग करें, और वापस कैनवास पर गिर अगर परियोजनाओं है कि एक विशेष रूप से लक्षित कर रहे हैं के अलावा जरूरत है, और आम तौर पर उन WebGL शेडर परियोजनाओं कर रहे हैं।

Answer 1

क्या कुछ इस तरह के बारे में:

function animate() { 

    setTimeout(function() { 

     requestAnimationFrame(animate); 

    }, 1000/30); 

    renderer.render(); 

} 

Answer 2

काम की राशि आपके सीपीयू और GPU काम का बोझ पर निर्भर करते हैं की जरूरत है और वे चिकनी फ़्रेमरेट की ऊपरी सीमा निर्धारित किया है।

• जीपीयू अधिकतर रैखिक रूप से काम करता है और हमेशा स्क्रीन पर बहुभुज की समान गणना को दबा सकता है।

• हालांकि, अगर आप दोगुनी हो गई है वस्तुओं सीपीयू की संख्या इन सभी वस्तुओं (मैट्रिक्स transformationsn और इस तरह) चेतन करने के लिए कठिन काम करना चाहिए। यह आपके विश्व मॉडल और अन्य काम पर निर्भर करता है जावास्क्रिप्ट करता है कि कितना अतिरिक्त ओवरहेड दिया जाता है। इसके अलावा दिखाई वस्तुओं की संख्या की तरह की स्थिति महत्वपूर्ण है।

साधारण मॉडल जहां सभी बहुभुज हमेशा तो यह काफी नियम "आधा फ़्रेमरेट, डबल वस्तुओं" का पालन करना चाहिए स्क्रीन पर कर रहे हैं के लिए

। दृश्यों की तरह 3 डी शूटर के लिए यह निश्चित रूप से मामला नहीं है।

Answer 3

मैं इस लेख जो कस्टम फ्रेम दर मुद्दे को हल करने के दो तरीके देता है भर में आया था।

http://codetheory.in/controlling-the-frame-rate-with-requestanimationframe/

मुझे लगता है कि इस तरह से और अधिक मजबूत है, क्योंकि यह भी कंप्यूटर कि 60 fps लगातार कैनवास प्रस्तुत करना नहीं है पर एक स्थिर एनीमेशन गति होगा। नीचे एक उदाहरण

var now,delta,then = Date.now(); 
var interval = 1000/30; 

function animate() { 
    requestAnimationFrame (animate); 
    now = Date.now(); 
    delta = now - then; 
    //update time dependent animations here at 30 fps 
    if (delta > interval) { 
     sphereMesh.quaternion.multiplyQuaternions(autoRotationQuaternion, sphereMesh.quaternion); 
     then = now - (delta % interval); 
    } 
    render(); 
}