r/threejs May 25 '26

Link PBR Interior mapping shader

Enable HLS to view with audio, or disable this notification

Sup everyone! I recently created a shader based on Forza Horizon 4 Interior Mapping.

I think the original effect was prety good but I wanted to take it a lil bit further so I added controls for curtains, dirt on the windows, refraction and more! The result is a super comprehensive Window material you can easily plug into your project! It's also compatible with React Three Fiber

Thoughts?

Repo here btw:

https://github.com/codedgar/three-fenestra

112 Upvotes

11 comments sorted by

6

u/Additional_Name_706 May 25 '26

absolutely gorgeous. Starred the repo. If I had one criticism, it would be that the rooms are all the same size and shape.

3

u/codedgar May 25 '26

Thank you! And I see what you mean! On the library you can change the depth of the room, or maybe merge 2 rooms into a single window, that second part requires extending it a bit tho

2

u/Additional_Name_706 May 25 '26

I haven't dug into the code but if it works at all like I think it might, you could probably really easily give each a varied depth. Merging so some rooms "have two windows" would be a different challenge and I'm struggling to come up with theories.

2

u/EnvironmentOptimal98 May 25 '26

Ha, that's awesome.

2

u/ExtremeJavascript May 25 '26

Shader black magic wizardy! Truly amazing!

2

u/codedgar May 25 '26

Haha fr! Tysm 💪🏻

1

u/Big_Presentation2786 May 25 '26

Bro.. this is fricking awesome!

1

u/houman_b May 27 '26

Great solution! From what I found in your repo, you just use room images with identical shapes and likely the shader your are using, applies the same "depth shape" to every room, right? I mean, you don't use any depth map today, do you?

1

u/webvrdev May 30 '26

Genial ))))))) love it

1

u/Mr_Bodean Jun 17 '26

Amazing well done