Portal material

<PortalMaterial> is the material of the plane it sits in, inside a World: a white-hot ring inside a wider fringe of colour, both bent by noise, over a faint haze that breathes. Use it for a door to the next level or a way between two places. It runs on the world’s clock, as every Shader does, so a paused game holds the ring still.

It takes three props, which PortalMaterialProps lists:

• color: the colour of the fringe and the haze; the core ring stays white. Navy, #1e3a8a, by default.
• speed: how fast the ring warps and the haze breathes. 0 holds it still, and 1, the default, is the shader’s own pace.
• intensity: how bright the ring, the fringe and the haze are. 0 puts the portal out, 1 is the default, and above 1 brightens all three, for a portal that has to stand out against a bright sky.

The ring fills about two thirds of the plane, and its glow fades out before the plane’s edge. The portal is see-through, so the world behind it shows through the ring.

Roblox creators build a portal from parts, a Beam and a ParticleEmitter. Unity, Unreal and Godot creators buy one from a store or copy one from godotshaders.com. This one is a single material with three props.

The shader is ThreeUI’s portal field by Meng To, MIT, moved from behind a web page onto a plane’s UVs, without the page’s pointer parallax or its light theme. Its source is portalFragment: copy it, change a block and pass it to a Shader for a portal of your own.

Sample

An orange portal standing in the meadow:

import { Entity, PortalMaterial, World } from "@spawnite/engine";

export function Door() {
    return (
        <World map="meadow">
            <Entity position={[0, 1.2, -3]}>
                <mesh>
                    <planeGeometry args={[2, 2]} />
                    <PortalMaterial color="orange" />
                </mesh>
            </Entity>
        </World>
    );
}

Where it runs

Client. The portal changes nothing in the world; each player’s browser draws its own. What stepping through it does is the game’s.