The Shader Planetarium

A mentoring project in collaboration to get to know the realm of shaders in computer graphics.

Contributors

• Jan Schwegler
• Dominika Degtyareva

Table of Contents

• 1. Tech Setup
• 2. How to install and run
• 3. Shader Basics
• 4. Shader Knowlege aquired
• 5. Resources
  • 5.1. Three.js
  • 5.2. Shader
• 6. ToDo

1. Tech Setup

• Three.js
• Vite
• GLSL
• HTML/CSS/JS
• Node.js
• (WebGL)

2. How to install and run

1. Clone the repository

   git clone https://github.com/JustRaika/Men5.git

   -> Alternatively, you can download the ZIP file from the GitHub repository and extract it to your desired location or do it via Github Desktop.

2. Navigate to the project directory

   cd Men5

3. Install dependencies

   npm install

   -> This project requires Node (v20 or higher) and npm (bundled with Node.js). If you don't have Node, please download and install it from https://nodejs.org/.

4. Start the development server

   npm run dev

5. Open your browser and go to http://localhost:5173/Men5/dist/ (or the URL provided in the terminal). Ensure the port is available.

3. Shader Basics

All project setup research is recorded on our Miro!

The technical research for the shaders can be found is our Wiki.

4. Shader Knowlege aquired

• Shader languages: GLSL
• Shader types: Vertex, Fragment, Compute
• Shader platforms: WebGL
• Shader editors: Shadertoy
• Uniforms
• Setup and Include
• Varyings

5. Resources

5.1. Three.js

• [https://threejs.org/] - Official 3js Website has good documentation too.
• [https://janschwegler.github.io/di-men3-three.js/dokumentation/dokumentation] - Three.js Basics of Jan's previous mentoring project

5.2. Shader

• [https://thebookofshaders.com/] - An excellent resource for learning about shaders from the ground up.
• [https://www.shadertoy.com/]
• [https://aerotwist.com/tutorials/an-introduction-to-shaders-part-2/]
• [https://webgl-shaders.com/index.html]
• [https://www.geeks3d.com/shader-library/] - A large collection of shaders
• [https://github.com/vanrez-nez/awesome-glsl?tab=readme-ov-file] - A curated list of awesome GLSL libraries, resources and shiny things.
• [https://github.com/stegu/webgl-noise] / [https://stegu.github.io/webgl-noise/webdemo/] - Noise Chunks for WebGL
• [https://iquilezles.org/articles/] - Everything and really really advanced Math
• [https://catlikecoding.com/unity/tutorials/] - Unity Tutorials
• [https://blog.42yeah.is/] - Shader, Math and Algorithms
• [https://www.youtube.com/@acegikmo]

6. ToDo

• Slay the shaders
• Turn off mobile support
• Make spheres clickable to show info about the shader
• Background stop when on about page
• Page Load Animation
• Add sounds (ambient music + interaction sounds)
• Make particle field smaller