Safari 11.0.2中Three.js场景无法渲染的问题排查与调试求助

First, let's tackle the immediate issues in your code that are likely causing the rendering failure in Safari 11.0.2:

Code Fixes #

1. Typo in getLight Function #

Your getLight function tries to return light but you defined an array called lights—this throws a ReferenceError that halts execution. Fix it like this:

function getLight(scene) {
    var lights = [];
    lights[0] = new THREE.PointLight( 0xffffff, 0.6, 0 );
    lights[0].position.set( 100, 200, 100 );
    scene.add( lights[0] );
    var ambientLight = new THREE.AmbientLight(0x111111);
    scene.add(ambientLight);
    return lights; // Changed from 'light' to 'lights'
}

2. Eliminate Global Variable Dependency in getCamera #

Your getCamera function references the global scene variable, which can cause scope/timing issues in older Safari. Pass the scene as an explicit argument instead:

function getCamera(scene) { // Add scene parameter
    var aspectRatio = window.innerWidth / window.innerHeight;
    var camera = new THREE.PerspectiveCamera(75, aspectRatio, 0.1, 10000);
    camera.position.set(0,150,400);
    camera.lookAt(scene.position);
    return camera;
}
// Update the global initialization line:
var camera = getCamera(scene);

3. Address Texture Loading Restrictions #

Safari 11 enforces strict cross-origin rules for textures. Ensure your grass.jpg and cube map .bmp files are hosted on the same domain as your page, or that your server sends proper CORS headers. If testing locally, use a local server (like python -m SimpleHTTPServer) instead of opening files directly via the file:// protocol.

4. Verify TrackballControls Compatibility #

The version of TrackballControls you’re using may rely on modern JS features unsupported in Safari 11. Stick to a version explicitly compatible with Three.js r88 (the version you’re using).

General WebGL Debugging Methods for Old Safari Versions #

Since you also noted ShaderToy issues in Safari, here’s a systematic approach to diagnose WebGL problems:

Step 1: Inspect the JavaScript Console #

Always start with Safari’s Web Inspector (Cmd+Opt+I) and check the Console tab. Old Safari is strict about undefined variables, syntax errors, and WebGL-specific warnings (like failed texture loads)—these will almost always show up here.

Step 2: Enable WebGL Debugging Tools #

• Go to Safari > Preferences > Advanced and check "Show Develop menu in menu bar"
• Open Develop > Experimental Features and ensure only WebGL 1.0 is enabled (WebGL 2.0 support in Safari 11 is unstable and experimental)
• Use the Web Inspector’s WebGL tab to inspect shader compilation errors, texture status, and buffer issues.

Step 3: Test Minimal WebGL Functionality #

Create a tiny test case to isolate whether the problem is browser-level or code-specific:

// Minimal WebGL test to check basic functionality
var canvas = document.createElement('canvas');
var gl = canvas.getContext('webgl');
if (!gl) {
    console.error('WebGL is not supported in this browser');
} else {
    gl.clearColor(0, 1, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);
    document.body.appendChild(canvas);
}

If this doesn’t render a green canvas, your Safari installation or OS may have WebGL disabled at the system level—try resetting Safari or checking if hardware acceleration is enabled.

Step 4: Check Shader Compilation Errors #

Three.js compiles shaders in the background. Enable shader error logging by adding this line after initializing your renderer:

renderer.debug.checkShaderErrors = true;

Older Safari often has stricter GLSL syntax rules, so this will catch compilation failures that silently break rendering.

Step 5: Disable Experimental Features #

If you enabled WebGL 2.0 in Safari Technology Preview and saw issues, revert to WebGL 1.0 for Safari 11.0.2—WebGL 2.0 support was not fully stabilized in that version.

Recommended Debugging Tools #

• Safari Web Inspector: The built-in tool is your primary resource. Use the Console for JS errors, WebGL tab for shader/buffer details, and Network tab to verify texture loads.
• Three.js Stats: Add the Stats.js library to monitor frame rate, draw calls, and memory usage—this helps identify performance bottlenecks that might cause rendering to fail.
• WebGL Inspector: A legacy browser extension compatible with older Safari versions that lets you deep-dive into WebGL state, shaders, and texture data.

After applying these fixes and following the debugging steps, your scene should render in Safari 11.0.2. For the ShaderToy issues, this is likely a browser-specific limitation in that older Safari version—updating to a newer Safari release (if possible) would resolve those, but if you need to support Safari 11, stick to WebGL 1.0-compatible shaders.

内容的提问来源于stack exchange，提问作者duhaime