Skip to content

portalFragment

const portalFragment: “vec2 hash(vec2 p) {\n p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)));\n return -1.0 + 2.0 * fract(sin(p) * 43758.5453123);\n}\n\n// Simplex noise in two dimensions.\nfloat noise(vec2 p) {\n const float K1 = 0.366025404;\n const float K2 = 0.211324865;\n vec2 i = floor(p + (p.x + p.y) * K1);\n vec2 a = p - i + (i.x + i.y) * K2;\n vec2 o = (a.x > a.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n vec2 b = a - o + K2;\n vec2 c = a - 1.0 + 2.0 * K2;\n vec3 h = max(0.5 - vec3(dot(a, a), dot(b, b), dot(c, c)), 0.0);\n vec3 n = h * h * h * h * vec3(dot(a, hash(i)), dot(b, hash(i + o)), dot(c, hash(i + 1.0)));\n return dot(n, vec3(70.0));\n}\n\n// Distance to a ring of the given radius and width, bent by a wave and noise.\nfloat ring(vec2 p, vec2 center, float radius, float width, float warp, float t) {\n p.y += sin(p.x * 2.0 + t * 0.3) * warp;\n p.x += noise(p * 1.5 + t * 0.1) * (warp * 0.8);\n return abs(length(p - center) - radius) - width;\n}\n\nvoid main() {\n float t = uTime * uSpeed;\n // ThreeUI’s screen coordinates, with its ring centred on the plane.\n vec2 st = (vUv - 0.5) * 2.0 + 0.5;\n vec2 center = vec2(0.5);\n\n float core = exp(-ring(st, center, 0.6, 0.02, 0.15, t) * 30.0);\n float fringe = exp(-ring(st, center, 0.65, 0.06, 0.2, t) * 10.0);\n float wash = (1.0 - smoothstep(-0.5, 1.5, length(st - center))) * 0.15;\n // Faded to nothing before the plane’s edge, so no square shows.\n float edge = 1.0 - smoothstep(0.8, 1.0, length(vUv - 0.5) * 2.0);\n core *= edge * uIntensity;\n fringe *= edge * uIntensity;\n wash *= edge * uIntensity;\n\n vec3 colour = vec3(1.0) * core + uColor * fringe\n + uColor * wash * (sin(t * 0.5) * 0.2 + 0.8);\n float alpha = clamp(core + fringe + wash, 0.0, 1.0);\n colour = vec3(1.0) - exp(-colour * 1.5);\n gl_FragColor = vec4(colour, alpha * 0.6);\n}\n”

Defined in: packages/engine/src/render/portal.ts:10

The portal, for a transparent Shader: a white-hot ring inside a wider fringe of uColor, both warped by noise, over a faint wash that breathes. uSpeed scales the warp and the breath, and uIntensity the glow.