The Ebenezer
@th_ebenezer
Followers
2,029
Following
181
Media
133
Statuses
2,978
Helping Brands Stand Out With Unconventional Designs | 3D & Immersive Websites • DMs open for new projects
ImagiNation
Joined December 2020
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
ブロック
• 139291 Tweets
Bengals
• 106543 Tweets
うまい棒
• 85785 Tweets
Jayden Daniels
• 80249 Tweets
連休明け
• 67189 Tweets
GFRIEND
• 66718 Tweets
呂布カルマ
• 54157 Tweets
VOTA X KARIME
• 47050 Tweets
Karthi
• 41099 Tweets
刀剣男士
• 33704 Tweets
#沼におぼれる
• 23503 Tweets
ラッパー
• 21255 Tweets
イーロン
• 20268 Tweets
SATUIN SEMANGAT Pasti RIDO
• 19351 Tweets
SATUKAN Energi POSITIF Kita
• 18692 Tweets
インプレゾンビ
• 17536 Tweets
クロススカウト
• 16457 Tweets
コレクション缶バッジ
• 12322 Tweets
包丁くん
• 10087 Tweets
Pinned Tweet
Elysium is live now!!🤩
🌿Link : 🌿
I wanted to build the most beautiful 3D world on the
#web
. 6 months of hard work, dedication and many sleepless nights later, we are finally here!
If this post reaches 1k likes, 👇🧵
Tools used:
@threejs
,
#javascript
54
107
608
How I made The Fluffiest Grass on the Web!🍀
>1 BILLION Blades of Grass!🤯
I spent 200 hours researching how to make fluffy grass for the web! I wanted to use a technique that was simple, but extremely effective and performant.
Here's how I did it:
PART 1 - CPU Optimization
11
56
338
As promised, here's my very first tutorial on theatre.js.
Learn Theatre.js in 25 minutes.
Youtube:
Live Link: ⚡️ ⚡️
Built using
@threejs
&
@theatre_js
Topics Covered Mentioned Below👇
8
36
322
Happy New Year!🥳
🌟✨ Just launched a Three.js mini project inspired by the anime "Suzume no Tojimari"!
Live Link:✨ ✨
Created an Infinite Door and added in some grass and water. I love the random colours on the grass🤣
#threejs
#threejsJourney
8
31
219
Is this really on the web? 😬
Project Elysium - built with
@threejs
.
Will be releasing more breakdowns and walkthroughs from next week.
Had fun call with my friend Anderson, today, tweaking a few parameters and some settings! Here’s a preview 👇
11
13
157
How I Made The Fluffiest Grass on The Web!🍀- Animating and Lighting Millions of Blades of Grass
Here's how I did it: 👇
Part 2: GPU Effects and Optimization
(🧵0/8)
#threejs
#threejsJourney
#b3d
#webgl
11
16
118
I never knew this was possible. This person has cloned my project,Elysium, and is using it to promote a scam.
Please report the account.
If you have any recommendations on how to handle this situation, please let me know.
The last thing I want is for people to get scammed.
19
9
94
Part 1: Creating A Terrain
.
Posted on Instagram
@th_ebenezer
.
I’m making a 10 part mini video series on how I built Elysium, a 3D world as a website.
.
.
If you have any questions, comment below. 👇
.
.
#threejs
#javascript
#threejsjourney
#website
#b3d
#blender
7
13
93
I've been in the Batcave for a while now, planning my next move and working on a few secrets. I think its time I came back to the real world.
Here's a trailer of a project I made in collaboration with
@idsdotcompany
. A Bladerunner 1982 inspired website built with
#threejs
.
12
13
91
🌄Elysium: Going Live This Week!🚀
Stayed Tuned!
A huge shoutout to all the incredible folks who helped with the beta testing. Thank you.🙏😇
Here's a tiny update: The camera now follows a Player Ghost for a more smoother experience!
#threejs
#b3d
#webdev
#indiegame
7
12
85
🌊Stylized Water in Project Elysium!🤩
Today, I am playing with my Custom Water Material. This took me too long to build😭. Does it look nice?
Stay tuned for my next post where I'll be eating grass 🐄! HAHA
#threejs
#gamedev
#javascript
7
6
79
@syrupondisplay
@bruno_simon
@0xca0a
@3d_visionary
@Andersonmancini
@DaniGatunes
@KennyPirman
@N8Programs
@MaximeHeckel
@0beqz
@danborutori
@iced_coffee_dev
@ore_ukonpower
@misaki_mofujp
@OtanoDesign
In no specific order, these guys are THE BEST!
Will add more as I remember.
Thread 🧵👇
17
7
75
Elysium has been awarded The FWA of The Day! (Favourite Website Award of The Day)
@fwa
:
🍃Elysium: 🍃
After months of work, this really is a dream come true!🤩
Thank you everyone!
#threejs
#threejsJourney
#javascript
#webdev
11
6
69
I’m making a 10 part mini video series on how I build Elysium.
Part 0: Planning and Collecting Inspo
.
Posted on Instagram
@th_ebenezer
.
.
The only thing nasty here is my voice recording. Any tips on cleaning up recorded audio?
.
.
#threejs
#javascript
#threejsjourney
#website
7
7
69
Exciting news! After close to a year of hard work with the amazing team at
@paragonsNFT
, I'm thrilled to announce the Paraverse: A full fledged in-browser game.
Link⚡️:
Built with:
@threejs
& webGL with
@nextjs
.
#Web3
#javascript
#gamedev
8
9
66
Part 2 of the Fluffiest Grass Series is coming out tomorrow. We will be covering the GPU side of rendering grass.
If you missed Part 1, here it is 👇
3
7
65
I modified the default
@threejs
fog and created Stylized Gradient Fog. 🌿
This is similar to the type of fog used in games like Firewatch. Here, I am playing with the fog colors for the night scene.
Built using vanilla
#threejs
. Coming soon!
#javascript
#Web3
#gamedev
5
5
60
We made it!! Hard work and persistence pay off!
Elysium has won the Site of The Day on
@awwwards
AND
@fwa
! 😍 I am at loss for words! Thank you everyone!
The grass breakdown tutorial is coming out in a few hours! Stay tuned!😉
#threejs
#threejsJourney
#webdevelopment
#SOTD
🎉 Congratulations to
@th_ebenezer
for creating 'Elysium'! Immerse yourself in the tranquil beauty of this stylized nature experience. Escape to a realm of serenity and wonder. Check it out here:
#SOTD
#Elysium
#Art
4
5
35
9
9
64
We made a Blade Runner 1982 Inspired Website for RockTree Capital.
🏙️Live Link: 🏙️
100s of Lights, Camera Transitions, Volumetric Effects, So Many Videos all at once?
✨Breakdown Coming Soon!✨
#threejs
#threejsJourney
#webdev
#uiux
4
9
60
Have you ever wondered about the default parameters available in threejs (webGL 2.0)?
.
This post might save you a lot of time when writing shaders.
I did some research on this topic and here are my findings: 👇
(🧵0/4)
#threejs
#webgl
#threejsJourney
3
3
58
Theatre.js Tutorial: Animating a Bouncy Cube
Let me know if you need a part 2 where we link
@theatre_js
to scroll.
Codrops article:
Video link below ⬇️
As promised, here's my very first tutorial on theatre.js.
Learn Theatre.js in 25 minutes.
Youtube:
Live Link: ⚡️ ⚡️
Built using
@threejs
&
@theatre_js
Topics Covered Mentioned Below👇
8
36
322
1
3
58
Launching a new Project on Monday!
A Brand New 3D Website!
#threejs
#design
#uiux
#uidesign
#webdevelopment
7
5
51
🥼Physics in Elysium🔭
Today's video is a tiny update on physics. I am using three-mesh-bvh, by
@garrettkjohnson
, for collision detection.
Thanks to
@KennyPirman
for helping me out with raycasting. I will implement a better physics logic next week.
#threejs
#gamedev
#Metaverse
5
5
48
Elysium just got a Mini Halloween Update!🎃
The tricky part of this update was hijacking the day/night cycle of Elysium without breaking the system. Hope it works!
Enjoy with sound on! 😉
Psst! The fluffy grass tutorial is coming out tomorrow. stay tuned! Creepy Halloween!👻
8
4
48
This is great!!
I’ve been doing this in vanilla threejs. One of the reasons why I have stayed away from r3f: Handling instances was cumbersome.
When you unlock the skill of manipulating instances through custom attributes, you can create magic. I’ll write a detailed guide
something
@matiNotFound
and i have been working on, drei/createInstances & <InstancedAttribute>. makes it easier to control multiple, nested instances, being able to glob them together and even add shader attributes.
demo
docs
14
26
346
3
0
45
Client: "Can you build a 3D website like this?🫣"
Me: "Why yes! Of course! Let's do it!🤩"
Launching a new website for
@defi_raven
⚡️Link: ⚡️
This is our first 3D project created on
@webflow
. Built in collaboration with Black Peak .
Let me know your
7
4
45
Hey everyone! 😁 I wrote a detailed article on how to animate a cube using
@theatre_js
and
#threejs
.
✨✨
Please retweet if you find it helpful.
Thank you
@codrops
.
I have attached a list of topics covered in the tweet below. 👇
🎨🎥 In today's tutorial
@th_ebenezer
shows you how to animate a
#threejs
cube with
@theatre_js
and sync the animation with sound playback:
#frontend
#javascript
#webgl
#creativecoding
#webdevelopement
#uidesign
1
14
92
5
8
46
Just launched a new demo website showcasing a stunning river and waterfall shader built with
@threejs
and
@theatre_js
in react! Check it out now!
Let me know if you want a tutorial on how to build this!💻👇
#threejs
#creativecoding
#Web3
7
7
45
I built a 3D Virtual Museum for The BIGGEST ESPORTS EVENT in the World.
It will be live in 24 hours!🤩
Like and Retweet this if you would like to make this official.
This is a fan-made project for the
@EWC_EN
#threejs
#EsportsWorldCup
5
8
43
Hi everyone! I am excited to share my very first portfolio
It took me a while longer than anticipated, but here it is:
PS: I am currently looking for jobs. If you're looking for a
#Developer
, I'd love to hear from you!📩
#threejs
#webgl
#portfolio
7
4
37
🍃Coming soon!🍃
🧪Tutorials and breakdowns.🔬
If it’s sounds interesting, re-share the below post!👇
Elysium is live now!!🤩
🌿Link : 🌿
I wanted to build the most beautiful 3D world on the
#web
. 6 months of hard work, dedication and many sleepless nights later, we are finally here!
If this post reaches 1k likes, 👇🧵
Tools used:
@threejs
,
#javascript
54
107
608
4
7
37
A Cyberpunk City as a website?😬
We submitted our entry on
@fwa
This is a result of months of effort!
We implemented a fully custom navigation for this project. 100s of lights, many videos playing simultaneously, custom fog and optimized for quick load
5
2
38
Why am I so afraid of implementing particle system on the CPU!?😫
Instead, I make particles as instanced geometries with GPU animations (vertex and fragment shaders).
Am I scared for no reason?
Or, Is my fear justified?
Hey
#threejs
community, any suggestions/advice?🥺
6
0
32
This is not a video! The opening sequence is animated to run in REAL TIME!
Live Link:
⚡️ ⚡️
Animated & rendered with
@theatre_js
and
@threejs
.
Why we chose render it and not use video? Thread👇(1/3)
#threejsJourney
#Web3
#gamedev
Exciting news! After close to a year of hard work with the amazing team at
@paragonsNFT
, I'm thrilled to announce the Paraverse: A full fledged in-browser game.
Link⚡️:
Built with:
@threejs
& webGL with
@nextjs
.
#Web3
#javascript
#gamedev
8
9
66
1
3
32
Guess what! I got my hands on Threejs Journey by the incredible
@bruno_simon
a while back to master r3f!🎉Although I've worked on r3f projects in the past, I've been eager to learn more!
Boy oh boy, is Bruno an amazing teacher!🤩I absolutely loved the lesson on Textures!😍
(1/3)
3
3
30
I built a Virtual Museum for THE BIGGEST ESPORTS EVENT in the World!
@EWC_EN
It is live RIGHT NOW!
⚡️Live Link: ⚡️
This is a fan-made Experience for the Esports World Cup, 2024, held in Riyadh.
@EWC_Festival
#EsportsWorldCup
#threejs
#gaming
3
8
29
Building a new tool to create 3D Mock-ups in the browser.
- For web designers and developers
- It requires no Video Editing Experience.
- Cheaper than buying Adobe AE Templates
WIP on the Editor UI. Feel free to roast it!👇
#buildinpublic
#design
#uidesign
#threejs
5
2
29
Hi Design Twitter. Let's connect.
I have been building immersive 3D websites for a while now. Although design has been a key factor in all my projects, I have only focused on connecting with 3D developers until now.
I would love to take a look at your work! Share your most
2
1
27
🌟✨ Merry Christmas, everyone! 🎄 May your holiday season be filled with warmth and creativity. Keep spreading the magic, whether it's through
#threejs
projects or any creative pursuit. Let's make the world a more beautiful place! 🚀🎨
Here is a little present we made:
1
2
25
New Project Trailer anyone?
A fan-made virtual museum for the Esports World Cup, 2024. Launching soon!
@EWC_EN
#EsportsWorldCup
#threejs
#eSports
#ThreejsJourney
#javascript
#webgl
#Website
4
7
25
Live Link:
Github:
I have made the code as simple as possible and removed the LOD implementation to keep the code readable. I hope this code helps the reader understand my implementation of fluffy grass.
I will add mode updates
1
3
24
I have mixed feelings about 2023, but I cannot deny the positive things that happened. I started being more active on Twitter, met many amazing people and made some friends too!
Here is a Thank You❤️ to everyone who made my life better in some way.
@Andersonmancini
,
11
0
24
Created an Infinite Crystals Maze💎
.
Made with LODs, instancing and physical material. Although, it ate up my GPU.😂
.
#threejs
#webdesigner
2
1
24
Have you ever seen GRASS on Grass?✅
Here are some accidents that happened today while making my grass shader code more readable.
Finally got some time to breathe! Shader code is coming out tomorrow.
#threejsJourney
3
2
23
4
0
23
If this post reaches 1k likes, I'll unlock the vault and share all the techniques and insights that went into making Elysium. Let's make it happen together!
#gamedev
#javascript
#b3d
1
0
25
How could I miss sharing this!!😫 Check out this amazing video by
@3d_visionary
!
New video about my new raymarching engine is now on YouTube:
1
4
36
1
2
19
This post crossed wayy more than 200 likes!🤩 Thank you for supporting this project!
Hold tight! 🚀Elysium will be out in a few days!🚀
In the meantime, I will be sharing the demo URL to everyone who requested for beta test access.
6
2
19
Our favourite Graphics Professor is out with a new video!👇🤩
Guess it’s movie night on a Monday!🍿
9
34
296
0
0
19
1
0
19
Oh my god!! Look at this!🤩🤩❤️
3
12
126
1
1
19
1
0
20
SEO on 3D Websites?🤥
It is hight time we started focusing on creating SEO friendly 3D sites. Please share any tips and tricks below.
Retweet so that we reach everyone in the space.🙏
I'll go first:👇
1. Add all the important meta tags before the start of your development
3
5
18
@syrupondisplay
@bruno_simon
@0xca0a
@3d_visionary
@Andersonmancini
@DaniGatunes
@KennyPirman
@N8Programs
@MaximeHeckel
@0beqz
@danborutori
@iced_coffee_dev
@ore_ukonpower
@misaki_mofujp
@OtanoDesign
@wawasensei
@maya_ndljk
@winkerVSbecks
@shaderism
@uuuuuulala
@synergyseeker
@jamir_io
@theo_the_dev
@shatterspine
@theDEVLAD
@KMkota0
@RobinPayot
@onirenaud
@thefrontendcat
@vis_prime
@cooleyarts
@_douges
@donrmccurdy
@bayazuman
@donrmccurdy
@CantBeFaraz
@akella
@Domenico_brz
🧵
2
0
18
Procedurally Animated Croc 🐊!
I was hoping to get things ready for a small ptr test this weekend, but didn't quite manage - test will be somewhen during the next week :)
Anyways, here's a nice mount.
9
4
104
0
0
18
(4/8)
Here are some safety measures that I will be implementing in all of my projects from now:
Precaution 1: Set the following response headers for your deployments:
- Content-Security-Policy - instruct the browser to not allow framing from other domains.
- X-Frame-Options
1
0
18
These are some of the best people in the
#threejs
&
#webGL
space that you should follow!
I will post a detailed thread about these amazing artists/developers every week!
Please let me know if I have missed anyone.😄
(In no specific order)👇
@syrupondisplay
@bruno_simon
@0xca0a
@3d_visionary
@Andersonmancini
@DaniGatunes
@KennyPirman
@N8Programs
@MaximeHeckel
@0beqz
@danborutori
@iced_coffee_dev
@ore_ukonpower
@misaki_mofujp
@OtanoDesign
In no specific order, these guys are THE BEST!
Will add more as I remember.
Thread 🧵👇
17
7
75
3
2
17
Here is the maths behind my extreme claims:
We can now render
Grass Instances Per Chunk = 50,000
Total Number of Chunks = 16 * 16 = 256
Total Number of Instances = 50,000 * 256
= 12,800,000 Instances
The grass geometry
1
0
16
Ooof! 😮💨
No words!
Hmm… custom gravity might work well with the spiral corridor? 🤔
#threejs
#threejsJourney
#webdev
#opensource
#gamedev
#r3f
#ecctrl
5
17
150
1
0
16
(Inspired by Genshin Impact,
@bruno_simon
,
@iced_coffee_dev
and the
@threejs
community)
#creativecoding
2
3
15
Hola! Hologram Material is now available in vanilla threejs!🤖
That was so fast 😍. With the help of
@OpenAI
, my Holographic Material is ported to vanilla
#threejs
. It has a lot of adjustments and it is very easy to use.
Download it now:
CSB:
Please leave me ⭐️ on GitHub🙏🏻.
#threejsJourney
10
26
212
0
0
15
To render more grass, Frustum Culling alone was not going to cut it. I needed something more.
Grass is grass and grass is small. You can't see individual grass blades unless you are close enough. Similarly in our scene, as the distance from the camera increases, the grass that
2
0
15
On the lookout for a UI/UX designer who's interested in creating immersive 3D websites.
Details below 👇
#uiuxdesign
#threejs
#Webdesign
2
2
15
3
1
15
That concludes Part 1 of the Grass Series. We have covered how to render grass using the Billboard/Alpha Card Technique.
In the next part, I will share how I got the grass onto the terrain surface, how I optimized the GPU side of things such as lighting and shadows, wind
1
1
14
I LOVE me some grass!😍
1
1
12
Here’s a crazy portfolio! 🙌
1
0
13
1
2
13
Update: Elysium is live again. The issue has been resolved. Thanks to everyone who helped report the account. While the scammer account is still up, we must take necessary precautions so that such scams do not happen again.
I will write a detailed report and share it tomorrow.
0
0
13
If you want to learn how to use the depth buffer, here is a good resource.👇
🚀 Just launched my new blog post.
Discover how to elevate your 3D web projects with depth buffer and depth-based post-processing effects. 🌫️
Breakdown of the fog effect I made in the post !
🔗
Feel free to give me your feedback !
#threejs
0
5
26
0
1
12
Had a Happy Accident Today. I finally fixed something that was bothering me for a long time.
Here's a thread on how "I fixed" normals on my trees. 👇
I like A (left) more than B (right). Would appreciate your opinion on this.
(1/6)
4
0
11
Big things coming soon!
I will be creating some unusual designs over the new few weeks.
I’ve been designing comfortable, safe layouts for far too long now. Time to upgrade my design game. Drawing inspiration from Graphic Design, Japanese Minimalism, Brutalism, Renaissance
4
0
12
I'm going to start doing some Cringe-fluencer shit on Instagram from today.😂
Well... here is the link:
0
0
12
Predator Invisibility Shader is out now!👽
I've been very busy with projects and I haven't posted anything in a while😬. But the Predator's Cloak material is almost ready. Now I'm using
@CantBeFaraz
Custom Shader Material to make it easier to use. It will be available tomorrow😍
🧵1/4⬇️
#threejs
#threejsJourney
#r3f
12
33
236
0
0
12
This is looks awesome! Being able to edit shaders using UI and also the code!
Would love to play with this!🤩
Made some
#design
improvements in the Shader Flow Editor.
Multiple shader
#tutorials
are also in the plan inside this editor.
Leave a comment if you would like to see an explanation of some
#shaders
Will be releasing it pretty soon. DM me if anyone would like to try it out.
2
7
87
0
1
12
Check out the new useGSAP() hook. It might be helpful if you are using gsap in your
#threejs
projects.
I was not aware of the new useGSAP() hook from
@greensock
Oh boi that will be so handy with React three fiber now.
Thank you
@th_ebenezer
for pointing me out this new feature
#threejs
1
0
12
0
0
12
That concludes Part 2 of the Grass Series. We covered how to optimized the GPU side of things such as lighting and shadows, wind effect, character displacement and how to color the grass.
Code Coming Soon!
Retweet if you found this helpful! Thank you!😄
0
0
11
Thanks to everyone who supported and helped me along the way. What started as a personal project has now become something bigger than I imagined!
@backuardo
,
@bruno_simon
,
@brunowinck
,
@_Axiome_
,
@3d_visionary
,
@KennyPirman
,
@DaniGatunes
Thank you!
0
1
12
@thefrontendcat
@threejs
@0xca0a
@makc3d
Considering the points of both ecosystems, this is my opinion:
#r3f
was born out of
@threejs
. Any questions on discord/forums that are related to fibre should be welcome.
Easiest: Kindly show people the way to r3f forums.
More Acceptable: Embrace it and help regardless.😇
1
0
11
Here’s a surprise! You can actually play games on this virtual Gameboy!✨🎮
I've submitted my "Gameboy" challenge on Three.js Journey Discord server of
@bruno_simon
!
That was full of nostalgia for me, I hope you will like it !
Quick video of the project. I did not have much time to polish it but here you go, a 3D working GBA emulator !
#threejs
7
6
75
1
0
10
@Abhishipit
@fullstackjo
@ShawnBasquiat
@ykdojo
@DThompsonDev
@GrahamTheDev
@chriskalmar
@jimmiejephson
@RelaxedLeaf_
@chai_really
@hiro_codes
@AxelGarciaK
@thekelvinperez
@rafidhoda
@loftwah
@IdaszakDaniel
@coderfrankfurt
@Andersonmancini
@0beqz
@N8Programs
@nicolas_web3
@bruno_simon
@shaderism
@MaximeHeckel
@0xca0a
@akella
@kunalstwt
Thank you for the mention, Abhijeet. Means a lot.🍀✨
1
0
11
Check out this cool tutorial by
@3d_visionary
on Character Controller using threejs and rapier physics.
1
13
109
1
0
10