Make stuff look better with DECALS!

I'll show you how to use Three.js's decal system to build FPS bullet marks, footsteps, and anything else you want.
GLSL Course: simondev.teachable.com/p/glsl...
Patreon: / simondevyt
Follow me on:
Twitter: / iced_coffee_dev
Instagram: / beer_and_code
Github: github.com/simondevyoutube/
I'll step through using DecalGeometry in JavaScript and three.js to build little squibs and marks on existing geometry. Using decals, you'll be able to place additional details, as well as dynamically generate marks from shots, footsteps, explosions, and whatever else you can think of.
Full source code for the project is available, so if you're interested in fiddling with the code, screwing around with it, or improving it.

[@CrzyMan_Personal]

I've never heard someone pronounce it "deckle". I've always heard it as "dee cal" (cal like in california). Great video as usual

[@FluffehTheSheep]

kzbin.info/www/bejne/nH-Zk2ijjdiar8k

[@oddity2771]

Literally one of the most interesting channels and smartest guys I have ever heard speaking. But the entire video I could only think about how you would spell "deckle" and you have it in the first comment.... LOL

[@oddity2771]

Maybe even "Deckel" lol🤣

[@AliceErishech]

Apparently that's how they pronounce it in Canada. It really was distracting though.

[@keldencowan]

I thought it was day-cal as in the French "décalquer". Which tbf is not too far off from "deckle".

[@oldsegotia2141]

Bought your course as soon as I saw it. Great stuff altogether. Although I'm familiar with GLSL, your way of explaining things is second to none! Anybody out there who is hesitant because you think it might be too advanced, rest assured, Simon's got you. This is the best course out there on GLSL, believe me, I've completed several.

[@simondev758]

Thank you so much, I'm happy to hear that! There's still more to come, the course is very much under construction and I welcome feedback and even ideas for new sections.

[@OneEfferalGan]

Great video as always! I'd really like to hear your take on ECS and maybe architectures in general for game development. Keep up the good work!

[@simondev758]

Great idea!

[@NeilSkaria]

Bought the GLSL course. Keep up the good work you are a godsend

[@simondev758]

Awesome! Thank you!

[@fazlizekiqi2324]

Great stuff and cool with the gl course as well. Will enroll as soon as i get some free time.

[@swoorp]

Eyy we're getting a shader course! Much awaited callback finally being asynchronously fulfilled, keep it up my man!

[@zakyvids6566]

I love these videos it’s very nice to see this please make videos more frequently on threejs dear Simon

[@medosfilms]

dude this is beautiful

[@mulualemtekle6094]

awesome as usual

[@NorppaCast]

Great video, once again. I have to find the time to take your course. I know I have requested this before, but could you do a video of doing outlines (in Three.js preferably)?

[@simondev758]

It's on my list!

[@fuzzyhenry2048]

The mesh decal has a lot of problems for games. Like, can't handle well at the seams of many geometries. Causes lag if the mesh calculating is too much at the same time. You can check the post-processing decal based on the depth buffer which is more common in the game engine.

[@jeremycoleman3282]

i say deecal not deckle. deckle is fun to say though

[@simondev758]

I looked on Wikipedia, think us Canadians say it differently heh

[@jeremycoleman3282]

wiki says its was created by simon

[@stpedro-ht9ng]

it's so fun i always call them deckls from now on.

[@christoferstenberg3920]

I assumed decals worked by you just putting down a cube, feeding in the texture and the depth buffer and then figuring out the world space location of the pixel, transforming that into object space for the decal. Then checking where that is within the object space of the box and if it's inside sample the texture. I guess that's slightly more expensive ongoing but seems a bit more simple than generating a mesh. Though I'm not a graphics programmer, so not sure what the industry standard is. I guess the advantage of mine is that it works with arbitrarily complex meshes. Though might struggle with transparency as that's sometimes done in a way that doesn't add to the depth buffer...

[@zdspider6778]

0:44 I don't understand, so you duplicate whatever mesh the raycast hits, and clip away extra vertices until you're left with whatever geometry was inside the decal's volume cube? Isn't that... expensive, for large objects with lots of triangles, having to loop through potentially _hundreds of thousands_ of vertices? So you basically end up with a new unique mesh for every decal? I always thought they were done in screen-space. Basically as a deferred pass, after everything was rendered, using the information from the G-Buffer. As for the stretching on the corners, I think it can be solved with a triplanar projection for the texture, instead of using UVs. I saw someone fixing this in UE4. "Dekl."

[@simondev758]

Screen space decals are a thing, but not typically for a forward renderer. Yes, you clip away unneeded verts, you can also just use the collision mesh if you're willing to live with a not quite as good decal. Looping through a few thousand verts isn't ideal, but it's also something that happens extremely infrequently and probably won't affect your framerate one way or the other. dEEEEEEkal

[@pavlebodi3476]

You could write a quad tree for the model verts to narrow down iterating on fewer verts or you could precache the model into "mesh clusters"

[@vinaciotm]

Thank you for your vídeos!! We can use that to blood on walls Can you talk about ui, layer, for to do something like virtual joystick, button, menus, custom axesHelper Or Create objects on scene dynamically, transform controls for each, and store informations, and list objects storaged with a map loop. Like a game engine

[@simondev758]

So kinda "how to structure a game" ?

[@vinaciotm]

​@@simondev758 yeah, but thinking about game engine context. Some videos i wish existed on youtube: "how to create a basic game engine with threeJS" "why/how to use class instead function for gaming" "how to make a virtual joystick in threejs" "threeJS layers/canvas explained"

[@maxtech4338]

@@vinaciotm Yes, UI for three js like button, menu, text,..very much needed which is not clearly covered anywhere.

[@coolmanthecool603]

Yeah I love deckles

[@parisashahbazi3973]

Hi .How can we update decal? I mean is there any way to update size,orientation,position?

[@GarronArgentina]

Thanks! and chees!

[@AllenKll]

Dekl

[@simondev758]

Deeeeekal

[@mrbelkabachi]

I'm curious about the approach you use to position the gun material in front of the camera. Currently, in my own FPS game, I've encountered an issue where the gun material overlaps with objects when standing too close to them. To mitigate this problem, I've used a secondary scene. However, I'm interested in exploring alternative methods that may be more effective. Could you please share your insights on the matter?

[@pavlebodi3476]

Write a collision system where the barrel of the gun cant pass through walls or what most games do is have a raised gun animation when closer to walls

[@mrbelkabachi]

@@pavlebodi3476 Thanks, I used the 2nd option with 2 scenes. I render weapon system after everywting is drawn and it has no problem. This way player can stand closer to the objects.

[@worldbest3097]

/Bought your 2 courses after visit your homepage. Make more game stuff and github bro! and make more advanced classes! thx bro

[@energy-tunes]

So thats why in shooters the spray mark glitches out when you do it near a corner

[@idkwhatname9018]

What game engine you using for making games with Javascript

[@clamhammer2463]

threejs

[@handler_music]

man you are so cool. could you make videos about threejs in react three fiber? r3f made threejs more sane

[@simondev758]

I might at some point, its been on my TODO list forever.

[@Desopolis]

@@simondev758 I'm stealing your First Person Camera Rig for the React-Three Rapier Library! We've got a weird version of ECS going and right now hashing out particles (which you'll see some familiar stuff in there too)

[@simondev758]

@@Desopolis Awesome, let me know when you've got it ready to show, would love to see how it turns out!

[@baddudecornpop7328]

Deh-kuhl? What part of the country do they say it like that in?

[@RodyDavis]

Bought the shader course ❤️

[@simondev758]

Awesome, thanks! Hope you enjoy it!

[@sevazakharenko8176]

Joctor Deckel and Mr Hyde

[@zakyvids6566]

👍👍

[@vidurawithanage1464]

උට්ටෝහ් එකහ්හ් 😂💔

[@theostalproject]

is the course suitable for beginners?

[@simondev758]

Yeah it''s targetted at beginners. Eventually we reach more advanced topics, but the idea is to build up gradually, with plenty of repetition in different settings.

[@kasali2739]

whould it be possible to add paypal for your course?

[@BhushanKamathe_B2K]

Do you have any udemy course on this?

[@simondev758]

Not currently no

[@cognisent_]

So I guess "decal" and "deckle" ( en.wikipedia.org/wiki/Deckle ) would be homophones?

[@s_shake]

[@shinobudev]

That can't be very efficient for more than a few hundred decals.

[@simondev758]

Nah, this is meant for a few here and there. If you need way more, you'd start investigating other approaches, but this is what ships with three.js.

[@uiunicorn2018]

FIrst!

[@antoniofuller2331]

Hmm,

[@deleted_handle]

The way u say decal is so goofy lol

[@simondev758]

deeeeekal, better?

[@cate01a]

'deckel' 😭

[@simondev758]

I'm Canadian eh

[@StopItRyan]

Deckle lol