Modernizr : WebGL과 WebGL의 비교 테스트

Question

내 웹 페이지에 THREE.js 장면과 그래픽 개체를 사용하고 있습니다. 적어도, THREE.js은 WebGL을 사용합니다.

나는 브라우저가없는 경우, 사용자에게 메시지를하라는 메시지, WebGL을와 호환성을 위해 현재 브라우저를 확인 모더 나이저을 활용하고자하고 싶습니다.브라우저에서 WebGL에 대한 감지 :

에 대한 모더 나이저 검사를 위해 browser features을 선택, 내 목표

WebGL을 연관 두 가지 기능을 참조하십시오.

WebGl 확장자 : WebGL에서 OpenGL 확장을 지원합니다. 그것은 WebGL을 확장 API가 지원하는 경우 true의 다음 하위 속성으로 지원 확장, 예를 노출 :

그래서 작업 three.js를 위해서는, 내가 WebGL을 작업 확장을 및 WebGL을 테스트해야합니까또는 단순히 WebGL?

Answer 1

확장 기능이 필요한 기능을 사용하고 있는지 여부에 따라 다릅니다. Three.js 자체에는 확장 기능이 필요하지 않습니다. WEBGL_depth_texture 확장자 인 경우 그림자와 같은 특정 항목이 더 빨리 실행됩니다.

당신은 당신이 개인적으로 앱이 여전히 실행하는 경우이를 숨기기 위해 몇 가지 코드를 삽입 고려해 볼 필요가 확장 프로그램 모르는 경우

예 : 특정 확장 당신을 허용 할 경우

// disable all extensions 

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

// now init three.js 

이 같은 것을 할 수있다

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);