After months of hard but fun work, I'm glad to finally show you my new portfolio 🚗 bruno-simon.com Made with #threeJS and #canonJS

Computed leaves 🍃, perfect for Fall season - GPU Physics - Infinite - Wind - Less friction on water Performance looks good. I hope I can keep it 🤞

JavaScript

Would you like to learn how to make a simple Three.js game like this?

I went from 66,049 to 2304 vertices for the field using this simple trick

Making a 3D scene responsive is never easy 📱 This project is near completion! #threejs #webGL

Three.js Journey is going React! ⚛️🎉 Learn React Three Fiber in this 24 hours long new chapter. 👉 threejs-journey.com ⏰ Check the video until the end for a limited time offer #threejsJourney

And… I lost half an hour playing my own portfolio 🌈

Hey @elonmusk May I borrow your #cybertruck for my portfolio? Don't worry, I won't break the glass. bruno-simon.com/#cybertruck

Happy accident 🌱

So close, yet so far

It's official, Three.js Journey is on its way 🥳 threejs-journey.xyz #threeJS #threejsJourney

I did it! We can still see triangulation, but the weird picky cliffs and messed up normals are gone

My latest project with @immersive_g is finally out! Discover the vineyard plots of Chartogne Taillet through two french villages entirely re-built in 3D and integrated in #WebGL with #threeJS 👉 chartogne-taillet.com

We did it! 20k students joined Three.js Journey 🎉 Let's celebrate with a giveaway 🎁 RT this message to get a chance to win an access to threejs-journey.com I'll draw the 20 winners on Friday at 2pm CEST 📅 By the way, something big is coming soon 💣

Teasing #threejsJourney

Probably the worst UX for a resume

Remember the procedurally generated world I was working on months ago? It's live 👉 infinite-world.vercel.app No purpose being this project, I was just having fun. Although I might work on it again. #threejs #webGL

Today's addition to the Three.js Journey's wall of fame: David Heckhoff’s Portfolio 👉 david-hckh.com A portfolio is one of the best opportunity to express your talent. Here's a great example. Good job @DavidHckh 👉 linkedin.com/in/david-heckho… #threejsJourney #threeJs

You know where this is going #cybertruck #portfolio

Three.js Journey January Update is live 🚀 Here's what's new: - Switched the exercises from Webpack to Vite - Dependencies update - New Introduction - Addition to the Raycaster lesson - A bunch of fixes By the way, Three.js Journey is 2 years old! 🎂 👉 threejs-journey.com

And just like that, my portfolio became a Beyblade

Ah yes, blinkers and brake lights work

I'm straying away from the matcaps, but it looks pretty good. Shadows add so much.

⚡️

I started working on a procedurally generated #webGL world with #threeJS. Classic topic, I know, but I always wanted to do that. Let’s see where this is going 🤷‍♂️

Baking and integration done ✅ The model weighs 700ko (no compression) and the texture weighs 1.3Mo which is fine. #threeJs #threejsJourney #webGL #baking

Master the art of Shaders in those 13 new lessons 🔥 threejs-journey.com Through these 19 hours of videos, you’ll learn some of the most mesmerising effects you wouldn’t be able to create without shaders. Use the “shaders” code for a 30% discount (next 72 hours only)

The @Luni_app website is officially live! 🚀💫 luni.app I know I said no more freelance, but I couldn't refuse such a nice project with @HerveStudio and @Hexya I took care of the #webGL part with #threeJs and R3F

Today's addition to the #threejsJourney's wall of fame: Henry Heffernan’s Portfolio 👉 henryheffernan.com Wait, you can play doom on it?? And to think you knew nothing about WebGL a few months before. Great job! @henryheffernan 👉 linkedin.com/in/henryheffern… #threejs #webGL

New batch of photos for the Paris in Particles project (I need a better name if you have suggestions 🤔) I used my Pixel 4 for the photos and the colours are stunning. I really like how the shadows look blue. #threeJS #webGL #photogrammetry #Paris #particles #pixel4

I haven't done much progress on my portfolio because of side quests implying 3D printing and house renovation. But I'm back! tackling the hardest part of 3D for the web: Responsive 👻 And I think I found a way to control the car with touch devices. Behold my "3D nipple"

Look at what just arrived in the mailbox today: The new edition of Learn Three.js Although it's mostly out of curiosity, I'm sure @josdirksen has a few tricks to teach me. #threejs

Good news! I've created 3 more lessons (5 hours of video) to the Three.js Journey course 🎉 : - Go live - Scroll based animation - Code structuring for bigger project To celebrate, here's a 20% discount available until the end of November 👉 threejs-journey.com/join/202…

Back on my portfolio! I've added x-ray on the foliage so that we can see the car.

I converted the normals from the terrain to a texture in order to use it on the grass so that I can reflect the sun on it. The grass now blends better with the terrain and looks even fluffier! 👉 infinite-world.vercel.app

✅ Rain drops ✅ Snowflakes ✅ Splashes ✅ Ice ⌛️ Snow

It's been a while since I had fun creating simple experiments in WebGL. So here's a black hole with distortion and stuff: 👉 webgl-black-hole.vercel.app 🎶 Add Interstellar music here 🎶 #webGL #threejs #blackHole

Friendly advice: Don't be stubborn and try to fix that bug late at night. I lost 2 hours on a bug, failed, fixed it in 2 minutes in the morning.

Small update on the 3D scan project. I took some pictures of La Coulée Verte (a nice place in Paris where you can walk surrounded by plants). Turns out pretty great. 🌿 #webGL #threeJS #photogrammetry #flowField

I don’t know what’s wrong with me but this font is growing on me Monocraft

My latest WebGL project is out 🙌 With @BonhommeParis for @tagheuer in collaboration with Nintendo 👉 tagheuer.com/fr/en/smartwatc… @loupthibault for the front end @mattguetta for the 3D modeling and texturing #webGL #threeJs

One more reason to use @aseprite

I'm cooking 🚗

I’m really happy with Vite.js and I was thinking of switching Three.js Journey lessons to it instead of Webpack. Any opinion on that?

We reached 9000 students on Three.js Journey 🎉 Thank you so much! To get a chance to win a 90% discount, retweet this message. I’ll draw the 90 winners on the 15th of September 👉 threejs-journey.xyz

Some of the Three.js students asked me for a lesson on how I like to structure my code for complex projects. Are you ready for a 3 hours long lesson? 😈

I finally added visual suspensions between the wheels and the car. It's just tubes with fancy quads here and there. But look how happy the car his now 😍

Small preview of the #threejsJourney lesson page. I hope you’ll find those lesson validation animations satisfying enough 🤓

I’ve been gathering a lot of resources during those past years like tutorials, articles, tools, resources and inspiration sources. Today, I organised it a bit on Notion and I decided to share it with you 👉 brunosimon.notion.site/Resou…

Back on the portfolio with day/night cycles and more flora 🌷

My latest project is live ✨ 👉 fromscout.com For Scout (@zackhargett) with @HerveStudio (@rbriaux) 📦📦📦 #threeJs #webGL

I've settle for the name of the course: Three.js Journey 🎉 I don't think anyone really dislike it. It's short, efficient and it sounds like an adventure. And here's the logo by @rbriaux Romain will also work on the design of the website and I can't wait to show it to you.

I started working on the the certificate and I really don’t want to just throw it to whoever buy the course. So I’ve came up with a quiz that students will have to answer for each lesson. Answering wrong will result in a few minutes timeout. What do you think? (WIP)

New car 🚗✨

Took me hours and broke a few things, but the new WebGL station is ready. I'm gonna need to update my-room-in-3d.vercel.app Maybe it's the opportunity to start streaming again 🤷‍♂️

Has anyone ever fixed this triangles issue when displacing? More subdivisions is not an option

I’ve been very busy doing photos for my #photogrammetry project and this one came out really nice! Look at this little flowerpot 🤗 I also added first person controls and collisions. #threejs #photogrametry #webGL #particles

- How many cookies do you want? - Yes

Week-end project: Platform game in Three.js! Took me around 15 hours thanks to R3F and Ecctrl to handle the player controls (github.com/pmndrs/ecctrl/tre… by @AndrewChenE) Levels are made in Blender for fast iteration. It's not live yet, but almost. What do you think?

Wanted to create an animated banner for the Three.js Journey Discord server. Ended up loosing 3 hours, but look how cute it turned out! #Blender3d

My portfolio in a WebGL experience? 🤔

The cool part of having 3D skills is that you get to create the preview of your future house yourself 🏡 Isn’t it @rbriaux ? Here’s the bathroom

For the last shader lesson, let’s animate those 200 000 particles to form a galaxy. And that conclude the writing of the 30 lessons. It’s time to revise everything 😵 #threeJS #WebGL #particles #galaxy

"If you understand this calendar, flash the QR Code" I think that's the first time a display add draws my attention. Not bad. Should we talk about the absence of commits during the week-ends and holidays?

Hash blurred water surface (3 lines of code) Courtesy of @sea3dformat 🤝

Three.js Journey is 50% OFF for BLACK FRIDAY! 🎟️✨ I've turned my new portfolio prototype into a small game for the event 👉 threejs-journey.com/apps/bla… The code has unlimited usage, but if you are in a rush use this link 👉 threejs-journey.com/join/bf2…

I was messing around with TSL post processing. The sobel pass looks amazing!

I've finished the recordings 🎉 Win one free access by guessing the total duration of the course. The closest will be the winner! - One try per person - Ends on Thursday 31 Dec. at 4PM (CET) Don't forget to subscribe to the waiting list threejs-journey.xyz #threejsJourney

And here it is in #threejs with React Three Fiber. It's a quick proof of concept to see how it looks. I'll start working on the model, add a sticker, create a real circuit, etc. And yes, that's a temporary Arduino in it

Grass 🌱

Working on the #threejsJourney landing experience ✨ Model by @rbriaux

I finally have a lab 🧪 Making this infinite 3D scroll wasn't easy, but I'm happy.

Here it is in #threeJs I really like the portal pattern. Would you go in?

I wasn't supposed to do freelancing this year, but how can I refuse a project with @HerveStudio! Anyway, I'm building cool stuff for @Luni_app and I'll post some WIP along the way 🙌 #webGL #threejs #reactjs

Today, I streamed some creative coding for the first time 🎉 I did a sneaky one with small comity to test if everything was working well and it went pretty good. I think I’ll stream 2 or 3 times a week 🤞 Follow me on Twitch 👉🎬 twitch.tv/bruno_simon_dev

Today's addition to the Three.js Journey's wall of fame: Mini Room 3D 👉 mini-room-3d.vercel.app Create the prettiest tiny room with just a few clicks 🛋️ Great job! @arleq1n 👉 linkedin.com/in/bilal-el-mou… #threejsJourney #threeJs #webGL

I need to talk about this publicly in order to spread awareness and maybe get advices. I have $171.000 of stolen credit card money on my Stripe account, I don't want it, I want to give it back and @stripe is making it difficult. 👇 full story bellow On the 10th of December evening, a wave of fraudulent payments started on Three.js Journey. Thousands of cards were being used to buy Three.js Journey. Fortunately, I was checking the activity and immediately saw that something was wrong. While most were blocked by Stripe, 1800 of them went through corresponding to 171.000 stolen USD. I found a feature called "Radar" on Stripe that lets me choose how reliable the card must be for the payment to go through. First surprise, it's not a built-in feature and I need to pay for it. Fortunately, there is a 30 day trial. I activate it, set the security at the maximum and almost none of the stolen cards payments went through after that. I immediately contacted Stripe. The person on the phone told me they are going to escalate the ticket to a specialized team and to refund all the 1800 fraudulent payments manually. I asked if there was an easier way to refund all those payments and the person asked me to send a file listing all the payment IDs so that they would do it. I generated and sent the file in less than 30min. Later I received an email telling me that what was happening is that the hackers are doing "card testing", meaning that they don't care for the product, they just test cards from various locations in order to test them. Stripe asked me to try to mitigate this which I did by adding some more security features on Three.js Journey in addition to Radar. Those measures seem to have solved the card testing issue. Days went by and I started to receive complaints from card owners asking me why they paid for this product that they don't even know. After a few days, I started to receive disputes from the banks directly and the amount of disputes is getting worse every single day. I contacted Stripe through chat and by phone multiple times and it's always the same answer: - Don't do anything regarding those payments - Do not refund them - The team is working on it - We received the payments list that needs to be refunded - You'll get an answer when we have an update And it has been like this for 8 days. This situation is stressing me out so much. Having this stolen money on my Stripe account, all the fees linked to the payments (because yes I paid for each payment that went through) and the fees linked to the disputes is driving me crazy. We are talking about thousands of USD of fees. All I want is to make things right, have the card owners refunded and sleep at night without being worried. I've always liked @stripe. The implementation, the API, the dashboard, the documentation, etc. it's really good. But not knowing what's going on is really hard. Does anyone have experience with this kind of situation? I could use some advice.

30k students joined Three.js Journey! And I have some gifts (for students and non-students) 🎁 New / free lesson about environment maps threejs-journey.com/lessons/… (more info in thread) 🎁 30% discount threejs-journey.com/join/30k (available until end of June) #threejs #threejsJourney

I was messing around with materials and felt upon a happy accident. I really like this version. I wonder if I can use it to do some reveal, or some gameplay mechanic. BTW, yes, I'm back working on the portfolio 🙌

Here's another one. One more and I'll start working on interactions and optimisations. With @HerveStudio for @Luni_app #threeJs #webGL

Learning #tsl #threejs Here's an effect I've always wanted to make 🌪️🔥 Code needs refactoring, but I like the result. And the bloom recently added by @sea3dformat works like a charm. Inspired by @cmzw_ works.

As requested, here is a “little” case study of my portfolio. I hope some of you will learn a thing or two. medium.com/@bruno_simon/brun…

A week ago, I did a Blender “masterclass” for few friends. I taught them how to use Blender and how to make low poly pickles 🥒. It was awesome and I'm seriously thinking of doing it for real. It would certainly be about WebGL, Blender and some creative coding. Anyone interested?

I started working on an online ThreeJS course and I would like your opinion on the program I made so far: notion.so/brunosimon/WebGL-w…

I started creating low poly “stylized” “hand-painted” models with 3D Coat. World of Warcraft style ⚔️ Obviously, I made a website (#threejs, #webGL) 👉 stylized-low-poly.vercel.app I’ll try to create one or two a week. No specific purpose, I’ve always wanted to create game assets.

It was time for a Three.js Journey update. I had so many things to announce, I made a little video 🎬 The links: - First Three.js Project: threejs-journey.com/lessons/… - Debug UI: threejs-journey.com/lessons/… - Materials: threejs-journey.com/lessons/… - Challenges: threejs-journey.com/challeng… - Selection: threejs-journey.com/selectio… - Discount: threejs-journey.com/join/nov… #threejsJourney #threeJs

Tomorrow 🧺🥚

Ever wonder how shaders work? - Take a box (preferably blue) - Put a bunch of data in it - Send it to the vertex machine - Send it to the fragment machine - Take a photo - Enjoy Sorry @threejs_org, I couldn’t keep the secret #threeJs #webGL #threejsJourney

Added some effects here and there. Next, physics and interactions.

The new lessons are here! 🎉 - 4 new lessons - 7 hours of video - Same price Even better, here is a 20% discount code available for 24 hours 👉 threejs-journey.xyz/subscrib… #threejsJourney #threeJs

How to illustrate the #threeJS Raycaster class? Well, let’s put a death laser in the middle of the room and burn everything! 🔥 I’ve spent maybe 5 hours on this and I don’t know how I’m suppose to finish the lessons if I keep doing that 😅 #threeJSJourney #webGL #threeJS

I love coding when it's raining outside. And on the portfolio too...

GTA VI map leak I can't believe it's made in Blender

It’s finally starting to look like something. I can’t wait to add the materials and import it in Three.js. I’ll finish the shelves and start adding color today 👍

This feature took me a full week to implement, but there it is: Whispers! Anyone will be able to post messages visible to everyone. Is it a bad idea? Probably! More info in the upcoming devlog

We finally finished the modelling part. Colors are already looking great 🎨 Next stream session tomorrow 📆