@Mugen87 @Chaser_Code Here is a reproduction (requires Meteor). It isn’t shadow acne or geometry popping, the behavior is too strange. I think I’ve triggered some different code path inside WebGLRenderer's largely-untested code:
# first install Meteor:
curl https://install.meteor.com/ | sh
git clone https://github.com/LUMECraft/first-person-shooter.git
cd first-person-shooter
git checkout threejs-discourse-34839
# run the server
meteor --exclude-archs "web.browser.legacy, web.cordova"
Now open http://localhost:3000
Alternatively if you wish not to install Meteor, I will publish a demo online by tommorrow. I can also make a zip file containing a standalone Node.js app later.
You will see the following, and if you click the app to lock the mouse, and then look around, you will see sometimes an object changes color (which object is random, depending on what is in the scene, in this case the floor):
Try moving around with WASD keys.
Every time you refresh the app, a player is left behind in your last known position, so after each refresh you will see a player standing still at your last location.
Keep trying to walk/look around. As you refresh more times, each time you will notice that the material of an object changes to any of the materials used in the existing objects, and the affected object is not always the same depending on the current set of objects and the camera position.
It appears that the object material that was used for rendering an object fluctuates erroneously within WebGLRenderer.
The floor is supposed to be red and should receive shadows (try firing the gun, and if the floor is red, you’ll see the shadow for the occasional bullet tracer across the red ground), however if the view shows another color, it will be using another material from the models which do not receive shadow, and in that case the ground will not receive a shadow.
Here is the ground with the intended red material and shadow is visible whenever the occasional tracer appears:
Note that when the shadow is visible on the ground, the tracer is visible behind the yellow explosion of the barrel.
Here is a slightly different angle, and in this case although we see the tracer behind the explosion, there is never a shadow on the ground, because the material being used by WebGLRenderer is from the player model:
I believe that WebGLRenderer state tracking has an issue that I’ve somehow triggered.
To see the Scene object and to verify it is not changing while you are in different positioins:
- open browser devtools
- find the
<lume-scene> element
- either find and select it in the element inspector
- or run
let $0 = document.querySelector('lume-scene') in the console
- now run
$0.three and this gives you the Three.js Scene object. You can see the whole Three.js tree in $0.three.children
- similarly, find any element in the DOM such as the
<lume-perspective-camera>, and run el.three to get its corresponding Three.js object.
