SimonDev | Fluffy, Soft Particles (WebGL/Three.js) @simondev758 | Uploaded 3 years ago | Updated 3 hours ago
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/simondevyt
Twitter: https://twitter.com/iced_coffee_dev
Github: 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 differences

Various resources used:
https://www.khronos.org/opengl/wiki/Coordinate_Transformations
http://www.humus.name/Articles/Persson_CreatingVastGameWorlds.pdf
https://developer.nvidia.com/content/depth-precision-visualized

SimonDev Course Announcement! | Course Trailer

Is the COST of JavaScript’s GC REALLY that high?

What Big-O notation ACTUALLY tells you, and how I almost failed my Google Interview

When Optimisations Work, But for the Wrong Reasons

$Fog, Basic Fog, and Better Fog (Three.js Tutorial) 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/simondevyt Twitter: https://twitter.com/iced_coffee_dev Github: https://github.com/simondevyoutube/ Well 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 Unitys height for for inspiration and add in Wenzels 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 APIs, Fog and FogExp * Wenzels Height Fog * Domain warping using fractal brownian motion Links: https://developer.amd.com/wordpress/media/2012/10/Wenzel-Real-time_Atmospheric_Effects_in_Games.pdf https://www.iquilezles.org/www/articles/warp/warp.htm https://www.iquilezles.org/www/articles/fog/fog.htm https://www.shadertoy.com/view/4s23zz https://www.shadertoy.com/view/lsl3RH https://www.khronos.org/registry/OpenGL/specs/gl/glspec10.pdf https://www.khronos.org/opengl/wiki/Fixed_Function_Pipeline https://docs.unity3d.com/540/Documentation/Manual/script-GlobalFog.html https://threejs.org/docs/#api/en/scenes/Fog https://threejs.org/docs/#api/en/scenes/FogExp2$

So how does your computer ACTUALLY compute sine? Basics of trig and more…

How I Optimized My JavaScript Project (Complete Walkthrough) | Faster Spatial Hash Grids

Can JavaScript Go Faster? Threading in JavaScript (Data Structures & Optimization)

Fluffy, Soft Particles (WebGL/Three.js) @simondev758