Portal with PNG Masking

A portal effect using PNG masks for depth and parallax.

< Back to templates

This example shows how to use PNG masks (a PNG with a shape cutout) assigned to a plane to create a depth parallax effect. The effect is achieved by setting the Color Write property of the material to false. To customize this example, simply import a new PNG mask and update the source property of the mask image texture. The transparent area within the mask is small by design (and therefore higher resolution), since the entire plane acts as the mask.

This masking effect works well when coupled with tracking types, such as image or world tracking. A simple parallax effect can be achieved by changing the z position property of other scene elements (foreground and backgrounds, for example).

This project includes a default splash page - a 'launch' screen shown to the user when they first land on your page. It's important for both technical and user experience related reasons. You can customize it in the index.html file.

Rendering Engine

three.js

Supported Browsers

Google Chrome
Microsoft Edge
Safari on iOS and MacOS

Scripting Language

TypeScript