GridHelper: Removed colorCenterLine

[mrdoob]

Related issue: #21430

Description

After working on #21430 I now think that adding a colorCenterLine to GridHelper was a mistake. The GPU render all lines at the same time and that produces z fighting glitches in the intersections.

We can achieve something similar (and good looking) like this:

const grid1 = new THREE.GridHelper( 30, 30, 0x888888 );
scene.add( grid1 );

// center line
const grid2 = new THREE.GridHelper( 30, 2, 0x222222 );
grid2.material.depthFunc = THREE.AlwaysDepth;
scene.add( grid2 );

This is somewhat a breaking change.

[WestLangley]

grid2.material.depthFunc = THREE.AlwaysDepth;

That overwrites existing objects in the scene.

[Mugen87]

This problem did probably not become apparent since the editor's grid is rendered in a special way.

[Mugen87]

I guess it would work if the renderOrder of GridHelper is set to -Infinity. However, this is not a very reliable solution...

[mrdoob]

grid2.material.depthFunc = THREE.AlwaysDepth;

That overwrites existing objects in the scene.

Yes, the grid needs to be rendered first.

Unfortunately GL_POLYGON_OFFSET_LINE is not available in WebGL.

As some point I had solved it like this:

grid2.material.onBeforeCompile = function ( shader ) {

	// Emulate GL_POLYGON_OFFSET_LINE
	shader.vertexShader = shader.vertexShader.replace( '<worldpos_vertex>', '<worldpos_vertex>\ngl_Position.z -= 0.0001;' );

};

But I opted for THREE.AlwaysDepth as it seemed prettier.

But yes, in this PR I was going to try updating the examples and notice the side-effects of the approach.

What I know is that the current approach is a minefield. In VR those line intersections blink and it's very distracting...

[Mugen87]

But yes, in this PR I was going to try updating the examples and notice the side-effects of the approach.

I think it's better to close the PR because of the mentioned issues. Seems we need a different approach to mitigate the blinking when grid lines intersect. At least there is a solution for the editor.