Add room grid

Author: Avaer Kazmer

index.html

@@ -1612,8 +1612,8 @@
         d = abs(vWorldPos.z - distance2);
       }
 
-      gl_FragColor = vec4(0.11055276381909548, 0.27638190954773867, 0.4103852596314908, 1.0) * (4.0 - pow(d, 3.0)) * 0.5;
-      // gl_FragColor = max(gl_FragColor, vec4(0.2));
+      gl_FragColor = vec4(0.11055276381909548, 0.27638190954773867, 0.4103852596314908, 1.0) * (4.0 - pow(d, 3.0)) * 0.5; // 0x42a5f5
+      // gl_FragColor = max(gl_FragCoor, vec4(0.2));
       if (gl_FragColor.a >= 1.9) {
         gl_FragColor.rgb *= 3.0;
       } else if (gl_FragColor.a <= 0.1) {
@@ -1622,7 +1622,6 @@
     }
   `;
   const material = new THREE.ShaderMaterial({
-    // color: 0x42a5f5,
     uniforms: {
       uTime: {
         type: 'f',
@@ -1638,6 +1637,62 @@
 })();
 scene.add(gridMesh);
 
+const roomMesh = (() => {
+  const geometry = new THREE.BoxBufferGeometry(16, 8, 16).applyMatrix(new THREE.Matrix4().makeTranslation(0, 8/2, 0));
+  const uvs = geometry.attributes.uv.array;
+  for (let i = 0; i < uvs.length; i += 2) {
+    uvs[i+0] *= 8;
+    uvs[i+1] *= 8;
+  }
+  const roomVsh = `
+    // varying vec3 vWorldPos;
+    varying vec2 vUv;
+    void main() {
+      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.);
+      vUv = uv;
+      // vWorldPos = abs(position);
+    }
+  `;
+  const roomFsh = `
+    // uniform sampler2D uTex;
+    uniform vec3 uColor;
+    varying vec3 vWorldPos;
+    varying vec2 vUv;
+    void main() {
+      vec2 uv = fract(vUv);
+      /* float diff = uv.x;
+      diff = min(diff, abs(uv.x - 1.0));
+      diff = min(diff, uv.y);
+      diff = min(diff, abs(uv.y - 1.0));
+      if (diff <= 0.01) { */
+      if ((uv.x <= 0.01 || uv.x >= 0.99) || (uv.y <= 0.01 || uv.y >= 0.99)) {
+        // gl_FragColor = vec4(uColor * (1.0 - min(diff/0.02, 1.0)), 0.5);
+        gl_FragColor = vec4(uColor, 0.5);
+      // } else if (abs(abs(uv.x - 0.5) - abs(uv.y - 0.5)) <= 0.01) {
+      } else if (abs(uv.x - uv.y) <= 0.01) {
+        gl_FragColor = vec4(0.2, 0.2, 0.2, 0.5);
+      } else {
+        gl_FragColor = vec4(0.1, 0.1, 0.1, 0.5);
+      }
+    }
+  `;
+  const material = new THREE.ShaderMaterial({
+    uniforms: {
+      uColor: {
+        type: 'c',
+        value: new THREE.Color(0xffee58),
+      },
+    },
+    vertexShader: roomVsh,
+    fragmentShader: roomFsh,
+    side: THREE.DoubleSide,
+    transparent: true,
+  });
+  const mesh = new THREE.Mesh(geometry, material);
+  return mesh;
+})();
+scene.add(roomMesh);
+
 // rig
 
 let focusedTab = null;