CONCEPT: Loading Screen

Hey all! This isn’t gonna be a normal devlog, but rather a quick update on something I’ll be hoping to add to the app. I’ve been tossing around a couple loading screen ideas but I think I have a really cool one.

I want to mimic the Yandhi opening where an exploded view of a CD comes together and begins to spin. I think I can recreate that with my record player (or maybe just one vinyl, although that would be boring-ish?)

Since this animation is a little long, I’ll probably only have it play when the user hasn’t logged on in awhile or something.

Devlog #11: Chill Record Player

Spent all day adding a new table, and then using TypeScript to change the texture on it. I’m a bit worried about how I’m dividing the texturing between Blender and ts, as I have no rhyme or reason right now between which textures I delegate to which platform. Usually, the procedurally-generated textures are loaded in ts though. I also smoothed the grain on the bookshelf. The rug looks bad so I’ll work on that next, and then prepare the website for a MacOS app and implement more of the features I talked about in Devlog #9!!

Devlog #10: Chill Record Player

Made a much more simplified loading screen and recorded some sound effects. Truthfully, I haven’t had that much time to work on the website. AND, I wasn’t able to export my original idea for a loading screen without a watermark. I’m gonna try and make something better than this…

Devlog #9: Chill Record Player

A little hard to tell, but I updated the model of the bookshelf to be more visually interesting (extended the rails and added a metal base) and I also re-UV-unwrapped the bookshelf so the wood texture looks less stretched. I think I’m going to try and code something that blurs the texture a little though as the black parts are a little too dark for my taste. I was also thinking of adding this really cool animation I saw (see below) on Twitter to my loading screen, so keep an eye out for that!

Devlog #8: Chill Record Player

I implemented more major performance enhancements, specifically aimed at increasing performance on retinal displays. Since retinal displays have so many pixels, computers bundle individual pixels together into logical pixels. The ratio at which this happens is called DPR. A higher DPR means sharper images but lower performance. I capped the DPR at 2x on “High”. Other changes were:

• Capped FPS at 60 -> 45
• Added performance benchmarking to determine optimal settings for device
• Brought back temporal blur post-fx scan with extra leeway gained by reducing FPS
• Made “reflections on” default behavior
• Pushed more work to the loading screen

Further performance changes planned before standalone app release

• Seeing if there’s a way to smush the 8x post-fx render stack into fewer passes
• Decimating more geometry

Further ideas planned before app release:

• MAJOR: Letting user add more music
• MAJOR: Letting user add own props
• MAJOR: Tutorial/more tooltips
• MAJOR: Fixing flip animations upon un-focusing
• MAJOR: Adding zoom view to baskets
• MAJOR: Fixing audio bug between tracks (hard to pin down and test fixes, I’ll work on that tomorrow probably)
• MINOR: Generating normal maps for textures and replacing procedurally-generated floor
• MINOR: Modelling a better-looking table with legs that aren’t just metal poles lol
• MINOR: Fixing weird blur bug on the vinyl cover
• MINOR: Adding above-vinyl view that shows users where the start and end of every track is in different colors, allowing greater control over what songs can be played and when (see image below)

HOTFIX: Performance Enhancement

So I was messing around with the website today and realized it was maxing out my GPU, which I thought was ridiculous. It turns out I had been vastly underestimating the performance impacts of some of the effects I had on the website, as well as the meshes I was using. I decimated a model I had on top of the bookshelf but it was simply too many tris, so I removed it and implemented other code that made the default graphical settings less taxing.

Devlog #7: Chill Record Player

Last one before ship #2! Got everything in order, including uploading things to my site and adding some more props. Also fixed some pathing issues. I also kinda got rid of the blur… After adding HDRIs, it looked kinda like Garry’s mod lol

Devlog #6: Chill Music Player

Added a bonsai tree and started modelling other objects I want in the room. Pulled an all-nighter for this. While I was doing this, I realized that the file format I was using to render the room (glb) doesnt support specific node setups and textures. This essentially limited the realism of the textures I was trying to create.

To alleviate this, I’ll have to rely heavily on realistic lighting and things like glossiness. So, I decided that the lighting should be handled by an HDR and reflections be rendered in real time (I wonder how bad the performance hit will be on this). However, I also want to keep the day-night slider. This poses an issue, as HDRs are static images. This means I’ll need to write code to interpolate (probably just a linear ramp) between a couple HDRs throughout the day.

Now, I don’t know if this will give me the same very warm lighting I have now. I also intend to add reflections to the glass cover of the record player after I implement HDRs, but we’ll see…

Other changes:

• Removed emitted dots
• Performance changes
• Worked on modeling a new table behind the scenes (I modeled my dining room table a year ago but p sure I deleted it unforch)

Devlog #5: Chill Record Player

After a monumental amount of work, I’ve ported the geometry of the room (which I had originally written in typescript) into Blender. Hopefully, this gives me more control over adding more complex geometry into the scene like plants on the ground and trinkets on the desk before I export it as a GLB file. I really can’t emphasize enough how long this took; this literally doubled the amount of time I’ve spent on this project.

Anyways, some of you may have noticed that the scene in Blender looks pretty plain, though, and that’s intentional! I’m gonna handle the lighting and some of the texturing in typescript.

Some of the other features I’ve added/fixes I’ve done are a nicer settings panel, warm lighting, and reducing the crackle from the record player, which I heard was a little annoying. I’ve also added post-processing to the camera, including chromatic abberation, some bloom, and a grain filter which becomes more noticeable during sunset.. My next goal will be to add as much detail to the scene as I can in Blender to really make the scene come alive. That definitely means replacing the cactus-ish plant on top of the bookshelf lol.

Devlog #4: Chill Record Player

Since my ship, I’ve been working on more features such as a day-night slider (which I hope I can sync to the user’s time at some point), a remodeled bookshelf (this took awhile), and a better lighting system. I also added bins below the bookshelf for bulk storage of records after I friend recommended I do that.

Some features people have been asking for and my thoughts:

• Hosting your own music: until I set up a dedicated DB for this, this is not going to be possible. Once I make this a standalone app I’ll definitely implement that. Also note that I can’t add non-classical music here because 99.99% of non-classical music that is popular right now is not in the public domain.
• Tutorial: Yes! I’ll work on accessability
• Favoriting records: Yes, with the new bookshelf I can implement that

For now, I’m going to try and make the room feel warmer/more cozy by using volumetric shaders and introducing subsurface scattering on my models if I can do that without hurting performance.

Follow to stay updated!!!!

Devlog 3: Before first ship!

added a custom shader which allows the user to switch between what time of day it is. will get rid of the slider in a future ship but its the best i could do for now…

Devlog 2: A super chill music website

Over the past few days, I’ve been slowly chipping away at some QOL features. Users can now see which keystrokes can be used at any given moment and users can now inspect vinyls. Other features that were improved were the ability to move the arm of the record player with higher precision, and a top-down view which enhances that experience. Unfortunately, I had to change the records to be public domain in preparation for my first ship. MBDTF will not be avaliable, but maybe I’ll let users locally host their own vinyls! Ideas ideas ideas… Maybe this could also become a standalone app.

Planned features (either before or after first ship)

• Custom shaders -> Moody lighting or time of day slider with lamp u can turn on and off
• Ability to locally host music or add your own
• Way more records
• Ability to change record order
• More views for inspecting your records
• Improve the top-down angle to show when tracks begin and end on a record
• Ability to customize painting

A super chill music website

Recently, I’ve been kind of inspired by this Brian Eno quote:

“Whatever you now find weird, ugly, uncomfortable and nasty about a new medium will surely become its signature. CD distortion, the jitteriness of digital video, the crap sound of 8-bit — all of these will be cherished and emulated as soon as they can be avoided. It’s the sound of failure: so much modern art is the sound of things going out of control, of a medium pushing to its limits and breaking apart. The distorted guitar sound is the sound of something too loud for the medium supposed to carry it. The blues singer with the cracked voice is the sound of an emotional cry too powerful for the throat that releases it. The excitement of grainy film, of bleached-out black and white, is the excitement of witnessing events too momentous for the medium assigned to record them.”

For this reason, I’ve decided to build a chill music website for listening to vinyl records. Imo, the feel of interacting with music is just as important as listening to the music itself, and in an age of ultra-high-fidelity lossless downloads on Spotify, I think there’s something special about vinyl (and this is coming from someone who listens to a ton of Spotify). It’s taken a while to get this 3D view set up, and there are still a lot of bugs and sound effects I want to fix or implement to bring everything to life, but the challenge has been making the experience feel as tactile as possible. I look forward to seeing where this’ll go :)