In between client projects, and downtime during the pandemic, I worked on some experiments with WebGL and ThreeJS at Rōnin Amsterdam. This project was one of these experiments, and really got me down the rabbit hole of technical art. From custom shaders, procedural generation and performance optimization.
Scroll, or swipe
up and down,
to traverse
the worlds
↑
👆
↓
up and down,
to traverse
the worlds
↑
👆
↓
Multidisciplinary Engineering & Interactive Design
This process could take +/- 15 seconds.
Cyber City
2020 - Trying out different technical concepts in this WebGL experiment.
Project Information
Project duration: 4 weeks.
My roles:
• Technical artist
• WebGL development
• custom shader coding
• custom tooling
Tools used:
• ThreeJS
• Brackets
• custom build tools
Development Highlights
Everything (except for one small image) in this project is generated through code. Generated textures, (fictional) alphabet, logo text, building and vehicle meshes, animations, vehicle AI, city layout, VFX, etc. The total project size is 232kb, of which 50kb is the actual code, 180kb libraries (GSAP, THREEJS, CSS) and a 2kb image for the wave function collapse tile variations.
Here you see the image with the tile variations that are used in a wave function collapse pattern algorithm to generate the city layout. Every tile is 3x3 pixels, and has different colors represent city infrastructure.
🟥 = roads
🟦 = water
🟪 = bridges over water
⬛ = space to place buildings
🟥 = roads
🟦 = water
🟪 = bridges over water
⬛ = space to place buildings
The wave function collapse pattern algorithm generates a city layout. Then on top of this layout, generates multiple layers of data saved in different color channels used to determine building locations, height variations and visual style.
We need thousands of different windows with different interiors and lights to populate the buildings in the city, to have enough visual variation. To optimize performance, these textures are pre rendered to a buffer texture, instead of rendered directly using a complex fragment shader. We also generate an emissive and roughness texture version of the windows.
different Window types are generated in rows of 2, to have enough space to give high buildings enough variations for all the floors. The left side of the texture represents windows without direct lights (curtains / mood lighting). These are used for completely unlit floors.
THREEJS has camera frustrum culling, but no proper occlusion culling. So I created an algorithm that occludes detailed buildings based on the framerate and view distance. But keeps landmark buildings in view. There is a simplified version of all buildings merged into a single mesh with a simple texture to make sure the silhouette of the distant horizon stays consistant, while blending in the detailed buildings in front.
A big part of creating the visual atmosphere is the custom post processing shader. It does a lot of heavy lifting when you compare it to the raw render output. It started out as a basic bloom fragment shader. But after a lot of trails and errors, and happy accidents, it turned into a rainy glitchy CRT effect to sell the cyber punk aesthetic.
There are hundreds of moving vehicles inside the city. All of them have a pretty simple AI algorithm. They use the generated city layout to detect where roads meet and the direction to travel in. When hitting a road intersection they use weighted randomization to choose the new direction. When vehicles come close to each other, they will avoid each other by moving up or down depending on the free area around them.
Many little details are added to the city. Streetlights are placed based on the road maps, while flying billboards move up and down based on the height of the buildings around them.
Rooftops are populated with different objects that all have their min / max scale offsets and placement rules. To keep things realistic and visually interesting. A fictional alphabet is generated to create billboards and building names.
Rooftops are populated with different objects that all have their min / max scale offsets and placement rules. To keep things realistic and visually interesting. A fictional alphabet is generated to create billboards and building names.
Project Links:
https://experiments.rens.work/cybercity/Project Credits:
Rōnin Amsterdam
Roles : Aesthetic design support
Roles : Aesthetic design support
Welcome! Choose your experience: