You are browsing as a guest. Sign up (or log in) to start making projects!

Threejs mountain

  • 7 Devlogs
  • 50 Total hours

An interactive 3D mountain landscape built with Three.js and React Three Fiber, rendered through the WebGPU renderer using TSL for custom materials and shaders.

Ship #1

Just shipped Mountain 🏔️ — an interactive WebGPU scene where a single 3D mountain morphs through four worlds: Snow → Night → Meadow → Ocean. Each has its own light, weather, and camera, stitched together by a GPU "energy wave" that sweeps up the peak and washes the next chapter in.

The fun part: it's one mountain mesh, not four scenes. A single shader paints all four looks, and every transition runs as per-frame GPU work — windy snow, glowing night, a meadow full of flowers and fog, an animated ocean with foam and a real lake reflection.

Built with Three.js (WebGPU + TSL) and React Three Fiber.

Best viewed in Chrome/Edge — switch chapters with the nav at the bottom 👀

🔗 https://2trung.github.io/mountain

  • 7 devlogs
  • 50h
Try project → See source code →
Open comments for this post

9h 5m 7s logged

last day was a grind, added the dynamic background transitions so the sky changes between chapters, did parallax for some depth (this little touch makes it feel so much more alive), and added the nav buttons so u can actually jump between scenes instead of just scrolling.

last day was a grind, added the dynamic background transitions so the sky changes between chapters, did parallax for some depth (this little touch makes it feel so much more alive), and added the nav buttons so u can actually jump between scenes instead of just scrolling.

Replying to @trung_nguyen

0
3
Open comments for this post

8h 19m 28s logged

new scene!! the ocean one with the island. this was probably the most fun so far. made an ocean wrapping around the island, added foam near the shore and scattered some rocks around so it doesnt look empty.

improved the water movement too, reused some stuff from the lake which saved me. coastal mountains in the back tie it together. starting to feel like a real place which is sick

new scene!! the ocean one with the island. this was probably the most fun so far. made an ocean wrapping around the island, added foam near the shore and scattered some rocks around so it doesnt look empty.

improved the water movement too, reused some stuff from the lake which saved me. coastal mountains in the back tie it together. starting to feel like a real place which is sick

Replying to @trung_nguyen

0
4
Open comments for this post

15h 44m 59s logged

added a LAKE today. the meadow scene needed water and omg the reflections were a nightmare. like genuinely the water looked like cursed plastic for hours before i got it looking semi decent.

stuff i did:

added the lake
water reflections + surface (the pain)
blended the terrain around the shore so it doesnt just clip into the water
threw in some fog for depth, instantly made it look 10x better honestly
fog is so underrated it hides all my sins

added a LAKE today. the meadow scene needed water and omg the reflections were a nightmare. like genuinely the water looked like cursed plastic for hours before i got it looking semi decent.

stuff i did:

added the lake
water reflections + surface (the pain)
blended the terrain around the shore so it doesnt just clip into the water
threw in some fog for depth, instantly made it look 10x better honestly
fog is so underrated it hides all my sins

Replying to @trung_nguyen

0
2
Open comments for this post

7h 20m 20s logged

2 of the 4 scenes are basically done now lets gooo. spent today on lighting mostly, the first version looked super flat and depressing so i messed with it til it had some actual mood to it.

also kept tweaking materials (probably spent too long on this, i keep going back and changing tiny things nobody will notice). and i adjusted the camera framing so each scene actually looks composed n not random. feeling good about progress

2 of the 4 scenes are basically done now lets gooo. spent today on lighting mostly, the first version looked super flat and depressing so i messed with it til it had some actual mood to it.

also kept tweaking materials (probably spent too long on this, i keep going back and changing tiny things nobody will notice). and i adjusted the camera framing so each scene actually looks composed n not random. feeling good about progress

Replying to @trung_nguyen

0
2
Open comments for this post

3h 47m 39s logged

short one today, was kinda busy w school. mostly worked on the transitions between sections, getting the camera to glide instead of snapping. took way longer than expected, transitions are deceptively annoying. polished a few other things and called it.

short one today, was kinda busy w school. mostly worked on the transitions between sections, getting the camera to glide instead of snapping. took way longer than expected, transitions are deceptively annoying. polished a few other things and called it.

Replying to @trung_nguyen

0
3
Open comments for this post

4h 3m 4s logged

todays the day it started feeling like an actual project. did the clouds!! they’re procedural which sounds fancy but i basically just spent 4 hours fighting with noise functions until something cloud shaped appeared.

animated them with TSL (still kinda new to me ngl) and wrote a custom material so they render right. also went back n refined the mountain peaks cause they looked too smooth/fake before. the vibe is slowly coming together, im hyped

todays the day it started feeling like an actual project. did the clouds!! they’re procedural which sounds fancy but i basically just spent 4 hours fighting with noise functions until something cloud shaped appeared.

animated them with TSL (still kinda new to me ngl) and wrote a custom material so they render right. also went back n refined the mountain peaks cause they looked too smooth/fake before. the vibe is slowly coming together, im hyped

Replying to @trung_nguyen

0
4
Open comments for this post

1h 42m 42s logged

ok so i finally started the three.js thing ive been putting off for like 2 weeks lol. spent most of today just getting the boilerplate going, canvas + camera + renderer blah blah. honestly the boring part but u gotta do it.

got my first glb model loaded in and it showed up as a giant black blob until i realized i had zero lights in the scene classic. added some lighting and boom theres my mountain. also made the canvas resize properly cause i hate when stuff looks stretched on different screens.

not much to look at yet but the bones are there. excited to actually make it pretty later

ok so i finally started the three.js thing ive been putting off for like 2 weeks lol. spent most of today just getting the boilerplate going, canvas + camera + renderer blah blah. honestly the boring part but u gotta do it.

got my first glb model loaded in and it showed up as a giant black blob until i realized i had zero lights in the scene classic. added some lighting and boom theres my mountain. also made the canvas resize properly cause i hate when stuff looks stretched on different screens.

not much to look at yet but the bones are there. excited to actually make it pretty later

Replying to @trung_nguyen

0
3

Followers

Loading…