How Games Have Worked for 30 Years to Do Less Work SimonDev 2023-12-05 | We explore the evolution of culling and visibility determination in video games, building on work started over 30 years ago, and evolving with every generation of hardware.Gamedev Courses: https://simondev.teachable.com/Support me on Patreon: https://www.patreon.com/simondevytFollow me on:Instagram: https://www.instagram.com/beer_and_code/Twitter: https://twitter.com/iced_coffee_devIn this video, I implement some of the various visibility techniques used by AAA games like Just Cause 2, Battlefield, and Splinter Cell, and others. We walk through the history of GDC presentations, and see how the techniques have evolved to what's considered state of the art today.References talks:https://advances.realtimerendering.com/s2021/Karis_Nanite_SIGGRAPH_Advances_2021_final.pdfhttps://advances.realtimerendering.com/s2015/aaltonenhaar_siggraph2015_combined_final_footer_220dpi.pdfhttps://gamma.cs.unc.edu/papers/documents/technicalreports/tr97004.pdfhttps://developer.nvidia.com/gpugems/gpugems2/part-i-geometric-complexity/chapter-6-hardware-occlusion-queries-made-usefulhttps://www.cs.princeton.edu/courses/archive/spr01/cs598b/papers/greene93.pdfhttps://blog.paavo.me/cities-skylines-2-performance/https://www.humus.name/Articles/Persson_CreatingVastGameWorlds.pdfhttps://www.ea.com/frostbite/news/culling-the-battlefield-data-oriented-design-in-practicehttps://www.guerrilla-games.com/read/practical-occlusion-culling-in-killzone-3https://blog.selfshadow.com/publications/practical-visibility/https://www.selfshadow.com/talks/rwc_gdc2010_v1.pdfhttps://aras-p.info/texts/D3D9GPUHacks.html
When Optimisations Work, But for the Wrong Reasons SimonDev 2024-01-29 | Level of detail and imposters are effective optimizations that work for reasons you may not fully understand. Let's explore why, from a hardware perspective, these work.Gamedev Courses: https://simondev.teachable.com/Support me on Patreon: https://www.patreon.com/simondevytFollow me on:Instagram: https://www.instagram.com/beer_and_code/Twitter: https://twitter.com/iced_coffee_devIn this video, we explore the underlying reasons why optimizations like level of detail work. This involves understanding at a deep level, what the GPU expects in terms of data, what the hardware is optimized for, and how the pipeline and physical hardware units are setup.References:https://developer.nvidia.com/content/life-triangle-nvidias-logical-pipelinehttps://gpuopen.com/wp-content/uploads/2021/01/AMD_Graphics_pipeline_GIC2020.pdfhttps://www.amd.com/system/files/documents/rdna-whitepaper.pdfhttps://shaderbits.com/blog/octahedral-impostorshttps://www.humus.name/index.php?page=Comments&ID=228https://www.g-truc.net/post-0662.htmlhttps://developer.nvidia.com/gpugems/gpugems3/part-iv-image-effects/chapter-21-true-impostorshttps://developer.arm.com/documentation/102695/0100/Triangle-and-polygon-usage?lang=en#microhttps://www.youtube.com/watch?v=ZRhJT2nmvA4https://www.youtube.com/watch?v=EE-4GvjKcfshttps://www.youtube.com/watch?v=jKQem4Z6ioQhttps://www.youtube.com/watch?v=QdBZY2fkU-0https://www.youtube.com/watch?v=nWm_OhIKms8https://www.youtube.com/watch?v=-50MJf7hyOw
How do Major Video Games Render Grass? SimonDev 2023-11-06 | Trying out the last grass and foliage rendering techniques used by Ghost of Tsushima.🛒 Recommended books (on Amazon): https://www.amazon.com/hz/wishlist/ls/1IMV0IR3QIZMQ?type=wishlist&tag=simondev01-20&sort=priority&viewType=grid❤️ Support me on Patreon: https://www.patreon.com/simondevyt🌍 My Gamedev Courses: https://simondev.teachable.com/Disclaimer: Commission is earned from qualifying purchases on Amazon links.Follow me on:Instagram: https://www.instagram.com/beer_and_code/Twitter: https://twitter.com/iced_coffee_devIn this video, I tried implement the grass techniques explained by SuckerPunch in their talk "Procedural Grass in 'Ghost of Tsushima'". We walk though a lot of their basic setup, explore some possible alternative implementations, and end up with a nice little scene full of grass.Three.js SSAO Used:https://github.com/N8python/n8aoReferences talks:https://www.youtube.com/watch?v=Ibe1JBF5i5Yhttps://www.gdcvault.com/play/1027033/Advanced-Graphics-Summit-Procedural-Grass
Making an Eyeball with Just a Shader SimonDev 2023-10-26 | I step you through how I built this Halloween scene, using just a single shader.My Courses: https://simondev.teachable.com/Support me on Patreon: https://www.patreon.com/simondevytFollow me on:Twitter: https://twitter.com/iced_coffee_devInstagram: https://www.instagram.com/beer_and_code/
Is the COST of JavaScript’s GC REALLY that high? SimonDev 2023-06-19 | How much overhead is there really for garbage collection, is it as high as so many people say it is?My Courses: https://simondev.teachable.com/Support me on Patreon: https://www.patreon.com/simondevytFollow me on:Twitter: https://twitter.com/iced_coffee_devInstagram: https://www.instagram.com/beer_and_code/Garbage Collection is often cited as a major source of performance problems in JavaScript. In this vdeo, we explore garbage collection a bit, and try to understand when and how the overhead is high and when it isn't.Links:https://en.wikipedia.org/wiki/Tracing_garbage_collectionhttps://v8.dev/blog/free-garbage-collectionhttps://v8.dev/blog/trash-talk
So how does your computer ACTUALLY compute sine? Basics of trig and more… SimonDev 2023-02-28 | What is sin/cos/tan really? How do they relate to the dot product? How are they even computed by your hardware?My Courses: https://simondev.teachable.com/Support me on Patreon: https://www.patreon.com/simondevytFollow me on:Twitter: https://twitter.com/iced_coffee_devInstagram: https://www.instagram.com/beer_and_code/Trigonometry is often cited as an are of math for game development. In this video, I explore trig functions a bit, what they actually compute for you in a visual way, and tie that together with basic linear algebra. Lastly, we explore how these functions are actually computed under the surface.Intel Paper: https://citeseerx.ist.psu.edu/doc/10.1.1.24.5177Robin Green's Blog: https://basesandframes.wordpress.com/2016/05/17/faster-math-functions/
How Big Budget AAA Games Render Bloom SimonDev 2023-01-23 | Trying out some of the latest approaches to Bloom used in Unity/Unreal.🛒 Recommended books (on Amazon): https://www.amazon.com/hz/wishlist/ls/1IMV0IR3QIZMQ?type=wishlist&tag=simondev01-20&sort=priority&viewType=grid❤️ Support me on Patreon: https://www.patreon.com/simondevyt🌍 My Gamedev Courses: https://simondev.teachable.com/Disclaimer: Commission is earned from qualifying purchases on Amazon links.Follow me on:Instagram: https://www.instagram.com/beer_and_code/Twitter: https://twitter.com/iced_coffee_devIn this video, I tried going through some of the modern approaches to Bloom, explained a bit of the history, and where it may be going in the future. I walk through Kawase's Blur Filter, box and gaussian blurs and how to do separable filters, and explore the fourier transform and convolution bloom.Referenced Papers/Talks:The Fast Fourier Transform (FFT): Most Ingenious Algorithm Ever?: https://www.youtube.com/watch?v=h7apO7q16V0The Remarkable Story Behind The Most Important Algorithm Of All Time: https://www.youtube.com/watch?v=nmgFG7PUHfohttp://www.iryoku.com/next-generation-post-processing-in-call-of-duty-advanced-warfarehttps://www.chrisoat.com/papers/Oat-ScenePostprocessing.pdfhttps://de45xmedrsdbp.cloudfront.net/Resources/files/The_Technology_Behind_the_Elemental_Demo_16x9-1248544805.pdf
How Big Budget AAA Games Render Clouds SimonDev 2022-11-29 | Explored a few of the latest techniques in procedural cloud rendering used in Horizon: Zero Dawn and the FrostBite engine.🛒 Recommended books (on Amazon): https://www.amazon.com/hz/wishlist/ls/1IMV0IR3QIZMQ?type=wishlist&tag=simondev01-20&sort=priority&viewType=grid❤️ Support me on Patreon: https://www.patreon.com/simondevyt🌍 My Gamedev Courses: https://simondev.teachable.com/Disclaimer: Commission is earned from qualifying purchases on Amazon links.Follow me on:Twitter: https://twitter.com/iced_coffee_devInstagram: https://www.instagram.com/beer_and_code/In this video, I walk through how cloud rendering generally works, as well as covering some of the more recent tweaks/improvements and optimizations.Referenced Papers/Talks:https://www.ea.com/frostbite/news/physically-based-sky-atmosphere-and-cloud-renderinghttps://www.guerrilla-games.com/read/the-real-time-volumetric-cloudscapes-of-horizon-zero-dawnhttp://magnuswrenninge.com/wp-content/uploads/2010/03/Wrenninge-OzTheGreatAndVolumetric.pdf
The ONE Texture Every Game NEEDS SimonDev 2022-10-28 | Exploring why procedural noise (such as perlin noise) are so useful in game development and graphics.🛒 Recommended books (on Amazon): https://www.amazon.com/hz/wishlist/ls/1IMV0IR3QIZMQ?type=wishlist&tag=simondev01-20&sort=priority&viewType=grid❤️ Support me on Patreon: https://www.patreon.com/simondevyt🌍 My Gamedev Courses: https://simondev.teachable.com/Disclaimer: Commission is earned from qualifying purchases on Amazon links.Follow me on:Twitter: https://twitter.com/iced_coffee_devInstagram: https://www.instagram.com/beer_and_code/In this video, I cover how to generate value, gradient, and voronoi noise. We go over how they're computed, and as well, we'll walk through some uses in game development, and VFX settings.
An In-Depth look at Lerp, Smoothstep, and Shaping Functions SimonDev 2022-09-27 | Exploring some common math that game developers use, let's look at linear interpolation and apply it to everything.🛒 Recommended books (on Amazon): https://www.amazon.com/hz/wishlist/ls/1IMV0IR3QIZMQ?type=wishlist&tag=simondev01-20&sort=priority&viewType=grid❤️ Support me on Patreon: https://www.patreon.com/simondevyt🌍 My Gamedev Courses: https://simondev.teachable.com/Disclaimer: Commission is earned from qualifying purchases on Amazon links.Follow me on:Twitter: https://twitter.com/iced_coffee_devInstagram: https://www.instagram.com/beer_and_code/In this video, I cover lerp, also known as mix in GLSL, a common mathematical function used in game dev. It's extremely versatile, and we'll go through basic uses, as well as some problems and how to overcome them.Some easing functions to try out:https://easings.net/https://iquilezles.org/articles/functions/
Ray Marching, and making 3D Worlds with Math SimonDev 2022-08-29 | Built this entire video on raymarching in shaders using shaders, ray marching, and signed distance functions.🛒 Recommended books (on Amazon): https://www.amazon.com/hz/wishlist/ls/1IMV0IR3QIZMQ?type=wishlist&tag=simondev01-20&sort=priority&viewType=grid❤️ Support me on Patreon: https://www.patreon.com/simondevyt🌍 My Gamedev Courses: https://simondev.teachable.com/Disclaimer: Commission is earned from qualifying purchases on Amazon links.Follow me on:Twitter: https://twitter.com/iced_coffee_devInstagram: https://www.instagram.com/beer_and_code/In this video, I cover ray marching and some of the cool stuff you can do with it in shaders. We cover basic scene construction, unions/intersections/subtractions, doing smooth minimums, normal generation and soft shadows, and anything else that seems kinda neat about the technique.Ray Marching: https://en.wikipedia.org/wiki/Ray_marchingGreat Resource for Ray Marching and SDF's: https://iquilezles.org/Smooth Maximum: https://en.wikipedia.org/wiki/Smooth_maximum
I Tried Making an FPS Game in JavaScript SimonDev 2022-07-22 | GLSL Course: https://simondev.teachable.com/p/glsl-shaders-from-scratchSupport me on Patreon: https://www.patreon.com/simondevytFollow me on:Twitter: https://twitter.com/iced_coffee_devInstagram: https://www.instagram.com/beer_and_code/Here I tried making a 3D first person shooter, all in JavaScript and Three.js. I took some code from a couple of my other tutorials, like first person camera controls and ammo.js stuff, bolted on a few free things from places like Sketchfab, and added some shooter gameplay. The code could totally be used as a starting point for somebody else wanting to make a little browser FPS.Basically, I tried to code up a first person shooter skeleton in a few days, using nothing more than JavaScript and the browser. All the elements, HUD, etc. are in there and in workable states. There's tonnes more you could do obviously, but I think this can help you understand how you might structure things and use something like Three.js to get started on these types of projects. Making a basic first person shooter, even in JavaScript, isn't too difficult.Droid Thing from Quaternius: https://quaternius.com/"Anubis Bust" (https://skfb.ly/6RwNp) by lucasthx88 is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/)."K-VRC | Love, Death + Robots" (https://skfb.ly/6XCCo) by ArbitraryCanary is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/)."Buddha" (https://skfb.ly/QGxw) by hullo is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/)."Human Skull" (https://skfb.ly/6RsWT) by Sergey Egelsky is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/)."Heavy Assault Rifle" (https://skfb.ly/6RGPy) by pixelgrapher is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).
SimonDev Course Announcement! | Course Trailer SimonDev 2022-06-13 | AVAILABLE NOW, LIMITED PRICE:https://simondev.teachable.com/p/glsl-shaders-from-scratch?coupon_code=EARLYBIRD2022I'm excited to announce that after months of work, my GLSL Shader Course is ready for early preview. From beginner all the way to more advanced topics, and features some incredibly fun projects to build 100% in shaders. We cover topics the same way I learn them, by learning the fundamentals and playing with functions in new and creative ways to explore and understand how they work.Support me on Patreon: https://www.patreon.com/simondevytFollow me on:Twitter: https://twitter.com/iced_coffee_devInstagram: https://www.instagram.com/beer_and_code/Github: https://github.com/simondevyoutube/
Make stuff look better with DECALS! SimonDev 2022-06-08 | 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: https://simondev.teachable.com/p/glsl-shaders-from-scratchPatreon: https://www.patreon.com/simondevytFollow me on:Twitter: https://twitter.com/iced_coffee_devInstagram: https://www.instagram.com/beer_and_code/Github: https://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.
Immersive 3D Audio and Visualization (three.js & javascript) SimonDev 2022-03-09 | I'll show you how to integrate 3d positional sound in JavaScript and build an audio visualizer.Support me on:Patreon: https://www.patreon.com/simondevytFollow me on:Twitter: https://twitter.com/iced_coffee_devInstagram: https://www.instagram.com/beer_and_code/Github: https://github.com/simondevyoutube/I'll step through getting audio and 3d positional audio working in JavaScript using three.js, and we'll build out a couple simple audio visualizers using the AudioAnalyzer class.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.Inigo Quilez's Site:https://iquilezles.org/Music: https://www.bensound.com
Building a Simple First Person Camera SimonDev 2022-03-02 | We'll build an FPS controller in three.js, and add some tips & tricks to make it feel natural.Support me on:Patreon: https://www.patreon.com/simondevytFollow me on:Twitter: https://twitter.com/iced_coffee_devInstagram: https://www.instagram.com/beer_and_code/Github: https://github.com/simondevyoutube/GKJohnson's Github:https://github.com/gkjohnson/threejs-sandboxWe'll walk through some of the basic ideas behind a first person or FPS controller, including the basic math that gets it going as well as some more subtle tricks like head bobbing and focus locking to make it feel more natural and smooth.What we'll cover:* Three.js FirstPersonControls, how to use these in a project* Using Quaternions and Vector translations to create simple first person camera movement* Using sin waves and focus locking to improve the overall feeling and give it a more organic experience.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.
Building a Simple 3D Scene with Physics in JavaScript & Three.js SimonDev 2022-02-23 | Quick and easy setup of a JavaScript 3d Physics Engine in three.js and ammo.js.Support me on:Patreon: https://www.patreon.com/simondevytFollow me on:Twitter: https://twitter.com/iced_coffee_devInstagram: https://www.instagram.com/beer_and_code/Github: https://github.com/simondevyoutube/In this project I'll show you how to use ammo.js and three.js to setup a simple 3d scene with phyics in just a few minutes. We'll step through the basics of how to instantiate your physics world, and what the various options are, which can server to add a whole new dimension of possibilities to your 3D scenes.What we'll cover:* Three.js and Ammo.js initialization, how to instantiate your 3d physics world* Creating rigid bodies and simple shapes such as boxes and spheres* Using MotionState to synchronize transforms between the physics world and 3d scene.There's a lot of options for JavaScript 3d engines, like Ammo.js, oimo.js. cannon.js, etc. They're all extremely capable physics engines, but we'll be focusing on one in particular, ammo.js which is a wrapper around the Bullet physics engine.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.
What can “The Simpsons” teach us about Dynamic Programming? SimonDev 2021-10-29 | An introduction to dynamic programming, how to approach these types problems, and we'll step through a few basic ones.🛒 Recommended books (on Amazon): https://www.amazon.com/hz/wishlist/ls/1IMV0IR3QIZMQ?type=wishlist&tag=simondev01-20&sort=priority&viewType=grid❤️ Support me on Patreon: https://www.patreon.com/simondevyt🌍 My Gamedev Courses: https://simondev.teachable.com/Disclaimer: Commission is earned from qualifying purchases on Amazon links.Follow me on:Twitter: https://twitter.com/iced_coffee_devInstagram: https://www.instagram.com/beer_and_code/Github: https://github.com/simondevyoutube/Covering dynamic programming, top down vs bottom up approaches. What is memoization and tabulation. Will also answer a few quick problems like the Fibonacci series, Coin Change, Min Path Sum, 0-1 Knapsack, Subset Sum, and the Staircase problem.
Wait, so comparisons in floating point only just KINDA work? What DOES work? SimonDev 2021-10-05 | An introduction to the floating point numbers (iee-754), and some of the oddities surrounding it.🛒 Recommended books (on Amazon): https://www.amazon.com/hz/wishlist/ls/1IMV0IR3QIZMQ?type=wishlist&tag=simondev01-20&sort=priority&viewType=grid❤️ Support me on Patreon: https://www.patreon.com/simondevyt🌍 My Gamedev Courses: https://simondev.teachable.com/Disclaimer: Commission is earned from qualifying purchases on Amazon links.Follow me on:Twitter: https://twitter.com/iced_coffee_devInstagram: https://www.instagram.com/beer_and_code/Github: https://github.com/simondevyoutube/Some great resources:https://docs.oracle.com/cd/E19957-01/806-3568/ncg_goldberg.htmlhttps://randomascii.wordpress.com/category/floating-point/Some more great stuff:https://en.wikipedia.org/wiki/Floating-point_arithmetichttps://en.wikipedia.org/wiki/Subnormal_numberhttps://en.wikipedia.org/wiki/Unit_in_the_last_placehttps://www.h-schmidt.net/FloatConverter/IEEE754.htmlhttps://cowboyprogramming.com/2007/01/05/visualizing-floats/
Hash Tables, Associative Arrays, and Dictionaries (Data Structures and Optimization) SimonDev 2021-09-14 | An introduction to the hash table data structures, how that relates to associative arrays and dictionaries, and how to use them.Support me on:Patreon: https://www.patreon.com/simondevytFollow me on:Twitter: https://twitter.com/iced_coffee_devInstagram: https://www.instagram.com/beer_and_code/Github: https://github.com/simondevyoutube/Covering a bit more ground with data structures, algorithms, and optimizations, we're looking at hash tables now. These are amazing, general purpose data structures that are a good fit in a lot of cases. We'll explore the different collision resolution schemes like chaining and open addressing. We'll touch on abstract data structures and the difference between an associative array (or dictionary) and a hash table. Finally, we'll do a dive through existing code to show some examples of where I've used them in a lot of the games I've built in JavaScript.Misc Links:http://scottmeyers.blogspot.com/2015/09/should-you-be-using-something-instead.htmlhttps://en.wikipedia.org/wiki/Hash_tablehttps://en.wikipedia.org/wiki/Associative_arrayhttps://en.wikipedia.org/wiki/Abstract_data_typehttps://en.wikipedia.org/wiki/Birthday_attackhttps://en.wikipedia.org/wiki/Open_addressinghttps://en.wikipedia.org/wiki/Linear_probinghttps://en.wikipedia.org/wiki/Quadratic_probinghttps://en.wikipedia.org/wiki/Double_hashinghttps://en.wikipedia.org/wiki/Comparison_of_programming_languages_(associative_array)
Can JavaScript Go Faster? Threading in JavaScript (Data Structures & Optimization) SimonDev 2021-08-16 | Can you make JavaScript run even faster? Or is it limited as a single thread language?Patreon: https://www.patreon.com/simondevytFollow me on:Twitter: https://twitter.com/iced_coffee_devInstagram: https://www.instagram.com/beer_and_code/Github: https://github.com/simondevyoutube/In this video we talk a bit about JavaScript's mechanisms for concurrency and spreading the work out over multiple threads/cores. We'll cover the web worker API in a bit of detail, dedicated workers, and then we'll move on to creating a small testing setup. It's kind of interesting to explore the threading opportunities that JavaScripts offers through the Web Worker API, the various pitfalls and performance footguns that lurk there, and what you can do to mitigate these issues. We'll also explore using transferable objects with ArrayBuffer, and touch quickly on what SharedArrayBuffer unlocks in terms of concurrency and multiple threads reading/writing.Links:https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_APIhttps://surma.dev/https://surma.dev/things/is-postmessage-slow/https://v8.dev/docs/embedhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBufferhttps://developer.mozilla.org/en-US/docs/Web/API/Worker/postMessagehttps://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithmhttps://developers.google.com/web/updates/2011/12/Transferable-Objects-Lightning-Fasthttps://en.wikipedia.org/wiki/JavaScriptAnd yes, Node also has threads:https://nodejs.org/api/worker_threads.html
Simple Biome Generation (3D World Generation #11) SimonDev 2021-08-03 | Today we procedurally generate some simple biomes for our worlds.To vote on new videos, ask questions, or just support me:https://www.patreon.com/simondevytFollow me on:Twitter: https://twitter.com/iced_coffee_devInstagram: https://www.instagram.com/beer_and_code/Github: https://github.com/simondevyoutube/In this project, we're looking at adding some simple and easy biomes to differentiate different areas on the planet. This goes a long way to help increase the natural look of our worlds.We'll take a look at Whittaker's biome types and implement a simple but effective system for randomly generating temperature and precipitation values across the planet. Those can, in turn, be used by something like the shader to differentiate areas in the world.We're using Three.js and JavaScript for this tutorial, and if you're new to the series make sure to check out thhe rest of the playlist: https://www.youtube.com/playlist?list=PLRL3Z3lpLmH3PNGZuDNf2WXnLTHpN9hXy
I Tried to Make Star Wars Battlefront II in JavaScript SimonDev 2021-06-14 | Tried building a Starfighter Assault clone, all in JavaScript.Support me on:Patreon: https://www.patreon.com/simondevytFollow me on:Twitter: https://twitter.com/iced_coffee_devInstagram: https://www.instagram.com/beer_and_code/Github: https://github.com/simondevyoutube/Here I tried to build a 3D JavaScript game, mostly from scratch, using libraries like Three.js/Ammo.js. This was heavily inspired (very heavily) inspired from the Star Wars: Battlefront II: Starfighter Assault game, which looks way better, but c'mon, this is just one guy and JavaScript. The code could definitely serve as a starting point for a way cooler game.The goal of the project was to mash together a bunch of elements we've already seen, such as particle systems, third person cameras, player input controls, and introduce a few new things too such as the gamepad API and ammo.js physics support, and a bit of WebAudio through Three.js's API. Hopefully from this, you'll be able to understand how to integrate these various components to build out your own games.What I'll cover:* Basic game construction* Player input, particle systems* UI Components* GamePad API* Three.js and Ammo.jsReferences:Inigo Quilez's site, lots of magic on noise and shaders, really the goto reference: https://iquilezles.org/Star Wars Battlefront II, very cool game, I assume from the trailers, haven't played it: https://www.youtube.com/user/EAStarWars
What Big-O notation ACTUALLY tells you, and how I almost failed my Google Interview SimonDev 2021-05-18 | What is Big-O notation, and what are some misconceptions that even advanced engineers have?Patreon: https://www.patreon.com/simondevytFollow me on:Twitter: https://twitter.com/iced_coffee_devInstagram: https://www.instagram.com/beer_and_code/Github: https://github.com/simondevyoutube/In this video we'll talk a bit about big-o notation and analysis, how to understand time complexity, and how it's related to understanding performance. We'll approach this from the mathematical definition, going over the limiting behaviour and talking about the strict definition of big-o. How programmers tend to use Big-O informally, what they mean, and how that differs from the strict mathematical definition. There will be some easy examples to work through, talking about the dominant terms and how/why other terms are dropped. We'll also talk about some of the more subtle aspects of big-o, when/why its good, where it kind of fails things, and cap it off with a story.https://en.wikipedia.org/wiki/Big_O_notationhttps://en.wikipedia.org/wiki/Time_complexity
How Slow is JavaScript Really? JavaScript vs C++ (Data Structures & Optimization) SimonDev 2021-04-20 | Is JavaScript really that slow? Or is that just a leftover impression from the old days?Patreon: https://www.patreon.com/simondevytFollow me on:Twitter: https://twitter.com/iced_coffee_devInstagram: https://www.instagram.com/beer_and_code/Github: https://github.com/simondevyoutube/In this video we talk a bit about JavaScript vs C++, and the performance difference between them. We'll talk quickly about the history of JavaScript before working through a few small benchmarks to compare performance between them, using various optimization levels for gcc. It's kind of interesting to see how much JavaScript's performance has evolved with JIT (just in time) compilation since the early Netscape days. The v8 team has made enormous strides in performance and is narrowing the gap with C++ year by year. We'll also walk through some examples of what you can do with your basic C++ code to squeeze more performance out, either by using better compiler flags or SSE/AVX intrinsics to get better usage out of your CPU.What's covered:* Super brief history of JavaScript and V8* Benchmarks and comparison of JavaScript vs C++* SSE and AVX intrinsics* gcc -Ofast and float associativity* Some closing thoughts on JavaScript's performance today, as well as C++.Speed, Speed, Speed: JavaScript vs C++ vs WebAssembly:https://www.youtube.com/watch?v=aC_QLLilwsoGodbolt:https://godbolt.org/Wikipedia:https://en.wikipedia.org/wiki/JavaScripthttps://en.wikipedia.org/wiki/Associative_propertyVarious blog posts from V8 team:https://blog.chromium.org/2010/12/new-crankshaft-for-v8.htmlhttps://v8.dev/blog/10-yearshttps://v8.dev/blog/launching-ignition-and-turbofanhttps://v8.dev/blog/adaptor-framehttps://v8.dev/blog/high-performance-cpp-gchttps://v8.dev/blog/fast-superhttps://v8.dev/blog/preparserhttps://v8.dev/blog/spread-elementshttps://v8.dev/blog/background-compilationhttps://v8.dev/blog/fast-propertieshttps://v8.dev/blog/fast-for-in
3D Mesh Generation, Gaps, and Stitching (3D World Generation #10) SimonDev 2021-04-05 | Support me on:Patreon: https://www.patreon.com/simondevytFollow me on:Twitter: https://twitter.com/iced_coffee_devInstagram: https://www.instagram.com/beer_and_code/Github: https://github.com/simondevyoutube/Fixing the gaps, slivers, and lighting discontinuities in our 3d terrain meshes.In this project, we're looking at fixing the gaps and lighting discontinuities between different levels of detail. This is a natural problem that arises when placing 3d meshes of different resolutions side by side. Since we use generate different levels of detail using a quadtree, each chunk is a separate renderable which leads to natural problems when they're placed side by side. This is a continuation of our series on 3d world generation and procedural terrain, which started with height maps and basic 3d worlds. In the last video in the series, we tackled using logarithmic depth buffers to fix planetary scale problems with the dept buffer, as well as tackling issues with precision in the fragment shaders.This is all Three.js/WebGL/JavaScript, but should be easy enough to port to Unity or Godot or whatever your working environment is.Full playlist for 3D World Generation: https://www.youtube.com/playlist?list=PLRL3Z3lpLmH3PNGZuDNf2WXnLTHpN9hXyVarious resources:Intro Music: www.bensound.comMisc:https://stackoverflow.com/questions/4297024/3d-perlin-noise-analytical-derivativehttps://en.wikipedia.org/wiki/Finite_difference
Why Linked Lists vs Arrays isn’t a real choice SimonDev 2021-03-24 | 🛒 Recommended books (on Amazon): https://www.amazon.com/hz/wishlist/ls/1IMV0IR3QIZMQ?type=wishlist&tag=simondev01-20&sort=priority&viewType=grid❤️ Support me on Patreon: https://www.patreon.com/simondevyt🌍 My Gamedev Courses: https://simondev.teachable.com/Disclaimer: Commission is earned from qualifying purchases on Amazon links.Follow me on:Twitter: https://twitter.com/iced_coffee_devInstagram: https://www.instagram.com/beer_and_code/Github: https://github.com/simondevyoutube/In this video we talk a bit more about data structures and optimizations, specifically we'll get into linked lists vs arrays, how to do common operations on them, and what happens to the underlying memory. These all have impacts on how they perform, it's not solely about big-O, cache locality effects come into play and we can understand in what situations an array or a linked list is expected to perform better. We'll work through some real world examples to bring the point home and get a solid understanding of these data structures.What's covered:* What are linked lists* The importance of contiguous memory, and CPU caches* Linked list vs arrays, what each operation does and roughly which one is faster* Memory implications vs arrays* Closing thoughts, and when I've personally found linked lists useful in my career
Logarithmic Depth Buffers and Problems of Scale (3D World Generation #9) SimonDev 2021-03-15 | Support me on:Patreon: https://www.patreon.com/simondevytFollow me on:Twitter: https://twitter.com/iced_coffee_devInstagram: https://www.instagram.com/beer_and_code/Github: https://github.com/simondevyoutube/In this project, we look at floating point precision, logarithmic depth buffers, and the problems that come with planetary scale rendering. In the last video in the series, we used floating origins to scale the planet up, but that left a bunch of issues that needed resolving. We'll be fixing those issues one by one, and examining how and why the solutions work.This is all implemented in three.js/webgl and JavaScript but should be easy enough to port to Unity or whatever your setup is. We mostly explore the concepts here, not the specifics of any given platform implementation.Various resources:Intro Music: www.bensound.comDepth Buffer Resources:https://outerra.blogspot.com/2009/08/logarithmic-z-buffer.htmlhttp://tulrich.com/geekstuff/log_depth_buffer.txthttps://developer.nvidia.com/content/depth-precision-visualizedhttp://dev.theomader.com/depth-precision/http://www.humus.name/index.php?ID=255Misc other stuff:https://github.com/KhronosGroup/WebGL/issues/2197https://www.khronos.org/opengl/wiki/Early_Fragment_Testhttps://en.wikipedia.org/wiki/Triangle_wave
I made an EVEN BETTER Minecraft SimonDev 2021-03-01 | I tried to make Minecraft even better than I did before.🛒 Recommended books (on Amazon): https://www.amazon.com/hz/wishlist/ls/1IMV0IR3QIZMQ?type=wishlist&tag=simondev01-20&sort=priority&viewType=grid❤️ Support me on Patreon: https://www.patreon.com/simondevyt🌍 My Gamedev Courses: https://simondev.teachable.com/Disclaimer: Commission is earned from qualifying purchases on Amazon links.Follow me on:Twitter: https://twitter.com/iced_coffee_devInstagram: https://www.instagram.com/beer_and_code/Github: https://github.com/simondevyoutube/Here I tried to code Minecraft using JavaScript and Three.js, completely from scratch, to try to fix the problems from the previous implementation. The goal was to try to improve on the previous version, was was mostly a start project to learn JavaScript and three.js. In the previous implementation, I used instancing to get around draw call limits and complexity around merging geometry, but this time I just bit the bullet and did the actual work. I move from there by integrating chunking in the world, followed by multithreading using Chrome's module workers extension, which dramatically improved performance. I investigated various ways to texture, wrote custom shaders to atlas all the textures together in a simple way using texture arrays. From there I moved on to using perlin noise for a full, infinite procedural world. Standard perlin noise works great for basic rolling hills, but you need to do operations on it like looping for fractal brownian motion in order to get that detail and different environments.That gives us a procedural world, from there we covered how to procedurally create foliage using signed distance functions and l-systems, which was covered in a previous tutorial. Finally, we went ahead and used layers of perlin noise to create biomes and different areas in the world, as you see in the video.Source will is available on github, or will be when I clean it up. If it's not there by the time this is posted, look for an announcement from me either on my community posts or twitter for when the source is available.Various resources:Music: www.bensound.comInigo Quilez's site is THE reference for stuff like SDF's:https://www.iquilezles.org/www/articles/distfunctions/distfunctions.htmDemo was a horribly modified version of:https://www.shadertoy.com/view/lt3BW2Model from:https://sketchfab.com/3d-models/minecraft-diamond-pickaxe-b1bc7d6a3db246d5b47449ae2b2706fdAO:https://0fps.net/2013/07/03/ambient-occlusion-for-minecraft-like-worlds/
I Tried Making a 3D MMORPG Game in JavaScript SimonDev 2021-02-08 | I tried to build a 3D MMORPG (ie. World of Warcraft clone) in this project.Support me on:Patreon: https://www.patreon.com/simondevytFollow me on:Twitter: https://twitter.com/iced_coffee_devInstagram: https://www.instagram.com/beer_and_code/Github: https://github.com/simondevyoutube/Here I tried to build a 3D MMORPG, completely from scratch in JavaScript/Three.js/Node.js. I'm not a networking expert, pretty far from it, but I make a stab at it. I took a bunch of code from previous tutorials, like the rpg game we build earlier, threw in some free assets, procedural terrain, and built a node.js backend for the whole thing. The code could server as a nice starting point for someone looking to build a larger project out of it.The goal of this was to mash together a bunch of elements to get a mmorpg skeleton, using just JavaScript and node.js. All of the bits and pieces of a working mmo should be there, there's some basic inventory and items, stats, fighting, movement, chat, and a world full of npc's. Hopefully from this, you should be able to understand how to use Three.js and node.js to build out this kind of project and build your own multiplayer games.What I'll cover:* Getting a basic websocket connection going* Starting a node.js server* Sharing code between server and client* Hacking three.js shaders to inject new fragments* Adding chat* Supporting multiple players* Supporting thousands of npc'sLike always, full source is available, just check the github repo. Go ahead and do whatever you want with it.References:https://mmotidbits.com/2011/03/09/why-mmos-are-complicated/https://www.ibm.com/developerworks/library/ar-powerup1/index.htmlhttps://opengameart.org/content/smoke-particle-assetshttps://www.donmccurdy.com/2017/11/06/creating-animated-gltf-characters-with-mixamo-and-blender/https://developer.valvesoftware.com/wiki/Latency_Compensating_Methods_in_Client/Server_In-game_Protocol_Design_and_Optimizationhttps://www.gamasutra.com/view/feature/129854/propagation_of_visual_entity_.php?page=3
Fluffy, Soft Particles (WebGL/Three.js) SimonDev 2021-01-25 | In this project, I'll show you how soft particles work, and walk you through the opengl transformation pipeline.Follow me on:Patreon: https://www.patreon.com/simondevytTwitter: https://twitter.com/iced_coffee_devGithub: https://github.com/simondevyoutube/We'll be looking at adding soft particle support in three.js and JavaScript. This tutorial covers how soft particles work, how to structure your three.js or webgl program to render depth values, how to read and transform values from the depth buffer, and ultimately how to write the shader code that does the soft particle effect.This tutorial uses three.js, which is a library in JavaScript for cross-browser 3d graphics using webgl. It makes high level functionality and advanced graphics available on the web.In the video, we cover:* OpenGL Transformations, Local, World, View, Projection, NDC spaces* Reading from the Depth buffer* Fading particle using depth differencesVarious resources used:https://www.khronos.org/opengl/wiki/Coordinate_Transformationshttp://www.humus.name/Articles/Persson_CreatingVastGameWorlds.pdfhttps://developer.nvidia.com/content/depth-precision-visualized
Fog, Basic Fog, and Better Fog (Three.js Tutorial) SimonDev 2021-01-18 | In this project, I’ll show you how to use fog, and then i’ll show you how to improve it to get something a bit more like Unity’s.Follow me on:Patreon: https://www.patreon.com/simondevytTwitter: https://twitter.com/iced_coffee_devGithub: https://github.com/simondevyoutube/We'll be looking at fog support in three.js, and JavaScript. This tutorial covers the API in Three.js, what modes of fog it supports, and how to extend this by hacking on the shader internals to inject our own code. From there, we can look at Unity's height for for inspiration and add in Wenzel's height fog, with some animated perlin noise using fractal brownian motion for some extra detail.This tutorial uses three.js, which is a library in JavaScript for cross-browser 3d graphics using webgl. It makes high level functionality and advanced graphics available on the web.In the video, we cover:* Linear and Exponential Fog* WebGL and glFog* Three.js API's, Fog and FogExp* Wenzel's Height Fog* Domain warping using fractal brownian motionLinks:https://developer.amd.com/wordpress/media/2012/10/Wenzel-Real-time_Atmospheric_Effects_in_Games.pdfhttps://www.iquilezles.org/www/articles/warp/warp.htmhttps://www.iquilezles.org/www/articles/fog/fog.htmhttps://www.shadertoy.com/view/4s23zzhttps://www.shadertoy.com/view/lsl3RHhttps://www.khronos.org/registry/OpenGL/specs/gl/glspec10.pdfhttps://www.khronos.org/opengl/wiki/Fixed_Function_Pipelinehttps://docs.unity3d.com/540/Documentation/Manual/script-GlobalFog.htmlhttps://threejs.org/docs/#api/en/scenes/Foghttps://threejs.org/docs/#api/en/scenes/FogExp2
Memory, Cache Locality, and why Arrays are Fast (Data Structures and Optimization) SimonDev 2021-01-11 | Why is the first loop 10x faster than the second, despite doing the exact same work?Follow me on:Twitter: https://twitter.com/iced_coffee_devGithub: https://github.com/simondevyoutube/In this video we talk a bit about memory, the cpu caches (specifically the L1/L2/L3 cache), hardware prefetching, and how all this comes together for arrays. We'll be covering each of these topics in enough detail for you to get a solid understanding, working through real world examples to help illustrate the point. We'll talk about the most fundamental data structure, arrays, how they work, what situations they're great in, and when they suck. We'll also touch on some algorithmic complexity. Finally, we'll be talking about why understanding this is important and how this leads in to more advanced topics and data structures.What's covered:* How memory allocation works, memory addresses* Contiguous memory* CPU Caches, L1/L2/L3 cache* Hardware prefetching* Array operations, what's fast and what isn't* Closing thoughts, why this is important to understand, how this relates to more advanced data structures
Needlessly 3D Chrome Dinosaur Game (JavaScript/Three.js) SimonDev 2021-01-04 | Follow me on:Twitter: https://twitter.com/iced_coffee_devGithub: https://github.com/simondevyoutube/In this project I tried making the Google Chrome Dinosaur Game in 3D and JavaScript/Three.js. I took a bit of code from previous tutorials, like the model loading code, the rest like gameplay is all from scratch. We build the game pretty much from scratch, starting with a basic empty scene, building out the endless runner gameplay to match the original Chrome Dinosaur Game. Add scores, some background assets, scenery, load a few GLTF assets, and polish it a bit using some examples from the three.js examples site. This isn't perfect, but hopefully will give you a basic understanding of putting together a small game using three.js.What I'll cover:* Getting basic t-rex run gameplay up and running.* Loading GLTF and FBX model assets* Detecting collisions using Box3* Using HTML as UILike always, full source is available, just check the github repo. Go ahead and do whatever you want with it.Various clips/assets from:Quaternius has a lot of free 3d model assets on their site, check them out!http://quaternius.com/Fonts from Googlehttps://fonts.google.com/
I Tried Making a 3D RPG Game in JavaScript SimonDev 2020-12-21 | Follow me on:Twitter: https://twitter.com/iced_coffee_devGithub: https://github.com/simondevyoutube/Here I tried making a 3d RPG game, completely from scratch in JavaScript/Three.js. I took some code from previous tutorials, such as player controllers and third person cameras, bolted on a few free assets like Quaternius's models, and added some gameplay. The code could serve as a nice jumping off point for someone looking to make their own little browser rpg.Basically, I tried to code up the skeleton of your basic rpg in a couple days, using just JavaScript. All the elements, player stats, quests, inventory, enemies and AI are all there, in various stages. There's a lot of improvements you could make here of course, adding more weaponry and items, magical powers and skills, bigger and badder enemies. But this will hopefully help you to understand how to use Three.js to get started on this type of project. Making the basic bones of a 3d rpg game isn't too difficult.What I'll cover:* Getting a basic 3d world up and running.* Replicating a basic version of Unity's GameObject architecture.* Adding third person movement and a third person camera.* Adding HTML ui elements such as icons, inventory, stats, quests.* Enemy AILike always, full source is available, just check the github repo. Go ahead and do whatever you want with it.Various clips/assets from:The Legend of Zelda: Breath of the Wild is an action role-playing/adventure game developed by Nintendo and released in 2017.Channel: https://www.youtube.com/c/nintendo/Quaternius has a lot of free 3d model assets on their site, check them out!http://quaternius.com/And even more free animated models at Mixamo.https://www.mixamo.com/I also picked up quite a few icons on GameIcons.net.https://game-icons.net/
Three.js Tutorial on Shaders (beginners) SimonDev 2020-12-14 | Follow me on:Twitter: https://twitter.com/iced_coffee_devGithub: https://github.com/simondevyoutube/In this video I'll be taking a look at customizing shaders in Three.js and JavaScript. This tutorial is very beginner friendly, we'll be starting with what shaders are, before moving on to how to integrate and customize your own shaders in three.js and working through some easy examples. There's a few api points to cover in Three.js, including classes like ShaderMaterial and RawShaderMaterial, as well as going over vertex/fragment shader and uniform support. This is yet another video in a series aimed at beginners and new users of Three.js, aimed at helping you get started. There's no requirement or background needed, beyond having watched other videos in the series. With each project, you should walk away with a solid understanding of both the concepts involved, such as what shaders are fundamentally, as well as working through concrete examples.The three.js library is available in JavaScript for cross-browser 3d graphics, wrapping webgl and making high level functionality available in the web browser. It’s an extremely mature and well maintained library that I use for many of these videos.In the video, we cover:* WebGL Shaders, what they are, what vertex/fragment shaders are.* Shader bindings, the difference between attributes, varying, and uniform values, and how to think about them.* Three.js API's such as ShaderMaterial and RawShaderMaterial* How to instantiate and use your own shaders in Three.js/JavaScript
How I Optimized My JavaScript Project (Complete Walkthrough) | Faster Spatial Hash Grids SimonDev 2020-12-07 | Follow me on:Twitter: https://twitter.com/iced_coffee_devGithub: https://github.com/simondevyoutube/In this project, we're doing some JavaScript optimization. This is a follow-up to our last project that covered spatial hash grids, or spatial hashing as it's sometimes referred to. Anyway, we're continuing and building on that JavaScript spatial hash grid implementation, but we'll be examining it in detail with Chrome's DevTools profiler, looking for hotspots and optimization opportunities. I'll take you step by step through the process, benchmarking the code, examining the profile, and ultimately making the existing implementation dramatically faster.Whether you're a game developer interested in this specific spatial hash grid data structure, or a JavaScript developer looking to work on your optimization skills, this has a lot to offer.Understanding datastructures, having a complete and thorough basis with them is a key skill for any game developer. It's a complex field with tradeoffs between memory, time complexity, and even development and maintenance cost all come into play. Understanding how to look at code, profile, optimize, and in short speed it up are import skills for a developer.In the video, we cover:* Looking at the overall optimization strategy, how to approach a chunk of code for improvement.* Profiling & Optimization in Chrome, using the built-in DevTools to capture profiling data and examine it.* Walking through the sources tab to look at line-by-line hotspots in JavaScript code.* Weighing datastructure options, discussing the tradeoffs between Set containers, Map containers, arrays, and linked lists.* Actually making the JavaScript code optimized.
Spatial Hash Grids & Tales from Game Development SimonDev 2020-11-30 | 🛒 Recommended books (on Amazon): https://www.amazon.com/hz/wishlist/ls/1IMV0IR3QIZMQ?type=wishlist&tag=simondev01-20&sort=priority&viewType=grid❤️ Support me on Patreon: https://www.patreon.com/simondevyt🌍 My Gamedev Courses: https://simondev.teachable.com/Disclaimer: Commission is earned from qualifying purchases on Amazon links.Follow me on:Twitter: https://twitter.com/iced_coffee_devGithub: https://github.com/simondevyoutube/In this project we're covering spatial hash grids, or spatial hashing, people seem to call it all sorts of different names. Anyway, we'll be covering a spatial hash grid implementation in JavaScript, working through it line by line. We'll walk through the code step by step, explaining it as we go, and as an added bonus, I've implemented a small scene in Three.js with hundreds of moving agents that we can use to visualize what's visible from the perspective of any given agent.I'll also tell a small but interesting little story from way back when I was working on xbox/playstation games. Somewhat related to the topic.Having a comprehensive understanding of data structures is fundamental to being a solid game developer. You need to understand the trade-offs, not just in time complexity. Questions like memory consumption, implementation and on-going maintenance costs, these all factor in. Sometimes simple solutions, implemented well, that get you 95% of the way there but at a fraction of the developer cost, are the way to go.The three.js library is available in JavaScript for cross-browser 3d graphics, wrapping webgl and making high level functionality available in the web browser. It’s an extremely mature and well maintained library that I use for many of these videos.In the video, we cover:* What problem are we trying to solve? We'll look at examples from major games to understand their needs in different situations.* We'll touch on alternative spatial data structures, and discuss the tradeoffs.* I'll talk about an instance in my career that's relevant to this problem* Step by step walk through for the full implementation of a basic spatial hash grid.
Three.js Post Processing Tutorial | Easy & Quick for Beginners (JavaScript) SimonDev 2020-11-23 | Follow me on:Patreon: https://www.patreon.com/simondevytTwitter: https://twitter.com/iced_coffee_devInstagram: https://www.instagram.com/beer_and_code/Github: https://github.com/simondevyoutube/In this project we're looking at Three.js post processing in a bit of detailing, starting with how post processing works in general, looking at some examples of how to do post fx by hand using an image editor, and finally diving into three.js's apis looking at classes like EffectComposer, RenderPass, and ShaderPass. We'll walk through the code step by step, getting a few different post processing effects up and running, including both built-in ones and we'll touch on how to build your own using ShaderPass.This is another in a series of Three.js beginner tutorials, aimed at helping you get setup right from the ground up. Since these are beginners courses, they're aimed at people with no background and assume very little prior experience. With each project, you should have a solid understand of both the code as well as the concepts involved, in this case being what the three.js post processing framework is capable of.The three.js library is available in JavaScript for cross-browser 3d graphics, wrapping webgl and making high level functionality available in the web browser. It’s an extremely mature and well maintained library that I use for many of these videos.In the video, we cover:* Post Processing, what is it, including examples from other forms of media.* Three.js API's like EffectComposer, RenderPass, ShaderPass, GlitchPass, and UnrealBloomPass* How to instantiate and use post-fx in JavaScript.
Simple Third Person Camera (using Three.js/JavaScript) SimonDev 2020-11-16 | Follow me on:Twitter: https://twitter.com/iced_coffee_devGithub: https://github.com/simondevyoutube/I show you how to build out a simple third person camera in three.js and JavaScript, from scratch. The goal here is to understand the mechanics of a simple follow camera (or third person camera), what goes into designing one, what considerations are made, and how to code one up. We'll step through various smoothing options and show you the effect of framerate differences and how to mitigate those problems.Previously in videos, we covered three.js camera support and how to build out a simple third person character controller. This tutorial is a natural progression of the topic, covering 3rd person cameras. This is all part of a series of beginner tutorials on three.js, starting scratch and working up to the point of having moving animated characters in a small world.The three.js library is available in JavaScript for cross-browser 3d graphics, wrapping webgl and making high level functionality available in the web browser. It’s an extremely mature and well maintained library that I use for many of these videos.In the video, we cover:* Game camera systems, 1st person vs 3rd person cameras* Architecture considerations when building out the camera class, how to decouple things in a clean way for future reuse.* Smooth interpolation and how to combat framerate changes.
Three.js Cameras Explained | Tutorial for Beginners! (JavaScript) SimonDev 2020-11-09 | Follow me on:Patreon: https://www.patreon.com/simondevytTwitter: https://twitter.com/iced_coffee_devInstagram: https://www.instagram.com/beer_and_code/Github: https://github.com/simondevyoutube/Three JS cameras are quite simple to use, but require an understanding of the underlying 3d mechanics like perspective and orthographic projections in order to fully comprehend. In this project we'll explore both types of cameras that are offered in three js, we'll look at the PerspectiveCamera and OrthographicCamera classes, understand how the projections work by looking at the viewing frustums and how the parameters modify the furstum. We'll also step through the code in JavaScript to instantiate and manipulate the camera's position and orientation.This is part in a series of tutorials on Three.js, aimed at helping beginners understand everything from the ground up. This is a beginners course, aimed at people with no background in the subject. We've covered simple setup and basic 3d worlds, and this project should give you a solid understanding of three.js camera setups.The three.js library is available in JavaScript for cross-browser 3d graphics, wrapping webgl and making high level functionality available in the web browser. It’s an extremely mature and well maintained library that I use for many of these videos.In the video, we cover:* How to instantiate and use the three js camera classes.* What are the differences between the camera types.* Viewing frustums and how to understand camera parameters, how they relate to perspective and orthographic projections.* How to manipulate cameras from code, changing position and orientation.
Three.js Shadows Explained | Tutorial for Beginners! (JavaScript) SimonDev 2020-11-02 | Follow me on:Patreon: https://www.patreon.com/simondevytTwitter: https://twitter.com/iced_coffee_devInstagram: https://www.instagram.com/beer_and_code/Github: https://github.com/simondevyoutube/Three JS shadows are really easy to use and enable. In this project we'll explore the different shadow types available in three js, which lights support shadowmapping, and we'll step through the code in JavaScript to add them to a scene. We'll walk through setup at the WebGLRenderer level, choosing the type of shadowing that three js will use, before looking at individual lights, and other options like setting individual mesh instances to cast or receive shadows optionally.This is part in a series of tutorials on Three.js, aimed at helping beginners understand everything from the ground up. This is a beginners course, aimed at people with no background in the subject. We've covered simple setup and basic 3d worlds, and this project should give you a solid understanding of three.js shadow capabilities.The three.js library is available in JavaScript for cross-browser 3d graphics, wrapping webgl and making high level functionality available in the web browser. It’s an extremely mature and well maintained library that I use for many of these videos.In the video, we cover:* What is shadow mapping, how does it work from a conceptual point of view.* What lights in three js support shadows and which don't.* Mesh shadow configuration.* Breakdown of the shadow types, including BasicShadowMap, PCFShadowMap, PCFSoftShadowMap, and VSMShadowMap* Using castShadow and shadow camera on DirectionalLight, PointLight, SpotLight* How to instantiate and use each in JavaScript.PCF: https://developer.nvidia.com/gpugems/gpugems/part-ii-lighting-and-shadows/chapter-11-shadow-map-antialiasingVSM: http://www.punkuser.net/vsm/
Three.js Lighting Tutorial (JavaScript) | Light Types Explained! SimonDev 2020-10-26 | Follow me on:Twitter: https://twitter.com/iced_coffee_devGithub: https://github.com/simondevyoutube/In this project we're looking at Three.js light types and 3d lighting in JavaScript, exploring the different lighting setups. The goal is to build out a full understanding of the light setups and types, such as ambient, hemisphere, rect, directional, point, and spot lights. We'll walk through them one by one, going through how they work, how to set them up in code, and some standard uses in big games.This is part in a series of tutorials on Three.js, aimed at helping beginners understand everything from the ground up. This is a beginners course, aimed at people with no background in the subject. We've covered simple setup and basic 3d worlds, and this project should give you a solid understanding of three.js lighting capabilities.The three.js library is available in JavaScript for cross-browser 3d graphics, wrapping webgl and making high level functionality available in the web browser. It’s an extremely mature and well maintained library that I use for many of these videos.In the video, we cover:* Three.js's Lighting Types, including examples of usage for each of the major types of lights.* AmbientLight, HemisphereLight, RectLight, DirectionalLight, PointLight, SpotLight* Common usage of each one in games.* How to instantiate and use each in JavaScript.
Simple Character Controller (using Three.js/JavaScript) SimonDev 2020-10-19 | Follow me on:Twitter: https://twitter.com/iced_coffee_devGithub: https://github.com/simondevyoutube/In this project we're building out a simple character controller in three.js and JavaScript, using a finite state machine. The goal here is to build a little controller for characters in game that can conceivably be drop-in ready and used for third person movement in projects. We'll support a variety of movements and show how to seamlessly transition between them.This is part of a series of Three.js tutorials aimed at beginners, teaching you the basics from the ground up. We've covered quite a bit in this beginners course, beginning with simple worlds and moving on to adding characters and objects. This project should get you start on adding simple player driven, or AI driven, characters using this basic character controller.The three.js library is available in JavaScript for cross-browser 3d graphics, wrapping webgl and making high level functionality available in the web browser. It’s an extremely mature and well maintained library that I use for many of these videos.In the video, we cover:* Three.js's Animation System, including examples using AnimationClip, AnimationAction, and AnimationMixer.* Architecture considerations when building out the controller class, how to decouple things in a clean way for future reuse.* Finite State Machines, what they are, and how they can be applied effectively in this situation.
3D World Generation #8: Floating Origins for Bigger Worlds (JavaScript/Three.js) SimonDev 2020-10-05 | Follow me on:Twitter: https://twitter.com/iced_coffee_devGithub: https://github.com/simondevyoutube/In this project we tackle adding floating origins to our procedural worlds, allowing us to build planets far bigger than previously possible. This allows us to scale up from dinky little moon-and-asteroid sized worlds to Earth sized planets (and beyond). We'll be making a few small and painless changes to the existing mesh generation code to support the feature.This is the 8th in a series of 3D World Generation and procedural terrain tutorials. In previous tutorials, we started with mesh generation using height maps, before moving onto more advanced topics like quad-trees, planetary level-of-detail, atmospheric scattering, and threading. This project examines how floating origins help us expand the size of our generated worlds, allowing us to easily simulate Earth sized planets and beyond in JavaScript.The three.js library is available in JavaScript for cross-browser 3d graphics, wrapping webgl and making high level functionality available in the web browser. It’s an extremely mature and well maintained library that I use for many of these videos.In the video, we cover:* Rendering Issues encountered when scaling up to Earth sized planets.* How and why floating point precision is important and how it effects rendering.* What floating origins are and how they work.* The code changes needed to fix spatial jitter.
3D World Generation #7: Speeding it up via Threading (JavaScript Web Workers & Three.js) SimonDev 2020-09-14 | Follow me on:Twitter: https://twitter.com/iced_coffee_devGithub: https://github.com/simondevyoutube/In this project we tackle integrating threading and dedicated web workers to supplement the mesh generator and endless terrain system built in three.js/webgl. Specifically, we use JavaScript’s web workers feature to move work off the main execution thread into the background, so that the mesh generation for the procedural terrain can take place in parallel across multiple cores.This is the 7th in a series of 3D World Generation and procedural terrain tutorials. In previous tutorials, we started with mesh generation using heightmaps, beforing moving onto more advanced topics like quad-trees, planetary level-of-detail, and atmospheric scattering. This project takes a step back in order to improve the speed and overall responsiveness of the application by using some built-in features of JavaScript.Web Workers in JavaScript are just a simple way for you to run scripts in the background, giving you access to multiple hardware threads. In essence, they’re a lightweight and easy to use abstraction over OS threads, with message passing capabilities. This means they can potentially perform tasks without interrupting the main execution thread. Typically, these can be things like xhr’s and other forms of IO. Read more about that at the MDN link provided below.The three.js library is available in JavaScript for cross-browser 3d graphics, wrapping webgl and making high level functionality available in the web browser. It’s an extremely mature and well maintained library that I use for many of these videos.In addition to the web workers, we use a newer feature called “module workers”, introduced recently in chromium based browsers. These allow for cleaner code, since we can reuse the existing module setup. Read more about them at web.dev linked below. Unfortunately, this means that this demo specifically will only work in Chromium based browsers, at least at the time of posting.In the video, we cover:* Web Workers: What they are, how to use them, and step through a simple example with code.* Architectural changes to support threading and web workers, including alternative methods of implementation.* The existing terrain generation code that was developed in previous videos.* The code changes needed to create a threaded terrain builder class.Special thanks to ideaspy, check out their channel here: https://www.youtube.com/channel/UCIBrt2CIXIB7lJfQ8TuspmgMozilla’s Docs: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workersModule Workers:https://web.dev/module-workers/
I Made a 3D Engine in 1 Day (WebGL/JavaScript) SimonDev 2020-08-27 | Follow me on:Twitter: https://twitter.com/iced_coffee_devGithub: https://github.com/simondevyoutube/I just tried to code a 3d engine using webgl and JavaScript in one day (24 hours), completely from scratch. It's been a lonnngggg time since I did any serious graphics work as a programmer, and even longer since I touched opengl. This was a bit of a jump-into-the-deep-end project to see if I could crank out a deferred lighting demo in a short time using webgl. In the video I cover all parts of the project, starting with the initial plan, a super general overview on how 3d engines are often structured, and then stepping through the development of the code. By the end you should understand the basics of how a light prepass renderer works and how to implement one using pure webgl.What was covered:* 3D Engine Design Considerations* Materials/Shaders/Drawables/Cameras* Vertex/Fragment shader implementations* Framebuffer Objects* Floating point textures* Other buzzwordsFull source code for the project is available, I mean it's crap but knock yourself out.Source: https://github.com/simondevyoutube/WebGL_1Day_3DEngineThere's been a bunch of similar challenges, mostly around making a game in a short time so I thought I'd give it a try but with my own spin. Here are some other videos that helped inspire.Sam Hogan - I Made Minecraft in 24 Hourshttps://youtu.be/Nj8gt_92c-MDani - Making a Game in ONE Day (12 Hours)https://youtu.be/mFNrOGPVls0Fat Dino - I Made a Racing Game in 3 DAYShttps://youtu.be/tt46z0IbpP0Code Monkey - I made an FPS in 5 days! (Unity Microgame)https://youtu.be/kY1Q2GraWiwJabrils - Making A Game in 48 Hours!https://youtu.be/SIzY8sR1Ql0Tren Black - I Made Wii Tennis in 24 Hourshttps://youtu.be/PgqOb1yFn7MBrackeys - MAKING A GAME IN 10 MINUTEShttps://youtu.be/p8MzsDBI5EIBlackThornProd - I MADE A GAME IN 1 WEEK WITH UNITYhttps://youtu.be/GTFYmzYjHzg
Blending (using WebGL/Three.js) - And How to Combine Additive and Alpha Blending SimonDev 2020-08-12 | Follow me on:Twitter: https://twitter.com/iced_coffee_devGithub: https://github.com/simondevyoutube/In this project we'll be exploring the blendFunc and blendEquation options from webgl and their equivalents in Three.js. This goes over how source and destination pixels are blended, how common blend modes like additive and alpha blending are typically done, and as a bonus we'll talk about how to actually combine both additive and alpha into a single hybrid blend mode. The point here is to give you an understanding of the basic blend modes available in webgl and three.js.What we'll cover:* Basic blend operations like blendFunc and blendEquation* Alpha / additive blending* Combining additive and alpha blending into a single pass.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.Source: https://github.com/simondevyoutube/ThreeJS_Tutorial_BlendModes
Writing a Particle System (using Three.js) SimonDev 2020-08-04 | Follow me on:Patreon: https://www.patreon.com/simondevytTwitter: https://twitter.com/iced_coffee_devInstagram: https://www.instagram.com/beer_and_code/Github: https://github.com/simondevyoutube/In this project we'll be using Three.js to write our own particle system from scratch. I'll step through the basics of getting some simple particles on screen, before moving on to animating parameters over particle lifetimes and building out an example system. The point here is to give you an understanding of the basic building blocks, so that you can use that to build out a more complex system.What we'll cover:* Writing a basic particle system in three.js* Getting simple particles on the screen* Alpha / additive blending* More complex parameter animation.Just treat this as a jumping off point for your own 3d projects, there's lots of ways you can go with this but it often helps to have a basic project you can build from.I will be following up this project with one that goes into detail on combining additive and alpha blending, to get that integrated smoky/fiery effect, stay tuned.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.Source: https://github.com/simondevyoutube/ThreeJS_Tutorial_ParticleSystems
Adding a 3D Model to a Website in 5 minutes (or less) SimonDev 2020-07-27 | Follow me on:Twitter: https://twitter.com/iced_coffee_devGithub: https://github.com/simondevyoutube/In this project we'll be using Three.js and embedding 3D models directly on a website. We'll step through the basics of adding a simple 3d model to a website, before moving on to integrating it more seamlessly, and reacting to things like scroll events. The point here is to give you a simple example of what's possible, so that you can use that as a starting point for a more complex project.What we'll cover:* Embedding a model on a website using three.js and gltf models.* Constraining the 3d to elements on the page.* Reacting to events and animating the scene.Just treat this as a jumping off point for your own 3d projects, there's lots of ways you can go with this but it often helps to have a basic project you can build from.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.Source: https://github.com/simondevyoutube/ThreeJS_Tutorial_3DWebsite
