Galactify
Galactify is a German startup that created a platform to manage ideas and goals intuitively with a 3D interface.
Since january 2022 I'm currently part of the Galactify team as a freelancer and my role is to take care of the front-end of the project. I developed the 3D shaders that render the 3D interface, parts of the user interactions, I also took care of the optimization of the rendering using some smart way to improve poly counts and batch counts. I implemented some interesting algorithms, like an orthogonal edge connections behaviour, that allows to connect nodes in a 3D space in a way that the connections are always orthogonal to the nodes. I also worked on the UI of the project, creating some custom components and animations.
- Year
- 2022
- Area
- 3D Web Experiences
- Stack
- react three fiber, three.js, react, typescript, glsl, webgl, shaders
Orthogonal edge connections
I implemented an algorithm to connect nodes together that always keep the lines orthogonal both for x and y axis and also z. During the connection process, the lines automatically calculate the shortest orthogonal path and auto update the lines. The size of the nodes is also kept into consideration
Shader Development
The shader I implemented for rendering the nodes has many features. The rounded angles can be changed independently, the shape of the geometry can be changed via shader (without have to render more vertices), the borders have an antialiasing blending effect that changed based on the camera position to avoid artifacts, the outline of the selection frame is made via shader, composed by multiple elements to create the specific rounded angles
Mesh And Texture Optimization
The mesh is a custom buffer geometry made by just 4 vertices, the textures use a compression algorithm (ktx2) and this help a lot the optimization
All projects · Next project: Kreativa Bryan