Make stuff look better with DECALS!
HTML-код
- Опубликовано: 7 июн 2022
- 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. 
Наука
I've never heard someone pronounce it "deckle". I've always heard it as "dee cal" (cal like in california). Great video as usual
ruclips.net/video/fN6b5mXsgyg/видео.html
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
Maybe even "Deckel" lol🤣
Apparently that's how they pronounce it in Canada. It really was distracting though.
I thought it was day-cal as in the French "décalquer". Which tbf is not too far off from "deckle".
Bought the GLSL course. Keep up the good work you are a godsend
Awesome! Thank you!
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!
Great idea!
Eyy we're getting a shader course! Much awaited callback finally being asynchronously fulfilled, keep it up my man!
Great stuff and cool with the gl course as well. Will enroll as soon as i get some free time.
I love these videos it’s very nice to see this please make videos more frequently on threejs dear Simon
dude this is beautiful
awesome as usual
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)?
It's on my list!
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.
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...
Thanks! and chees!
Dekl
Deeeeekal
Yeah I love deckles
i say deecal not deckle. deckle is fun to say though
I looked on Wikipedia, think us Canadians say it differently heh
wiki says its was created by simon
it's so fun i always call them deckls from now on.
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."
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
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"
👍👍
/Bought your 2 courses after visit your homepage. Make more game stuff and github bro!
and make more advanced classes! thx bro
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
So kinda "how to structure a game" ?
@@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"
@@vinaciotm Yes, UI for three js like button, menu, text,..very much needed which is not clearly covered anywhere.
Hi .How can we update decal? I mean is there any way to update size,orientation,position?
Bought the shader course ❤️
Awesome, thanks! Hope you enjoy it!
So thats why in shooters the spray mark glitches out when you do it near a corner
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?
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
@@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.
man you are so cool. could you make videos about threejs in react three fiber?
r3f made threejs more sane
I might at some point, its been on my TODO list forever.
@@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)
@@Desopolis Awesome, let me know when you've got it ready to show, would love to see how it turns out!
උට්ටෝහ් එකහ්හ් 😂💔
Joctor Deckel and Mr Hyde
What game engine you using for making games with Javascript
threejs
Deh-kuhl? What part of the country do they say it like that in?
is the course suitable for beginners?
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.
whould it be possible to add paypal for your course?
So I guess "decal" and "deckle" ( en.wikipedia.org/wiki/Deckle ) would be homophones?
Do you have any udemy course on this?
Not currently no
That can't be very efficient for more than a few hundred decals.
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.
Hmm,
Cs 1.0 sprite system from 25y old
FIrst!
Deckle lol
'deckel' 😭
I'm Canadian eh
The way u say decal is so goofy lol
deeeeekal, better?