Hi everyone, I am trying to get a grid (that is created with a shadermaterial) on 5 planes that form a small box. I want the grid to look like many squares.
Right now the problem is that the shadermaterial is stretching on these different planes so there are no squares anymore. I tried to group the planes, apply the material there and update the matrix but that was not working (I only have really basic shaderMaterial understanding)
Other than that I tried to work with aspect ratio but the box is not the same size on all devices the website is on.
const shaderMaterial = new THREE.ShaderMaterial({
vertexShader: `
uniform float aspectRatio;
varying vec2 vUv;
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
vUv = uv;
// Adjust the texture coordinates
vec2 textureCoordinates = uv * vec2(aspectRatio, 1.0);
// Pass the modified texture coordinates to the fragment shader
vUv = textureCoordinates;
}`,
fragmentShader:`
varying vec2 vUv;
void main() {
float strength = step(0.9,mod(vUv.x * 10.0, 1.0));
strength += step(0.9,mod(vUv.y * 10.0, 1.0));
gl_FragColor = vec4(strength, strength, strength, 1.0);
}
`
})
The aspect ratio approach should work, you need to pass the mesh’s width to height ratio into the shader:
varying vec2 vuv;
void main() {
// mesh width / mesh height, calculate this in JS
float aspect = 1.0 / 2.0;
// make this a uniform and pass the value from JS
vec2 grid = 10.0 * vec2(1.0, 1.0 / aspect);
vec2 uv = grid * vuv;
vec2 str = step(0.9, fract(uv));
gl_FragColor = vec4(vec3(str.x + str.y), 1.0);
}
1 Like
Triplanar case
varying vec3 vPosition;
void main(){
vPosition=(modelMatrix*vec4(position,1.0)).xyz;
gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.0);
}
varying vec3 vPosition;
void main(){
float x = step(0.9,mod(vPosition.z * 2.0, 1.0));
x += step(0.9,mod(vPosition.y * 2.0, 1.0));
float y = step(0.9,mod(vPosition.x * 2.0, 1.0));
y += step(0.9,mod(vPosition.z * 2.0, 1.0));
float z = step(0.9,mod(vPosition.x * 2.0, 1.0));
z += step(0.9,mod(vPosition.y * 2.0, 1.0));
gl_FragColor = vec4(vec3(x+y+z), 1.0);
}
3 Likes
I’m a bit late to the party, as usual 
You can create a custom box geometry of five planes, pass its size in a uniform and process the uniform in shaders. This is for the case, if you want to use uv coords and a box.
2 Likes
Thank you all for your fast replies, amazing:)
In the end I went with Chaser_Code’s approach as for me it was the one that goes best with my project.
2 Likes
