Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
簡單地檢測webgl支援以及瀏覽器對WebGL Interface的支援程度
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<style>
div {
background: #AACCEE;
border: solid 1px #336699;
margin: 10px;
padding: 5px;
border-radius: 5px;
display: inline-block;
vertical-align: top;
}
canvas {
cursor: pointer;
}
</style>
<script src="js/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function() {
function mapper(a, f) {
for(var i=0,r=null; i<a.length; i++) {
try {
r = f(a[i]);
if(r) {
alert(a[i]);
return r;
}
} catch(e) {}
}
return null;
}
function getGL(canvas) {
return mapper(
['webgl', 'experimental-webgl', 'moz-webgl', 'webkit-3d'],
function(s) {
return canvas.getContext(s);
}
);
}
function row(cells) {
return '<tr>' + cells.join('') + '</tr>\n';
}
function cell(text, style, col) {
return '<td' + (col? ' colspan="'+col+'"':'') + (style? ' style="'+style+'"':'') + '>' + text + '</td>';
}
function DOMInspector(result, obj, attr) {
var ret = {
'result':result,
'SupportedAttributes':[],
'UnsupportAttributes':[],
'SupportedMethods':[],
'UnsupportMethods':[]
};
for(var i=0; i<attr.attr.length; i++) {
if(obj[attr.attr[i]] !== undefined) {
ret.SupportedAttributes.push(attr.attr[i]);
} else {
ret.UnsupportAttributes.push(attr.attr[i]);
}
}
for(var i=0; i<attr.mthd.length; i++) {
if(obj[attr.mthd[i]] !== undefined) {
ret.SupportedMethods.push(attr.mthd[i]);
} else {
ret.UnsupportMethods.push(attr.mthd[i]);
}
}
return ret;
}
function resultParser(test) {
var str = '<table cellpadding="2" cellspacing="0" border="1">';
for(var i in test) {
if(i == 'result') {
str += row([cell(test[i],null,2)]);
} else {
str += row([cell(i),cell(test[i].length>0? test[i].join('<br>'):'&nbsp;')]);
}
}
str += '</table>';
return str;
}
function WebGLInspector(obj) {
var map = {
attr: [
'canvas'
],
mthd: [
'getContextAttributes',
'isContextLost',
'getSupportedExtensions',
'getExtension',
'activeTexture',
'attachShader',
'bindAttribLocation',
'bindBuffer',
'bindFramebuffer',
'bindRenderbuffer',
'bindTexture',
'blendColor',
'blendEquation',
'blendEquationSeparate',
'blendFunc',
'blendFuncSeparate',
'bufferData',
'bufferSubData',
'checkFramebufferStatus',
'clear',
'clearColor',
'clearDepth',
'clearStencil',
'colorMask',
'compileShader',
'copyTexImage2D',
'copyTexSubImage2D',
'createBuffer',
'createFramebuffer',
'createProgram',
'createRenderbuffer',
'createShader',
'createTexture',
'cullFace',
'deleteBuffer',
'deleteFramebuffer',
'deleteProgram',
'deleteRenderbuffer',
'deleteShader',
'deleteTexture',
'depthFunc',
'depthMask',
'depthRange',
'detachShader',
'disable',
'disableVertexAttribArray',
'drawArrays',
'drawElements',
'enable',
'enableVertexAttribArray',
'finish',
'flush',
'framebufferRenderbuffer',
'framebufferTexture2D',
'frontFace',
'generateMipmap',
'getActiveAttrib',
'getActiveUniform',
'getAttachedShaders',
'getAttribLocation',
'getParameter',
'getBufferParameter',
'getError',
'getFramebufferAttachmentParameter',
'getProgramParameter',
'getProgramInfoLog',
'getRenderbufferParameter',
'getShaderParameter',
'getShaderInfoLog',
'getShaderSource',
'getTexParameter',
'getUniform',
'getUniformLocation',
'getVertexAttrib',
'getVertexAttribOffset',
'hint',
'isBuffer',
'isEnabled',
'isFramebuffer',
'isProgram',
'isRenderbuffer',
'isShader',
'isTexture',
'lineWidth',
'linkProgram',
'pixelStorei',
'polygonOffset',
'readPixels',
'renderbufferStorage',
'sampleCoverage',
'scissor',
'shaderSource',
'stencilFunc',
'stencilFuncSeparate',
'stencilMask',
'stencilMaskSeparate',
'stencilOp',
'stencilOpSeparate',
'texImage2D',
'texParameterf',
'texParameteri',
'texSubImage2D',
'uniform1f',
'uniform1fv',
'uniform1i',
'uniform1iv',
'uniform2f',
'uniform2fv',
'uniform2i',
'uniform2iv',
'uniform3f',
'uniform3fv',
'uniform3i',
'uniform3iv',
'uniform4f',
'uniform4fv',
'uniform4i',
'uniform4iv',
'uniformMatrix2fv',
'uniformMatrix3fv',
'uniformMatrix4fv',
'useProgram',
'validateProgram',
'vertexAttrib1f',
'vertexAttrib1fv',
'vertexAttrib2f',
'vertexAttrib2fv',
'vertexAttrib3f',
'vertexAttrib3fv',
'vertexAttrib4f',
'vertexAttrib4fv',
'vertexAttribPointer',
'viewport'
]
};
return DOMInspector('WebGL context Interface support.', obj, map);
}
var gl = getGL($('#canvas')[0]);
if(gl) {
$('#panel').html(resultParser(WebGLInspector(gl)));
} else {
alert('webgl not supported!');
}
});
</script>
</head>
<body>
<div id="container"><canvas id="canvas" width="10" height="10"></canvas></div>
<div id="panel"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment