Infinite grass - New portfolio - Devlog 2

[@Polaroidmedchen]

I always thought “Devlog” was an abbreviation. But apparently it's the full form of “Dog”

[@BrunoSimon]

Good one 😅

[@gabrielpedroza1346]

Your course and love of 3js brought me so much joy for coding. I took a break from 3D frontend to get internships and now a full time offer at Meta and I still want to come back and redo the entire course. You’ve been the best teacher I’ve ever encountered ❤

[@BrunoSimon]

Do it ;)

[@alexandersix_]

You're a literal magician. My jaw hit the floor when you made the bushes blow in the wind, and then again when you made the tire tracks in the grass! And you explained it all so simply-I feel like I understand it even though I know nothing (yet) about 3d web development. Already excited for the next video!

[@NguyenTien-yu9gu]

the puppy made me distracted from the code. he is so adorable

[@develepre]

Woah, this journey with you and your portfolio seems to be amazing, i fall in love with the calm of your speech over

[@kustomwithfizix5959]

Bruno: * Explaining what he's doing. * The Pup: * Endless Licking *

[@osafadi5]

bravo mon ami, you have a wonderful set of skills. From technical to story telling to motivating people to take on challenges. courage à toi !

[@Sebastian_1190]

I am so in love with the style and vibe of your portfolio as well as of the Devlog! Thanks for sharing your journey.

[@beesilva9373]

Loving the Devlog! It's awesome watching this come together and I'm already learning about cool tricks I never would have been able to dream up. I feel like we've heard your dog a few times in the background in lessons and Twitch challenge streams and got to seem him pop up once or twice, great to see him on camera, such a cute French Bulldog! I'm all for more devlogs with dogs.

[@lottanhorev8578]

Hi Bruno, beautiful dev log, I am enjoying so much and waiting for the next episode. The only suggestion for you is that you should try to good filter caffe instead of press to cup espresso XD

[@flynngrayling1518]

The dog is really in a licking mood

[@BrunoSimon]

Bastard knew he was being filmed

[@sm123Ash]

Grass looks amazing - I love the way how you see thing differently. Whell tracks are insane and the speed effect as well

[@AndreasZachariou]

Love the devlogs! thank you for sharing this peek into your process, it's very insightful. My only issue with this one is the licking, honestly if it was over and done with after the first minute I wouldn't have mentioned it, but six minutes was off-putting and this is from somebody who loves dogs and has dogs.

[@BrunoSimon]

Tell that to the dog! 😅

[@DaydreamStudios_Official]

I love seeing this project evolve so quickly! ❤

[@BrunoSimon]

So quickly 👉👈 I feel like I'm going waaay to slow

[@DaydreamStudios_Official]

@ No, the progress is impressive! You’ve gotta lower your bar, brother.

[@mediprixtutos7064]

"don't feel like i achieved much" qu'il nous dit

[@ajdegol]

Wow! Beautiful video; really well done on the vibes

[@sreejithkakkat]

I am getting Sebastian Lague + ThinMatrix vibe. Good one.

[@BrunoSimon]

Feels great to be compared to those legends, thank you

[@kstmzr]

Trop cool ! Tellement de bon tips ! Merci Bruno pour ce Devlog passionnant !

[@eliberkowitz7454]

Super cool! Loved learning how you did the tire tracks. Only comment is that it feels like youre destroying the grass when driving through it (I know it pops back up later, but), which feels a bit sad. Maybe you could just have the grass tip move down and in the direction of the track, so it looks like it's just bending rather than mostly disappearing? Or make the ground not black so it doesnt look like youre leaving muddy tire trakcs.

[@BrunoSimon]

At the end, there will be a floor matching the color of the grass making it less rough than what we have currently 👍

[@juangoyret9364]

omg i love this so much. Thank u Bruno.

[@JorgeEliezerSantamariaRamos]

Great video. I enjoyed the music in the background.

[@timc.9703]

cutest pup licking its paws + interesting webGL content. You my friend has found a way to hack our attention span. great content!

[@aloisdeniel]

Toujours aussi intéressant! Merci 🙏

[@renaudcollet9840]

Il a l'air vraiment bon ce panier !

[@sarmohanty]

13:00 Even though WebGPU is taking over, we still see remnants of GPGPU haha

[@BrunoSimon]

Actually, there is something new. I'll probably get to that topic in a later devlog.

[@fwdflashwebdesign]

This is how haven looks like

[@Nothwarren]

Ca serai bien d'avoir la camera un peu en avant de la voiture egalement pour voir ou on va !

[@BrunoSimon]

Effectivement, je comptais tester ça 👍

[@Nothwarren]

@BrunoSimon peut être avec un effet rubber bed à l'accélération et aux changements d'angle pour donner un effet de vitesse et de changement de vitesse surtout supplémentaire

[@pen.is.leaking]

amzing Bruno!! thanks

[@caothanh2280]

Love this so much 🔥🔥🔥

[@lophyre1380]

This is a really cool project! I'm also currently working with rendering grass so it's interesting to see how others are doing it. I do wonder though. 1. Ultimately you didn't use any form of instancing for the grass? Wouldn't that lead to a lot of draw calls? 2. How do you manage the placement of the bushes when it comes to the grass? You don't want the grass to be spawned through the bush after all

[@BrunoSimon]

1. No, that's the whole point. It's only one geometry. 2. Currently, I just place them randomly. At some point, I'll probably paint the areas in order to have a precise landscape.

[@tomsturge]

Lovely presentation. What music are you using in this video?

[@BrunoSimon]

It's from EpidemicSound

[@yodering]

Awesome

[@NguyenTien-yu9gu]

love this so mch

[@___d3p1]

Wonderful tricks!!!

[@lel7531]

I think the wheel tracks need to be adjusted, not to remove the grass blades but to make them appear flattened.

[@BrunoSimon]

Ultimately, grass will be displayed on a terrain matching the color of the blades. That should do the trick.

[@williambarajas8090]

Great Video! Love it!

[@ShashaFaraponov]

Hey, why don't you create the wheel track texture analytically, it should be as easy as creating a canvas with a brush controlled by keys instead of the mouse. I see it as a shader with a backbuffer on top of which we add new traces. What do you think? Could this be more efficient in terms of performance?

[@BrunoSimon]

I thought of it, but I need to do more than just drawing the line. We can't see it in the video, but I'm also drawing the UV whih might get useful later. And I want to use this GroundData to do more than tracks, but it's still a WIP.

[@abhaysuri3125]

is there any new discount coming on threejs journey?

[@madhumagar]

When are you going to add TSL lectures ?

[@BrunoSimon]

Probably once it's stable and I have enough experience

[@hkumbayo]

Nice. Is there a TSL lesson in your online course?

[@BrunoSimon]

TSL is to young an currently changing quite a lot, so no. But the goal is to build enough experience, confidence and knowledge so that I can teach it when it's ready

[@Venkatesh-vm4ll]

hi bruno, when i am building metaverse like decentraland, my website get crash always, but not when i use the decentraland, but the size of the 3d model is small, but I need to render 20+ model in the scene, any optimisation need to be done and how to handle it if we need to place more model in the scene

[@howuseehim]

Finally

[@BrunoSimon]

Kept you waiting uh

[@Cr0a3]

The dog is having ligma

[@BrunoSimon]

Not gonna fall for that 😏

[@gubatenkov]

8:59 Bruno, what do you mean when you say that InstancedMesh is not as performant as one unique geometry? As I know, InstancedMesh uses exactly one unique geometry and one material to render all instances in one rendering call.

[@DavidFitzgibbon]

My guess is that even though it's one geometry, keeping track of 1000s of them all across the entire finished scene, that has a cost. Only rendering a small amount of those and reusing them is more performant, because it's a much smaller number of instances.

[@BrunoSimon]

Exactly what David said

[@ssshen5807]

Can you provide webgl+tsl template? I tried to change three.js-tsl-templated's WebGPU to WebGL, but got an error.

[@BrunoSimon]

All you need to do is set "forceWebGL" to "true" on the renderer

[@victorvergaraillustrator]

1:47 (JavaScript) ❤🐶

[@neerajramnj7598]

what game engine did u used.?

[@BrunoSimon]

It's Three.js. A JavaScript library to render 3D in the browser

[@Dbean87tube]

Amazing Bruno!. The aesthetics are beautiful and the content is so interesting . Thanks for explaining the tracks, that it such a neat trick. I had a similar idea for using textures like that for footprints. Now I know how to do it. Thanks man.

[@manishfe]

Why this much late bro ???? ❤❤❤

[@BrunoSimon]

What?