Three.js example does not display correctly on Chromebook (but OK on Windows & Tablet)

Question

I've just started the book Games Development with Three.js (https://www.packtpub.com/game-development/game-development-threejs)

I have built an example (see code below).

It is supposed to show a cityscape. This displays just fine when viewed using Chrome (version 43.0.2357.124 m) on a Windows 7 machine. It also displays fine using Chrome on an Android tablet (version 43.0.2357.93).

However, when I try it from a Chromebook (version 43.0.2357.81 (stable-channel)), I just get a black page (and that is black as in "noir" not blank).

Can anyone suggest how I can get the Chromebook to display the city?

Part 1: HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <script src="http://threejs.org/build/three.min.js"></script>
    <script src="city.js"></script>
</body>
</html>

Part 2: JavaScript code "city.js"

// GLOBALS ======================================================
var camera, scene, renderer;
// SETUP ========================================================
function animate() {
    draw();
    update();
    requestAnimationFrame( animate );
}

function setup() {
    document.body.style.backgroundColor = '#d7f0f7';
    setupThreeJS();
    setupWorld();
    requestAnimationFrame( animate );
}

function setupThreeJS() {
    scene = new THREE.Scene();
    scene.fog = new THREE.FogExp2(0x9db3b5, 0.002);

    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.y = 400;
    camera.position.z = 400;
    camera.rotation.x = -45 * Math.PI / 180;

    renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.shadowMapEnabled = true;
    document.body.appendChild( renderer.domElement );
}

function setupWorld() {
    var geo = new THREE.PlaneGeometry(2000, 2000, 40, 40);
    var mat = new THREE.MeshPhongMaterial({color: 0x9db3b5, overdraw: true});
    var floor = new THREE.Mesh(geo, mat);
    floor.rotation.x = -0.5 * Math.PI;
    floor.receiveShadow = true;
    scene.add(floor);
    var geometry = new THREE.CubeGeometry( 1, 1, 1 );
    geometry.applyMatrix( new THREE.Matrix4().makeTranslation( 0, 0.5, 0 ) );
    var material = new THREE.MeshPhongMaterial({overdraw: true, color: 0xcccccc});

    var cityGeometry = new THREE.Geometry();
    for (var i = 0; i < 300; i++) {
        var building = new THREE.Mesh(geometry.clone());
        building.position.x = Math.floor( Math.random() * 200 - 100 ) * 4;
        building.position.z = Math.floor( Math.random() * 200 - 100 ) * 4;
        building.scale.x  = /**/Math.random()/*Math.pow(Math.random(), 2)/**/ * 50 + 10;
        building.scale.y  = /**/Math.random()/*Math.pow(Math.random(), 3)/**/ * building.scale.x * 8 + 8;
        building.scale.z  = building.scale.x;
        THREE.GeometryUtils.merge(cityGeometry, building);
}
    var city = new THREE.Mesh(cityGeometry, material);
    city.castShadow = true;
    city.receiveShadow = true;
    scene.add(city);

    var light = new THREE.DirectionalLight(0xf9f1c2, 1);
    light.position.set(500, 1500, 1000);
    light.castShadow = true;
    light.shadowMapWidth = 2048;
    light.shadowMapHeight = 2048;
    var d = 1000;
    light.shadowCameraLeft = d;
    light.shadowCameraRight = -d;
    light.shadowCameraTop = d;
    light.shadowCameraBottom = -d;
    light.shadowCameraFar = 2500;
    scene.add(light);
}

// DRAW =========================================================

function draw() {
    renderer.render( scene, camera );
}
// RUN ==========================================================

setup();

Good point sir! 1. The update() function called in animate doesn't exist anymore (doh!). 2. My book is out of date - should have used BoxGeometry and PlaneBuffer, and... THREE.GeometryUtils.merge(cityGeometry, building); ...should have been replaced with... building.updateMatrix(); cityGeometry.merge(building.geometry, building.matrix) OK, so having corrected that the console on the PC shows no errors (just the log message THREE.WebGLRenderer 71). — Crush_157, Jun 24 '15 at 20:22
On the ChromeBook however (to be clear I am browsing to the same URL in each case, and the html & js are on a different machine), I get the following errors: Three.WebGLShader: Shader couldn't compile Three.WebGLProgram: shader error: 0 gl.VALIDATE_STATUS false gl.getPRogramInfoLog invalid shaders — Crush_157, Jun 24 '15 at 20:27
Indeed threeJS appeared few years ago but is about to be at its 72 revision so books on it get old quick. For the remaining errors i dont know them but im skeptical since you still write it works on chrome but not chromebook : are you sure you can get webgl stuff with it ? About your code one last thing you should do is replace `requestAnimationFrame(animate)` in your `setup` function with `animate()` only : `requestAnimationFrame` is meant to be called _inside_ the function passed in argument and that can generate one of those errors. — Mouloud85, Jun 24 '15 at 21:23
@Astrak - Thanks again. It is puzzling that I get different behaviour on the PC and the ChromeBook. All of the examples I've tried from the Three.js website run OK on the CB, so I think I'll use the book for ideas but base my Three.js code on the examples/docs from the website. — Crush_157, Jun 26 '15 at 08:27
Yes it is strange. One thing you can do is comment every details in your code, and try to run it with your chromebook. If it works then uncomment part after part until the bug appears, so you understand where the issue comes from. — Mouloud85, Jun 26 '15 at 12:27

score 0 · Answer 1 · answered Jul 16 '15 at 06:37

@Crush_157 I have faced a similar problem. I am using shaders from ShaderLib. Anyways, in my case I have 2 DirectionalLight on my scene. All works fine in most browsers/devices except on chromeOS. And guess what, If I remove one of the DirectionalLight, my objects start showing up :). Not sure why

Three.js example does not display correctly on Chromebook (but OK on Windows & Tablet)

1 Answers1