Rilevamento della GPU con un browser e javascript

Question

ho bisogno di sapere se un utente è la navigazione di un sito web con la carta di una grafica sulla lista nera WebGL utilizzando Chrome:

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

In particolare, ho bisogno di sapere se stanno usando le schede ATI. Il progetto che sto facendo con THREE.js produce un rendering molto brutto (le linee sono nto anti-alias) quando visualizzate in Chrome su una scheda ATI e voglio fornire un'alternativa.

So che c'è un effetto post che offusca le linee ma il risultato con la direzione artistica è anche peggio.

Answer 1

Prova questa:

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; 

} 

Quindi quello che hai, è un banco di prova per se AA è disponibile. Questo metodo funziona in Three.js. Ho provato a guardare Chrome e le sue pagine speciali (chrome: // gpu, ecc.) Ma non è possibile ottenere quei dati in uno script js arbitrario.

L'utilizzo di FXAA non è così grave, FINO A QUANTO lo spessore della linea è di circa 1,6. In caso contrario, non si ottiene abbastanza linea per fondere. FXAA è ottimo per le scene che hanno molto successo, ma se la scena è principalmente linee, tende a sfumare troppo le linee sullo sfondo.

La risposta migliore per questo sarebbe FXAA e utilizzando l'approccio qui:

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

questo utilizza un geometry shader sì, ma in precedenza, si menziona l'uso di un vertex shader per ottenere lo stesso risultato . Questo molto probabilmente darebbe linee molto più belle.

Spero che questo aiuti! : D

Answer 2

L'OpenGL chiama che di solito può essere usato per scoprire le informazioni sono inutili a questo scopo nel WebGL in quanto il browser storpia i valori di stringa: http://jsbin.com/ovekor/3/ Tuttavia, v'è un'estensione WEBGL_debug_renderer_info, che potrebbe essere utilizzato, ma il supporto corrente del browser è sconosciuto e poiché è stato contrassegnato come un rischio per la sicurezza, non sarà facile da usare (potrebbe richiedere un flag di debug di qualche tipo o un prompt dell'utente).

È anche un po 'male testare semplicemente per es. per "carte ATI", poiché i driver potrebbero migliorare o il problema non essere presente su alcune delle carte. (Questo è analogo al famigerato browser sniffing vs. rilevamento delle caratteristiche.)

Come tale, la soluzione migliore è eseguire un rendering di prova come suggerito nei commenti.

So che c'è un effetto post che offusca le linee ma il risultato con la direzione artistica è anche peggio.

Se vuoi dire HorizontalBlurShader e VerticalBlurShader, allora vi consiglio di provare FXAAShader, che è uno schermo-spazio filtro effettivo anti-aliasing invece di sfocatura l'intera immagine.