Make stuff look better with DECALS!

Подписаться 185 тыс.

Просмотров 24 тыс.

50% 1

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.

Наука

Опубликовано:

7 июн 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 72

@CrzyMan_Personal 2 года назад

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 2 года назад

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-fN6b5mXsgyg.html

@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 11 месяцев назад

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

@oldsegotia2141 2 года назад

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 2 года назад

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 2 года назад

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 2 года назад

Great idea!

@NeilSkaria 2 года назад

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

@simondev758 2 года назад

Awesome! Thank you!

@swoorp 2 года назад

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

@medosfilms 2 года назад

dude this is beautiful

@fazlizekiqi2324 2 года назад

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

@zakyvids6566 2 года назад

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

@mulualemtekle6094 2 года назад

awesome as usual

@coolmanthecool603 3 месяца назад

Yeah I love deckles

@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.

@NorppaCast 2 года назад

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 2 года назад

It's on my list!

@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...

@jeremycoleman3282 2 года назад

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

@simondev758 2 года назад

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

@jeremycoleman3282 2 года назад

wiki says its was created by simon

@stpedro-ht9ng Год назад

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

@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"

@GarronArgentina 2 года назад

Thanks! and chees!

@parisashahbazi3973 4 месяца назад

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

@worldbest3097 Год назад

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

@RodyDavis 2 года назад

Bought the shader course ❤️

@simondev758 2 года назад

Awesome, thanks! Hope you enjoy it!

@vinaciotm 2 года назад

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 2 года назад

So kinda "how to structure a game" ?

@vinaciotm 2 года назад

@@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.

@AllenKll 2 года назад

Dekl

@simondev758 2 года назад

Deeeeekal

@mrbelkabachi 11 месяцев назад

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.

@zakyvids6566 2 года назад

👍👍

@idkwhatname9018 Год назад

What game engine you using for making games with Javascript

@clamhammer2463 Год назад

threejs

@baddudecornpop7328 4 месяца назад

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

@handler_music 2 года назад

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

@simondev758 2 года назад

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

@Desopolis 2 года назад

@@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 2 года назад

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

@energy-tunes 8 месяцев назад

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

@vidurawithanage1464 2 года назад

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

@sevazakharenko8176 Год назад

Joctor Deckel and Mr Hyde

@s_shake 2 года назад

@theostalproject 2 года назад

is the course suitable for beginners?

@simondev758 2 года назад

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.