Modernizr: Testen für WebGL vs WebGL Exentions

Question

Ich verwende THREE.js Szenen und Grafikobjekte auf meiner Webseite. Ich weiß, mindestens THREE.js verwendet WebGL.

würde Ich mag Modernizr nutzen, um die Kompatibilität mit WebGL den aktuellen Browser zu überprüfen und, wenn der Browser es nicht haben, aufgefordert, eine Nachricht an den Benutzer.

Wenn die browser features Auswahl für Modernizr Test haben, sehe ich zwei Funktionen, die

WebGL auf mein Ziel beziehen:Ermittelt für WebGL im Browser.

WebGL Extentions: Ermittelt Unterstützung für OpenGL-Erweiterungen in WebGL. Es ist true wenn die WebGL-Erweiterungen API unterstützt wird, setzt dann die unterstützten Erweiterungen als Untereigenschaften, zB:

Also, um für Three.js zu arbeiten, muss ich für WebGL Extentions und WebGL testen müssenoder einfach nur WebGL?

Answer 1

Es hängt davon ab, ob Sie Funktionen verwenden, die Erweiterungen erfordern. Three.js selbst benötigt keine Erweiterungen. Bestimmte Dinge wie Schatten laufen wahrscheinlich schneller, wenn Sie WEBGL_depth_texture Erweiterung.

Wenn Sie nicht wissen, was Erweiterungen, die Sie persönlich gedacht eine Code einfügen, sie zu verstecken und sehen, ob Ihre App noch

läuft

Beispiel:

// disable all extensions 

WebGLRenderingContext.prototype.getExtension = function() { 
    return null; 
} 
WebGLRenderingContext.prototype.getSupportedExtensions = function() { 
    return []; 
} 

// now init three.js 

Wenn Sie Sie spezifische Erweiterungen zulassen möchten könnte so etwas tun

var allowedExtensions = [ 
    "webgl_depth_texture", 
    "oes_texture_float", 
]; 

WebGLRenderingContext.prototype.getExtension = function(origFn) { 
    return function(name) { 
    if (allowedExtensions.indexOf(name.ToLowerCase()) >= 0) { 
     return origFn.call(this, name); 
    } 
    return null; 
    }; 
}(WebGLRenderingContext.prototype.getExtension); 

WebGLRenderingContext.prototype.getSupportedExtensions = function(origFn) { 
    return function() { 
    return origFn.call(this).filter(function(name) { 
     return allowedExtensions.indexOf(n) >= 0; 
    }); 
    }; 
}(WebGLRenderingContext.prototype.getSupportedExtensions);