Readme update and changes

✦ I added preview photos i spent a lot of time managing my files lol i suffered to get the right photos
✦ I recorded a demo video and uploaded it to youtube and put it in my readme
✦ I fixed some stuff but i don’t know if they were causing any issues and i changed the tech section in my readme because it sucked and the credits too and i changed some other stuff in the readme it was a lot of pain cuz i didn’t know what photos i should pick to upload and my ssd space is full only 600mb is left

Changelog

• Hopefully this fixes anything
• Updated the demo url to my repo youtube demo
• logo fix readme update
• Second readme update
• Initial readme update
• CDN update

What i spent doing

✦ Well i spent most of the time doing the tranisiton animation i had the idea in mind so i just executed it and then applied the animation on it using gsap and yeah that’s pretty much it, i seprated each letter so i can get the fading animation and it actually looks sickk and i like it but i hope it doesn’t glitch or anything

Sound engineering

✦ So i used fl studio to make this pad sound for the transition animation between pages it’s just two chords and i added some reverb and did pitch modulation and that kind of stuff

Optimization

✦ I removed unused fonts and uploaded my new sound effect to the CDN and using it
✦ Changed logic execution for the warning and i’m also gonna record my demo video so i can upload it to my repo
✦ Created a new file called test js and deleted it to test the animation and make it before i put it with the main file

Changelog

• CDN update
• I added an animation in between pages and created my own sound effect in fl studio and integrated it with the animation

Designing

✦ I’m not a UI/UX designer but i like figma so i spent quite some time designing my warning cards i don’t like how they turned up but they’re not bad
✦ Also figured that adding a github logo in the homepage would fill an empty space in the navbar

Optimization

✦ I updated the CDN cached files more than once because i lowered the size of my audio samples and then changed my fonts from ttf,otf to woff2 because it smaller and more compatible with browsers

✦ I added this github logo as said in the designing part

✦ I was trying to get everything ready and faster because i don’t want the user wait 4 years for the site to load or wait for any audio to fetch

✦ So i used a method to fetch audio samples in the background when the user first enters the site and the site renders

✦ Removed the youtube url fetching thing because i couldn’t get my backend to work at all it’s hard to bypass youtube restrictions that’s why i added more audio samples

✦I also spent some time implementing my design in figma which was fun tbh

✦ Spent some time going back and forth because the audio samples weren’t updated on jsdeliver CDNs since i haven’t purged the old files and they have the same name i just lowered the files side

✦ Fixed some stuff with the css too the github logo wasn’t deleted after the webpage shift i have a class called disposable i add it to every thing that will should be deleted after the page shift so it’s easier to manage

I’m considering to add a cool text or something between the pages transition

Changelog

• commit/3c3dd57
• commit/3aa51dd
• commit/821ee93
• commit/d1ee26b
• commit/167acbf

Optimization

✦ Commented most the code im not using that could have been a huge bottleneck for performance and changed when the audio plays
✦ added the meta tag for viewport
✦ Tried to comment parts of my code and push to the repo so i can test the website from my phone and try and find out what’s causing the most lag
✦ Changed the icon so it’s transparent and also changed the audio file i made it more effient how i play it
✦ What took me long was that i kept commenting and recommenting the code and also trying to change some stuff but it didn’t work out
✦ My next plan is that im gonna setup backend for the youtube audio fetching and push that to heroku and also designing a warning so people with bad graphic cards or no graphic cards get that warning

Changelog

• More optimization and cleaning of the code
• testing and changed the audio play a bit
• Fixing responsivness
• Trying to figure out what’s causing the laggness

Finally, Added the loader

✦ I have made this random opacity stuff to the loader and it kinda looks okay
✦ i feel like it’s pretty decent though but it shouldn’t have taken this long but i was trying to figure out exactly what i wanted to do that what took long
✦ I made sure the little audio vis in the navbar works too and removed some stuff from the main html file
✦ I changed also some stuff related to the scroll feeback and tried to add an animation but deleted it and made sure everything else works

Changelog

• THE/commit/9ea35a3

What im trying to do

✦ I have made a pretty cool loader but couldn’t integrate it with my website because i’m using await and load my 3d models but at the same time im using requestanimateframe so the animation for the loader stops
✦ i like to start in new files whenever im trying to create something like a loader so it’s seprate from my main files and so it’s cleaner
✦ This is taking too much time because im pretty dumb and this shouldn’t have taken this long but i’ll give another go and i hope it turns out the way i wanted it
✦ I’m enjoying the journey though i’m kinda turning my brain off which is causing why i can’t fix these bugs but i’ll change my drawing method maybe or i don’t know
✦ i tried to create another loader at the start of this devlog session but i realized early that it won’t work
✦ optimized the draco loader and the geometry for the second statue

Changelog

• THE/commit/0287a1f

Optimization

✦ I used jsdelivery CDN to host my 3d models because the website took too much to load honestly

✦ Made it so that if someone’s device was running on lower than 500 fbs the rendered particles number decrease

✦ Removed a library i wasn’t even using

✦ Clearing a lot of console.logs xD

✦ Still considering to upload my audio files or something

✦ Added a scrollfeedback at the right part of the website so people know where they are in the scroll and i used figma for the design and exported the svg for it

Fixes (Too much problems )

✦ made the audio on autoplay but muted
because that seems to be the way to make it work since chrome doesn’t allow autoplay with audio so the user have to interact with my website so the audio starts

✦ FIxed the css for the small audio visualizer in the navbar because it wasn’t centered and that’s because i removed tailwind from my project so it was centered but because i removed tailwind it got misaligned

✦ Also fixed a problem with the statue placement someone who tried my website got that problem so i fixed it. the statue was basically visible though it shouldn’t

✦ fixed the user select for the navbar text and i can’t remember what else i did but mostly i took long because of the scroll feedback animation since i had to hardcode it

Changelog

• THE/commit/6d8417b
• THE/commit/70284d8
• THE/commit/781c3d6
• THE/commit/ac090e1

Deployment

✦ For the first time the updated version of my website is out there ohhh that was hard

Optimization

✦ i compressed my 3D models with draco and used blender to convert one of the 3d models from .stl to glb i don’t know how the 3d models looks the same though it went from 70mb to 1.7 mb lol and optimized rendering

✦ I cleaned up a lot of code and removed unnecessary imports of some addons like pointerlocker

Fixes

✦ fixed the autostart for the audio after i pushed my files i figured the sound wasn’t working lol so i had to look stuff up about chrome disabling autoplay on refresh

✦ Fixed so the particle background is visable on phones but now after i tried again from my phone it doesn’t work because of the particles size i think or because there are too much particles the mobile gpu can’t handle it

✦ kept fixing the css for the website because i removed the tailwind cdn import which isn’t perfect for production

✦ Also had two imports of the same instance of three js so i removed that

STruggles

✦ PHewww i need someone to teach me how to commit properly because i had repeated commites which i caused but didn’t know i did so i kept communicating with chat gpt to help me restore my files

Changelog

• THE/commit/a1c3273
• THE/commit/720b51a

What i did

✦ OHHHHH I just finished glueing everything together it was terrible since i had to deal with a lot of old code and seeing my old mess gave me headache
✦ I added a text that appears after the user enters the website within 3 seconds so they know they should click on the statue to go to the visuallizers
✦ I merged all my code together since they were scattered all over the place and cleaned a lot of ai comments and cleaned stuff i commented
✦ I added the oscilloscope visualzer to the rest of the visuallzers
✦ Added a new sfx to the last bit of the animation it’s from a tv show called severance i liked this part a lot lol
✦ Added a new audio sample and i’ll probably add more

✦ Fixed a lot of html problems removed the elements from the html file and injected them from the js file to make things easier
✦ Fixed the nav bar it was kinda glitchy a bit

✦ I made sure nothing breaks by adding logic to prevent the user from going to the visualzer without clicking on the statue
✦ repositioned the camera when you enter the vlow visualzer so it’s like a ball talking to you
✦ Moved the test files outside of my folder
✦ It took me some time to get the statue text right and i had to download a lot of fonts and try them untill i find something i like but at the end i used an old font i had and also went back and forth with chatgpt to get the animation right i made it write some of the shaders for me
✦ also made so that any of the statues would work for the animation to start

Changelog

• THE/commit/b178f96
• THE/commit/89c2722
• THE/commit/1c7d92b

Improvments

✦ I have added the mouse interactivity with the light position I watched a video on how perspective camera works in a scene and it was mind blowing since i like math and it was all math i used the z distance between the light and the camera to know how much i should change the y and x values
✦ I have added sound effects to the buttons i’m kinda picky so i haven’t decided whether i’ll keep this specific effect or not i’ll probably find something that fit
✦ I want to also add a flickering sound effect in the background

Failed attemp to make a reveal effect using mouse hover

✦ I tried to add a new material to my statue to make look glassy and icy it looked fabulous but i couldn’t make it interactive with the light and it was a heavy cost for performance so i deleted it
✦ I should probably hurry up since i don’t want to take so long polishing this i want to get my stuff together

What i added

✦ I have tried to think of ways to make the mouse interactive with the scene i have added interactivity with the particles in the background but i don’t like it though
✦ I also added an instruction text so the user knows they should scroll
✦ I played a bit with the shader of the statue but i just didn’t know exactly what i was gonna do with it and it was heavy so i didn’t add it i want the homepage to be smooth a bit so everyone can try it

Failed experiments

✦ The shader of the statue i spent quite some time trying figure out a way to pass the mouse movement to the vertex shader of the statue but i couldn’t do it because i would have to override the original shader
✦ I tried a lot of stuff with the particles-mouse interactivity and i still don’t like the way it is now
✦ I tried to add gloom effect for the whole scene but it was just gonna be laggy and will take away how my homepage looks right now so i didn’t do it

Considering to add

✦ I’m currently working on the mouse interactivity with point light position i saw a project online with a great one but i tried to use it and it didn’t work so i’m doing it myself
✦ I’m adding like a scroll feedback so the user knows where they are at of the whole scroll so they can navigate the animation smoothly
✦ I’m still working on figuring out a way to add sound effects to buttons i want it to be light though but i’ll see

What i did

✦ I added gain flickering to the audio in the background and made it interactive with the scroll animation
✦ Trying to fix my github repo LOL i don’t know what i have done but im pretty sure i messed up the commits
✦ Fixed some bugs with the opacity and made sure stuff wont break when scrolling
✦ Made so that the animation start when you click the statue i don’t know if it’s noticable i’ll see what i can do

Changes i’m considering to make

✦ I might also add a scroll feedback on the right so that the user knows when to stop scrolling to see the animation how i saw it or how i intended it to be
✦ I might change the animation start button because i don’t think people will notice that you can click on the statue
✦ Also i’m still thinking what to add to make the mouse interactive with the scene I’m not sure it’s gonna be the lighting or something in the shader but currently im trying to merge the files together so i can finally finish the project and make it ready

Changelog

• /THE/32ba6fb

Fixes

✦ so i had tons of problem starting with the scroll trigger container it had a problem is that i didn’t understand how to works excatly but i figured it out
✦ i had prblems with the animations they weren’t the best and the fading of the sphere sucked i spent quite some time fixing those

Improvments - features

✦ i added this cool flickering effect i kinda got the idea by accident i broke my gsap transtions one time and i saw the flickering and i liked so i added a math.random to the opacity value
✦ Didn’t do much actually except for fixing the problems and optimizing the page
✦ i’m getting the page ready so i can add the oscilloscope visuallzer i made earlier

Changelog

• /THE/6105080

The new visualizer

✦ I spent sometime trying to understand how everything works but i gave up lol i tried to use a shader i got online i’ll credit the person in my repo but it didn’t work quite how i wanted it so i asked chat gpt to write the shader for me he gave a good one but i still had to edit the render frame rate to make it look smoother

What i’m trying to do

✦ I’m trying to add a midi keyboard or smth similar I might not add to since i want to get the fundamental done first i still have to integrate the homepage file with the scenes file
✦ I still have the last scroll trigger animation to make it’ll be this visualzer

Learning

✦ It’s somehow complex but only because im trying to write code without planning i might try and wrap my head around this but after i finish because i really wanna get this done
✦ One of the coolest stuff i have ever encountered is the web audio api it’s freakin amazing thought not the best i have some knowlenge in music production so it’s decent

Changelog

• commit/a86d3cb

New stuff i’m adding

✦ So I have created a new file where i’ll be creating my next and last scene hopefully It’ll be a raw visualizer oscilloscope
✦ I also might add a new statue i found what i want to add it’s a statue of david michelangelo im not sure if i’ll add it or not i might not like it but i’ll se

Learning

✦ I’m learning more about audio buffers and audio samples and how digital audio gets recorded and how The Fast Fourier Transform work
✦ i have been watching some content on youtube to get a better grasp at this but it’s not easy tbh I’m also asking chat gpt to simplify things like this and how exactly they work
✦ Getting better at three js and learning more about geometry it’s actually my first time understanding how cameras work in 3D which is AMAZING!!!!!! It has math involved and i just love it
✦ Learning more about shaders since I’m using it almost in everything i’m also using someones tutorial to write the visualzer shader im gonna depend on it untill im ready to take off on my own I’m trying not to just copy and paste their shader i want to understand why it works and how to build it from scratch
✦ First time hearing about fullscreen quad and it’s basicallly A way to make three js render a 2D screen, it’s basically a plane that fills up your whole screen whatever you do and a lot of new stuff i’m learning along the way and i need to finish this project asap!!!

Changelog

• commit/42bad4c

Technical things i added

✦ added a scroll trigger animation
✦ added a scene from one my visualizers
✦ changed the shader of the homepage’ background
✦ styled the nav bar (Still not finished)
✦ a failed attemp trying to add my scene as a texture

I hope this’ll look great when i finish it because it’s good so far

Stuff i learned along the way

✦ Not my first time using gsap but this is the first time me using it with a clarity i’m using their docs to understand how everything works
✦ Made a bit of research on scroll triggers because i didn’t quite understand exactly how they work
✦ Getting better at memorizing tailwind syntax lol

CURRENT TASK

GETTING THE HOMEPAGE READY FOR INTEGRATION

Improvements

✦ I have used a noise function to get this cool look i used one online i didn’t write the code for it since they’re complicated
✦ I’m still trying to improve the overall homepage and adjusting the light and all of that stuff
✦ Fixed some light bugs

CURRENT TASK

GETTING THE HOMEPAGE READY FOR INTEGRATION

Inspiration

So i saw a video on instgram with impeccable vfx and he did something like what i did here but i still haven’t got to half what he did

Application

✦ added these visualizer with planes geometry first
✦ then changed it to buffer geometry
✦ i spent the 7 hours doing this and trying to fix my post processing effects but no luck till now
✦ I experimented a lot at first with planes geo and different noise functions

I have added statue text and description for the statues i watched a youtube tutorial for the layout of the text
im also trying to get the lighting right i haven’t thought what it’ll be like
I’m planning to add a particle visualizer but a crazy one

What i did ( Learning more about geo and 3D)

✦ Experimented a bit with planes and vertices and textures to understand how geometries and UV mapping work which was terrible and i didn’t really understand a lot

✦ I have added these two arrows that allow you to switch between statues , im still polishing them and making them work properly

✦ I have tried to add a mouse raycast to control the light but failed miserably so i’ll give another try late

✦ Spent some time changing the camera position and lighthing position still working on it

Failed experiment

✦ I tried a couple of things i tried to attach scenes to planes to make some kind of a room full of scenes but that didn’t work out but anyways i spent sometime figuring out how to adjust this navbar with this sine wave visuallzer using math i made it It’s wasn’t hard but i had to handle when the user pauses the song and start it again
✦ The sphere kind of room i couldn’t do that as it was hard to render the scenes as textures and had a lot of problem with the geomtry of this anyway

Here is what i did

✦ I have adjusted the lights still not finished because i don’t know what exactly i want
✦ Added a sphere i kinda want to make my scene attach to the sphere surfuce so user can toggle between them and im still figuring that out
✦ It took me so long to get the sphere right and as you can see in the photo im trying to attach my scenes as a render target textures on the geo of the sphere but it’s not going as smooth as i thought it would be since you can’t control the scene even setting up the position of these planes are a huge pain
✦ I added helpers and transform controls to everything so i can visualize and edit and move stuff around in real time and it’s making my testing environment better

Setting a testing environment

So i have been trying to set up a testing environment so it’s easier for me to move the 3d objects and control light settings and trying to find the best place to put the camera at and i have imported two greek objects im inspired by a project with similar statues but im doing my own thing and i have added light control using gui and yeah i hope i don’t
mess this up i might change the staues in the future

Statues

i downloaded these statues online i found them after a lot of strugle
i added rotation to the statues and will add position transtion in the future three js is just great and have infinte possibilities these will be the main statues in my homepage and i also added keyboard controls like i made the letter “s” switch cameras

I’m experimenting with three js and reading the docs trying most of the things to understand better i didn’t do much except trying things and different lights on object the cube attached this wasn’t the only thing i did but i kept trying stuff i also removed the old curve stuff because it didn’t work as expected and was just too complicated

Experimenting with the homepage

So things didn’t turn out to be the way i wanted it to look so im thinking to just start all over again and maybe learn the basics again. im trying to create a landing page something creative i dont know what i’ll do yet
i tried to add my scene as a texture but i couldn’t so i would have to add the actual meshs inside these scenes but that will overload the website since i have some heavy scenes im having fun experimenting with this but I dont like the results yet

What i did

So i created a new file in this project just to start fresh
I’m trying to create a transition between different scenes it’s hard because i don’t know what i want to do
i have struggled a lot with applying this i still don’t understand a lot of three js works i have to dig more in their docs but

Cleaning

I removed two features from a scene and added this path this will be the homepage , these rings are going to be my scenes and you choose which one you wanna enter but i hope this would work i don’t know how i’ll add my scene to this curve it might even not work