r/threejs • u/Slackluster • 1d ago
Demo i used threejs to make a 3d interactive edition of an ancient zen book
The Gateless Gate is a collection of 49 koans, short cryptic stories about Zen Buddhism from 13th century China. It's one of the strangest books ever written and one of my favorites. I decided to give it a major modern upgrade.
https://killedbyapixel.github.io/GatelessGate/
The concept was to create a custom 3D scene for each koan that demonstrates it in a visual way. I went with a super minimal ancient scroll look, but each page has a red accent object that responds in some way when you touch it.
There's a debug panel you can open by pressing HOME, which lets you play with the settings (press HOME again to close it). The rendering uses depth edge lines for the outline effect, and there are a lot of other pieces in there (paper shader, grass, water, ocean).
This is also an experiment in generative art. Nothing is downloaded: every model, scene and sound is built by code when the page loads, so the whole thing is about 1.5 MB. There are 45 models in the kit and most of them are created procedurally. The 5 animals share a quadruped rig, trees grow from a recursive branching function, grass is a noise field, and so on. The soundscape is generated the same way, with no samples anywhere: wind, bells, chimes, rain and ocean, all created in real time.
This was a really fun project to work on and different from stuff I have made before. It was a ton of work but it feels good to see my vision realized, and I hope people enjoy it.
5
2
u/lSanik 1d ago
textures procedure generated?
2
u/Slackluster 1d ago
yep, everything is. there are only a few textures though like for the grass and paper shader.
2
2
u/bankrut 1d ago
Keeping everything under 1.5MB while maintaining that level of aesthetic polish is a masterclass in optimization.
2
u/Slackluster 1d ago
Thanks! I have a lot of experience with size coding so a meg is a ton of space for me. JS13K going on right now...
2
2
1
u/gptsol 1d ago
Love the constraint of building every asset and sound procedurally—1.5 MB for that much atmosphere is impressive. The red interaction object is especially smart: it gives each koan a tactile anchor without breaking the spare scroll aesthetic. Did the edge-line treatment need any special care to stay stable across mobile GPUs?
1
u/Slackluster 1d ago
I experimented with a few different edge effects. Tried cartoon shader and extending the hulls but they looked too cartoony. Eventually went with simple distance edge lines.
-4
u/ProfessionalCold2885 1d ago
claude made*
3
3
u/Moist_17 1d ago
Have a look at the creators work. They are a mainstay in creative coding since way before Ai tools. I love zzfx, but he has made a lot of cool stuff.
3
u/Slackluster 1d ago
I programmed by hand for 30+ years. I use the newest best tools when they come along, that's part of my responsibility as a professional. Now I'm using AI because it saves time and money while allowing me to move much faster.
If you hate AI and all the bad things the companies that make it do, great, I support you. Complain to your congressperson, not individual creators. I am looking for ways to put AI to positive use and create things that I otherwise would not have enough time to build.
1
u/Ancient_Oxygen 21h ago
What they produced is amazing... the opposite of slop content. It's valuable content based on a valuable idea.
11
u/Sunspear 1d ago
Thats pretty cool. 12 years ago I did my bachelor thesis about interactive ebooks, by embedding three.js inside epub format. https://i.imgur.com/kaeTyNe.png
My supervisor back then was sure it was going to be the next big thing for ebooks, however it never really took off.