Question

我正在尝试处理ThreeJS阴影但是当我在Chromium中设置DirectionalLight的castShadow属性时，控制台会报告：

THREE.WebGLShader: Shader couldn't compile.
(anonymous) @ three.js:24702
three.js:24708 THREE.WebGLShader: gl.getShaderInfoLog() 0:2(12): warning: extension `GL_ARB_gpu_shader5' unsupported in fragment shader
0:73(57): error: sampler arrays indexed with non-constant expressions are forbidden in GLSL 1.30 and later
0:78(57): error: sampler arrays indexed with non-constant expressions are forbidden in GLSL 1.30 and later
0:83(57): error: sampler arrays indexed with non-constant expressions are forbidden in GLSL 1.30 and later
0:88(57): error: sampler arrays indexed with non-constant expressions are forbidden in GLSL 1.30 and later
0:93(57): error: sampler arrays indexed with non-constant expressions are forbidden in GLSL 1.30 and later
0:98(57): error: sampler arrays indexed with non-constant expressions are forbidden in GLSL 1.30 and later
0:103(57): error: sampler arrays indexed with non-constant expressions are forbidden in GLSL 1.30 and later
0:108(57): error: sampler arrays indexed with non-constant expressions are forbidden in GLSL 1.30 and later
0:113(57): error: sampler arrays indexed with non-constant expressions are forbidden in GLSL 1.30 and later

如果我使用Firefox，这个问题不会发生。下面报告了代码，它只是绘制一个平面，一个立方体和一个方向光：

<!DOCTYPE html>

<html>

<head>
    <title>Example 02.01 - Basic Scene</title>
    <script type="text/javascript" src="../libs/three.js"></script>

    <script type="text/javascript" src="../libs/stats.js"></script>
    <script type="text/javascript" src="../libs/dat.gui.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
<script >
var SCREEN_WIDTH = window.innerWidth - 100;
var SCREEN_HEIGHT = window.innerHeight - 100;

var camera, scene,light;
var controls,cube1;
var canvasRenderer, webglRenderer;

var container, mesh, geometry, plane;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

init();
animate();

function init() {

    container = document.createElement('div');
    document.body.appendChild(container);

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(
        30, 
        window.innerWidth / window.innerHeight, 
        1, 
        100000);

    camera.position.x = 1200;
    camera.position.y = 1000;
    camera.lookAt(
        scene.position);


    controls = new function(){
        this.dir_light ={
            x :100,
            y : 150,
            z : 100
        }
    }

    var gui = new dat.GUI();

    gui.add(controls.dir_light,'x',-200,200);
    gui.add(controls.dir_light,'y',-200,200);
    gui.add(controls.dir_light,'z',-200,200);


    var groundMaterial = new THREE.MeshPhongMaterial({
        color: 0x00FF00
    });
    plane = new THREE.Mesh(new THREE.PlaneGeometry(500, 500), groundMaterial);
    plane.rotation.x = -Math.PI / 2;
    plane.receiveShadow = true;

    scene.add(plane);

    scene.add(new THREE.AmbientLight(0x666666));

    light = new THREE.DirectionalLight(0xdfebff, 1);
    light.position.set(    
        controls.dir_light.x,
        controls.dir_light.y,
        controls.dir_light.z
        );



    light.castShadow = true;

    scene.add(light);

    var boxgeometry = new THREE.BoxGeometry(100, 100, 100);
    var boxmaterial = new THREE.MeshLambertMaterial({
        color: 0xffffff
    });
    var cube = new THREE.Mesh(boxgeometry, boxmaterial);
    cube.castShadow = true;
    cube.position.x = 0;
    cube.position.y = 200;
    cube.position.z = 0;

    scene.add(cube);

    // ADD LIGHT HELPER
    var boxgeometry1 = new THREE.BoxGeometry(20, 20, 20);
    cube1 = new THREE.Mesh(boxgeometry1, boxmaterial);
    cube1.position.set(    
        controls.dir_light.x,
        controls.dir_light.y,
        controls.dir_light.z
    );
    scene.add(cube1);

    // AXES
    var axes = new THREE.AxisHelper(200);
    scene.add(axes);

    // RENDERER
    webglRenderer = new THREE.WebGLRenderer();
    webglRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
    webglRenderer.domElement.style.position = "relative";
    webglRenderer.shadowMapEnabled = true;
    webglRenderer.shadowMapSoft = true;

    container.appendChild(webglRenderer.domElement);
    window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize() {
    windowHalfX = window.innerWidth / 2;
    windowHalfY = window.innerHeight / 2;

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    webglRenderer.setSize(window.innerWidth, window.innerHeight);
}

function animate() {
    var timer = Date.now() * 0.0002;
    camera.position.x = Math.cos(timer) * 1000;
    camera.position.z = Math.sin(timer) * 1000;

    light.position.set(    
        controls.dir_light.x,
        controls.dir_light.y,
        controls.dir_light.z
    );
    cube1.position.set(    
        controls.dir_light.x,
        controls.dir_light.y,
        controls.dir_light.z
    );

    requestAnimationFrame(animate);
    render();
}

function render() {
    camera.lookAt(scene.position);
    webglRenderer.render(scene, camera);
}

</script>
</body>
</html>

问题是什么，是关于浏览器的WebGL版本？什么是旧的？

Threejs - 在DirectionalLight上设置castShadow会导致GL错误

0 个答案: