132 lines
4.1 KiB
HTML
132 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html><head><meta charset="UTF-8"><title>WebGL Test</title>
|
|
<style>
|
|
body{background:#0a0a14;color:#fff;font-family:Consolas,monospace;padding:20px;margin:0}
|
|
h2{color:#E83229;margin-top:0}
|
|
.pass{color:#3FB950}.fail{color:#F85149}.warn{color:#D29922}.info{color:#58A6FF}
|
|
#results{margin-bottom:20px;line-height:1.6}
|
|
canvas{display:block;margin:10px 0;border:2px solid #333}
|
|
</style></head><body>
|
|
<h2>WebView2 / WebGL 完整诊断</h2>
|
|
<div id="results"></div>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
|
<script>
|
|
var r=document.getElementById('results');
|
|
function log(msg,cls){r.innerHTML+='<div class="'+(cls||'')+'">'+msg+'</div>';}
|
|
|
|
// 1. 环境检测
|
|
log('=== 1. 环境检测 ===','info');
|
|
log('UserAgent: '+navigator.userAgent,'info');
|
|
log('Platform: '+navigator.platform,'info');
|
|
log('HardwareConcurrency: '+(navigator.hardwareConcurrency||'N/A'),'info');
|
|
log('DeviceMemory: '+(navigator.deviceMemory||'N/A')+'GB','info');
|
|
|
|
// 2. Three.js
|
|
log('=== 2. Three.js ===','info');
|
|
if(typeof THREE!=='undefined'){
|
|
log('加载成功 v'+THREE.REVISION,'pass');
|
|
}else{
|
|
log('加载失败!','fail');
|
|
throw new Error('THREE not loaded');
|
|
}
|
|
|
|
// 3. WebGL Context
|
|
log('=== 3. WebGL Context ===','info');
|
|
var names=['webgl2','webgl','experimental-webgl'];
|
|
var c=document.createElement('canvas');
|
|
var gl=null, glName='';
|
|
for(var i=0;i<names.length;i++){
|
|
try{
|
|
gl=c.getContext(names[i],{failIfMajorPerformanceCaveat:false});
|
|
if(gl){glName=names[i];break;}
|
|
}catch(e){log(names[i]+': FAIL - '+e.message,'fail');}
|
|
}
|
|
if(gl){
|
|
log('Context: '+glName+' OK','pass');
|
|
log('Renderer: '+gl.getParameter(gl.RENDERER));
|
|
log('Vendor: '+gl.getParameter(gl.VENDOR));
|
|
log('MaxTextureSize: '+gl.getParameter(gl.MAX_TEXTURE_SIZE));
|
|
log('MaxRenderbufferSize: '+gl.getParameter(gl.MAX_RENDERBUFFER_SIZE));
|
|
var ext=gl.getExtension('WEBGL_debug_renderer_info');
|
|
if(ext)log('GPU: '+gl.getParameter(ext.UNMASKED_RENDERER_WEBGL));
|
|
}else{
|
|
log('FATAL: WebGL完全不可用','fail');
|
|
}
|
|
|
|
// 4. THREE.WebGLRenderer
|
|
log('=== 4. THREE.WebGLRenderer ===','info');
|
|
var renderer=null;
|
|
var optsList=[
|
|
{antialias:false,powerPreference:'default',failIfMajorPerformanceCaveat:false},
|
|
{antialias:false,powerPreference:'low-power'},
|
|
{antialias:false},
|
|
{}
|
|
];
|
|
for(var i=0;i<optsList.length;i++){
|
|
try{
|
|
renderer=new THREE.WebGLRenderer(optsList[i]);
|
|
log('创建成功 (opts#'+i+'): '+JSON.stringify(optsList[i]),'pass');
|
|
break;
|
|
}catch(e){
|
|
log('opts#'+i+' FAIL: '+e.message,'fail');
|
|
}
|
|
}
|
|
|
|
if(!renderer){
|
|
log('FATAL: WebGLRenderer 创建失败','fail');
|
|
}else{
|
|
// 5. 渲染测试
|
|
log('=== 5. 渲染测试 ===','info');
|
|
try{
|
|
renderer.setSize(500,350);
|
|
renderer.setPixelRatio(1);
|
|
|
|
var scene=new THREE.Scene();
|
|
// 品红色背景 - 如果看到品红色说明渲染正常
|
|
scene.background=new THREE.Color(0xFF00FF);
|
|
|
|
var camera=new THREE.PerspectiveCamera(60,500/350,0.1,100);
|
|
camera.position.set(3,2.5,5);
|
|
camera.lookAt(0,0,0);
|
|
|
|
// 红色方块
|
|
var boxGeo=new THREE.BoxGeometry(1,1,1);
|
|
var boxMat=new THREE.MeshLambertMaterial({color:0xE83229});
|
|
var box=new THREE.Mesh(boxGeo,boxMat);
|
|
box.position.y=0.5;
|
|
scene.add(box);
|
|
|
|
// 绿色地面
|
|
var planeGeo=new THREE.PlaneGeometry(8,8);
|
|
var planeMat=new THREE.MeshLambertMaterial({color:0x33AA33});
|
|
var plane=new THREE.Mesh(planeGeo,planeMat);
|
|
plane.rotation.x=-Math.PI/2;
|
|
plane.position.y=-1;
|
|
scene.add(plane);
|
|
|
|
scene.add(new THREE.AmbientLight(0xffffff,0.6));
|
|
var light=new THREE.DirectionalLight(0xffffff,0.5);
|
|
light.position.set(2,5,3);
|
|
scene.add(light);
|
|
|
|
renderer.render(scene,camera);
|
|
document.body.appendChild(renderer.domElement);
|
|
log('渲染完成!', 'pass');
|
|
log('你应该看到: 品红色背景 + 绿色平面 + 红色方块', 'info');
|
|
}catch(e){
|
|
log('渲染失败: '+e.message,'fail');
|
|
}
|
|
}
|
|
|
|
// 6. 总结
|
|
log('=== 6. 总结 ===','info');
|
|
if(renderer){
|
|
log('WebGL 3D渲染正常工作!','pass');
|
|
}else if(gl){
|
|
log('WebGL可用但THREE渲染器创建失败','warn');
|
|
}else{
|
|
log('WebGL不可用 - 请检查显卡驱动和WebView2 Runtime','fail');
|
|
}
|
|
</script>
|
|
</body></html>
|