एक ब्राउज़र और जावास्क्रिप्ट

Question

मैं पता लगाने के लिए यदि कोई उपयोगकर्ता WebGL काली सूची में एक ग्राफिक्स कार्ड के साथ एक वेबसाइट ब्राउज़ क्रोम का उपयोग करने की आवश्यकता के साथ GPU का पता लगा रहा:

http://support.google.com/chrome/bin/answer.py?hl=en-GB&answer=1220892

विशेष रूप से, मैं पता करने की जरूरत अगर वे अति कार्ड का उपयोग कर रहे हैं। परियोजना मैं Three.js के साथ कर रहा हूँ एक बहुत बदसूरत प्रस्तुत करना (लाइनों nto विरोधी aliased हैं) जब एक अति कार्ड पर Chrome में देखे जाने पैदा करता है और मैं एक विकल्प प्रदान करना चाहते हैं।

मुझे पता है कि एक पोस्ट प्रभाव है कि लाइनों लेकिन कला निर्देशन के साथ परिणाम भी बदतर है blurs है।

Answer 1

इस प्रयास करें:

function aa_test() { 
renderer.setSize(4, 4); 

var ortho_camera = new THREE.OrthographicCamera(0, 4, 0, 4, 0, 1); 
var output = new Uint8Array(4); 

    var material = new THREE.LineBasicMaterial({ 
     color: 0xffffff 
    }); 

var geometry = new THREE.Geometry(); 
geometry.vertices.push(new THREE.Vector3(0, 0, 0)); 
geometry.vertices.push(new THREE.Vector3(4, 4, 0)); 

    var line = new THREE.Line(geometry, material); 

    renderer.clearTarget(aa_target.renderTarget, true, true, true); 
    renderer.context.lineWidth(4); 

aa_target.add(line); 
renderer.render(aa_target, ortho_camera, aa_target.renderTarget); 

renderer.context.readPixels(0, 2, 1, 1, renderer.context.RGBA, renderer.context.UNSIGNED_BYTE, output); 

if (output[0] == 0) 
    aa_available = false; 

} 

तो आप क्या है, चाहे ए.ए. उपलब्ध है के लिए एक परीक्षण है। यह विधि थ्री.जेएस में काम करती है। (: // gpu आदि क्रोम), लेकिन एक मनमाना js स्क्रिप्ट में उस डेटा को संभव नहीं है मैं क्रोम और अपनी विशेष पृष्ठों को देखना कोशिश की है।

FXAA का उपयोग करना इतना लंबा रेखा मोटाई 1.6 के आसपास है के रूप में इतना बुरा नहीं है। अन्यथा, आपको मिश्रण करने के लिए पर्याप्त रेखा नहीं मिलती है। FXAA उन दृश्यों के लिए बहुत बढ़िया है जिन पर बहुत कुछ चल रहा है, लेकिन यदि दृश्य अधिकतर रेखाएं हैं, तो यह रेखाओं को पृष्ठभूमि में बहुत अधिक फीका करता है।

इसके लिए सबसे अच्छा जवाब FXAA हो सकता है और यहां दृष्टिकोण का उपयोग होगा:

https://github.com/OpenGLInsights/OpenGLInsightsCode/tree/master/Chapter%2011%20Antialiased%20Volumetric%20Lines%20Using%20Shader-Based%20Extrusion

यह एक ज्यामिति शेडर का उपयोग करता है हाँ, लेकिन पहले, यह एक शीर्ष शेडर के उपयोग का उल्लेख है एक ही परिणाम प्राप्त करने के लिए । यह अधिकतर अच्छी लाइनों को दे सकता है।

आशा है कि मदद करता है! : डी

Answer 2

ओपन कॉल कि आम तौर पर जानकारी पता लगाने के लिए इस्तेमाल किया जा सकता WebGL में इस उद्देश्य के लिए बेकार के बाद से ब्राउज़र स्ट्रिंग मान mangles हैं: http://jsbin.com/ovekor/3/ हालांकि, वहाँ एक विस्तार WEBGL_debug_renderer_info है, जो इस्तेमाल किया जा सकता है, लेकिन मौजूदा ब्राउज़र समर्थन अज्ञात है और चूंकि इसे सुरक्षा जोखिम के रूप में चिह्नित किया गया है, इसलिए यह उपयोग करने में आसान नहीं होगा (किसी प्रकार का डीबग ध्वज या उपयोगकर्ता संकेत की आवश्यकता हो सकती है)।

यह भी बस जैसे परीक्षण करने के लिए एक सा बुराई है "अति कार्ड" के लिए, क्योंकि ड्राइवरों में सुधार हो सकता है या समस्या कुछ कार्डों पर मौजूद नहीं है। (यह कुख्यात ब्राउज़र बनाम सुविधा का पता लगाने सूँघने के अनुरूप है।)

जैसे, आपका सर्वश्रेष्ठ दांव के रूप में टिप्पणी में सुझाव दिया एक छोटे से परीक्षण प्रस्तुत करना करना है।

मुझे पता है कि एक पोस्ट प्रभाव है जो रेखाओं को धुंधला करता है लेकिन कला दिशा के साथ परिणाम भी बदतर है।

आप HorizontalBlurShader और VerticalBlurShader मतलब है, तो मैं सुझाव है कि आप FXAAShader, जो बजाय सिर्फ पूरी छवि को धुंधला का एक वास्तविक स्क्रीन अंतरिक्ष विरोधी aliasing फिल्टर है की कोशिश करो।