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.

Its props are in PortalMaterialProps.

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 has no portal; creators build one from parts, a Beam and a ParticleEmitter. Unity, Unreal and Godot ship none either; 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 "@daniel-zarinski/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.