Three.js, GSAP, and Midjourney AI Tech Demo

Demo Source code

Table of Contents

• Introduction
• Organising the Scene with Layers
• Shimmering Sky Effect
• Water Effect for the River
• Menu Animation
• Conclusion

Introduction

I am a huge fan of the game Disco Elysium, so when pondering the idea of a new tech demo, I chose to create a game menu in the style of this game. I utilised Three.js and GSAP to create animations and Midjourney to generate textures in this project. In this article, I will walk you through the most interesting aspects of this tech demo, and you can always find more detailed information in the project's source code .

Organising the Scene with Layers

If you refer to the source code, you may notice that the scene is split into layers.

The idea was to break the application into separate modules that would be easily modified. For example, you can observe distinct layers for the landscape, city, smoke, and menu.

I won't delve into the code details here; it's rather straightforward. Each layer represents a class that inherits from the base Layer class with basic logic. Of course, it's possible to organise the code without inheritance and classes altogether, but this approach makes development a bit more convenient.

In each layer, we create mesh and geometry and subsequently control them in the main module, index.js, which contains the Three.js scene and the requestAnimationFrame loop

Please refer to the src/js/index.js and src/js/layers/ folder for details.

Shimmering Sky Effect

The sky effect is probably the simplest in this demo. We simply take a texture generated by the Midjourney neural network and apply Perlin noise to it. Typically, creating such animations involves a fair amount of experimentation. If you roll back to old commits, you'll see that the sky animation looked quite different. In WebGL effects, numerous tweaks are often required to achieve an interesting and harmonious effect.

Refer to the following modules for details:

• src/js/layers/landscape-layer/landscape-layer.js
• src/js/layers/landscape-layer/shaders/landscape-fragment.glsl

Water Effect for the River

The water animation is created using displacement textures and, once again, Perlin noise (yes, Perlin noise is an indispensable tool for creating organic effects).

In the shader, we create multiple waves and apply them to the UV coordinates of a displacement texture, which was also generated with the help of Midjourney. I must admit that GitHub Copilot assisted me in creating this code for the waves. AI is quite helpful in such tasks because creating a water effect using shaders is a fairly typical problem (where neural networks are utterly useless is in combining all the pieces together to get a finished implementation).

For details, refer to the following modules

• src/js/layers/city-layer/city-layer.js
• src/js/layers/city-layer/shaders/city-fragment.glsl

Menu Animation

I drew the menu smoke texture in Photoshop using a custom brush just by doing a few free random strokes. And can you guess what technique we use to make the smoke “alive”? You got it, Perlin noise! :)

We apply the GSAP library to animate the smoke when clicking on menu items. We only need to animate a float uniform value of the shader ( u_inflate.value ) from zero to one and back to zero when clicking on a menu item. From there, it's all about technique: based on this float value in the shader, we animate our smoke. Click handling and GSAP code are located in index.js .

Modules where the menu animation is configured:

• src/js/layers/menu-layer/menu-layer.js
• src/js/layers/menu-layer/shaders/menu-fragment.glsl
• src/js/index.js

Conclusion

In this Nordic Elysium tech demo, I aimed to capture the spirit of Disco Elysium through Three.js, GSAP, and Midjourney . Hopefully, it will ignite your passion for innovative web projects!

05/05/23