{"id":256,"date":"2026-04-13T01:02:58","date_gmt":"2026-04-13T01:02:58","guid":{"rendered":"https:\/\/metaartron.com\/?page_id=256"},"modified":"2026-04-13T01:06:55","modified_gmt":"2026-04-13T01:06:55","slug":"high-perforation","status":"publish","type":"page","link":"https:\/\/metaartron.com\/?page_id=256","title":{"rendered":"high perforation"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"256\" class=\"elementor elementor-256\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dc3e917 e-flex e-con-boxed e-con e-parent\" data-id=\"dc3e917\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5e35697 elementor-widget elementor-widget-html\" data-id=\"5e35697\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- META ARTRON CINEMATIC BACKGROUND -->\r\n\r\n<canvas id=\"meta-bg\"><\/canvas>\r\n\r\n<style>\r\n#meta-bg{\r\n  position: fixed;\r\n  top:0;\r\n  left:0;\r\n  width:100%;\r\n  height:100%;\r\n  z-index:-1;\r\n  pointer-events:none;\r\n}\r\n<\/style>\r\n\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r134\/three.min.js\"><\/script>\r\n\r\n<script>\r\n(function(){\r\n\r\n\/\/ SCENE\r\nconst scene = new THREE.Scene();\r\n\r\nconst camera = new THREE.PerspectiveCamera(\r\n  50,\r\n  window.innerWidth\/window.innerHeight,\r\n  0.1,\r\n  1000\r\n);\r\n\r\n\/\/ \ud83d\udd34 ZOOMED INTO FRAGMENT (ARCHITECTURAL FEEL)\r\ncamera.position.z = 3.2;\r\n\r\nconst renderer = new THREE.WebGLRenderer({\r\n  canvas: document.getElementById(\"meta-bg\"),\r\n  alpha: true,\r\n  antialias: true\r\n});\r\n\r\nrenderer.setSize(window.innerWidth, window.innerHeight);\r\nrenderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\r\n\r\n\/\/ GEOMETRY (ULTRA SMOOTH)\r\nconst geometry = new THREE.PlaneGeometry(10,10,320,320);\r\n\r\n\/\/ UNIFORMS\r\nconst uniforms = {\r\n  time: { value: 0 },\r\n  mouse: { value: new THREE.Vector2(0,0) }\r\n};\r\n\r\n\/\/ \ud83d\udd34 MAIN SKIN MATERIAL\r\nconst material = new THREE.ShaderMaterial({\r\n  uniforms: uniforms,\r\n  transparent: true,\r\n  side: THREE.DoubleSide,\r\n\r\n  vertexShader: `\r\n    uniform float time;\r\n    uniform vec2 mouse;\r\n\r\n    varying float vElevation;\r\n    varying vec2 vUv;\r\n\r\n    void main(){\r\n\r\n      vUv = uv;\r\n\r\n      vec3 pos = position;\r\n      vec2 p = pos.xy;\r\n\r\n      \/\/ \ud83d\udd34 CONTROLLED PARAMETRIC SURFACE (NOT NOISE)\r\n      float wave1 = sin(p.x * 1.4 + time * 1.2);\r\n      float wave2 = cos(p.y * 1.2 + time * 1.1);\r\n      float wave3 = sin((p.x + p.y) * 0.5 + time * 0.8);\r\n\r\n      float elevation = (wave1 + wave2 + wave3) * 0.55;\r\n\r\n      \/\/ \ud83d\udd34 LOCAL CURVATURE (BUILDING-LIKE)\r\n      float radial = length(p);\r\n      elevation += sin(radial * 2.0 - time) * 0.25;\r\n\r\n      \/\/ \ud83d\udd34 MOUSE = SUBTLE ARCHITECTURAL RESPONSE\r\n      elevation += mouse.x * 0.3 * sin(p.x * 1.0);\r\n      elevation += mouse.y * 0.3 * cos(p.y * 1.0);\r\n\r\n      pos.z += elevation;\r\n\r\n      vElevation = elevation;\r\n\r\n      gl_Position = projectionMatrix * modelViewMatrix * vec4(pos,1.0);\r\n    }\r\n  `,\r\n\r\n  fragmentShader: `\r\n    uniform float time;\r\n\r\n    varying float vElevation;\r\n    varying vec2 vUv;\r\n\r\n    void main(){\r\n\r\n      \/\/ \ud83d\udd34 PERFORATED FACADE (CONTROLLED GRID)\r\n      float grid = sin(vUv.x * 50.0) * sin(vUv.y * 50.0);\r\n\r\n      \/\/ subtle animation\r\n      grid += sin(time + vUv.x * 5.0) * 0.2;\r\n\r\n      if(grid > 0.65){\r\n        discard;\r\n      }\r\n\r\n      \/\/ \ud83d\udd34 FAKE HDRI LIGHTING (CINEMATIC)\r\n      vec3 lightDir = normalize(vec3(0.3,0.6,1.0));\r\n      float lighting = dot(normalize(vec3(0.0,0.0,1.0)), lightDir);\r\n\r\n      \/\/ \ud83d\udd34 BASE DARK\r\n      vec3 base = vec3(0.015,0.015,0.015);\r\n\r\n      \/\/ \ud83d\udd34 RED INTERNAL GLOW\r\n      float glow = smoothstep(0.0,1.0,abs(vElevation));\r\n      vec3 red = vec3(0.85,0.05,0.05) * glow;\r\n\r\n      \/\/ \ud83d\udd34 GLASS REFLECTION EFFECT\r\n      float fresnel = pow(1.0 - abs(vElevation), 4.0);\r\n      vec3 reflection = vec3(1.0,0.25,0.25) * fresnel * 0.5;\r\n\r\n      \/\/ \ud83d\udd34 EDGE LIGHT (PREMIUM FEEL)\r\n      float edge = smoothstep(0.3,0.9,abs(vElevation));\r\n      vec3 edgeGlow = vec3(1.0,0.1,0.1) * edge * 0.7;\r\n\r\n      \/\/ \ud83d\udd34 DEPTH FOG\r\n      float fog = smoothstep(0.2,1.5,abs(vElevation));\r\n      vec3 fogColor = vec3(0.0,0.0,0.0);\r\n\r\n      vec3 color = base + red + reflection + edgeGlow;\r\n\r\n      color = mix(color, fogColor, fog * 0.3);\r\n\r\n      gl_FragColor = vec4(color, 0.95);\r\n    }\r\n  `\r\n});\r\n\r\n\/\/ \ud83d\udd34 SECOND LAYER (SHADOW SKIN = DEPTH)\r\nconst materialBack = material.clone();\r\n\r\nconst mesh = new THREE.Mesh(geometry, material);\r\nconst meshBack = new THREE.Mesh(geometry, materialBack);\r\n\r\nmeshBack.position.z = -0.6;\r\nmeshBack.material.opacity = 0.25;\r\n\r\nscene.add(mesh);\r\nscene.add(meshBack);\r\n\r\n\/\/ \ud83d\udd34 MOUSE\r\nwindow.addEventListener(\"mousemove\", (e)=>{\r\n  uniforms.mouse.value.x = (e.clientX\/window.innerWidth - 0.5)*2;\r\n  uniforms.mouse.value.y = (e.clientY\/window.innerHeight - 0.5)*2;\r\n});\r\n\r\n\/\/ \ud83d\udd34 ANIMATION\r\nfunction animate(){\r\n  requestAnimationFrame(animate);\r\n\r\n  uniforms.time.value += 0.01;\r\n\r\n  \/\/ \ud83d\udd34 CAMERA-LIKE ROTATION (ARCHITECTURAL)\r\n  mesh.rotation.x = -0.9 + uniforms.mouse.value.y * 0.15;\r\n  mesh.rotation.y = uniforms.mouse.value.x * 0.2;\r\n\r\n  meshBack.rotation.x = mesh.rotation.x;\r\n  meshBack.rotation.y = mesh.rotation.y;\r\n\r\n  renderer.render(scene, camera);\r\n}\r\n\r\nanimate();\r\n\r\n\/\/ \ud83d\udd34 RESPONSIVE\r\nwindow.addEventListener(\"resize\", ()=>{\r\n  renderer.setSize(window.innerWidth, window.innerHeight);\r\n  camera.aspect = window.innerWidth\/window.innerHeight;\r\n  camera.updateProjectionMatrix();\r\n});\r\n\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-256","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/pages\/256","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/metaartron.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=256"}],"version-history":[{"count":4,"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/pages\/256\/revisions"}],"predecessor-version":[{"id":263,"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/pages\/256\/revisions\/263"}],"wp:attachment":[{"href":"https:\/\/metaartron.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}