3D Guitar Pedalboard
.++--++.
## #+
##+ ##
+#########.
. ############ -..
.. -- .. ....#####++ ++.---..++--++.
. -.....#####. #- .## #+
..----------------.+#####+---+##+---##++..-+##
.. -##########+ +##########+ ..
..--------------------------.########.-############--- ..
.. ####---############-. -.
+#--------------------------------------+--############-----...
+#######. .#########+-. .....
+############-------------------------------------++++++----.......
+#################+ -..----- ..........
+######################+.------------------------.-+###--. ............
-###########################+- -..###+ ..............
-#################################+----------------.. +#- ...............
-######################################+. .... .#+. ................
.###########################################+..---.... ##-.-+-...............
-. .###########################################+ .-... +#+..+# ..........-.
-..----.#######################################--.....-##-..+#- ## ........-.
-.....-. +#################################. ......##+...-#. ## .......-.
-........------############################---.... -##-.....+# ......-.
-...........-.. .#######################- .......##+................-.
--............-.----+#################+--......###-...............-.
..........-----.-. +############+ .......-##+...............-.
--+++.....-#####+-..-.----########--...... ###-..............-.
---+####.########+-....-.. .### ........+##+-.............-.
------###########+-.......-.-----......-###-.............-.
---------+######--...........--.......+##+-............-.
-----------+######...........--.....-###-............-.
.+-------------+####+-.......--....+##+-...........-.
.+--------------+#####.....--..+###-...........-.
.+--------------+#####-.---+##+-..........-.
.+--------------#########-..........-.
.+--------------+###+-.........-.
.+---------------.........-.
.+------------.......-.
.+---------.....-.
.+------...-.
.+---.
.-.
Built in 2022, using React Three Fiber for 3D graphics and the Web Audio API for real-time audio processing, this web application simulates a real guitar pedalboard, offering a new, intuitive way to experiment with guitar effects.
The application features a wide range of guitar pedals, from basics like digital delay and chorus to advanced ones, such as a fuzz pedal modeled after real-life schematics and a looper pedal with features like recording, reversing, slowing down and layering audio. This makes it a creative tool for musicians and enthusiasts who want to explore sounds in a more natural and immersive way than traditional menus and sliders.
Pedal parameters can be adjusted by interacting with 3D knobs and switches. Audio processing is done in real-time, and any changes to the parameters are immediately reflected, making the experience feel natural and responsive.
Pedals can be freely dragged around and placed in any order on the board, allowing users to explore a wide range of unique sounds by experimenting with different combinations of pedals and their parameters.
Users can save their pedalboard configurations and share them with others through a community tab. Shared settings can be saved for personal use, making it easier to explore new ideas.
All the models, from the pedalboard to the knobs and switches on pedals, were created in Blender. The textures were designed in GIMP, using normal maps and metalness maps to simulate detailed 3D surfaces without increasing the polygon count. Additionally, ambient occlusion maps were generated to simulate complex lighting and shadows. Combining these techniques together resulted in photorealistic graphics and optimized performance.
Working on this project was a valuable learning experience, as it marked my first time using both React Three Fiber and the Web Audio API. The process challenged me to grow as a developer, pushing me to explore new technologies and deepen my understanding of 3D graphics and audio processing.