I realize that this is all WIP, but I am trying to upgrade my programs to work with WebGPU.
I have run into a problem where a cubemap shows black artifacts if you look around (using both OrbitControls and my custom camera mover). The artifacts appear roughly straight ahead, and have varying shapes.
By trial and error, it appears that the problem is with the minimum Camera distance. I am using a max Camera distance of 100000. The artifacts start appearing where the minimum Camera distance is around 5. My normal minimum is 0.5, so they are pretty obvious. If I set the minimum down to 0.01, almost the whole screen is covered with artifacts.
Here is the routine I use to create the CubeMap:
let fpath = "https://threejs.org/examples/textures/cube/skyboxsun25deg/";
envMap = new THREE.CubeTextureLoader(loadingManager)
.setPath(fpath)
.load(["px.jpg", "nx.jpg", "py.jpg", "ny.jpg", "pz.jpg", "nz.jpg"]);
envMap.format = THREE.RGBAFormat;
//envMap.colorSpace = THREE.SRGBColorSpace; // r152 (makes no difference)
scene.background = envMap;
Here is a program with illustrates the problem. (But note that, while the program displays fine when running locally using Chrome, the program gives a message of “No WebGPU support” when I try to run it from here - even though I have the latest version of Chrome.)
[SUPPLEMENTAL]
The max value also plays a part. In the “webgpu_cubemap_adjustments example”, there are no artifacts and the min distance is also 0.5. However, the max distances is only 20. In my program, with a min of 0.5, the artifacts would start disappearing when the max is around 2000.
Below are a couple of screenshots. In both, the max is 100000. In the top, the min is 0.5. In the bottom, the min is 0.05.
The artifacts appear as different shapes and in different places as the view changes.
FYI - When I tried switching back to r153.0, the artifacts disappeared. So this appears to be a problem with r154.0.