Caesium Games · Version 1
The first version
This was the first version, on the old Caesium Games website. It has a blue glow around an image, with moving patterns made with shaders.
What I worked on
Shaders, particles, and layers of light.
A Three.js project
The Arcanyst portal.
A portal for Arcanyst, inspired by World of Warcraft. I've made three versions while learning more Three.js and GLSL.
How I made itVersion 3 · Current
The current version
The latest version, with runes, fog, and different effects when you click it.
Click the middle for ripples, or the rings for a different effect. Click runes to light them up. Seven lit runes trigger a bigger animation.
These are the portals from my older websites, without the rest of each page.
01 / The idea
Why I made it
I love mages and portals, and they fit with Arcanyst's story.
World of Warcraft is my favorite game. I wanted to use its portals as a reference for something in my own game and on my website.
I also followed Three.js Journey ↗ tutorials to learn more Three.js and GLSL. The portal gave me something to practice on, and I've kept trying to improve it since.
- My role
- Design & development
- Built with
- Three.js / React / GLSL
- Part of
- Arcanyst
02 / Versions
How it changed
I started with the portal on my old Caesium Games website. Then I made the Arcanyst version, followed by the one on this portfolio.
Arcanyst · Version 2
The Arcanyst version
For the Arcanyst website, I added four backgrounds that change automatically. The rings rotate, particles move around it, and clicking the portal spawns a lizard.
What I worked on
Changing backgrounds, surface distortion, rotating rings, and lizard animations and physics.
Portfolio · Version 3
The current version
This is the one on my portfolio. I added runes, fog, and more effects. Clicking the middle makes ripples, while the rings have their own click effect. When seven runes are lit, the whole portal reacts.
What I worked on
Refraction, fog, animated sprites, and effects for the runes and the portal.
03 / Details
26 separate runes
Each rune has its own SVG file. They're black so I can reuse them in other colors. On the portal, they light up randomly in blue or purple. You can also click them. Once seven are on, the bigger animation plays, then the cycle starts again.
More Arcanyst
Still working on it
I keep finding things I want to change or improve. That's why there are already three versions.