1

I have a "2D" scene (Z pointing up) with a plane geometry as the game arena set like this:

    var arenaMesh = new THREE.Mesh(
        new THREE.PlaneGeometry(SceneWidth, SceneHeight),
            new THREE.MeshLambertMaterial({
                map: arenaTexture,
                emissive: 0xffffff
            }));

    arenaMesh.position.x = SceneWidth / 2;
    arenaMesh.position.y = SceneHeight / 2;
    arenaMesh.position.z = 0;
    arenaMesh.receiveShadow = true;

The game object is set like this (a really flat box):

    var size = 20;
    var bodyMesh = new THREE.Mesh(
        new THREE.BoxGeometry(size, size, 0.01),
        new THREE.MeshLambertMaterial({
            map: bodyTexture,
            alphaTest: 0.65,
            emissive: 0xeeeeee
        }));

    bodyMesh.position.x = x0;
    bodyMesh.position.y = y0;
    bodyMesh.position.z = 5.0;
    bodyMesh.castShadow = true;

I'm using BoxGeometry here due to some shadow problems I had before.

Now, the problem is that this works perfectly fine on my desktop (FF and Chrome): my fake 2D game object is rendered and it casts a shadow on the game arena. However, on Nexus 7 I can see only the shadow of the object! After some debugging, I noticed that If I set the z-position of the game object to a much bigger value, like z=15.0 it gets rendered. Unfortunately this is not acceptable, because then the object seems like it's flying. Lowering the game arena plane to e.g. z=-15.0 has the same effect. What the heck could cause this? I seems like the precision is somehow completely lost there. Why is the shadow still there correctly?

juzzlin
  • 45,029
  • 5
  • 38
  • 50
  • What are your `zNear` and `zFar` clipping planes set to? They are the last 2 values when creating a `THREE.PerspectiveCamera`. I'm guessing a nexus 7 only has a 16bit depth buffer. Maybe that has something to do with it? – gman Sep 11 '14 at 07:19
  • Hmm...that might be. The current values are zNear=0.1 and zFar=1000. – juzzlin Sep 11 '14 at 16:04
  • 1
    how far away are things. Try `zNear=1` and `zFar = 100` – gman Sep 11 '14 at 23:58
  • Thanks for the tip. It works now after setting zNear=10 :) – juzzlin Sep 12 '14 at 18:51
  • You can find [a more detailed explanation of the issue here](http://stackoverflow.com/questions/21080619/three-js-webgl-large-spheres-appear-broken-at-intersection/21106656#21106656) – gman Sep 12 '14 at 20:35

1 Answers1

0

Based on the comments added to my question, the solution for the problem was to set zNear to a higher value. Apparently the ratio of zNear and zFar affects the precision of Z-buffer and thus fixes problems on Nexus 7.

juzzlin
  • 45,029
  • 5
  • 38
  • 50